Merge branch 'devlopment' of http://pms.dtyx.net:3000/wuxueyu/Industrial-image-management-system---web into devlopment
This commit is contained in:
chabai
commit
196a5d864a
|
|
@ -1,49 +1,70 @@
|
|||
import http from '@/utils/http'
|
||||
import type { EquipmentApprovalReq, EquipmentApprovalResp, EquipmentApprovalListReq } from './type'
|
||||
import type { EquipmentApprovalListReq, EquipmentApprovalResp } from './type'
|
||||
|
||||
/**
|
||||
* 设备审批管理API
|
||||
* 设备审批API
|
||||
*/
|
||||
export const equipmentApprovalApi = {
|
||||
/**
|
||||
* 分页查询待审批的设备采购申请
|
||||
*/
|
||||
getPendingApprovals: (params: EquipmentApprovalListReq) => {
|
||||
return http.get<ApiRes<PageRes<EquipmentApprovalResp>>>('/equipment/approval/pending', { params })
|
||||
getPendingApprovals(params: EquipmentApprovalListReq) {
|
||||
return http.get<EquipmentApprovalResp[]>('/equipment/approval/pending', params)
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页查询已审批的设备采购申请
|
||||
*/
|
||||
getApprovedApprovals: (params: EquipmentApprovalListReq) => {
|
||||
return http.get<ApiRes<PageRes<EquipmentApprovalResp>>>('/equipment/approval/approved', { params })
|
||||
getApprovedApprovals(params: EquipmentApprovalListReq) {
|
||||
return http.get<EquipmentApprovalResp[]>('/equipment/approval/approved', params)
|
||||
},
|
||||
|
||||
/**
|
||||
* 审批通过
|
||||
*/
|
||||
approve: (approvalId: string, data: EquipmentApprovalReq) => {
|
||||
return http.post<ApiRes<null>>(`/equipment/approval/${approvalId}/approve`, data)
|
||||
approve(approvalId: string, data: any) {
|
||||
return http.post(`/equipment/approval/${approvalId}/approve`, data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 审批拒绝
|
||||
*/
|
||||
reject: (approvalId: string, data: EquipmentApprovalReq) => {
|
||||
return http.post<ApiRes<null>>(`/equipment/approval/${approvalId}/reject`, data)
|
||||
reject(approvalId: string, data: any) {
|
||||
return http.post(`/equipment/approval/${approvalId}/reject`, data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取审批详情
|
||||
*/
|
||||
getApprovalDetail: (approvalId: string) => {
|
||||
return http.get<ApiRes<EquipmentApprovalResp>>(`/equipment/approval/${approvalId}`)
|
||||
getApprovalDetail(approvalId: string) {
|
||||
return http.get<EquipmentApprovalResp>(`/equipment/approval/${approvalId}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取审批统计信息
|
||||
*/
|
||||
getApprovalStats: () => {
|
||||
return http.get<ApiRes<unknown>>('/equipment/approval/stats')
|
||||
getApprovalStats() {
|
||||
return http.get('/equipment/approval/stats')
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交采购申请
|
||||
*/
|
||||
submitProcurementApplication(data: any) {
|
||||
return http.post('/equipment/approval/procurement/apply', data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取我的采购申请
|
||||
*/
|
||||
getMyProcurementApplications(params: EquipmentApprovalListReq) {
|
||||
return http.get<EquipmentApprovalResp[]>('/equipment/approval/procurement/my-applications', params)
|
||||
},
|
||||
|
||||
/**
|
||||
* 撤回采购申请
|
||||
*/
|
||||
withdrawProcurementApplication(approvalId: string) {
|
||||
return http.post(`/equipment/approval/procurement/${approvalId}/withdraw`)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 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
|
||||
}
|
||||
|
|
@ -74,9 +74,9 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Modal } from '@arco-design/web-vue'
|
||||
import { Modal, Notification } from '@arco-design/web-vue'
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import { onMounted, ref, nextTick } from 'vue'
|
||||
import { onMounted, ref, nextTick, onBeforeUnmount } from 'vue'
|
||||
import Message from './Message.vue'
|
||||
import SettingDrawer from './SettingDrawer.vue'
|
||||
import Search from './Search.vue'
|
||||
|
|
@ -116,29 +116,61 @@ const initWebSocket = (token: string) => {
|
|||
}
|
||||
|
||||
try {
|
||||
socket = new WebSocket(`${import.meta.env.VITE_API_WS_URL}/websocket?token=${token}`)
|
||||
const wsUrl = import.meta.env.VITE_API_WS_URL || 'ws://localhost:8888'
|
||||
console.log('正在连接WebSocket:', `${wsUrl}/websocket?token=${token}`)
|
||||
|
||||
socket = new WebSocket(`${wsUrl}/websocket?token=${token}`)
|
||||
|
||||
socket.onopen = () => {
|
||||
// console.log('WebSocket connection opened')
|
||||
console.log('WebSocket连接成功')
|
||||
}
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
console.log('收到WebSocket消息:', event.data)
|
||||
try {
|
||||
const data = JSON.parse(event.data)
|
||||
|
||||
// 处理通知消息
|
||||
if (data.type && data.title && data.content) {
|
||||
console.log('处理通知消息:', data)
|
||||
// 显示通知
|
||||
Notification.info({
|
||||
title: data.title,
|
||||
content: data.content,
|
||||
duration: 5000,
|
||||
closable: true,
|
||||
position: 'topRight'
|
||||
})
|
||||
|
||||
// 增加未读消息计数
|
||||
unreadMessageCount.value++
|
||||
} else {
|
||||
// 处理简单的数字消息（兼容旧版本）
|
||||
const count = Number.parseInt(event.data)
|
||||
if (!isNaN(count)) {
|
||||
unreadMessageCount.value = count
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析WebSocket消息失败:', error)
|
||||
// 尝试解析为数字（兼容旧版本）
|
||||
const count = Number.parseInt(event.data)
|
||||
if (!isNaN(count)) {
|
||||
unreadMessageCount.value = count
|
||||
}
|
||||
}
|
||||
|
||||
socket.onerror = () => {
|
||||
// console.error('WebSocket error:', error)
|
||||
}
|
||||
|
||||
socket.onclose = () => {
|
||||
// console.log('WebSocket connection closed')
|
||||
socket.onerror = (error) => {
|
||||
console.error('WebSocket连接错误:', error)
|
||||
}
|
||||
|
||||
socket.onclose = (event) => {
|
||||
console.log('WebSocket连接关闭:', event.code, event.reason)
|
||||
socket = null
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to create WebSocket connection:', error)
|
||||
console.error('创建WebSocket连接失败:', error)
|
||||
}
|
||||
|
||||
initTimer = null
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -7,66 +7,7 @@ export {}
|
|||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Avatar: typeof import('./../components/Avatar/index.vue')['default']
|
||||
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
|
||||
CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
|
||||
Chart: typeof import('./../components/Chart/index.vue')['default']
|
||||
ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
|
||||
CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
|
||||
CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
|
||||
DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
|
||||
DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
|
||||
FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
|
||||
GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
|
||||
GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
|
||||
GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
|
||||
GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
|
||||
GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
|
||||
GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
|
||||
GiDot: typeof import('./../components/GiDot/index.tsx')['default']
|
||||
GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
|
||||
GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
|
||||
GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
|
||||
GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
|
||||
GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
|
||||
GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
|
||||
GiOption: typeof import('./../components/GiOption/index.vue')['default']
|
||||
GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
|
||||
GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
|
||||
GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
|
||||
GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
|
||||
GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
|
||||
GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
|
||||
GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
|
||||
GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
|
||||
GiTag: typeof import('./../components/GiTag/index.tsx')['default']
|
||||
GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
|
||||
HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
|
||||
Icon403: typeof import('./../components/icons/Icon403.vue')['default']
|
||||
Icon404: typeof import('./../components/icons/Icon404.vue')['default']
|
||||
Icon500: typeof import('./../components/icons/Icon500.vue')['default']
|
||||
IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
|
||||
IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
|
||||
IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
|
||||
IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
|
||||
ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
|
||||
ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
|
||||
IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
|
||||
JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
|
||||
MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
|
||||
MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
|
||||
ParentView: typeof import('./../components/ParentView/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
|
||||
SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
|
||||
TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
|
||||
TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
|
||||
UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
|
||||
Verify: typeof import('./../components/Verify/index.vue')['default']
|
||||
VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
|
||||
VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
|
||||
WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
|
||||
YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
interface ImportMetaEnv {
|
||||
readonly VITE_API_PREFIX: string
|
||||
readonly VITE_API_BASE_URL: string
|
||||
readonly VITE_API_WS_URL: string
|
||||
readonly VITE_BASE: string
|
||||
readonly VITE_APP_SETTING: string
|
||||
readonly VITE_CLIENT_ID: string
|
||||
|
|
|
|||
|
|
@ -225,7 +225,3 @@ export default {
|
|||
requestRaw,
|
||||
download,
|
||||
}
|
||||
|
||||
export const updateContract = (contractId, contractData) => {
|
||||
return http.put(`/contract/${contractId}`, contractData)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -53,13 +53,13 @@
|
|||
<span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link @click="viewDetail(record)">详情</a-link>
|
||||
<a-link v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</a-link>
|
||||
<a-link v-if="record.contractStatus === '待审批'" @click="approveContract(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>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
|
@ -69,20 +69,37 @@
|
|||
v-model:visible="showDetailModal"
|
||||
title="合同详情"
|
||||
:width="800"
|
||||
@cancel="closeDetailModal"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { Message, Modal } from '@arco-design/web-vue'
|
||||
import type { TableColumnData } from '@arco-design/web-vue'
|
||||
import http from '@/utils/http'
|
||||
import ContractEdit from './ContractEdit.vue'
|
||||
|
||||
import ContractDetail from './ContractDetail.vue'
|
||||
import http from '@/utils/http'
|
||||
|
||||
// 接口数据类型定义
|
||||
interface ContractItem {
|
||||
|
|
@ -181,7 +198,6 @@ const tableColumns: TableColumnData[] = [
|
|||
{ title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
|
||||
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' },
|
||||
]
|
||||
|
||||
// 数据状态
|
||||
const loading = ref(false)
|
||||
const dataList = ref<ContractItem[]>([])
|
||||
|
|
@ -297,6 +313,108 @@ const exportContract = () => {
|
|||
Message.info('导出合同功能开发中...')
|
||||
}
|
||||
|
||||
// 显示合同编辑弹窗
|
||||
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 closeEditModal = () => {
|
||||
showEditModal.value = false
|
||||
selectedContractData.value = null
|
||||
editedContractData.value = null
|
||||
}
|
||||
|
||||
const handleContractDataUpdate = (data: ContractItem) => {
|
||||
editedContractData.value = data
|
||||
}
|
||||
|
||||
const handleEditSubmit = async () => {
|
||||
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)
|
||||
|
|
@ -311,10 +429,6 @@ const closeDetailModal = () => {
|
|||
selectedContractId.value = null
|
||||
}
|
||||
|
||||
const editRecord = (record: ContractItem) => {
|
||||
Message.info(`编辑合同: ${record.projectName}`)
|
||||
}
|
||||
|
||||
const approveContract = (record: ContractItem) => {
|
||||
Message.info(`审批合同: ${record.projectName}`)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -129,29 +129,18 @@ const debouncedSearch = debounce(() => {
|
|||
const search = () => {
|
||||
console.log('🔍 ApprovalSearch - 搜索按钮被点击')
|
||||
console.log('🔍 ApprovalSearch - 搜索表单数据:', searchForm)
|
||||
console.log('🔍 ApprovalSearch - 搜索表单数据类型:', typeof searchForm)
|
||||
console.log('🔍 ApprovalSearch - 搜索表单的键值对:')
|
||||
Object.entries(searchForm).forEach(([key, value]) => {
|
||||
console.log(` ${key}: ${value} (${typeof value})`)
|
||||
})
|
||||
|
||||
// 构建搜索参数
|
||||
// 构建搜索参数 - 参考设备采购功能的实现
|
||||
const searchParams: EquipmentApprovalListReq = {
|
||||
equipmentName: searchForm.equipmentName || undefined,
|
||||
applicantName: searchForm.applicantName || undefined,
|
||||
businessType: searchForm.businessType,
|
||||
approvalStatus: searchForm.approvalStatus,
|
||||
applyTimeStart: searchForm.applyTimeStart,
|
||||
applyTimeEnd: searchForm.applyTimeEnd
|
||||
businessType: searchForm.businessType || undefined,
|
||||
approvalStatus: searchForm.approvalStatus || undefined,
|
||||
applyTimeStart: searchForm.applyTimeStart || undefined,
|
||||
applyTimeEnd: searchForm.applyTimeEnd || undefined,
|
||||
}
|
||||
|
||||
console.log('🔍 ApprovalSearch - 发送的搜索参数:', searchParams)
|
||||
console.log('🔍 ApprovalSearch - 发送参数的类型:', typeof searchParams)
|
||||
console.log('🔍 ApprovalSearch - 发送参数的键值对:')
|
||||
Object.entries(searchParams).forEach(([key, value]) => {
|
||||
console.log(` ${key}: ${value} (${typeof value})`)
|
||||
})
|
||||
|
||||
emit('search', searchParams)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -458,10 +458,10 @@ const loadData = async (searchParams?: EquipmentApprovalListReq) => {
|
|||
|
||||
loading.value = true
|
||||
try {
|
||||
// 构建完整的请求参数 - 参考设备采购功能的实现
|
||||
const params: EquipmentApprovalListReq = {
|
||||
pageSize: pagination.pageSize || 10,
|
||||
page: pagination.current || 1,
|
||||
pageNum: pagination.current || 1, // 添加 pageNum 参数，以防后端期望这个名称
|
||||
pageSize: pagination.pageSize,
|
||||
page: pagination.current,
|
||||
...(searchParams || {}),
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
:title="modalTitle"
|
||||
width="800px"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
@update:visible="(value) => emit('update:visible', value)"
|
||||
:confirm-loading="submitLoading"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="procurement-application-form"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="设备名称" field="equipmentName">
|
||||
<a-input
|
||||
v-model="formData.equipmentName"
|
||||
placeholder="请输入设备名称"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="设备类型" field="equipmentType">
|
||||
<a-select
|
||||
v-model="formData.equipmentType"
|
||||
placeholder="请选择设备类型"
|
||||
allow-clear
|
||||
>
|
||||
<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-option value="测试设备">测试设备</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="设备型号" field="equipmentModel">
|
||||
<a-input
|
||||
v-model="formData.equipmentModel"
|
||||
placeholder="请输入设备型号"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="品牌" field="brand">
|
||||
<a-input
|
||||
v-model="formData.brand"
|
||||
placeholder="请输入品牌"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="供应商名称" field="supplierName">
|
||||
<a-input
|
||||
v-model="formData.supplierName"
|
||||
placeholder="请输入供应商名称"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="数量" field="quantity">
|
||||
<a-input-number
|
||||
v-model="formData.quantity"
|
||||
placeholder="请输入数量"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="预算金额" field="budgetAmount">
|
||||
<a-input-number
|
||||
v-model="formData.budgetAmount"
|
||||
placeholder="请输入预算金额"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="紧急程度" field="urgencyLevel">
|
||||
<a-select
|
||||
v-model="formData.urgencyLevel"
|
||||
placeholder="请选择紧急程度"
|
||||
allow-clear
|
||||
>
|
||||
<a-option value="LOW">低</a-option>
|
||||
<a-option value="NORMAL">普通</a-option>
|
||||
<a-option value="HIGH">高</a-option>
|
||||
<a-option value="URGENT">紧急</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="采购类型" field="procurementType">
|
||||
<a-select
|
||||
v-model="formData.procurementType"
|
||||
placeholder="请选择采购类型"
|
||||
allow-clear
|
||||
>
|
||||
<a-option value="NEW_PURCHASE">新采购</a-option>
|
||||
<a-option value="REPLACEMENT">更换</a-option>
|
||||
<a-option value="UPGRADE">升级</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="预期交付日期" field="expectedDeliveryDate">
|
||||
<a-date-picker
|
||||
v-model="formData.expectedDeliveryDate"
|
||||
placeholder="请选择预期交付日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="申请原因" field="applyReason">
|
||||
<a-textarea
|
||||
v-model="formData.applyReason"
|
||||
placeholder="请详细说明采购原因"
|
||||
:rows="4"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="技术要求" field="technicalRequirements">
|
||||
<a-textarea
|
||||
v-model="formData.technicalRequirements"
|
||||
placeholder="请描述设备的技术要求（可选）"
|
||||
:rows="3"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="业务合理性说明" field="businessJustification">
|
||||
<a-textarea
|
||||
v-model="formData.businessJustification"
|
||||
placeholder="请说明采购的业务合理性（可选）"
|
||||
:rows="3"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { equipmentApprovalApi } from '@/apis/equipment/approval'
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
equipmentData?: any
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:visible', value: boolean): void
|
||||
(e: 'success'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const modalTitle = ref('申请采购')
|
||||
const submitLoading = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
equipmentId: '', // 添加设备ID字段
|
||||
equipmentName: '',
|
||||
equipmentType: '',
|
||||
equipmentModel: '',
|
||||
brand: '',
|
||||
supplierName: '',
|
||||
quantity: 1,
|
||||
budgetAmount: undefined,
|
||||
urgencyLevel: 'NORMAL',
|
||||
procurementType: 'NEW_PURCHASE',
|
||||
expectedDeliveryDate: null,
|
||||
applyReason: '',
|
||||
technicalRequirements: '',
|
||||
businessJustification: ''
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
equipmentId: [{ required: true, message: '设备ID不能为空' }],
|
||||
equipmentName: [{ required: true, message: '请输入设备名称' }],
|
||||
equipmentType: [{ required: true, message: '请选择设备类型' }],
|
||||
quantity: [{ required: true, message: '请输入数量' }],
|
||||
budgetAmount: [{ required: true, message: '请输入预算金额' }],
|
||||
urgencyLevel: [{ required: true, message: '请选择紧急程度' }],
|
||||
procurementType: [{ required: true, message: '请选择采购类型' }],
|
||||
applyReason: [
|
||||
{ required: true, message: '请输入申请原因' },
|
||||
{
|
||||
validator: (value: string) => {
|
||||
if (!value || value.trim() === '') {
|
||||
return new Error('申请原因不能为空')
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 监听设备数据变化，填充表单
|
||||
watch(() => props.equipmentData, (newData) => {
|
||||
if (newData) {
|
||||
// 填充设备数据到表单
|
||||
Object.assign(formData, {
|
||||
equipmentId: newData.equipmentId || '', // 添加设备ID
|
||||
equipmentName: newData.equipmentName || '',
|
||||
equipmentType: newData.equipmentType || '',
|
||||
equipmentModel: newData.equipmentModel || '',
|
||||
brand: newData.brand || '',
|
||||
supplierName: newData.supplierName || '',
|
||||
quantity: newData.quantity || 1,
|
||||
budgetAmount: newData.unitPrice || undefined,
|
||||
urgencyLevel: 'NORMAL',
|
||||
procurementType: 'NEW_PURCHASE',
|
||||
expectedDeliveryDate: null,
|
||||
applyReason: '', // 申请原因需要用户填写
|
||||
technicalRequirements: '',
|
||||
businessJustification: ''
|
||||
})
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// 监听模态框显示状态
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (visible) {
|
||||
// 模态框打开时，如果有设备数据则填充，否则重置表单
|
||||
if (props.equipmentData) {
|
||||
// 设备数据会在上面的 watch 中处理
|
||||
} else {
|
||||
// 没有设备数据时重置表单
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// 手动验证 applyReason 字段
|
||||
if (!formData.applyReason || formData.applyReason.trim() === '') {
|
||||
Message.error('请输入申请原因')
|
||||
return
|
||||
}
|
||||
|
||||
await formRef.value.validate()
|
||||
submitLoading.value = true
|
||||
|
||||
const submitData = {
|
||||
...formData,
|
||||
applyReason: formData.applyReason.trim(), // 确保去除空格
|
||||
expectedDeliveryDate: formData.expectedDeliveryDate ?
|
||||
(formData.expectedDeliveryDate as any).format('YYYY-MM-DD') : null
|
||||
}
|
||||
|
||||
// 调试信息：打印提交的数据
|
||||
console.log('提交的表单数据:', submitData)
|
||||
console.log('applyReason 值:', submitData.applyReason)
|
||||
console.log('applyReason 类型:', typeof submitData.applyReason)
|
||||
console.log('applyReason 长度:', submitData.applyReason?.length)
|
||||
|
||||
await equipmentApprovalApi.submitProcurementApplication(submitData)
|
||||
|
||||
Message.success('采购申请提交成功')
|
||||
emit('success')
|
||||
handleCancel()
|
||||
} catch (error: any) {
|
||||
console.error('提交采购申请失败:', error)
|
||||
Message.error(error?.message || '提交失败')
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false)
|
||||
// 清空用户输入的数据，保留设备基本信息
|
||||
formData.equipmentId = ''
|
||||
formData.applyReason = ''
|
||||
formData.technicalRequirements = ''
|
||||
formData.businessJustification = ''
|
||||
formData.expectedDeliveryDate = null
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.procurement-application-form {
|
||||
.arco-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.arco-input,
|
||||
.arco-select,
|
||||
.arco-input-number,
|
||||
.arco-date-picker {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.arco-textarea {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -175,6 +175,19 @@
|
|||
<a-button type="text" size="small" @click="handleEdit(record)">
|
||||
编辑
|
||||
</a-button>
|
||||
<!-- 申请采购按钮 -->
|
||||
<a-button
|
||||
v-if="canApplyProcurement(record)"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleApplyProcurement(record)"
|
||||
>
|
||||
申请采购
|
||||
</a-button>
|
||||
<!-- 显示审批状态 -->
|
||||
<a-tag v-if="record.approvalStatus" :color="getApprovalStatusColor(record.approvalStatus)">
|
||||
{{ getApprovalStatusText(record.approvalStatus) }}
|
||||
</a-tag>
|
||||
<a-popconfirm
|
||||
content="确定要删除这条采购记录吗？"
|
||||
@ok="handleDelete(record)"
|
||||
|
|
@ -195,6 +208,13 @@
|
|||
:mode="modalMode"
|
||||
@success="handleModalSuccess"
|
||||
/>
|
||||
|
||||
<!-- 采购申请弹窗 -->
|
||||
<ProcurementApplicationModal
|
||||
v-model:visible="applicationModalVisible"
|
||||
:equipment-data="currentApplicationData"
|
||||
@success="handleApplicationSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -213,7 +233,9 @@ import {
|
|||
import message from '@arco-design/web-vue/es/message'
|
||||
import ProcurementModal from './components/ProcurementModal.vue'
|
||||
import ProcurementSearch from './components/ProcurementSearch.vue'
|
||||
import ProcurementApplicationModal from './components/ProcurementApplicationModal.vue'
|
||||
import { equipmentProcurementApi } from '@/apis/equipment/procurement'
|
||||
import { equipmentApprovalApi } from '@/apis/equipment/approval'
|
||||
import type { EquipmentListReq, EquipmentResp } from '@/apis/equipment/type'
|
||||
|
||||
defineOptions({ name: 'EquipmentProcurement' })
|
||||
|
|
@ -243,6 +265,10 @@ const modalVisible = ref(false)
|
|||
const currentProcurement = ref<EquipmentResp | null>(null)
|
||||
const modalMode = ref<'add' | 'edit' | 'view'>('add')
|
||||
|
||||
// 采购申请弹窗控制
|
||||
const applicationModalVisible = ref(false)
|
||||
const currentApplicationData = ref<EquipmentResp | null>(null)
|
||||
|
||||
// 表格选择
|
||||
const selectedRowKeys = ref<string[]>([])
|
||||
const rowSelection = reactive({
|
||||
|
|
@ -611,6 +637,12 @@ const handleEdit = (record: EquipmentResp) => {
|
|||
modalVisible.value = true
|
||||
}
|
||||
|
||||
// 申请采购
|
||||
const handleApplyProcurement = (record: EquipmentResp) => {
|
||||
currentApplicationData.value = { ...record }
|
||||
applicationModalVisible.value = true
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (record: EquipmentResp) => {
|
||||
try {
|
||||
|
|
@ -629,6 +661,12 @@ const handleModalSuccess = () => {
|
|||
loadData(currentSearchParams.value)
|
||||
}
|
||||
|
||||
// 采购申请成功回调
|
||||
const handleApplicationSuccess = () => {
|
||||
applicationModalVisible.value = false
|
||||
loadData(currentSearchParams.value)
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const refreshData = () => {
|
||||
loadData(currentSearchParams.value)
|
||||
|
|
@ -674,6 +712,36 @@ const getTotalAmount = () => {
|
|||
return formatPrice(total)
|
||||
}
|
||||
|
||||
// 检查是否可以申请采购
|
||||
const canApplyProcurement = (record: EquipmentResp) => {
|
||||
// 检查是否有审批状态，如果没有或者状态为待申请，则可以申请
|
||||
return !record.approvalStatus || record.approvalStatus === 'PENDING_APPLICATION'
|
||||
}
|
||||
|
||||
// 获取审批状态颜色
|
||||
const getApprovalStatusColor = (status: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
'PENDING_APPLICATION': 'blue',
|
||||
'PENDING': 'orange',
|
||||
'APPROVED': 'green',
|
||||
'REJECTED': 'red',
|
||||
'WITHDRAWN': 'gray'
|
||||
}
|
||||
return colorMap[status] || 'blue'
|
||||
}
|
||||
|
||||
// 获取审批状态文本
|
||||
const getApprovalStatusText = (status: string) => {
|
||||
const textMap: Record<string, string> = {
|
||||
'PENDING_APPLICATION': '待申请',
|
||||
'PENDING': '待审批',
|
||||
'APPROVED': '已通过',
|
||||
'REJECTED': '已拒绝',
|
||||
'WITHDRAWN': '已撤回'
|
||||
}
|
||||
return textMap[status] || '未知'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue