This commit is contained in:
chabai 2025-08-08 16:40:10 +08:00
commit 196a5d864a
16 changed files with 3453 additions and 138 deletions

View File

@ -1,49 +1,70 @@
import http from '@/utils/http' import http from '@/utils/http'
import type { EquipmentApprovalReq, EquipmentApprovalResp, EquipmentApprovalListReq } from './type' import type { EquipmentApprovalListReq, EquipmentApprovalResp } from './type'
/** /**
* API * API
*/ */
export const equipmentApprovalApi = { export const equipmentApprovalApi = {
/** /**
* *
*/ */
getPendingApprovals: (params: EquipmentApprovalListReq) => { getPendingApprovals(params: EquipmentApprovalListReq) {
return http.get<ApiRes<PageRes<EquipmentApprovalResp>>>('/equipment/approval/pending', { params }) return http.get<EquipmentApprovalResp[]>('/equipment/approval/pending', params)
}, },
/** /**
* *
*/ */
getApprovedApprovals: (params: EquipmentApprovalListReq) => { getApprovedApprovals(params: EquipmentApprovalListReq) {
return http.get<ApiRes<PageRes<EquipmentApprovalResp>>>('/equipment/approval/approved', { params }) return http.get<EquipmentApprovalResp[]>('/equipment/approval/approved', params)
}, },
/** /**
* *
*/ */
approve: (approvalId: string, data: EquipmentApprovalReq) => { approve(approvalId: string, data: any) {
return http.post<ApiRes<null>>(`/equipment/approval/${approvalId}/approve`, data) return http.post(`/equipment/approval/${approvalId}/approve`, data)
}, },
/** /**
* *
*/ */
reject: (approvalId: string, data: EquipmentApprovalReq) => { reject(approvalId: string, data: any) {
return http.post<ApiRes<null>>(`/equipment/approval/${approvalId}/reject`, data) return http.post(`/equipment/approval/${approvalId}/reject`, data)
}, },
/** /**
* *
*/ */
getApprovalDetail: (approvalId: string) => { getApprovalDetail(approvalId: string) {
return http.get<ApiRes<EquipmentApprovalResp>>(`/equipment/approval/${approvalId}`) return http.get<EquipmentApprovalResp>(`/equipment/approval/${approvalId}`)
}, },
/** /**
* *
*/ */
getApprovalStats: () => { getApprovalStats() {
return http.get<ApiRes<unknown>>('/equipment/approval/stats') 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`)
} }
} }

View File

@ -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}`)
}

View File

@ -85,4 +85,250 @@ export interface TaskQuery {
status?: string status?: string
} }
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
}

View File

@ -74,9 +74,9 @@
</template> </template>
<script setup lang="ts"> <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 { useFullscreen } from '@vueuse/core'
import { onMounted, ref, nextTick } from 'vue' import { onMounted, ref, nextTick, onBeforeUnmount } from 'vue'
import Message from './Message.vue' import Message from './Message.vue'
import SettingDrawer from './SettingDrawer.vue' import SettingDrawer from './SettingDrawer.vue'
import Search from './Search.vue' import Search from './Search.vue'
@ -116,29 +116,61 @@ const initWebSocket = (token: string) => {
} }
try { 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 = () => { socket.onopen = () => {
// console.log('WebSocket connection opened') console.log('WebSocket连接成功')
} }
socket.onmessage = (event) => { socket.onmessage = (event) => {
const count = Number.parseInt(event.data) console.log('收到WebSocket消息:', event.data)
if (!isNaN(count)) { try {
unreadMessageCount.value = count 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 = () => { socket.onerror = (error) => {
// console.error('WebSocket error:', error) console.error('WebSocket连接错误:', error)
} }
socket.onclose = () => { socket.onclose = (event) => {
// console.log('WebSocket connection closed') console.log('WebSocket连接关闭:', event.code, event.reason)
socket = null socket = null
} }
} catch (error) { } catch (error) {
console.error('Failed to create WebSocket connection:', error) console.error('创建WebSocket连接失败:', error)
} }
initTimer = null initTimer = null

View File

@ -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,
},
},
], ],
}, },

View File

@ -7,66 +7,7 @@ export {}
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { 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'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] 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']
} }
} }

