Merge branch 'devlopment' of http://pms.dtyx.net:3000/wuxueyu/Industrial-image-management-system---web into devlopment
This commit is contained in:
Mr.j
commit
37d2d21318
|
|
@ -0,0 +1,98 @@
|
||||||
|
import type * as T from './type'
|
||||||
|
import http from '@/utils/http'
|
||||||
|
|
||||||
|
export type * from './type'
|
||||||
|
|
||||||
|
const BASE_URL = '/project-member'
|
||||||
|
|
||||||
|
// ==================== 项目看板相关接口 ====================
|
||||||
|
|
||||||
|
/** @desc 获取项目看板统计数据 */
|
||||||
|
export function getProjectKanbanStats() {
|
||||||
|
return http.get<T.ProjectKanbanStats>(`${BASE_URL}/kanban/stats`)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 获取项目看板数据 */
|
||||||
|
export function getProjectKanbanData() {
|
||||||
|
return http.get<T.ProjectKanbanData>(`${BASE_URL}/kanban/data`)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 获取项目详情 */
|
||||||
|
export function getProjectDetail(id: string | number) {
|
||||||
|
return http.get<T.ProjectDetailResp>(`${BASE_URL}/project/${id}/detail`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 团队成员管理 ====================
|
||||||
|
|
||||||
|
/** @desc 获取项目团队成员列表（支持筛选、分页、搜索） */
|
||||||
|
export function getProjectTeamMembers(params: T.TeamMemberQuery) {
|
||||||
|
const { projectId, ...queryParams } = params
|
||||||
|
return http.get<T.BackendTeamMemberResp[]>(`${BASE_URL}/project/${projectId}/team-members`, { params: queryParams })
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 创建团队成员 */
|
||||||
|
export function createTeamMember(data: T.CreateTeamMemberForm) {
|
||||||
|
return http.post<T.TeamMemberResp>(`${BASE_URL}/team-member`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 更新团队成员信息（支持更新状态） */
|
||||||
|
export function updateTeamMember(id: string | number, data: T.UpdateTeamMemberForm) {
|
||||||
|
return http.put<T.TeamMemberResp>(`${BASE_URL}/team-member/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 删除团队成员（支持单个或批量删除） */
|
||||||
|
export function deleteTeamMembers(ids: string | number | (string | number)[]) {
|
||||||
|
const idArray = Array.isArray(ids) ? ids : [ids]
|
||||||
|
return http.del(`${BASE_URL}/team-member/batch`, { data: { ids: idArray } })
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 导入团队成员数据 */
|
||||||
|
export function importTeamMembers(projectId: string | number, file: File) {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', file)
|
||||||
|
formData.append('projectId', projectId.toString())
|
||||||
|
return http.post(`${BASE_URL}/team-member/import`, formData, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 导出团队成员数据 */
|
||||||
|
export function exportTeamMembers(params: T.TeamMemberExportQuery) {
|
||||||
|
return http.get(`${BASE_URL}/team-member/export`, {
|
||||||
|
params,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 下载导入模板 */
|
||||||
|
export function downloadImportTemplate() {
|
||||||
|
return http.get(`${BASE_URL}/team-member/template`, {
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 项目需求管理 ====================
|
||||||
|
|
||||||
|
/** @desc 获取项目需求列表 */
|
||||||
|
export function getProjectRequirements(projectId: string | number) {
|
||||||
|
return http.get<T.ProjectRequirementResp[]>(`${BASE_URL}/project/${projectId}/requirements`)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 发布项目需求 */
|
||||||
|
export function createProjectRequirement(data: T.CreateProjectRequirementForm) {
|
||||||
|
return http.post(`${BASE_URL}/requirement`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 更新项目需求状态 */
|
||||||
|
export function updateRequirementStatus(data: T.UpdateRequirementStatusForm) {
|
||||||
|
return http.patch(`${BASE_URL}/requirement/status`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 删除项目需求 */
|
||||||
|
export function deleteProjectRequirement(requirementId: string | number) {
|
||||||
|
return http.del(`${BASE_URL}/requirement/${requirementId}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -86,3 +86,249 @@ export interface TaskQuery {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TaskPageQuery extends TaskQuery, PageQuery {}
|
export interface TaskPageQuery extends TaskQuery, PageQuery {}
|
||||||
|
|
||||||
|
// ==================== 人员调度相关类型 ====================
|
||||||
|
|
||||||
|
/** 项目看板统计数据 */
|
||||||
|
export interface ProjectKanbanStats {
|
||||||
|
totalProjectsCount: string
|
||||||
|
pendingProjectCount: string
|
||||||
|
inProgressProjectCount: string
|
||||||
|
completedProjectCount: string
|
||||||
|
auditedProjectCount: string
|
||||||
|
acceptedProjectCount: string
|
||||||
|
totalTurbineCount: string
|
||||||
|
pendingTurbineCount: string
|
||||||
|
inProgressTurbineCount: string
|
||||||
|
completedTurbineCount: string
|
||||||
|
auditedTurbineCount: string
|
||||||
|
acceptedTurbineCount: string
|
||||||
|
totalTaskCount: string
|
||||||
|
pendingTaskCount: string
|
||||||
|
inProgressTaskCount: string
|
||||||
|
completedTaskCount: string
|
||||||
|
totalMemberCount: string
|
||||||
|
projectManagerCount: string
|
||||||
|
safetyOfficerCount: string
|
||||||
|
qualityOfficerCount: string
|
||||||
|
constructorCount: string
|
||||||
|
teamLeaderCount: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 项目看板数据 */
|
||||||
|
export interface ProjectKanbanData {
|
||||||
|
inProgressProjects: never[]
|
||||||
|
preparingProjects: ProjectCard[]
|
||||||
|
ongoingProjects: ProjectCard[]
|
||||||
|
pendingProjects: ProjectCard[]
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 项目卡片信息 */
|
||||||
|
export interface ProjectCard {
|
||||||
|
id: string | number
|
||||||
|
name: string
|
||||||
|
status: 'preparing' | 'ongoing' | 'pending'
|
||||||
|
budget: number
|
||||||
|
manager: string
|
||||||
|
teamSize: number
|
||||||
|
preparationProgress?: number
|
||||||
|
progress?: number
|
||||||
|
startDate?: string
|
||||||
|
endDate?: string
|
||||||
|
plannedStartDate?: string
|
||||||
|
alerts?: ProjectAlert[]
|
||||||
|
teamMembers: TeamMemberResp[]
|
||||||
|
requirements: ProjectRequirementResp[]
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 项目异常信息 */
|
||||||
|
export interface ProjectAlert {
|
||||||
|
type: 'cost' | 'personnel' | 'schedule' | 'quality'
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 项目详情响应 */
|
||||||
|
export interface ProjectDetailResp extends ProjectCard {
|
||||||
|
// 继承ProjectCard的所有字段，可以添加更多详情字段
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 团队成员响应 */
|
||||||
|
export interface TeamMemberResp {
|
||||||
|
id: string | number
|
||||||
|
name: string
|
||||||
|
position: string
|
||||||
|
phone?: string
|
||||||
|
email?: string
|
||||||
|
avatar?: string
|
||||||
|
joinDate?: string
|
||||||
|
performance?: number
|
||||||
|
remark?: string
|
||||||
|
status?: 'available' | 'busy' | 'offline'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 后端返回的团队成员数据结构 */
|
||||||
|
export interface BackendTeamMemberResp {
|
||||||
|
memberId: string
|
||||||
|
projectId: string
|
||||||
|
projectName: string
|
||||||
|
turbineId: string | null
|
||||||
|
turbineName: string | null
|
||||||
|
taskGroupId: string | null
|
||||||
|
taskGroupName: string | null
|
||||||
|
taskId: string | null
|
||||||
|
taskName: string | null
|
||||||
|
userId: string
|
||||||
|
name: string
|
||||||
|
phone: string | null
|
||||||
|
email: string | null
|
||||||
|
position: string
|
||||||
|
status: 'ACTIVE' | 'BUSY' | 'OFFLINE'
|
||||||
|
skills: string
|
||||||
|
joinDate: string
|
||||||
|
remark: string
|
||||||
|
userAccount: string
|
||||||
|
userAvatar: string | null
|
||||||
|
roleType: string
|
||||||
|
roleTypeDesc: string
|
||||||
|
jobCode: string
|
||||||
|
jobCodeDesc: string
|
||||||
|
jobDesc: string
|
||||||
|
leaveDate: string | null
|
||||||
|
statusDesc: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 团队成员查询参数（支持筛选、分页、搜索） */
|
||||||
|
export interface TeamMemberQuery extends PageQuery {
|
||||||
|
projectId: string | number
|
||||||
|
name?: string // 姓名搜索
|
||||||
|
position?: string // 岗位筛选
|
||||||
|
status?: string // 状态筛选
|
||||||
|
joinDateStart?: string // 入职日期开始
|
||||||
|
joinDateEnd?: string // 入职日期结束
|
||||||
|
sortBy?: 'name' | 'position' | 'joinDate' | 'status' // 排序字段
|
||||||
|
sortOrder?: 'asc' | 'desc' // 排序方向
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 团队成员导出查询参数（不包含分页） */
|
||||||
|
export interface TeamMemberExportQuery {
|
||||||
|
projectId: string | number
|
||||||
|
name?: string // 姓名搜索
|
||||||
|
position?: string // 岗位筛选
|
||||||
|
status?: string // 状态筛选
|
||||||
|
joinDateStart?: string // 入职日期开始
|
||||||
|
joinDateEnd?: string // 入职日期结束
|
||||||
|
sortBy?: 'name' | 'position' | 'joinDate' | 'status' // 排序字段
|
||||||
|
sortOrder?: 'asc' | 'desc' // 排序方向
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 创建团队成员表单 */
|
||||||
|
export interface CreateTeamMemberForm {
|
||||||
|
projectId: string | number
|
||||||
|
name: string
|
||||||
|
phone: string
|
||||||
|
email?: string
|
||||||
|
position: string
|
||||||
|
status?: 'available' | 'busy' | 'offline'
|
||||||
|
joinDate?: string
|
||||||
|
remark?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 更新团队成员表单 */
|
||||||
|
export interface UpdateTeamMemberForm {
|
||||||
|
name?: string
|
||||||
|
phone?: string
|
||||||
|
email?: string
|
||||||
|
position?: string
|
||||||
|
status?: 'available' | 'busy' | 'offline'
|
||||||
|
joinDate?: string
|
||||||
|
remark?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** 批量操作表单 */
|
||||||
|
export interface BatchOperationForm {
|
||||||
|
ids: (string | number)[]
|
||||||
|
operation: 'delete' | 'updateStatus'
|
||||||
|
status?: 'available' | 'busy' | 'offline'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 导入结果响应 */
|
||||||
|
export interface ImportResultResp {
|
||||||
|
success: boolean
|
||||||
|
totalCount: number
|
||||||
|
successCount: number
|
||||||
|
failCount: number
|
||||||
|
errors?: Array<{
|
||||||
|
row: number
|
||||||
|
message: string
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 人员需求响应 */
|
||||||
|
export interface PersonnelRequirementResp {
|
||||||
|
id: string | number
|
||||||
|
title: string
|
||||||
|
type: 'personnel' | 'equipment'
|
||||||
|
position?: string
|
||||||
|
equipmentType?: string
|
||||||
|
count: number
|
||||||
|
skills: string[]
|
||||||
|
description?: string
|
||||||
|
priority: 'low' | 'medium' | 'high'
|
||||||
|
status: 'pending' | 'recruiting' | 'completed'
|
||||||
|
createTime: string
|
||||||
|
updateTime: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 创建需求表单 */
|
||||||
|
export interface CreateRequirementForm {
|
||||||
|
projectId: string | number
|
||||||
|
type: 'personnel' | 'equipment'
|
||||||
|
position?: string
|
||||||
|
equipmentType?: string
|
||||||
|
count: number
|
||||||
|
skills: string[]
|
||||||
|
description?: string
|
||||||
|
priority: 'low' | 'medium' | 'high'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 简化项目需求响应类型 */
|
||||||
|
export interface ProjectRequirementResp {
|
||||||
|
id: string | number
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
priority: 'low' | 'medium' | 'high'
|
||||||
|
status: 'pending' | 'recruiting' | 'completed'
|
||||||
|
createTime: string
|
||||||
|
updateTime: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 简化创建项目需求表单类型 */
|
||||||
|
export interface CreateProjectRequirementForm {
|
||||||
|
projectId: string | number
|
||||||
|
description: string
|
||||||
|
priority: 'low' | 'medium' | 'high'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 更新需求状态表单 */
|
||||||
|
export interface UpdateRequirementStatusForm {
|
||||||
|
requirementId: string | number
|
||||||
|
status: 'pending' | 'recruiting' | 'completed'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** 分页查询基础参数 */
|
||||||
|
export interface PageQuery {
|
||||||
|
page: number
|
||||||
|
pageSize: number
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 分页响应 */
|
||||||
|
export interface PageRes<T> {
|
||||||
|
list: T[]
|
||||||
|
total: number
|
||||||
|
page: number
|
||||||
|
pageSize: number
|
||||||
|
}
|
||||||
|
|
@ -830,6 +830,29 @@ export const systemRoutes: RouteRecordRaw[] = [
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
//项目中控台
|
||||||
|
{
|
||||||
|
path: '/project-management/projects/personnel-dispatch',
|
||||||
|
name: 'PersonnelDispatch',
|
||||||
|
component: () => import('@/views/project-management/personnel-dispatch/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '项目中控台',
|
||||||
|
icon: 'user-group',
|
||||||
|
hidden: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/project-management/personnel-dispatch/construction-personnel',
|
||||||
|
name: 'ConstructionPersonnel',
|
||||||
|
component: () => import('@/views/project-management/personnel-dispatch/construction-personnel.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '团队成员管理',
|
||||||
|
icon: 'user',
|
||||||
|
hidden: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -70,6 +70,6 @@ declare global {
|
||||||
// for type re-export
|
// for type re-export
|
||||||
declare global {
|
declare global {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
|
||||||
import('vue')
|
import('vue')
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -552,7 +552,7 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
// 导入核心依赖
|
// 导入核心依赖
|
||||||
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
|
import { ref, reactive, onMounted, computed, watch, nextTick, h } from 'vue';
|
||||||
import {
|
import {
|
||||||
IconFolder,
|
IconFolder,
|
||||||
IconFile,
|
IconFile,
|
||||||
|
|
@ -1358,9 +1358,15 @@ const handlePreview = async (file) => {
|
||||||
// PDF预览（在新窗口打开）
|
// PDF预览（在新窗口打开）
|
||||||
window.open(url, '_blank');
|
window.open(url, '_blank');
|
||||||
Message.success('PDF文件已在新窗口打开');
|
Message.success('PDF文件已在新窗口打开');
|
||||||
} else if (['txt', 'md', 'json', 'xml', 'csv'].includes(ext)) {
|
} else if (['txt', 'md', 'json', 'xml', 'csv', 'log'].includes(ext)) {
|
||||||
// 文本文件预览
|
// 文本文件预览
|
||||||
showTextPreview(blob, fileName);
|
showTextPreview(blob, fileName);
|
||||||
|
} else if (['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(ext)) {
|
||||||
|
// 视频预览
|
||||||
|
showVideoPreview(url, fileName);
|
||||||
|
} else if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
|
||||||
|
// 音频预览
|
||||||
|
showAudioPreview(url, fileName);
|
||||||
} else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
|
} else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
|
||||||
// Office文档预览提示
|
// Office文档预览提示
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
|
|
@ -1409,47 +1415,267 @@ const handlePreview = async (file) => {
|
||||||
|
|
||||||
// 显示图片预览
|
// 显示图片预览
|
||||||
const showImagePreview = (url, fileName) => {
|
const showImagePreview = (url, fileName) => {
|
||||||
const container = document.createElement('div');
|
const imageScale = ref(1);
|
||||||
container.style.cssText = `
|
const imageRotation = ref(0);
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const img = document.createElement('img');
|
const container = h('div', {
|
||||||
img.src = url;
|
style: {
|
||||||
img.style.cssText = `
|
width: '100%',
|
||||||
max-width: 100%;
|
height: '100%',
|
||||||
max-height: 70vh;
|
display: 'flex',
|
||||||
object-fit: contain;
|
flexDirection: 'column',
|
||||||
border-radius: 8px;
|
alignItems: 'center',
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
justifyContent: 'center',
|
||||||
`;
|
padding: '24px',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
// 背景装饰
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-50%',
|
||||||
|
left: '-50%',
|
||||||
|
width: '200%',
|
||||||
|
height: '200%',
|
||||||
|
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||||
|
animation: 'float 6s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
const title = document.createElement('div');
|
// 顶部工具栏
|
||||||
title.textContent = fileName;
|
h('div', {
|
||||||
title.style.cssText = `
|
style: {
|
||||||
margin-top: 16px;
|
display: 'flex',
|
||||||
font-size: 14px;
|
justifyContent: 'center',
|
||||||
color: #666;
|
alignItems: 'center',
|
||||||
text-align: center;
|
gap: '16px',
|
||||||
word-break: break-all;
|
marginBottom: '24px',
|
||||||
`;
|
padding: '16px 24px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 10
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('button', {
|
||||||
|
onClick: () => imageScale.value = Math.max(0.3, imageScale.value - 0.2),
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔍'),
|
||||||
|
'缩小'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => imageScale.value = Math.min(4, imageScale.value + 0.2),
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔍'),
|
||||||
|
'放大'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => imageRotation.value += 90,
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔄'),
|
||||||
|
'旋转'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => {
|
||||||
|
imageScale.value = 1;
|
||||||
|
imageRotation.value = 0;
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🏠'),
|
||||||
|
'重置'
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
|
||||||
container.appendChild(img);
|
// 图片容器
|
||||||
container.appendChild(title);
|
h('div', {
|
||||||
|
style: {
|
||||||
|
flex: 1,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
overflow: 'auto',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
padding: '32px',
|
||||||
|
boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
|
||||||
|
minHeight: '500px',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('img', {
|
||||||
|
src: url,
|
||||||
|
style: {
|
||||||
|
maxWidth: '100%',
|
||||||
|
maxHeight: '100%',
|
||||||
|
objectFit: 'contain',
|
||||||
|
borderRadius: '16px',
|
||||||
|
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
transform: `scale(${imageScale.value}) rotate(${imageRotation.value}deg)`,
|
||||||
|
boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
|
||||||
|
border: '2px solid rgba(255,255,255,0.8)'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
|
||||||
|
// 文件名
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
marginTop: '20px',
|
||||||
|
fontSize: '16px',
|
||||||
|
color: 'white',
|
||||||
|
textAlign: 'center',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
padding: '12px 24px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
fontWeight: '500',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, fileName)
|
||||||
|
]);
|
||||||
|
|
||||||
Modal.info({
|
Modal.info({
|
||||||
title: '图片预览',
|
title: h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '24px' } }, '🖼️'),
|
||||||
|
'图片预览'
|
||||||
|
]),
|
||||||
content: container,
|
content: container,
|
||||||
width: '80%',
|
width: '95%',
|
||||||
|
style: {
|
||||||
|
maxWidth: '1600px',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
mask: true,
|
||||||
maskClosable: true,
|
maskClosable: true,
|
||||||
footer: null
|
footer: null,
|
||||||
|
closable: true,
|
||||||
|
okText: null,
|
||||||
|
cancelText: null
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -1457,29 +1683,208 @@ const showImagePreview = (url, fileName) => {
|
||||||
const showTextPreview = async (blob, fileName) => {
|
const showTextPreview = async (blob, fileName) => {
|
||||||
try {
|
try {
|
||||||
const text = await blob.text();
|
const text = await blob.text();
|
||||||
const container = document.createElement('div');
|
const fontSize = ref(16);
|
||||||
container.style.cssText = `
|
|
||||||
width: 100%;
|
const container = h('div', {
|
||||||
height: 400px;
|
style: {
|
||||||
border: 1px solid #e5e5e5;
|
width: '100%',
|
||||||
border-radius: 6px;
|
height: '100%',
|
||||||
padding: 16px;
|
display: 'flex',
|
||||||
background-color: #fafafa;
|
flexDirection: 'column',
|
||||||
font-family: 'Courier New', monospace;
|
padding: '24px',
|
||||||
font-size: 13px;
|
boxSizing: 'border-box',
|
||||||
line-height: 1.6;
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
overflow: auto;
|
borderRadius: '16px',
|
||||||
white-space: pre-wrap;
|
position: 'relative',
|
||||||
word-break: break-word;
|
overflow: 'hidden'
|
||||||
`;
|
}
|
||||||
container.textContent = text;
|
}, [
|
||||||
|
// 背景装饰
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-50%',
|
||||||
|
left: '-50%',
|
||||||
|
width: '200%',
|
||||||
|
height: '200%',
|
||||||
|
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||||
|
animation: 'float 6s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 顶部工具栏
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '16px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
padding: '16px 24px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 10
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('button', {
|
||||||
|
onClick: () => fontSize.value = Math.max(12, fontSize.value - 2),
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔍'),
|
||||||
|
'缩小字体'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => fontSize.value = Math.min(28, fontSize.value + 2),
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔍'),
|
||||||
|
'放大字体'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => {
|
||||||
|
const textArea = document.createElement('textarea');
|
||||||
|
textArea.value = text;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
Message.success('文本已复制到剪贴板');
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '📋'),
|
||||||
|
'复制文本'
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
|
||||||
|
// 文本内容
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
padding: '32px',
|
||||||
|
boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
|
||||||
|
overflow: 'auto',
|
||||||
|
fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', 'Monaco', 'Menlo', monospace",
|
||||||
|
fontSize: `${fontSize.value}px`,
|
||||||
|
lineHeight: '1.8',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
color: '#2c3e50',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, text)
|
||||||
|
]);
|
||||||
|
|
||||||
Modal.info({
|
Modal.info({
|
||||||
title: `文本预览 - ${fileName}`,
|
title: h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '24px' } }, '📄'),
|
||||||
|
`文本预览 - ${fileName}`
|
||||||
|
]),
|
||||||
content: container,
|
content: container,
|
||||||
width: '70%',
|
width: '90%',
|
||||||
|
style: {
|
||||||
|
maxWidth: '1400px',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
mask: true,
|
||||||
maskClosable: true,
|
maskClosable: true,
|
||||||
footer: null
|
footer: null,
|
||||||
|
closable: true,
|
||||||
|
okText: null,
|
||||||
|
cancelText: null
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('文本预览失败:', error);
|
console.error('文本预览失败:', error);
|
||||||
|
|
@ -1487,6 +1892,249 @@ const showTextPreview = async (blob, fileName) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 显示视频预览
|
||||||
|
const showVideoPreview = (url, fileName) => {
|
||||||
|
const container = h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '24px',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
// 背景装饰
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-50%',
|
||||||
|
left: '-50%',
|
||||||
|
width: '200%',
|
||||||
|
height: '200%',
|
||||||
|
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||||
|
animation: 'float 6s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 视频容器
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '1000px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
padding: '32px',
|
||||||
|
boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('video', {
|
||||||
|
src: url,
|
||||||
|
controls: true,
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
maxHeight: '70vh',
|
||||||
|
borderRadius: '16px',
|
||||||
|
background: '#000',
|
||||||
|
boxShadow: '0 12px 32px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.8)',
|
||||||
|
transition: 'all 0.3s ease'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
|
||||||
|
// 文件名
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
marginTop: '20px',
|
||||||
|
fontSize: '16px',
|
||||||
|
color: 'white',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '12px 24px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
fontWeight: '500',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, fileName)
|
||||||
|
]);
|
||||||
|
|
||||||
|
Modal.info({
|
||||||
|
title: h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '24px' } }, '🎬'),
|
||||||
|
'视频预览'
|
||||||
|
]),
|
||||||
|
content: container,
|
||||||
|
width: '90%',
|
||||||
|
style: {
|
||||||
|
maxWidth: '1400px',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
mask: true,
|
||||||
|
maskClosable: true,
|
||||||
|
footer: null,
|
||||||
|
closable: true,
|
||||||
|
okText: null,
|
||||||
|
cancelText: null
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 显示音频预览
|
||||||
|
const showAudioPreview = (url, fileName) => {
|
||||||
|
const container = h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '24px',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
// 背景装饰
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-50%',
|
||||||
|
left: '-50%',
|
||||||
|
width: '200%',
|
||||||
|
height: '200%',
|
||||||
|
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||||
|
animation: 'float 6s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 音频容器
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '500px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
padding: '40px',
|
||||||
|
boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5,
|
||||||
|
textAlign: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
// 音频图标
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
fontSize: '64px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
animation: 'pulse 2s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}, '🎵'),
|
||||||
|
|
||||||
|
// 音频播放器
|
||||||
|
h('audio', {
|
||||||
|
src: url,
|
||||||
|
controls: true,
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
height: '50px',
|
||||||
|
borderRadius: '12px',
|
||||||
|
marginBottom: '20px'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 文件名
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
fontSize: '16px',
|
||||||
|
color: '#2c3e50',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '12px 16px',
|
||||||
|
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
fontWeight: '500',
|
||||||
|
border: '1px solid rgba(102, 126, 234, 0.2)'
|
||||||
|
}
|
||||||
|
}, fileName)
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
|
||||||
|
Modal.info({
|
||||||
|
title: h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '24px' } }, '🎵'),
|
||||||
|
'音频预览'
|
||||||
|
]),
|
||||||
|
content: container,
|
||||||
|
width: '70%',
|
||||||
|
style: {
|
||||||
|
maxWidth: '800px',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
mask: true,
|
||||||
|
maskClosable: true,
|
||||||
|
footer: null,
|
||||||
|
closable: true,
|
||||||
|
okText: null,
|
||||||
|
cancelText: null
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 下载文件
|
// 下载文件
|
||||||
const handleDownload = async (file) => {
|
const handleDownload = async (file) => {
|
||||||
try {
|
try {
|
||||||
|
|
@ -2393,6 +3041,95 @@ onMounted(() => {
|
||||||
to { transform: rotate(360deg); }
|
to { transform: rotate(360deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 预览弹窗动画效果 */
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||||
|
25% { transform: translateY(-10px) rotate(1deg); }
|
||||||
|
50% { transform: translateY(-5px) rotate(-1deg); }
|
||||||
|
75% { transform: translateY(-15px) rotate(0.5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 1; }
|
||||||
|
50% { transform: scale(1.05); opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-30px) scale(0.9);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 预览弹窗样式增强 */
|
||||||
|
:deep(.arco-modal) {
|
||||||
|
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-mask) {
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-content) {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 32px 96px rgba(0,0,0,0.3) !important;
|
||||||
|
border: 3px solid rgba(255,255,255,0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-header) {
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||||
|
padding: 20px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-title) {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-close) {
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,1);
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮悬停效果增强 */
|
||||||
|
:deep(.arco-btn) {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 骨架屏样式 */
|
/* 骨架屏样式 */
|
||||||
.skeleton-item {
|
.skeleton-item {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<template>
|
||||||
|
<a-spin :loading="loading">
|
||||||
|
<div v-if="contractDetail">
|
||||||
|
<a-descriptions
|
||||||
|
:column="1"
|
||||||
|
size="medium"
|
||||||
|
:label-style="{ width: '120px' }"
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="合同编号">
|
||||||
|
{{ contractDetail.code }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="项目名称">
|
||||||
|
{{ contractDetail.projectName }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="客户名称">
|
||||||
|
{{ contractDetail.customer }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="合同金额">
|
||||||
|
<span class="font-medium text-green-600">￥{{ (contractDetail.amount || 0).toLocaleString() }}</span>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="已收款金额">
|
||||||
|
<span class="font-medium text-blue-600">￥{{ (contractDetail.receivedAmount || 0).toLocaleString() }}</span>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="未收款金额">
|
||||||
|
<span class="font-medium text-orange-600">￥{{ (contractDetail.pendingAmount || 0).toLocaleString() }}</span>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="签署日期">
|
||||||
|
{{ contractDetail.signDate }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="履约期限">
|
||||||
|
{{ contractDetail.performanceDeadline }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="付款日期">
|
||||||
|
{{ contractDetail.paymentDate }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="合同状态">
|
||||||
|
<a-tag :color="getStatusColor(contractDetail.contractStatus)">
|
||||||
|
{{ getStatusText(contractDetail.contractStatusLabel || contractDetail.contractStatus) }}
|
||||||
|
</a-tag>
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="销售人员">
|
||||||
|
{{ contractDetail.salespersonName }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="销售部门">
|
||||||
|
{{ contractDetail.salespersonDeptName }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="产品服务">
|
||||||
|
{{ contractDetail.productService }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="备注">
|
||||||
|
{{ contractDetail.notes }}
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="!loading" class="empty-container">
|
||||||
|
<a-empty description="暂无信息" />
|
||||||
|
</div>
|
||||||
|
</a-spin>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import http from '@/utils/http'
|
||||||
|
import { Message } from '@arco-design/web-vue'
|
||||||
|
|
||||||
|
interface ContractDetail {
|
||||||
|
contractId: string
|
||||||
|
customer: string
|
||||||
|
code: string
|
||||||
|
projectId: string
|
||||||
|
type: string
|
||||||
|
productService: string
|
||||||
|
paymentDate: string | null
|
||||||
|
performanceDeadline: string | null
|
||||||
|
paymentAddress: string
|
||||||
|
amount: number
|
||||||
|
accountNumber: string
|
||||||
|
notes: string
|
||||||
|
contractStatus: string
|
||||||
|
contractText: string | null
|
||||||
|
projectName: string
|
||||||
|
salespersonName: string | null
|
||||||
|
salespersonDeptName: string
|
||||||
|
settlementAmount: number | null
|
||||||
|
receivedAmount: number | null
|
||||||
|
contractStatusLabel: string | null
|
||||||
|
createBy: string | null
|
||||||
|
updateBy: string | null
|
||||||
|
createTime: string
|
||||||
|
updateTime: string
|
||||||
|
page: number
|
||||||
|
pageSize: number
|
||||||
|
signDate: string
|
||||||
|
duration: string
|
||||||
|
pendingAmount?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
contractId: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const contractDetail = ref<ContractDetail | null>(null)
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
未确认: 'gray',
|
||||||
|
待审批: 'orange',
|
||||||
|
已签署: 'blue',
|
||||||
|
执行中: 'cyan',
|
||||||
|
已完成: 'green',
|
||||||
|
已终止: 'red'
|
||||||
|
}
|
||||||
|
return colorMap[status] || 'gray'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusText = (status: string) => {
|
||||||
|
return status || '未知状态'
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchContractDetail = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const response = await http.get(`/contract/${props.contractId}`)
|
||||||
|
if (response.code === 200) {
|
||||||
|
contractDetail.value = response.data
|
||||||
|
// 计算未收款金额
|
||||||
|
if (contractDetail.value) {
|
||||||
|
contractDetail.value.pendingAmount = (contractDetail.value.amount || 0) - (contractDetail.value.receivedAmount || 0)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
Message.error(response.msg || '获取合同详情失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取合同详情失败:', error)
|
||||||
|
Message.error('获取合同详情失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchContractDetail()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.empty-container {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
<template>
|
||||||
|
<a-form :model="contractData" layout="vertical">
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="code" label="合同编号">
|
||||||
|
<a-input v-model="contractData.code" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="projectName" label="项目名称">
|
||||||
|
<a-input v-model="contractData.projectName" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="customer" label="客户名称">
|
||||||
|
<a-input v-model="contractData.customer" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="amount" label="合同金额">
|
||||||
|
<a-input-number v-model="contractData.amount" style="width: 100%" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="accountNumber" label="收款账号">
|
||||||
|
<a-input v-model="contractData.accountNumber" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="contractStatus" label="合同状态">
|
||||||
|
<a-select v-model="contractData.contractStatus">
|
||||||
|
<a-option value="未确认">未确认</a-option>
|
||||||
|
<a-option value="待审批">待审批</a-option>
|
||||||
|
<a-option value="已签署">已签署</a-option>
|
||||||
|
<a-option value="执行中">执行中</a-option>
|
||||||
|
<a-option value="已完成">已完成</a-option>
|
||||||
|
<a-option value="已终止">已终止</a-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="signDate" label="签订日期">
|
||||||
|
<a-date-picker v-model="contractData.signDate" style="width: 100%" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="performanceDeadline" label="履约期限">
|
||||||
|
<a-date-picker v-model="contractData.performanceDeadline" style="width: 100%" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="paymentDate" label="付款日期">
|
||||||
|
<a-date-picker v-model="contractData.paymentDate" style="width: 100%" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="productService" label="产品或服务">
|
||||||
|
<a-input v-model="contractData.productService" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-form-item field="paymentAddress" label="付款地址">
|
||||||
|
<a-input v-model="contractData.paymentAddress" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item field="notes" label="备注">
|
||||||
|
<a-textarea v-model="contractData.notes" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item field="contractText" label="合同内容">
|
||||||
|
<a-textarea v-model="contractData.contractText" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import type { ContractItem } from './index.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
contractData: ContractItem
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:contractData', data: ContractItem): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const contractData = ref({ ...props.contractData })
|
||||||
|
|
||||||
|
// 监听props变化更新内部数据
|
||||||
|
watch(
|
||||||
|
() => props.contractData,
|
||||||
|
(newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
contractData.value = { ...newVal }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
)
|
||||||
|
|
||||||
|
// 监听内部数据变化并触发更新事件
|
||||||
|
watch(
|
||||||
|
contractData,
|
||||||
|
(newVal) => {
|
||||||
|
emit('update:contractData', newVal)
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
@ -38,48 +38,110 @@
|
||||||
|
|
||||||
<!-- 合同状态 -->
|
<!-- 合同状态 -->
|
||||||
<template #status="{ record }">
|
<template #status="{ record }">
|
||||||
<a-tag :color="getStatusColor(record.status)">
|
<a-tag :color="getStatusColor(record.contractStatus)">
|
||||||
{{ getStatusText(record.status) }}
|
{{ getStatusText(record.contractStatusLabel || record.contractStatus) }}
|
||||||
</a-tag>
|
</a-tag>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 合同金额 -->
|
<!-- 合同金额 -->
|
||||||
<template #contractAmount="{ record }">
|
<template #contractAmount="{ record }">
|
||||||
<span class="font-medium text-green-600">￥{{ record.contractAmount.toLocaleString() }}万</span>
|
<span class="font-medium text-green-600">￥{{ (record.amount || 0).toLocaleString() }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 已收款金额 -->
|
<!-- 已收款金额 -->
|
||||||
<template #receivedAmount="{ record }">
|
<template #receivedAmount="{ record }">
|
||||||
<span class="font-medium text-blue-600">￥{{ record.receivedAmount.toLocaleString() }}万</span>
|
<span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 操作列 -->
|
|
||||||
<template #action="{ record }">
|
<template #action="{ record }">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-link @click="viewDetail(record)">详情</a-link>
|
<a-link @click="viewDetail(record)">详情</a-link>
|
||||||
<a-link @click="editRecord(record)" v-if="record.status === 'draft'">编辑</a-link>
|
<a-link v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</a-link>
|
||||||
<a-link @click="approveContract(record)" v-if="record.status === 'pending'">审批</a-link>
|
<a-link v-if="record.contractStatus === '待审批'" @click="approveContract(record)">审批</a-link>
|
||||||
<a-link @click="viewPayment(record)">收款记录</a-link>
|
<a-link @click="viewPayment(record)">收款记录</a-link>
|
||||||
|
<a-link v-if="record.contractStatus !== '已签署' && record.contractStatus !== '已完成'" @click="deleteContract(record)">删除</a-link>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
</GiTable>
|
</GiTable>
|
||||||
|
|
||||||
|
<!-- 合同详情弹窗 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="showDetailModal"
|
||||||
|
title="合同详情"
|
||||||
|
:width="800"
|
||||||
|
:footer="false"
|
||||||
|
@cancel="closeDetailModal"
|
||||||
|
>
|
||||||
|
<ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
|
||||||
|
</a-modal>
|
||||||
|
|
||||||
|
<!-- 合同编辑弹窗 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="showEditModal"
|
||||||
|
title="编辑合同"
|
||||||
|
:width="800"
|
||||||
|
@cancel="closeEditModal"
|
||||||
|
@before-ok="handleEditSubmit"
|
||||||
|
>
|
||||||
|
<ContractEdit
|
||||||
|
v-if="showEditModal"
|
||||||
|
:contract-data="selectedContractData"
|
||||||
|
@update:contract-data="handleContractDataUpdate"
|
||||||
|
/>
|
||||||
|
</a-modal>
|
||||||
</GiPageLayout>
|
</GiPageLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { onMounted, reactive, ref } from 'vue'
|
||||||
import { Message } from '@arco-design/web-vue'
|
import { Message, Modal } from '@arco-design/web-vue'
|
||||||
import type { TableColumnData } from '@arco-design/web-vue'
|
import type { TableColumnData } from '@arco-design/web-vue'
|
||||||
|
import ContractEdit from './ContractEdit.vue'
|
||||||
|
|
||||||
|
import ContractDetail from './ContractDetail.vue'
|
||||||
|
import http from '@/utils/http'
|
||||||
|
|
||||||
|
// 接口数据类型定义
|
||||||
|
interface ContractItem {
|
||||||
|
contractId: string
|
||||||
|
customer: string
|
||||||
|
code: string
|
||||||
|
projectId: string
|
||||||
|
type: string
|
||||||
|
productService: string
|
||||||
|
paymentDate: string | null
|
||||||
|
performanceDeadline: string | null
|
||||||
|
paymentAddress: string
|
||||||
|
amount: number
|
||||||
|
accountNumber: string
|
||||||
|
notes: string
|
||||||
|
contractStatus: string
|
||||||
|
contractText: string | null
|
||||||
|
projectName: string
|
||||||
|
salespersonName: string | null
|
||||||
|
salespersonDeptName: string
|
||||||
|
settlementAmount: number | null
|
||||||
|
receivedAmount: number | null
|
||||||
|
contractStatusLabel: string | null
|
||||||
|
createBy: string | null
|
||||||
|
updateBy: string | null
|
||||||
|
createTime: string
|
||||||
|
updateTime: string
|
||||||
|
page: number
|
||||||
|
pageSize: number
|
||||||
|
signDate: string
|
||||||
|
duration: string
|
||||||
|
}
|
||||||
|
|
||||||
// 搜索表单
|
// 搜索表单
|
||||||
let searchForm = reactive({
|
const searchForm = reactive({
|
||||||
contractName: '',
|
contractName: '',
|
||||||
contractCode: '',
|
contractCode: '',
|
||||||
client: '',
|
client: '',
|
||||||
status: '',
|
status: '',
|
||||||
signDate: '',
|
signDate: '',
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 10
|
size: 10,
|
||||||
})
|
})
|
||||||
|
|
||||||
// 查询条件配置
|
// 查询条件配置
|
||||||
|
|
@ -89,16 +151,16 @@ const queryFormColumns = [
|
||||||
label: '合同名称',
|
label: '合同名称',
|
||||||
type: 'input' as const,
|
type: 'input' as const,
|
||||||
props: {
|
props: {
|
||||||
placeholder: '请输入合同名称'
|
placeholder: '请输入合同名称',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'client',
|
field: 'client',
|
||||||
label: '客户',
|
label: '客户',
|
||||||
type: 'input' as const,
|
type: 'input' as const,
|
||||||
props: {
|
props: {
|
||||||
placeholder: '请输入客户名称'
|
placeholder: '请输入客户名称',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'status',
|
field: 'status',
|
||||||
|
|
@ -107,132 +169,110 @@ const queryFormColumns = [
|
||||||
props: {
|
props: {
|
||||||
placeholder: '请选择合同状态',
|
placeholder: '请选择合同状态',
|
||||||
options: [
|
options: [
|
||||||
{ label: '草稿', value: 'draft' },
|
{ label: '未确认', value: '未确认' },
|
||||||
{ label: '待审批', value: 'pending' },
|
{ label: '待审批', value: '待审批' },
|
||||||
{ label: '已签署', value: 'signed' },
|
{ label: '已签署', value: '已签署' },
|
||||||
{ label: '执行中', value: 'executing' },
|
{ label: '执行中', value: '执行中' },
|
||||||
{ label: '已完成', value: 'completed' },
|
{ label: '已完成', value: '已完成' },
|
||||||
{ label: '已终止', value: 'terminated' }
|
{ label: '已终止', value: '已终止' },
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
// 表格列配置
|
// 表格列配置
|
||||||
const tableColumns: TableColumnData[] = [
|
const tableColumns: TableColumnData[] = [
|
||||||
{ title: '合同编号', dataIndex: 'contractCode', width: 150 },
|
{ title: '合同编号', dataIndex: 'code', width: 150 },
|
||||||
{ title: '合同名称', dataIndex: 'contractName', width: 250, ellipsis: true, tooltip: true },
|
{ title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
|
||||||
{ title: '客户名称', dataIndex: 'client', width: 200, ellipsis: true, tooltip: true },
|
{ title: '客户名称', dataIndex: 'customer', width: 200, ellipsis: true, tooltip: true },
|
||||||
{ title: '合同金额', dataIndex: 'contractAmount', slotName: 'contractAmount', width: 120 },
|
{ title: '合同金额', dataIndex: 'amount', slotName: 'contractAmount', width: 120 },
|
||||||
{ title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
|
{ title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
|
||||||
{ title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
|
{ title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
|
||||||
{ title: '签署日期', dataIndex: 'signDate', width: 120 },
|
{ title: '签署日期', dataIndex: 'signDate', width: 120 },
|
||||||
{ title: '开始日期', dataIndex: 'startDate', width: 120 },
|
{ title: '履约期限', dataIndex: 'performanceDeadline', width: 120 },
|
||||||
{ title: '结束日期', dataIndex: 'endDate', width: 120 },
|
{ title: '付款日期', dataIndex: 'paymentDate', width: 120 },
|
||||||
{ title: '合同状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
{ title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 100 },
|
||||||
{ title: '项目经理', dataIndex: 'projectManager', width: 100 },
|
{ title: '销售人员', dataIndex: 'salespersonName', width: 100 },
|
||||||
{ title: '销售经理', dataIndex: 'salesManager', width: 100 },
|
{ title: '销售部门', dataIndex: 'salespersonDeptName', width: 100 },
|
||||||
{ title: '完成进度', dataIndex: 'progress', width: 100 },
|
{ title: '产品服务', dataIndex: 'productService', width: 120, ellipsis: true, tooltip: true },
|
||||||
{ title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
|
{ title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
|
||||||
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' }
|
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' },
|
||||||
]
|
]
|
||||||
|
|
||||||
// 数据状态
|
// 数据状态
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const dataList = ref([
|
const dataList = ref<ContractItem[]>([])
|
||||||
{
|
|
||||||
id: 1,
|
// API调用函数
|
||||||
contractCode: 'RC2024001',
|
const fetchContractList = async () => {
|
||||||
contractName: '华能新能源风电场叶片检测服务合同',
|
try {
|
||||||
client: '华能新能源股份有限公司',
|
loading.value = true
|
||||||
contractAmount: 320,
|
const params = {
|
||||||
receivedAmount: 192,
|
page: searchForm.page,
|
||||||
pendingAmount: 128,
|
pageSize: searchForm.size,
|
||||||
signDate: '2024-02-20',
|
contractName: searchForm.contractName,
|
||||||
startDate: '2024-03-01',
|
code: searchForm.contractCode,
|
||||||
endDate: '2024-04-30',
|
customer: searchForm.client,
|
||||||
status: 'executing',
|
contractStatus: searchForm.status,
|
||||||
projectManager: '张项目经理',
|
signDate: searchForm.signDate,
|
||||||
salesManager: '李销售经理',
|
}
|
||||||
progress: '60%',
|
|
||||||
remark: '项目进展顺利，客户满意度高'
|
const response = await http.get('/contract/list', params)
|
||||||
},
|
|
||||||
{
|
if (response.code === 200) {
|
||||||
id: 2,
|
// 过滤出类型为"收入合同"的数据
|
||||||
contractCode: 'RC2024002',
|
const allContracts = response.rows || []
|
||||||
contractName: '大唐风电场防雷检测项目合同',
|
const revenueContracts = allContracts.filter((item: ContractItem) => item.type === '收入合同')
|
||||||
client: '大唐新能源股份有限公司',
|
|
||||||
contractAmount: 268,
|
// 计算未收款金额
|
||||||
receivedAmount: 134,
|
dataList.value = revenueContracts.map((item: ContractItem) => ({
|
||||||
pendingAmount: 134,
|
...item,
|
||||||
signDate: '2024-02-25',
|
pendingAmount: (item.amount || 0) - (item.receivedAmount || 0),
|
||||||
startDate: '2024-03-05',
|
}))
|
||||||
endDate: '2024-04-20',
|
|
||||||
status: 'executing',
|
pagination.total = Number.parseInt(response.total) || 0
|
||||||
projectManager: '王项目经理',
|
} else {
|
||||||
salesManager: '赵销售经理',
|
Message.error(response.msg || '获取合同列表失败')
|
||||||
progress: '45%',
|
dataList.value = []
|
||||||
remark: '按计划执行中'
|
}
|
||||||
},
|
} catch (error) {
|
||||||
{
|
console.error('获取合同列表失败:', error)
|
||||||
id: 3,
|
Message.error('获取合同列表失败')
|
||||||
contractCode: 'RC2024003',
|
dataList.value = []
|
||||||
contractName: '中广核风电场设备维护服务合同',
|
} finally {
|
||||||
client: '中广核新能源投资有限公司',
|
loading.value = false
|
||||||
contractAmount: 450,
|
|
||||||
receivedAmount: 450,
|
|
||||||
pendingAmount: 0,
|
|
||||||
signDate: '2024-01-15',
|
|
||||||
startDate: '2024-01-20',
|
|
||||||
endDate: '2024-01-31',
|
|
||||||
status: 'completed',
|
|
||||||
projectManager: '刘项目经理',
|
|
||||||
salesManager: '孙销售经理',
|
|
||||||
progress: '100%',
|
|
||||||
remark: '项目已完成，客户验收通过'
|
|
||||||
}
|
}
|
||||||
])
|
}
|
||||||
|
|
||||||
const pagination = reactive({
|
const pagination = reactive({
|
||||||
current: 1,
|
current: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 3,
|
total: 0,
|
||||||
showTotal: true,
|
showTotal: true,
|
||||||
showPageSize: true
|
showPageSize: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
// 获取状态颜色
|
// 获取状态颜色
|
||||||
const getStatusColor = (status: string) => {
|
const getStatusColor = (status: string) => {
|
||||||
const colorMap: Record<string, string> = {
|
const colorMap: Record<string, string> = {
|
||||||
'draft': 'gray',
|
未确认: 'gray',
|
||||||
'pending': 'orange',
|
待审批: 'orange',
|
||||||
'signed': 'blue',
|
已签署: 'blue',
|
||||||
'executing': 'cyan',
|
执行中: 'cyan',
|
||||||
'completed': 'green',
|
已完成: 'green',
|
||||||
'terminated': 'red'
|
已终止: 'red',
|
||||||
}
|
}
|
||||||
return colorMap[status] || 'gray'
|
return colorMap[status] || 'gray'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取状态文本
|
// 获取状态文本
|
||||||
const getStatusText = (status: string) => {
|
const getStatusText = (status: string) => {
|
||||||
const textMap: Record<string, string> = {
|
// 直接返回后端返回的状态文本，如果有contractStatusLabel则使用，否则使用contractStatus
|
||||||
'draft': '草稿',
|
return status || '未知状态'
|
||||||
'pending': '待审批',
|
|
||||||
'signed': '已签署',
|
|
||||||
'executing': '执行中',
|
|
||||||
'completed': '已完成',
|
|
||||||
'terminated': '已终止'
|
|
||||||
}
|
|
||||||
return textMap[status] || status
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 搜索和重置
|
// 搜索和重置
|
||||||
const search = async () => {
|
const search = async () => {
|
||||||
loading.value = true
|
await fetchContractList()
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false
|
|
||||||
}, 1000)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
|
|
@ -243,7 +283,7 @@ const reset = () => {
|
||||||
status: '',
|
status: '',
|
||||||
signDate: '',
|
signDate: '',
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 10
|
size: 10,
|
||||||
})
|
})
|
||||||
pagination.current = 1
|
pagination.current = 1
|
||||||
search()
|
search()
|
||||||
|
|
@ -273,23 +313,131 @@ const exportContract = () => {
|
||||||
Message.info('导出合同功能开发中...')
|
Message.info('导出合同功能开发中...')
|
||||||
}
|
}
|
||||||
|
|
||||||
const viewDetail = (record: any) => {
|
// 显示合同编辑弹窗
|
||||||
Message.info(`查看合同详情: ${record.contractName}`)
|
const showEditModal = ref(false)
|
||||||
|
const selectedContractData = ref<ContractItem | null>(null)
|
||||||
|
const editedContractData = ref<ContractItem | null>(null)
|
||||||
|
|
||||||
|
const editRecord = (record: ContractItem) => {
|
||||||
|
// 确保所有必要的字段都存在
|
||||||
|
const completeRecord = {
|
||||||
|
...record,
|
||||||
|
amount: record.amount || 0,
|
||||||
|
projectId: record.projectId || '',
|
||||||
|
type: record.type || '收入合同',
|
||||||
|
contractStatus: record.contractStatus || '未确认',
|
||||||
|
}
|
||||||
|
|
||||||
|
selectedContractData.value = completeRecord
|
||||||
|
showEditModal.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const editRecord = (record: any) => {
|
const closeEditModal = () => {
|
||||||
Message.info(`编辑合同: ${record.contractName}`)
|
showEditModal.value = false
|
||||||
|
selectedContractData.value = null
|
||||||
|
editedContractData.value = null
|
||||||
}
|
}
|
||||||
|
|
||||||
const approveContract = (record: any) => {
|
const handleContractDataUpdate = (data: ContractItem) => {
|
||||||
Message.info(`审批合同: ${record.contractName}`)
|
editedContractData.value = data
|
||||||
}
|
}
|
||||||
|
|
||||||
const viewPayment = (record: any) => {
|
const handleEditSubmit = async () => {
|
||||||
Message.info(`查看收款记录: ${record.contractName}`)
|
if (!editedContractData.value) return false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const requestData = {
|
||||||
|
...editedContractData.value,
|
||||||
|
accountNumber: editedContractData.value.accountNumber || '',
|
||||||
|
amount: editedContractData.value.amount || 0,
|
||||||
|
code: editedContractData.value.code || '',
|
||||||
|
contractId: editedContractData.value.contractId,
|
||||||
|
contractStatus: editedContractData.value.contractStatus || '',
|
||||||
|
contractText: editedContractData.value.contractText || '',
|
||||||
|
customer: editedContractData.value.customer || '',
|
||||||
|
departmentId: editedContractData.value.departmentId || '',
|
||||||
|
duration: editedContractData.value.duration || '',
|
||||||
|
notes: editedContractData.value.notes || '',
|
||||||
|
paymentAddress: editedContractData.value.paymentAddress || '',
|
||||||
|
paymentDate: editedContractData.value.paymentDate || null,
|
||||||
|
performanceDeadline: editedContractData.value.performanceDeadline || null,
|
||||||
|
productService: editedContractData.value.productService || '',
|
||||||
|
projectId: editedContractData.value.projectId || '',
|
||||||
|
salespersonId: editedContractData.value.salespersonId || '',
|
||||||
|
signDate: editedContractData.value.signDate || null,
|
||||||
|
type: editedContractData.value.type || '',
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Edited Contract Data:', requestData); // 打印请求数据以便调试
|
||||||
|
|
||||||
|
// 修改此处，直接向 /contract 发送 PUT 请求
|
||||||
|
const response = await http.put('/contract', requestData);
|
||||||
|
|
||||||
|
// 检查响应状态
|
||||||
|
if (response.status === 200 && response.code === 200) {
|
||||||
|
Message.success('合同编辑成功');
|
||||||
|
closeEditModal();
|
||||||
|
search(); // 刷新列表
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
Message.error(response.msg || '合同编辑失败');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('合同编辑失败:', error);
|
||||||
|
Message.error('合同编辑失败: ' + (error.message || '请稍后再试'));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 删除合同
|
||||||
|
const deleteContract = async (record: ContractItem) => {
|
||||||
|
try {
|
||||||
|
await Modal.confirm({
|
||||||
|
title: '确认删除',
|
||||||
|
content: `确定要删除合同 "${record.projectName}" 吗？`,
|
||||||
|
})
|
||||||
|
|
||||||
|
const response = await http.delete(`/contract/${record.contractId}`)
|
||||||
|
if (response.code === 200) {
|
||||||
|
Message.success('合同删除成功')
|
||||||
|
search() // 刷新列表
|
||||||
|
} else {
|
||||||
|
Message.error(response.msg || '合同删除失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// 用户取消删除或请求失败
|
||||||
|
if (error !== 'cancel') {
|
||||||
|
console.error('合同删除失败:', error)
|
||||||
|
Message.error('合同删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示合同详情弹窗
|
||||||
|
const showDetailModal = ref(false)
|
||||||
|
const selectedContractId = ref<string | null>(null)
|
||||||
|
|
||||||
|
const viewDetail = (record: ContractItem) => {
|
||||||
|
selectedContractId.value = record.contractId
|
||||||
|
showDetailModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeDetailModal = () => {
|
||||||
|
showDetailModal.value = false
|
||||||
|
selectedContractId.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const approveContract = (record: ContractItem) => {
|
||||||
|
Message.info(`审批合同: ${record.projectName}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const viewPayment = (record: ContractItem) => {
|
||||||
|
Message.info(`查看收款记录: ${record.projectName}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
search()
|
fetchContractList()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -0,0 +1,952 @@
|
||||||
|
<!--
|
||||||
|
团队成员管理页面
|
||||||
|
功能特性:
|
||||||
|
1. 团队成员列表展示
|
||||||
|
2. 新增团队成员
|
||||||
|
3. 编辑团队成员信息
|
||||||
|
4. 删除团队成员
|
||||||
|
5. 导入导出团队成员数据
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<GiPageLayout>
|
||||||
|
<!-- 页面头部 -->
|
||||||
|
<div class="page-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<a-button @click="$router.back()" class="back-btn">
|
||||||
|
<template #icon><icon-left /></template>
|
||||||
|
返回
|
||||||
|
</a-button>
|
||||||
|
<div class="header-title">
|
||||||
|
<icon-user-group class="title-icon" />
|
||||||
|
<h1>团队成员管理</h1>
|
||||||
|
<span v-if="projectId" class="project-info">项目ID: {{ projectId }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<a-button type="primary" @click="openAddModal">
|
||||||
|
<template #icon><icon-plus /></template>
|
||||||
|
新增成员
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="openImportModal">
|
||||||
|
<template #icon><icon-upload /></template>
|
||||||
|
导入
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="exportData">
|
||||||
|
<template #icon><icon-download /></template>
|
||||||
|
导出
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 简洁搜索区域 -->
|
||||||
|
<div class="search-section">
|
||||||
|
<a-card :bordered="false" class="search-card">
|
||||||
|
<a-form layout="inline" :model="searchForm">
|
||||||
|
<a-form-item label="姓名">
|
||||||
|
<a-input
|
||||||
|
v-model="searchForm.name"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
style="width: 180px"
|
||||||
|
allow-clear
|
||||||
|
@press-enter="handleSearch"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="岗位">
|
||||||
|
<a-select
|
||||||
|
v-model="searchForm.position"
|
||||||
|
placeholder="请选择岗位"
|
||||||
|
style="width: 150px"
|
||||||
|
allow-clear
|
||||||
|
>
|
||||||
|
<a-option
|
||||||
|
v-for="option in POSITION_OPTIONS"
|
||||||
|
:key="option.value"
|
||||||
|
:value="option.value"
|
||||||
|
>
|
||||||
|
{{ option.label }}
|
||||||
|
</a-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="状态">
|
||||||
|
<a-select
|
||||||
|
v-model="searchForm.status"
|
||||||
|
placeholder="请选择状态"
|
||||||
|
style="width: 120px"
|
||||||
|
allow-clear
|
||||||
|
>
|
||||||
|
<a-option
|
||||||
|
v-for="option in STATUS_OPTIONS"
|
||||||
|
:key="option.value"
|
||||||
|
:value="option.value"
|
||||||
|
>
|
||||||
|
{{ option.label }}
|
||||||
|
</a-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary" @click="handleSearch">
|
||||||
|
<template #icon><icon-search /></template>
|
||||||
|
搜索
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="handleReset">
|
||||||
|
<template #icon><icon-refresh /></template>
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<GiTable
|
||||||
|
row-key="id"
|
||||||
|
:data="dataList"
|
||||||
|
:columns="tableColumns"
|
||||||
|
:loading="loading"
|
||||||
|
:scroll="{ x: '100%', minWidth: 1200 }"
|
||||||
|
:pagination="pagination"
|
||||||
|
:disabled-tools="['size']"
|
||||||
|
@page-change="onPageChange"
|
||||||
|
@page-size-change="onPageSizeChange"
|
||||||
|
@refresh="loadData"
|
||||||
|
>
|
||||||
|
<!-- 状态列 -->
|
||||||
|
<template #status="{ record }">
|
||||||
|
<a-tag :color="getStatusColor(record.status || 'offline')">
|
||||||
|
{{ getStatusText(record.status || 'offline') }}
|
||||||
|
</a-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 备注列 -->
|
||||||
|
<template #remark="{ record }">
|
||||||
|
<div class="remark-content" v-if="record.remark">
|
||||||
|
{{ record.remark }}
|
||||||
|
</div>
|
||||||
|
<span v-else class="no-remark">暂无备注</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 操作列 -->
|
||||||
|
<template #action="{ record }">
|
||||||
|
<a-space>
|
||||||
|
<a-link title="编辑" @click="openEditModal(record)">编辑</a-link>
|
||||||
|
<a-link title="状态调整" @click="openStatusModal(record)">状态</a-link>
|
||||||
|
<a-link status="danger" title="删除" @click="confirmDelete(record)">删除</a-link>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</GiTable>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="memberModalVisible"
|
||||||
|
:title="isEdit ? '编辑团队成员' : '新增团队成员'"
|
||||||
|
width="600px"
|
||||||
|
@ok="saveMember"
|
||||||
|
@cancel="cancelMember"
|
||||||
|
>
|
||||||
|
<div class="member-form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-item">
|
||||||
|
<label>姓名 <span class="required">*</span></label>
|
||||||
|
<a-input v-model="memberForm.name" placeholder="请输入姓名" />
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>联系电话 <span class="required">*</span></label>
|
||||||
|
<a-input v-model="memberForm.phone" placeholder="请输入联系电话" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-item">
|
||||||
|
<label>岗位 <span class="required">*</span></label>
|
||||||
|
<a-select v-model="memberForm.position" placeholder="请选择岗位">
|
||||||
|
<a-option
|
||||||
|
v-for="option in POSITION_OPTIONS"
|
||||||
|
:key="option.value"
|
||||||
|
:value="option.value"
|
||||||
|
>
|
||||||
|
{{ option.label }}
|
||||||
|
</a-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>状态</label>
|
||||||
|
<a-select v-model="memberForm.status" placeholder="请选择状态">
|
||||||
|
<a-option
|
||||||
|
v-for="option in STATUS_OPTIONS"
|
||||||
|
:key="option.value"
|
||||||
|
:value="option.value"
|
||||||
|
>
|
||||||
|
{{ option.label }}
|
||||||
|
</a-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-item">
|
||||||
|
<label>邮箱</label>
|
||||||
|
<a-input v-model="memberForm.email" placeholder="请输入邮箱" />
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>入职日期</label>
|
||||||
|
<a-date-picker v-model="memberForm.joinDate" placeholder="请选择入职日期" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-item">
|
||||||
|
<label>备注信息</label>
|
||||||
|
<a-textarea
|
||||||
|
v-model="memberForm.remark"
|
||||||
|
placeholder="请输入备注信息，格式：主要负责：项目经理，次要负责：安全员等"
|
||||||
|
:rows="3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
|
||||||
|
<!-- 状态调整弹窗 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="statusModalVisible"
|
||||||
|
title="调整状态"
|
||||||
|
width="400px"
|
||||||
|
@ok="saveStatus"
|
||||||
|
@cancel="cancelStatus"
|
||||||
|
>
|
||||||
|
<div class="status-form">
|
||||||
|
<div class="form-item">
|
||||||
|
<label>成员姓名:</label>
|
||||||
|
<span>{{ statusForm.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>当前状态:</label>
|
||||||
|
<span>{{ getStatusText(statusForm.currentStatus) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>新状态:</label>
|
||||||
|
<a-select v-model="statusForm.newStatus" placeholder="请选择新状态">
|
||||||
|
<a-option
|
||||||
|
v-for="option in STATUS_OPTIONS"
|
||||||
|
:key="option.value"
|
||||||
|
:value="option.value"
|
||||||
|
>
|
||||||
|
{{ option.label }}
|
||||||
|
</a-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
|
||||||
|
<!-- 导入弹窗 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="importModalVisible"
|
||||||
|
title="导入团队成员"
|
||||||
|
width="500px"
|
||||||
|
@ok="confirmImport"
|
||||||
|
@cancel="cancelImport"
|
||||||
|
>
|
||||||
|
<div class="import-form">
|
||||||
|
<div class="form-item">
|
||||||
|
<label>选择文件:</label>
|
||||||
|
<a-upload
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
:custom-request="customUpload"
|
||||||
|
:show-file-list="true"
|
||||||
|
accept=".xlsx,.xls,.csv"
|
||||||
|
:limit="1"
|
||||||
|
>
|
||||||
|
<a-button>
|
||||||
|
<template #icon><icon-upload /></template>
|
||||||
|
选择文件
|
||||||
|
</a-button>
|
||||||
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>下载模板:</label>
|
||||||
|
<a-button type="text" @click="downloadTemplate">
|
||||||
|
<template #icon><icon-download /></template>
|
||||||
|
下载导入模板
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</GiPageLayout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { Message, Modal } from '@arco-design/web-vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import type { TeamMemberResp, TeamMemberQuery, TeamMemberExportQuery, CreateTeamMemberForm, UpdateTeamMemberForm, BackendTeamMemberResp } from '@/apis/project/type'
|
||||||
|
import {
|
||||||
|
getProjectTeamMembers,
|
||||||
|
createTeamMember,
|
||||||
|
updateTeamMember,
|
||||||
|
deleteTeamMembers,
|
||||||
|
importTeamMembers,
|
||||||
|
exportTeamMembers,
|
||||||
|
downloadImportTemplate
|
||||||
|
} from '@/apis/project/personnel-dispatch'
|
||||||
|
|
||||||
|
// 获取路由参数
|
||||||
|
const route = useRoute()
|
||||||
|
const projectId = route.query.projectId as string
|
||||||
|
|
||||||
|
// 选项数据常量
|
||||||
|
const POSITION_OPTIONS = [
|
||||||
|
{ label: '项目经理', value: '项目经理' },
|
||||||
|
{ label: '技术负责人', value: '技术负责人' },
|
||||||
|
{ label: '安全员', value: '安全员' },
|
||||||
|
{ label: '质量员', value: '质量员' },
|
||||||
|
{ label: '施工员', value: '施工员' },
|
||||||
|
{ label: '材料员', value: '材料员' },
|
||||||
|
{ label: '资料员', value: '资料员' },
|
||||||
|
{ label: '实习生', value: '实习生' },
|
||||||
|
{ label: '技术工人', value: '技术工人' },
|
||||||
|
{ label: '普通工人', value: '普通工人' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const STATUS_OPTIONS = [
|
||||||
|
{ label: '可用', value: 'available' },
|
||||||
|
{ label: '忙碌', value: 'busy' },
|
||||||
|
{ label: '离线', value: 'offline' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const loading = ref(false)
|
||||||
|
const dataList = ref<TeamMemberResp[]>([])
|
||||||
|
const pagination = reactive({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
showTotal: true,
|
||||||
|
showJumper: true,
|
||||||
|
showPageSize: true
|
||||||
|
})
|
||||||
|
|
||||||
|
// 搜索表单
|
||||||
|
const searchForm = reactive<{
|
||||||
|
name: string
|
||||||
|
position: string
|
||||||
|
status: string
|
||||||
|
}>({
|
||||||
|
name: '',
|
||||||
|
position: '',
|
||||||
|
status: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表格列配置
|
||||||
|
const tableColumns = [
|
||||||
|
{ title: '姓名', dataIndex: 'name', width: 100, fixed: 'left' },
|
||||||
|
{ title: '联系电话', dataIndex: 'phone', width: 120 },
|
||||||
|
{ title: '邮箱', dataIndex: 'email', width: 150 },
|
||||||
|
{ title: '项目岗位', dataIndex: 'position', width: 120 },
|
||||||
|
{ title: '状态', dataIndex: 'status', width: 100, slotName: 'status' },
|
||||||
|
{ title: '入职日期', dataIndex: 'joinDate', width: 120 },
|
||||||
|
{ title: '备注', dataIndex: 'remark', width: 200, slotName: 'remark' },
|
||||||
|
{ title: '操作', dataIndex: 'action', width: 180, fixed: 'right', slotName: 'action' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 弹窗状态
|
||||||
|
const memberModalVisible = ref(false)
|
||||||
|
const statusModalVisible = ref(false)
|
||||||
|
const importModalVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const memberForm = reactive<CreateTeamMemberForm & { id?: string | number }>({
|
||||||
|
projectId: projectId,
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
position: '',
|
||||||
|
status: 'available',
|
||||||
|
joinDate: '',
|
||||||
|
remark: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const statusForm = reactive<{
|
||||||
|
id: string | number
|
||||||
|
name: string
|
||||||
|
currentStatus: string
|
||||||
|
newStatus: 'available' | 'busy' | 'offline'
|
||||||
|
}>({
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
currentStatus: '',
|
||||||
|
newStatus: 'available'
|
||||||
|
})
|
||||||
|
|
||||||
|
const fileList = ref<any[]>([])
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const loadData = async () => {
|
||||||
|
if (!projectId) {
|
||||||
|
console.warn('未获取到项目ID，无法加载团队成员数据')
|
||||||
|
Message.warning('未获取到项目信息，请从项目详情页面进入')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
console.log('正在加载项目团队成员数据，项目ID:', projectId)
|
||||||
|
|
||||||
|
// 构建查询参数
|
||||||
|
const queryParams: TeamMemberQuery = {
|
||||||
|
projectId: projectId,
|
||||||
|
page: pagination.current,
|
||||||
|
pageSize: pagination.pageSize,
|
||||||
|
name: searchForm.name || undefined,
|
||||||
|
position: searchForm.position || undefined,
|
||||||
|
status: searchForm.status || undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await getProjectTeamMembers(queryParams)
|
||||||
|
|
||||||
|
console.log('API响应数据:', response.data)
|
||||||
|
|
||||||
|
// 确保response.data是数组
|
||||||
|
const rawData = Array.isArray(response.data) ? response.data : [response.data]
|
||||||
|
|
||||||
|
console.log('处理后的原始数据:', rawData)
|
||||||
|
|
||||||
|
// 处理后端返回的数据，将后端字段映射到前端期望的字段
|
||||||
|
const mappedData = rawData.map((item: BackendTeamMemberResp) => {
|
||||||
|
const mappedItem: TeamMemberResp = {
|
||||||
|
id: item.memberId,
|
||||||
|
name: item.name || '',
|
||||||
|
phone: item.phone || '',
|
||||||
|
email: item.email || '',
|
||||||
|
position: item.position || '',
|
||||||
|
status: (item.status === 'ACTIVE' ? 'available' : item.status === 'BUSY' ? 'busy' : 'offline') as 'available' | 'busy' | 'offline',
|
||||||
|
joinDate: item.joinDate || '',
|
||||||
|
remark: item.remark || '',
|
||||||
|
avatar: item.userAvatar || ''
|
||||||
|
}
|
||||||
|
console.log('映射后的数据项:', mappedItem)
|
||||||
|
return mappedItem
|
||||||
|
})
|
||||||
|
|
||||||
|
dataList.value = mappedData
|
||||||
|
pagination.total = mappedData.length
|
||||||
|
|
||||||
|
console.log('团队成员数据加载完成，显示数据:', dataList.value.length, '条，总计:', pagination.total, '条')
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('团队成员数据加载失败:', error)
|
||||||
|
Message.error('团队成员数据加载失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = async () => {
|
||||||
|
pagination.current = 1
|
||||||
|
await loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
console.log('重置搜索表单')
|
||||||
|
Object.assign(searchForm, {
|
||||||
|
name: '',
|
||||||
|
position: '',
|
||||||
|
status: ''
|
||||||
|
})
|
||||||
|
pagination.current = 1
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPageChange = (page: number) => {
|
||||||
|
pagination.current = page
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPageSizeChange = (pageSize: number) => {
|
||||||
|
pagination.pageSize = pageSize
|
||||||
|
pagination.current = 1
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const openAddModal = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
resetMemberForm()
|
||||||
|
memberModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEditModal = (record: TeamMemberResp) => {
|
||||||
|
isEdit.value = true
|
||||||
|
Object.assign(memberForm, {
|
||||||
|
id: record.id,
|
||||||
|
projectId: projectId,
|
||||||
|
name: record.name,
|
||||||
|
phone: record.phone || '',
|
||||||
|
email: record.email || '',
|
||||||
|
position: record.position,
|
||||||
|
status: record.status || 'available',
|
||||||
|
joinDate: record.joinDate || '',
|
||||||
|
remark: record.remark || ''
|
||||||
|
})
|
||||||
|
memberModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveMember = async () => {
|
||||||
|
if (!memberForm.name || !memberForm.phone || !memberForm.position) {
|
||||||
|
Message.error('请填写必填项')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (isEdit.value && memberForm.id) {
|
||||||
|
// 更新团队成员
|
||||||
|
const updateData: UpdateTeamMemberForm = {
|
||||||
|
name: memberForm.name,
|
||||||
|
phone: memberForm.phone,
|
||||||
|
email: memberForm.email,
|
||||||
|
position: memberForm.position,
|
||||||
|
status: memberForm.status,
|
||||||
|
joinDate: memberForm.joinDate,
|
||||||
|
remark: memberForm.remark
|
||||||
|
}
|
||||||
|
await updateTeamMember(memberForm.id, updateData)
|
||||||
|
Message.success('更新成功')
|
||||||
|
} else {
|
||||||
|
// 创建团队成员
|
||||||
|
const createData: CreateTeamMemberForm = {
|
||||||
|
projectId: projectId,
|
||||||
|
name: memberForm.name,
|
||||||
|
phone: memberForm.phone,
|
||||||
|
email: memberForm.email,
|
||||||
|
position: memberForm.position,
|
||||||
|
status: memberForm.status,
|
||||||
|
joinDate: memberForm.joinDate,
|
||||||
|
remark: memberForm.remark
|
||||||
|
}
|
||||||
|
await createTeamMember(createData)
|
||||||
|
Message.success('添加成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
memberModalVisible.value = false
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('保存团队成员失败:', error)
|
||||||
|
Message.error(isEdit.value ? '更新失败' : '添加失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelMember = () => {
|
||||||
|
memberModalVisible.value = false
|
||||||
|
resetMemberForm()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetMemberForm = () => {
|
||||||
|
Object.assign(memberForm, {
|
||||||
|
id: undefined,
|
||||||
|
projectId: projectId,
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
position: '',
|
||||||
|
status: 'available',
|
||||||
|
joinDate: '',
|
||||||
|
remark: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const openStatusModal = (record: TeamMemberResp) => {
|
||||||
|
Object.assign(statusForm, {
|
||||||
|
id: record.id,
|
||||||
|
name: record.name,
|
||||||
|
currentStatus: record.status || 'available',
|
||||||
|
newStatus: record.status || 'available'
|
||||||
|
})
|
||||||
|
statusModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveStatus = async () => {
|
||||||
|
try {
|
||||||
|
await updateTeamMember(statusForm.id, {
|
||||||
|
status: statusForm.newStatus as 'available' | 'busy' | 'offline'
|
||||||
|
})
|
||||||
|
Message.success('状态更新成功')
|
||||||
|
statusModalVisible.value = false
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('状态更新失败:', error)
|
||||||
|
Message.error('状态更新失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelStatus = () => {
|
||||||
|
statusModalVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmDelete = (record: TeamMemberResp) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确认删除',
|
||||||
|
content: `确定要删除团队成员"${record.name}"吗？`,
|
||||||
|
onOk: async () => {
|
||||||
|
try {
|
||||||
|
await deleteTeamMembers(record.id)
|
||||||
|
Message.success('删除成功')
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error)
|
||||||
|
Message.error('删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const openImportModal = () => {
|
||||||
|
importModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const customUpload = (options: any) => {
|
||||||
|
const { file } = options
|
||||||
|
fileList.value = [file]
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmImport = async () => {
|
||||||
|
if (fileList.value.length === 0) {
|
||||||
|
Message.error('请选择要导入的文件')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const file = fileList.value[0].originFileObj
|
||||||
|
await importTeamMembers(projectId, file)
|
||||||
|
Message.success('导入成功')
|
||||||
|
importModalVisible.value = false
|
||||||
|
fileList.value = []
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('导入失败:', error)
|
||||||
|
Message.error('导入失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelImport = () => {
|
||||||
|
importModalVisible.value = false
|
||||||
|
fileList.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const downloadTemplate = async () => {
|
||||||
|
try {
|
||||||
|
const response = await downloadImportTemplate()
|
||||||
|
const blob = new Blob([response.data], {
|
||||||
|
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||||
|
})
|
||||||
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = url
|
||||||
|
link.download = '团队成员导入模板.xlsx'
|
||||||
|
link.click()
|
||||||
|
window.URL.revokeObjectURL(url)
|
||||||
|
Message.success('模板下载成功')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('模板下载失败:', error)
|
||||||
|
Message.error('模板下载失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const exportData = async () => {
|
||||||
|
try {
|
||||||
|
const queryParams: TeamMemberExportQuery = {
|
||||||
|
projectId: projectId,
|
||||||
|
name: searchForm.name || undefined,
|
||||||
|
position: searchForm.position || undefined,
|
||||||
|
status: searchForm.status || undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await exportTeamMembers(queryParams)
|
||||||
|
const blob = new Blob([response.data], {
|
||||||
|
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||||
|
})
|
||||||
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = url
|
||||||
|
link.download = `团队成员数据_${new Date().toISOString().split('T')[0]}.xlsx`
|
||||||
|
link.click()
|
||||||
|
window.URL.revokeObjectURL(url)
|
||||||
|
Message.success('导出成功')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('导出失败:', error)
|
||||||
|
Message.error('导出失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 工具方法
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
available: 'green',
|
||||||
|
busy: 'orange',
|
||||||
|
offline: 'gray'
|
||||||
|
}
|
||||||
|
return colorMap[status] || 'gray'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusText = (status: string) => {
|
||||||
|
const textMap: Record<string, string> = {
|
||||||
|
available: '可用',
|
||||||
|
busy: '忙碌',
|
||||||
|
offline: '离线'
|
||||||
|
}
|
||||||
|
return textMap[status] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生命周期
|
||||||
|
onMounted(() => {
|
||||||
|
console.log('团队成员管理页面加载，项目ID:', projectId)
|
||||||
|
if (projectId) {
|
||||||
|
loadData()
|
||||||
|
} else {
|
||||||
|
console.warn('未获取到项目ID，无法加载团队成员数据')
|
||||||
|
Message.warning('未获取到项目信息，请从项目详情页面进入')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 确保页面可以正常滚动
|
||||||
|
:deep(.gi-page-layout) {
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.gi-page-layout__body) {
|
||||||
|
height: auto !important;
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保全局滚动正常
|
||||||
|
:deep(body), :deep(html) {
|
||||||
|
overflow-y: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保页面容器可以滚动
|
||||||
|
:deep(.app-main), :deep(.main-content), :deep(.layout-content) {
|
||||||
|
overflow-y: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保表格容器可以滚动
|
||||||
|
:deep(.arco-table-container) {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
border: none;
|
||||||
|
background: #f7f8fa;
|
||||||
|
color: #4e5969;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #e5e6eb;
|
||||||
|
color: #1d2129;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.title-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1d2129;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #969fa8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-section {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.search-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
:deep(.arco-card-body) {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-form-item) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-form-item-label) {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4e5969;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-input),
|
||||||
|
:deep(.arco-select) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格区域样式
|
||||||
|
:deep(.gi-table) {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.arco-table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-table {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.remark-content {
|
||||||
|
max-width: 180px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #4e5969;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-remark {
|
||||||
|
color: #c9cdd4;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-form {
|
||||||
|
.form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4e5969;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #f53f3f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-input,
|
||||||
|
.arco-select,
|
||||||
|
.arco-textarea,
|
||||||
|
.arco-date-picker {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-form {
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4e5969;
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arco-select {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-form {
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4e5969;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.page-header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-section {
|
||||||
|
.search-card {
|
||||||
|
:deep(.arco-form) {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-form-item) {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-form {
|
||||||
|
.form-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue