372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<GiTable
|
|
row-key="id"
|
|
title="项目管理"
|
|
:data="dataList"
|
|
:columns="tableColumns"
|
|
:loading="loading"
|
|
:scroll="{ x: '100%', y: '100%', minWidth: 1900 }"
|
|
:pagination="pagination"
|
|
@page-change="onPageChange"
|
|
@page-size-change="onPageSizeChange"
|
|
@refresh="search"
|
|
>
|
|
<template #top>
|
|
<GiForm
|
|
v-model="searchForm"
|
|
search
|
|
:columns="queryFormColumns"
|
|
size="medium"
|
|
@search="search"
|
|
@reset="reset"
|
|
/>
|
|
</template>
|
|
|
|
<template #toolbar-left>
|
|
<a-space>
|
|
<a-button type="primary" @click="openProjectModal">
|
|
<template #icon><icon-plus /></template>
|
|
<template #default>新建项目</template>
|
|
</a-button>
|
|
<a-button @click="batchAssign">
|
|
<template #icon><icon-user-add /></template>
|
|
<template #default>批量分配</template>
|
|
</a-button>
|
|
<a-button @click="exportProjects">
|
|
<template #icon><icon-download /></template>
|
|
<template #default>导出项目</template>
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
|
|
<!-- 项目状态 -->
|
|
<template #status="{ record }">
|
|
<a-tag :color="getStatusColor(record.status)">
|
|
{{ getStatusText(record.status) }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<!-- 项目进度 -->
|
|
<template #progress="{ record }">
|
|
<a-progress
|
|
:percent="record.progress"
|
|
:color="getProgressColor(record.progress)"
|
|
size="small"
|
|
:show-text="false"
|
|
/>
|
|
<span class="ml-2">{{ record.progress }}%</span>
|
|
</template>
|
|
|
|
<!-- 预算执行情况 -->
|
|
<template #budgetExecution="{ record }">
|
|
<div class="text-sm">
|
|
<div class="font-medium text-blue-600">预算：￥{{ record.totalBudget.toLocaleString() }}万</div>
|
|
<div class="text-green-600">已用：￥{{ record.usedBudget.toLocaleString() }}万</div>
|
|
<div class="text-gray-500">余额：￥{{ (record.totalBudget - record.usedBudget).toLocaleString() }}万</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 团队成员 -->
|
|
<template #team="{ record }">
|
|
<a-avatar-group size="small" :max-count="3">
|
|
<a-avatar v-for="member in record.team" :key="member.id" :title="member.name">
|
|
{{ member.name.substring(0, 1) }}
|
|
</a-avatar>
|
|
</a-avatar-group>
|
|
</template>
|
|
|
|
<!-- 优先级 -->
|
|
<template #priority="{ record }">
|
|
<a-tag :color="getPriorityColor(record.priority)">
|
|
{{ record.priority }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<!-- 操作列 -->
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-link @click="viewDetail(record)">详情</a-link>
|
|
<a-link @click="editProject(record)">编辑</a-link>
|
|
<a-link @click="viewProgress(record)">进度</a-link>
|
|
<a-link @click="viewBudget(record)">预算</a-link>
|
|
<a-link @click="viewTeam(record)">团队</a-link>
|
|
</a-space>
|
|
</template>
|
|
</GiTable>
|
|
</GiPageLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { Message } from '@arco-design/web-vue'
|
|
import type { TableColumnData } from '@arco-design/web-vue'
|
|
|
|
// 搜索表单
|
|
const searchForm = reactive({
|
|
projectName: '',
|
|
projectCode: '',
|
|
status: '',
|
|
projectManager: '',
|
|
priority: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
|
|
// 查询条件配置
|
|
const queryFormColumns = [
|
|
{
|
|
field: 'projectName',
|
|
label: '项目名称',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入项目名称'
|
|
}
|
|
},
|
|
{
|
|
field: 'status',
|
|
label: '项目状态',
|
|
type: 'select' as const,
|
|
props: {
|
|
placeholder: '请选择项目状态',
|
|
options: [
|
|
{ label: '未开始', value: 'not_started' },
|
|
{ label: '进行中', value: 'in_progress' },
|
|
{ label: '已暂停', value: 'paused' },
|
|
{ label: '已完成', value: 'completed' },
|
|
{ label: '已取消', value: 'cancelled' }
|
|
]
|
|
}
|
|
},
|
|
{
|
|
field: 'priority',
|
|
label: '优先级',
|
|
type: 'select' as const,
|
|
props: {
|
|
placeholder: '请选择优先级',
|
|
options: [
|
|
{ label: '高', value: '高' },
|
|
{ label: '中', value: '中' },
|
|
{ label: '低', value: '低' }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
|
|
// 表格列配置
|
|
const tableColumns: TableColumnData[] = [
|
|
{ title: '项目编号', dataIndex: 'projectCode', width: 150 },
|
|
{ title: '项目名称', dataIndex: 'projectName', width: 300, ellipsis: true, tooltip: true },
|
|
{ title: '客户', dataIndex: 'client', width: 200, ellipsis: true, tooltip: true },
|
|
{ title: '项目经理', dataIndex: 'projectManager', width: 100 },
|
|
{ title: '开始时间', dataIndex: 'startDate', width: 120 },
|
|
{ title: '计划完成', dataIndex: 'plannedEndDate', width: 120 },
|
|
{ title: '实际完成', dataIndex: 'actualEndDate', width: 120 },
|
|
{ title: '项目状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
|
{ title: '进度', dataIndex: 'progress', slotName: 'progress', width: 150 },
|
|
{ title: '预算执行', dataIndex: 'budgetExecution', slotName: 'budgetExecution', width: 180 },
|
|
{ title: '团队成员', dataIndex: 'team', slotName: 'team', width: 120 },
|
|
{ title: '优先级', dataIndex: 'priority', slotName: 'priority', width: 80 },
|
|
{ title: '风险等级', dataIndex: 'riskLevel', width: 100 },
|
|
{ title: '质量得分', dataIndex: 'qualityScore', width: 100 },
|
|
{ title: '操作', slotName: 'action', width: 300, fixed: 'right' }
|
|
]
|
|
|
|
// 数据状态
|
|
const loading = ref(false)
|
|
const dataList = ref([
|
|
{
|
|
id: 1,
|
|
projectCode: 'PM2024001',
|
|
projectName: '华能新能源风电场叶片检测服务项目',
|
|
client: '华能新能源股份有限公司',
|
|
projectManager: '张项目经理',
|
|
startDate: '2024-03-01',
|
|
plannedEndDate: '2024-04-30',
|
|
actualEndDate: '',
|
|
status: 'in_progress',
|
|
progress: 65,
|
|
totalBudget: 320,
|
|
usedBudget: 192,
|
|
team: [
|
|
{ id: 1, name: '张项目经理' },
|
|
{ id: 2, name: '李技术员' },
|
|
{ id: 3, name: '王检测员' },
|
|
{ id: 4, name: '赵质量员' }
|
|
],
|
|
priority: '高',
|
|
riskLevel: '中风险',
|
|
qualityScore: 92
|
|
},
|
|
{
|
|
id: 2,
|
|
projectCode: 'PM2024002',
|
|
projectName: '大唐风电场防雷检测项目',
|
|
client: '大唐新能源股份有限公司',
|
|
projectManager: '王项目经理',
|
|
startDate: '2024-03-05',
|
|
plannedEndDate: '2024-04-20',
|
|
actualEndDate: '',
|
|
status: 'in_progress',
|
|
progress: 45,
|
|
totalBudget: 268,
|
|
usedBudget: 107,
|
|
team: [
|
|
{ id: 1, name: '王项目经理' },
|
|
{ id: 2, name: '陈技术员' },
|
|
{ id: 3, name: '刘检测员' }
|
|
],
|
|
priority: '中',
|
|
riskLevel: '低风险',
|
|
qualityScore: 88
|
|
},
|
|
{
|
|
id: 3,
|
|
projectCode: 'PM2024003',
|
|
projectName: '中广核风电场设备维护服务项目',
|
|
client: '中广核新能源投资有限公司',
|
|
projectManager: '刘项目经理',
|
|
startDate: '2024-01-20',
|
|
plannedEndDate: '2024-01-31',
|
|
actualEndDate: '2024-01-31',
|
|
status: 'completed',
|
|
progress: 100,
|
|
totalBudget: 450,
|
|
usedBudget: 445,
|
|
team: [
|
|
{ id: 1, name: '刘项目经理' },
|
|
{ id: 2, name: '孙技术员' },
|
|
{ id: 3, name: '周检测员' },
|
|
{ id: 4, name: '吴质量员' },
|
|
{ id: 5, name: '郑安全员' }
|
|
],
|
|
priority: '高',
|
|
riskLevel: '低风险',
|
|
qualityScore: 95
|
|
}
|
|
])
|
|
|
|
const pagination = reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 3,
|
|
showTotal: true,
|
|
showPageSize: true
|
|
})
|
|
|
|
// 获取状态颜色
|
|
const getStatusColor = (status: string) => {
|
|
const colorMap: Record<string, string> = {
|
|
'not_started': 'gray',
|
|
'in_progress': 'blue',
|
|
'paused': 'orange',
|
|
'completed': 'green',
|
|
'cancelled': 'red'
|
|
}
|
|
return colorMap[status] || 'gray'
|
|
}
|
|
|
|
// 获取状态文本
|
|
const getStatusText = (status: string) => {
|
|
const textMap: Record<string, string> = {
|
|
'not_started': '未开始',
|
|
'in_progress': '进行中',
|
|
'paused': '已暂停',
|
|
'completed': '已完成',
|
|
'cancelled': '已取消'
|
|
}
|
|
return textMap[status] || status
|
|
}
|
|
|
|
// 获取进度颜色
|
|
const getProgressColor = (progress: number) => {
|
|
if (progress >= 80) return '#52c41a'
|
|
if (progress >= 60) return '#1890ff'
|
|
if (progress >= 40) return '#faad14'
|
|
return '#ff4d4f'
|
|
}
|
|
|
|
// 获取优先级颜色
|
|
const getPriorityColor = (priority: string) => {
|
|
const colorMap: Record<string, string> = {
|
|
'高': 'red',
|
|
'中': 'orange',
|
|
'低': 'blue'
|
|
}
|
|
return colorMap[priority] || 'gray'
|
|
}
|
|
|
|
// 搜索和重置
|
|
const search = async () => {
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
const reset = () => {
|
|
Object.assign(searchForm, {
|
|
projectName: '',
|
|
projectCode: '',
|
|
status: '',
|
|
projectManager: '',
|
|
priority: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
pagination.current = 1
|
|
search()
|
|
}
|
|
|
|
// 分页处理
|
|
const onPageChange = (page: number) => {
|
|
searchForm.page = page
|
|
pagination.current = page
|
|
search()
|
|
}
|
|
|
|
const onPageSizeChange = (size: number) => {
|
|
searchForm.size = size
|
|
searchForm.page = 1
|
|
pagination.pageSize = size
|
|
pagination.current = 1
|
|
search()
|
|
}
|
|
|
|
// 操作方法
|
|
const openProjectModal = () => {
|
|
Message.info('新建项目功能开发中...')
|
|
}
|
|
|
|
const batchAssign = () => {
|
|
Message.info('批量分配功能开发中...')
|
|
}
|
|
|
|
const exportProjects = () => {
|
|
Message.info('导出项目功能开发中...')
|
|
}
|
|
|
|
const viewDetail = (record: any) => {
|
|
Message.info(`查看项目详情: ${record.projectName}`)
|
|
}
|
|
|
|
const editProject = (record: any) => {
|
|
Message.info(`编辑项目: ${record.projectName}`)
|
|
}
|
|
|
|
const viewProgress = (record: any) => {
|
|
Message.info(`查看项目进度: ${record.projectName}`)
|
|
}
|
|
|
|
const viewBudget = (record: any) => {
|
|
Message.info(`查看项目预算: ${record.projectName}`)
|
|
}
|
|
|
|
const viewTeam = (record: any) => {
|
|
Message.info(`查看项目团队: ${record.projectName}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
search()
|
|
})
|
|
</script> |