1
src/types/env.d.ts vendored
View File

@ -4,6 +4,7 @@
interface ImportMetaEnv { interface ImportMetaEnv {
readonly VITE_API_PREFIX: string readonly VITE_API_PREFIX: string
readonly VITE_API_BASE_URL: string readonly VITE_API_BASE_URL: string
readonly VITE_API_WS_URL: string
readonly VITE_BASE: string readonly VITE_BASE: string
readonly VITE_APP_SETTING: string readonly VITE_APP_SETTING: string
readonly VITE_CLIENT_ID: string readonly VITE_CLIENT_ID: string

View File

@ -225,7 +225,3 @@ export default {
requestRaw, requestRaw,
download, download,
} }
export const updateContract = (contractId, contractData) => {
return http.put(`/contract/${contractId}`, contractData)
}

View File

@ -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>

View File

@ -1,25 +1,25 @@
<template> <template>
<GiPageLayout> <GiPageLayout>
<GiTable <GiTable
row-key="id" row-key="id"
title="收入合同管理" title="收入合同管理"
:data="dataList" :data="dataList"
:columns="tableColumns" :columns="tableColumns"
:loading="loading" :loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1600 }" :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
:pagination="pagination" :pagination="pagination"
@page-change="onPageChange" @page-change="onPageChange"
@page-size-change="onPageSizeChange" @page-size-change="onPageSizeChange"
@refresh="search" @refresh="search"
> >
<template #top> <template #top>
<GiForm <GiForm
v-model="searchForm" v-model="searchForm"
search search
:columns="queryFormColumns" :columns="queryFormColumns"
size="medium" size="medium"
@search="search" @search="search"
@reset="reset" @reset="reset"
/> />
</template> </template>
@ -53,36 +53,53 @@
<span class="font-medium text-blue-600">{{ (record.receivedAmount || 0).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 v-if="record.contractStatus === '未确认'" @click="editRecord(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 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 <a-modal
v-model:visible="showDetailModal" v-model:visible="showDetailModal"
title="合同详情" title="合同详情"
:width="800" :width="800"
@cancel="closeDetailModal" :footer="false"
:footer="false" @cancel="closeDetailModal"
> >
<ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" /> <ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
</a-modal> </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, Modal } 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 http from '@/utils/http' import ContractEdit from './ContractEdit.vue'
import ContractDetail from './ContractDetail.vue' import ContractDetail from './ContractDetail.vue'
import http from '@/utils/http'
// //
interface ContractItem { interface ContractItem {
@ -181,7 +198,6 @@ const tableColumns: TableColumnData[] = [
{ title: '备注', dataIndex: 'notes', 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<ContractItem[]>([]) const dataList = ref<ContractItem[]>([])
@ -297,6 +313,108 @@ const exportContract = () => {
Message.info('导出合同功能开发中...') 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 showDetailModal = ref(false)
const selectedContractId = ref<string | null>(null) const selectedContractId = ref<string | null>(null)
@ -311,10 +429,6 @@ const closeDetailModal = () => {
selectedContractId.value = null selectedContractId.value = null
} }
const editRecord = (record: ContractItem) => {
Message.info(`编辑合同: ${record.projectName}`)
}
const approveContract = (record: ContractItem) => { const approveContract = (record: ContractItem) => {
Message.info(`审批合同: ${record.projectName}`) Message.info(`审批合同: ${record.projectName}`)
} }

View File

@ -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

View File

@ -129,29 +129,18 @@ const debouncedSearch = debounce(() => {
const search = () => { const search = () => {
console.log('🔍 ApprovalSearch - 搜索按钮被点击') console.log('🔍 ApprovalSearch - 搜索按钮被点击')
console.log('🔍 ApprovalSearch - 搜索表单数据:', searchForm) 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 = { const searchParams: EquipmentApprovalListReq = {
equipmentName: searchForm.equipmentName || undefined, equipmentName: searchForm.equipmentName || undefined,
applicantName: searchForm.applicantName || undefined, applicantName: searchForm.applicantName || undefined,
businessType: searchForm.businessType, businessType: searchForm.businessType || undefined,
approvalStatus: searchForm.approvalStatus, approvalStatus: searchForm.approvalStatus || undefined,
applyTimeStart: searchForm.applyTimeStart, applyTimeStart: searchForm.applyTimeStart || undefined,
applyTimeEnd: searchForm.applyTimeEnd applyTimeEnd: searchForm.applyTimeEnd || undefined,
} }
console.log('🔍 ApprovalSearch - 发送的搜索参数:', searchParams) 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) emit('search', searchParams)
} }

View File

@ -458,10 +458,10 @@ const loadData = async (searchParams?: EquipmentApprovalListReq) => {
loading.value = true loading.value = true
try { try {
// -
const params: EquipmentApprovalListReq = { const params: EquipmentApprovalListReq = {
pageSize: pagination.pageSize || 10, pageSize: pagination.pageSize,
page: pagination.current || 1, page: pagination.current,
pageNum: pagination.current || 1, // pageNum
...(searchParams || {}), ...(searchParams || {}),
} }

View File

@ -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>

View File

@ -175,6 +175,19 @@
<a-button type="text" size="small" @click="handleEdit(record)"> <a-button type="text" size="small" @click="handleEdit(record)">
编辑 编辑
</a-button> </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 <a-popconfirm
content="确定要删除这条采购记录吗?" content="确定要删除这条采购记录吗?"
@ok="handleDelete(record)" @ok="handleDelete(record)"
@ -195,6 +208,13 @@
:mode="modalMode" :mode="modalMode"
@success="handleModalSuccess" @success="handleModalSuccess"
/> />
<!-- 采购申请弹窗 -->
<ProcurementApplicationModal
v-model:visible="applicationModalVisible"
:equipment-data="currentApplicationData"
@success="handleApplicationSuccess"
/>
</div> </div>
</template> </template>
@ -213,7 +233,9 @@ import {
import message from '@arco-design/web-vue/es/message' import message from '@arco-design/web-vue/es/message'
import ProcurementModal from './components/ProcurementModal.vue' import ProcurementModal from './components/ProcurementModal.vue'
import ProcurementSearch from './components/ProcurementSearch.vue' import ProcurementSearch from './components/ProcurementSearch.vue'
import ProcurementApplicationModal from './components/ProcurementApplicationModal.vue'
import { equipmentProcurementApi } from '@/apis/equipment/procurement' import { equipmentProcurementApi } from '@/apis/equipment/procurement'
import { equipmentApprovalApi } from '@/apis/equipment/approval'
import type { EquipmentListReq, EquipmentResp } from '@/apis/equipment/type' import type { EquipmentListReq, EquipmentResp } from '@/apis/equipment/type'
defineOptions({ name: 'EquipmentProcurement' }) defineOptions({ name: 'EquipmentProcurement' })
@ -243,6 +265,10 @@ const modalVisible = ref(false)
const currentProcurement = ref<EquipmentResp | null>(null) const currentProcurement = ref<EquipmentResp | null>(null)
const modalMode = ref<'add' | 'edit' | 'view'>('add') const modalMode = ref<'add' | 'edit' | 'view'>('add')
//
const applicationModalVisible = ref(false)
const currentApplicationData = ref<EquipmentResp | null>(null)
// //
const selectedRowKeys = ref<string[]>([]) const selectedRowKeys = ref<string[]>([])
const rowSelection = reactive({ const rowSelection = reactive({
@ -611,6 +637,12 @@ const handleEdit = (record: EquipmentResp) => {
modalVisible.value = true modalVisible.value = true
} }
//
const handleApplyProcurement = (record: EquipmentResp) => {
currentApplicationData.value = { ...record }
applicationModalVisible.value = true
}
// //
const handleDelete = async (record: EquipmentResp) => { const handleDelete = async (record: EquipmentResp) => {
try { try {
@ -629,6 +661,12 @@ const handleModalSuccess = () => {
loadData(currentSearchParams.value) loadData(currentSearchParams.value)
} }
//
const handleApplicationSuccess = () => {
applicationModalVisible.value = false
loadData(currentSearchParams.value)
}
// //
const refreshData = () => { const refreshData = () => {
loadData(currentSearchParams.value) loadData(currentSearchParams.value)
@ -674,6 +712,36 @@ const getTotalAmount = () => {
return formatPrice(total) 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(() => { onMounted(() => {
loadData() loadData()
}) })