613 lines
18 KiB
Vue
613 lines
18 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<template #header>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<a-button type="text" size="small" @click="goBack">
|
|
<template #icon><icon-arrow-left /></template>
|
|
</a-button>
|
|
<h2 class="ml-2">{{ projectTitle }}</h2>
|
|
<a-tag class="ml-2" :color="getStatusColor(projectData.status)" v-if="projectData.status">{{
|
|
projectData.status
|
|
}}</a-tag>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<a-button v-permission="['project:update']" type="primary" class="mr-2" @click="editProject">
|
|
<template #icon><icon-edit /></template>编辑项目
|
|
</a-button>
|
|
<a-button v-permission="['project:delete']" status="danger" @click="confirmDelete">
|
|
<template #icon><icon-delete /></template>删除项目
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<a-tabs default-active-key="1">
|
|
<a-tab-pane key="1" title="详细信息">
|
|
<a-card class="general-card" title="项目基本信息">
|
|
<a-descriptions :data="projectInfos" layout="horizontal" bordered column="3" />
|
|
|
|
<a-divider />
|
|
|
|
<div class="card-header">
|
|
<div class="card-title">项目收支情况</div>
|
|
</div>
|
|
|
|
<div class="finance-cards grid grid-cols-3 gap-4 mb-6">
|
|
<a-card class="finance-card">
|
|
<div class="finance-title">利润</div>
|
|
<div class="finance-amount" :class="{ 'text-danger': finance.profit < 0 }">{{ finance.profit.toFixed(2) }}
|
|
</div>
|
|
</a-card>
|
|
<a-card class="finance-card">
|
|
<div class="finance-title">收入</div>
|
|
<div class="finance-amount text-success">{{ finance.income.toFixed(2) }}</div>
|
|
</a-card>
|
|
<a-card class="finance-card">
|
|
<div class="finance-title">支出</div>
|
|
<div class="finance-amount text-warning">{{ finance.expense.toFixed(2) }}</div>
|
|
</a-card>
|
|
</div>
|
|
|
|
<a-descriptions title="合同金额" :data="contractInfos" layout="horizontal" bordered />
|
|
</a-card>
|
|
</a-tab-pane>
|
|
|
|
<a-tab-pane key="2" title="执行情况">
|
|
<a-card class="general-card" title="项目进度跟踪">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex-1">
|
|
<h3>项目进度: {{ projectData.progress || 0 }}%</h3>
|
|
<a-progress :percent="projectData.progress || 0" />
|
|
</div>
|
|
<div>
|
|
<a-button type="primary" class="ml-2" @click="openAddTaskModal">
|
|
<template #icon><icon-plus /></template>新建任务
|
|
</a-button>
|
|
<a-button type="outline" class="ml-2" @click="openAddTaskGroupModal">
|
|
<template #icon><icon-plus /></template>新增任务组
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
|
|
<a-card :bordered="false" class="mt-4">
|
|
<a-row :gutter="16" class="task-container">
|
|
<a-col :span="6" v-for="(column, index) in taskColumns" :key="index">
|
|
<div class="task-column">
|
|
<div class="task-column-header" :class="getTaskColumnHeaderClass(column.status)">
|
|
<span class="column-title">{{ column.title }}</span>
|
|
<a-tag>{{ column.tasks.length }}</a-tag>
|
|
</div>
|
|
|
|
<div class="task-list">
|
|
<div v-for="task in column.tasks" :key="task.id" class="task-card" @click="openTaskDetail(task)">
|
|
<div class="task-card-title">{{ task.taskName }}</div>
|
|
<div class="task-card-desc text-gray-500 text-xs mt-1">{{ task.description || '暂无描述' }}</div>
|
|
<div class="task-card-footer flex items-center justify-between mt-2">
|
|
<div class="flex items-center">
|
|
<icon-calendar class="mr-1 text-gray-500" />
|
|
<span class="text-xs">{{ formatDate(task.taskPeriod?.[0]) }} - {{
|
|
formatDate(task.taskPeriod?.[1])
|
|
}}</span>
|
|
</div>
|
|
<div class="text-xs">
|
|
<a-progress :percent="task.progress" size="small" />
|
|
</div>
|
|
</div>
|
|
<div class="task-card-members mt-2">
|
|
<a-avatar :size="24" v-for="(user, idx) in task.participants?.slice(0, 3)" :key="idx">{{
|
|
user.substring(0, 1) }}</a-avatar>
|
|
<a-avatar :size="24" v-if="task.participants?.length > 3">+{{ task.participants.length - 3
|
|
}}</a-avatar>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="add-task-placeholder" @click="handleAddTaskClick(column.status)">
|
|
<icon-plus />
|
|
<span>添加任务</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</a-card>
|
|
</a-tab-pane>
|
|
|
|
<a-tab-pane key="3" title="附件">
|
|
<a-card class="general-card" title="项目附件">
|
|
<div class="attachment-section">
|
|
<a-upload list-type="picture-card" :file-list="attachments" @change="handleAttachmentChange">
|
|
<template #upload-button>
|
|
<div class="upload-button-content">
|
|
<icon-plus />
|
|
<div class="mt-1">上传附件</div>
|
|
</div>
|
|
</template>
|
|
</a-upload>
|
|
</div>
|
|
</a-card>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
|
|
<!-- 新增任务弹窗 -->
|
|
<a-modal v-model:visible="addTaskModalVisible" title="新增任务" @cancel="resetTaskForm" @before-ok="handleTaskSubmit">
|
|
<a-form ref="taskFormRef" :model="taskForm" label-position="left" :label-col-props="{ span: 6 }"
|
|
:wrapper-col-props="{ span: 18 }">
|
|
<a-form-item field="taskName" label="任务名称" required>
|
|
<a-input v-model="taskForm.taskName" placeholder="请输入" />
|
|
</a-form-item>
|
|
<a-form-item field="taskCode" label="任务编号" required>
|
|
<a-input v-model="taskForm.taskCode" placeholder="请输入" />
|
|
</a-form-item>
|
|
<a-form-item field="responsiblePerson" label="负责人" required>
|
|
<a-select v-model="taskForm.responsiblePerson" placeholder="请选择">
|
|
<a-option value="请选择">请选择</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item field="participants" label="参与人">
|
|
<a-select v-model="taskForm.participants" multiple placeholder="请选择">
|
|
<a-option value="全部员工">全部员工</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item field="taskPeriod" label="任务计划周期" required>
|
|
<a-range-picker v-model="taskForm.taskPeriod" style="width: 100%" />
|
|
</a-form-item>
|
|
<a-form-item field="plannedHours" label="计划工时" required>
|
|
<a-input-number v-model="taskForm.plannedHours" style="width: 100%" />
|
|
</a-form-item>
|
|
<a-form-item field="description" label="备注说明">
|
|
<a-textarea v-model="taskForm.description" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- 新增任务组弹窗 -->
|
|
<a-modal v-model:visible="addTaskGroupModalVisible" title="新增任务组" @cancel="resetTaskGroupForm"
|
|
@before-ok="handleTaskGroupSubmit">
|
|
<a-form ref="taskGroupFormRef" :model="taskGroupForm" label-position="left" :label-col-props="{ span: 6 }"
|
|
:wrapper-col-props="{ span: 18 }">
|
|
<a-form-item field="groupName" label="组名称" required>
|
|
<a-input v-model="taskGroupForm.groupName" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- 任务详情弹窗 -->
|
|
<a-modal v-model:visible="taskDetailModalVisible" title="任务详情" @cancel="closeTaskDetail">
|
|
<div v-if="currentTask">
|
|
<a-descriptions :data="taskDetailInfos" layout="horizontal" bordered />
|
|
|
|
<div class="mt-4">
|
|
<h4>任务进度</h4>
|
|
<a-progress :percent="currentTask.progress || 0" />
|
|
|
|
<a-form class="mt-4">
|
|
<a-form-item label="更新进度">
|
|
<a-input-number v-model="updateProgress" :min="0" :max="100" style="width: 100%" />
|
|
</a-form-item>
|
|
<a-button type="primary" @click="submitProgressUpdate">更新</a-button>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</GiPageLayout>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, computed, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { Message, Modal } from '@arco-design/web-vue'
|
|
import { getProject, deleteProject } from '@/apis/project'
|
|
import { addTask, addTaskGroup, listTask, updateTaskProgress } from '@/apis/project/task'
|
|
import dayjs from 'dayjs'
|
|
|
|
defineOptions({ name: 'ProjectDetail' })
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const projectId = computed(() => Number(route.params.id))
|
|
const projectData = ref<any>({})
|
|
const attachments = ref([])
|
|
const taskFormRef = ref()
|
|
const taskGroupFormRef = ref()
|
|
const loading = ref(false)
|
|
const addTaskModalVisible = ref(false)
|
|
const addTaskGroupModalVisible = ref(false)
|
|
const taskDetailModalVisible = ref(false)
|
|
const currentTask = ref<any>(null)
|
|
const updateProgress = ref(0)
|
|
const initialTaskStatus = ref('')
|
|
|
|
// 任务看板列
|
|
const taskColumns = ref([
|
|
{ title: '计划中', status: '计划中', tasks: [] as any[] },
|
|
{ title: '正在做', status: '正在做', tasks: [] as any[] },
|
|
{ title: '待复核', status: '待复核', tasks: [] as any[] },
|
|
{ title: '已完成', status: '已完成', tasks: [] as any[] },
|
|
{ title: '其他', status: '其他', tasks: [] as any[] }
|
|
])
|
|
|
|
const taskForm = reactive({
|
|
taskName: '',
|
|
taskCode: '',
|
|
projectId: projectId.value,
|
|
responsiblePerson: '',
|
|
participants: [] as string[],
|
|
taskPeriod: [] as string[],
|
|
plannedHours: 1,
|
|
status: '',
|
|
description: ''
|
|
})
|
|
|
|
const taskGroupForm = reactive({
|
|
groupName: '',
|
|
projectId: projectId.value
|
|
})
|
|
|
|
const finance = reactive({
|
|
profit: -6160.84,
|
|
income: 0.00,
|
|
expense: 6160.84
|
|
})
|
|
|
|
const projectTitle = computed(() => {
|
|
return projectData.value?.projectName || '项目详情'
|
|
})
|
|
|
|
const projectInfos = computed(() => [
|
|
{ label: '项目编号', value: projectData.value?.projectCode },
|
|
{ label: '项目负责人', value: projectData.value?.projectManager },
|
|
{ label: '参与人', value: projectData.value?.projectStaff?.join(', ') },
|
|
{ label: '项目周期', value: projectData.value?.projectPeriod ? `${projectData.value.projectPeriod[0]} 至 ${projectData.value.projectPeriod[1]}` : '' },
|
|
{ label: '客户', value: projectData.value?.commissionUnit },
|
|
{ label: '备注', value: projectData.value?.projectIntro || '无' }
|
|
])
|
|
|
|
const contractInfos = computed(() => [
|
|
{ label: '合同金额', value: '0.00' },
|
|
{ label: '结算金额', value: '0.00' },
|
|
{ label: '实收金额', value: '0.00' },
|
|
{ label: '开票金额', value: '0.00' }
|
|
])
|
|
|
|
const taskDetailInfos = computed(() => {
|
|
if (!currentTask.value) return []
|
|
|
|
return [
|
|
{ label: '任务名称', value: currentTask.value.taskName },
|
|
{ label: '任务编号', value: currentTask.value.taskCode },
|
|
{ label: '负责人', value: currentTask.value.responsiblePerson },
|
|
{ label: '参与人', value: currentTask.value.participants?.join(', ') },
|
|
{ label: '任务周期', value: currentTask.value.taskPeriod ? `${formatDate(currentTask.value.taskPeriod[0])} 至 ${formatDate(currentTask.value.taskPeriod[1])}` : '' },
|
|
{ label: '计划工时', value: `${currentTask.value.plannedHours || 0} 小时` },
|
|
{ label: '状态', value: currentTask.value.status },
|
|
{ label: '描述', value: currentTask.value.description || '无' }
|
|
]
|
|
})
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case '施工中':
|
|
return 'blue'
|
|
case '已完成':
|
|
return 'green'
|
|
case '未开始':
|
|
return 'orange'
|
|
default:
|
|
return 'gray'
|
|
}
|
|
}
|
|
|
|
const getTaskColumnHeaderClass = (status: string) => {
|
|
switch (status) {
|
|
case '计划中':
|
|
return 'bg-gray-100'
|
|
case '正在做':
|
|
return 'bg-blue-50'
|
|
case '待复核':
|
|
return 'bg-orange-50'
|
|
case '已完成':
|
|
return 'bg-green-50'
|
|
default:
|
|
return 'bg-gray-50'
|
|
}
|
|
}
|
|
|
|
const formatDate = (date: string) => {
|
|
if (!date) return ''
|
|
return dayjs(date).format('YYYY-MM-DD')
|
|
}
|
|
|
|
const fetchProjectData = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await getProject(projectId.value)
|
|
projectData.value = res.data
|
|
} catch (error) {
|
|
console.error(error)
|
|
Message.error('获取项目详情失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const fetchTaskData = async () => {
|
|
try {
|
|
const res = await listTask({
|
|
projectId: projectId.value,
|
|
page: 1,
|
|
size: 100
|
|
})
|
|
|
|
// 重置任务列表
|
|
taskColumns.value.forEach(column => {
|
|
column.tasks = []
|
|
})
|
|
|
|
const tasks = res.data?.list || []
|
|
|
|
// 分配任务到对应的列
|
|
tasks.forEach((task: any) => {
|
|
const column = taskColumns.value.find(col => col.status === task.status)
|
|
if (column) {
|
|
column.tasks.push(task)
|
|
} else {
|
|
taskColumns.value.find(col => col.status === '其他')?.tasks.push(task)
|
|
}
|
|
})
|
|
} catch (error) {
|
|
console.error(error)
|
|
Message.error('获取任务数据失败')
|
|
}
|
|
}
|
|
|
|
const goBack = () => {
|
|
router.push('/project-management/legacy/list')
|
|
}
|
|
|
|
const editProject = () => {
|
|
Message.info('编辑项目功能开发中')
|
|
}
|
|
|
|
const confirmDelete = () => {
|
|
Modal.warning({
|
|
title: '确认删除',
|
|
content: `确定要删除项目"${projectData.value?.projectName}"吗？`,
|
|
onOk: () => deleteProjectItem(),
|
|
})
|
|
}
|
|
|
|
const deleteProjectItem = async () => {
|
|
try {
|
|
await deleteProject(projectId.value)
|
|
Message.success('删除成功')
|
|
router.push('/project-management/legacy/list')
|
|
} catch (error) {
|
|
console.error(error)
|
|
Message.error('删除失败')
|
|
}
|
|
}
|
|
|
|
const handleAttachmentChange = (files: any) => {
|
|
attachments.value = files
|
|
}
|
|
|
|
const resetTaskForm = () => {
|
|
taskFormRef.value?.resetFields()
|
|
taskForm.status = initialTaskStatus.value
|
|
}
|
|
|
|
const resetTaskGroupForm = () => {
|
|
taskGroupFormRef.value?.resetFields()
|
|
}
|
|
|
|
// 添加任务的函数，接受状态参数
|
|
const openAddTaskModal = (status: string = '计划中') => {
|
|
initialTaskStatus.value = status
|
|
taskForm.status = status
|
|
taskForm.projectId = projectId.value
|
|
addTaskModalVisible.value = true
|
|
}
|
|
|
|
// 作为点击事件的处理函数
|
|
const handleAddTaskClick = (status: string) => {
|
|
return (event: MouseEvent) => {
|
|
event.preventDefault()
|
|
openAddTaskModal(status)
|
|
}
|
|
}
|
|
|
|
const openAddTaskGroupModal = () => {
|
|
taskGroupForm.projectId = projectId.value
|
|
addTaskGroupModalVisible.value = true
|
|
}
|
|
|
|
const handleTaskSubmit = async () => {
|
|
const valid = await taskFormRef.value?.validate()
|
|
if (!valid) return false
|
|
|
|
try {
|
|
await addTask({
|
|
...taskForm,
|
|
projectId: projectId.value
|
|
})
|
|
Message.success('添加任务成功')
|
|
fetchTaskData()
|
|
return true
|
|
} catch (error) {
|
|
console.error(error)
|
|
Message.error('添加任务失败')
|
|
return false
|
|
}
|
|
}
|
|
|
|
const handleTaskGroupSubmit = async () => {
|
|
const valid = await taskGroupFormRef.value?.validate()
|
|
if (!valid) return false
|
|
|
|
try {
|
|
await addTaskGroup({
|
|
...taskGroupForm,
|
|
projectId: projectId.value
|
|
})
|
|
Message.success('添加任务组成功')
|
|
return true
|
|
} catch (error) {
|
|
console.error(error)
|
|
Message.error('添加任务组失败')
|
|
return false
|
|
}
|
|
}
|
|
|
|
const openTaskDetail = (task: any) => {
|
|
currentTask.value = task
|
|
updateProgress.value = task.progress || 0
|
|
taskDetailModalVisible.value = true
|
|
}
|
|
|
|
const closeTaskDetail = () => {
|
|
currentTask.value = null
|
|
updateProgress.value = 0
|
|
taskDetailModalVisible.value = false
|
|
}
|
|
|
|
const submitProgressUpdate = async () => {
|
|
if (!currentTask.value) return
|
|
|
|
try {
|
|
await updateTaskProgress({ progress: updateProgress.value }, currentTask.value.id)
|
|
Message.success('更新进度成功')
|
|
|
|
// 更新本地数据
|
|
currentTask.value.progress = updateProgress.value
|
|
|
|
// 刷新任务列表
|
|
await fetchTaskData()
|
|
} catch (error) {
|
|
console.error(error)
|
|
Message.error('更新进度失败')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchProjectData()
|
|
fetchTaskData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.finance-card {
|
|
text-align: center;
|
|
}
|
|
|
|
.finance-title {
|
|
color: #7f7f7f;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.finance-amount {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.text-danger {
|
|
color: #f53f3f;
|
|
}
|
|
|
|
.text-success {
|
|
color: #00b42a;
|
|
}
|
|
|
|
.text-warning {
|
|
color: #ff7d00;
|
|
}
|
|
|
|
.task-container {
|
|
overflow-x: auto;
|
|
min-height: 600px;
|
|
}
|
|
|
|
.task-column {
|
|
background-color: #f5f5f5;
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
min-height: 600px;
|
|
}
|
|
|
|
.task-column-header {
|
|
padding: 12px;
|
|
border-radius: 4px 4px 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.task-list {
|
|
padding: 8px;
|
|
}
|
|
|
|
.task-card {
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.task-card:hover {
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.task-card-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.task-card-members {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.add-task-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
background-color: #e8e8e8;
|
|
border-radius: 4px;
|
|
color: #7f7f7f;
|
|
cursor: pointer;
|
|
gap: 8px;
|
|
}
|
|
|
|
.add-task-placeholder:hover {
|
|
background-color: #d9d9d9;
|
|
}
|
|
|
|
.upload-button-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #7f7f7f;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.general-card {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|