|
@@ -1,7 +1,10 @@
|
|
|
<script setup lang="ts">
|
|
|
import { useMutation, useQuery } from '@tanstack/vue-query'
|
|
|
+import { copyObject } from '@/utils'
|
|
|
+import request from '@/config/axios'
|
|
|
import { finishProjectMileStone, getProjectMileStone } from '@/service/project'
|
|
|
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
/**
|
|
|
* 项目里程碑
|
|
|
*/
|
|
@@ -14,17 +17,54 @@ const { refetch } = useQuery(
|
|
|
async () => await getProjectMileStone(props.projectId),
|
|
|
{
|
|
|
onSuccess: (data) => {
|
|
|
- projectMilestoneList.value = data
|
|
|
+ projectMilestoneList.value = data.map((item) => {
|
|
|
+ item['is_edit'] = false
|
|
|
+ return item
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
+//新增项目里程碑
|
|
|
+const addProjectMilestone = async (item) => {
|
|
|
+ const url = '/project-milestone'
|
|
|
+ const sendData = {
|
|
|
+ name: '',
|
|
|
+ planFinishTime: '',
|
|
|
+ actualFinishTime: '',
|
|
|
+ projectId: props.projectId
|
|
|
+ }
|
|
|
+ copyObject(sendData, item)
|
|
|
+ const result = await request.post({ url, data: sendData }, '/business')
|
|
|
+ if (result) {
|
|
|
+ message.success('项目里程碑新增成功!')
|
|
|
+ refetch()
|
|
|
+ }
|
|
|
+}
|
|
|
+//编辑项目里程碑
|
|
|
+const updateProjectMilestone = async (item) => {
|
|
|
+ const url = '/project-milestone'
|
|
|
+ const sendData = {
|
|
|
+ ...item
|
|
|
+ }
|
|
|
+ const result = await request.put({ url, data: sendData }, '/business')
|
|
|
+ if (result) {
|
|
|
+ message.success('项目里程碑编辑成功!')
|
|
|
+ }
|
|
|
+}
|
|
|
+//删除项目里程碑
|
|
|
+const deleteProjectMilestone = async (id: string) => {
|
|
|
+ const url = `/project-milestone?id=${id}`
|
|
|
+ const result = await request.delete({ url }, '/business')
|
|
|
+ console.log('result-----------------')
|
|
|
+ console.log(result)
|
|
|
+}
|
|
|
watch(
|
|
|
() => props.projectId,
|
|
|
() => {
|
|
|
refetch()
|
|
|
}
|
|
|
)
|
|
|
-const { mutate: handleFinish } = useMutation(finishProjectMileStone, {
|
|
|
+const { mutate: handleFinishMutate } = useMutation(finishProjectMileStone, {
|
|
|
onSuccess: () => {
|
|
|
refetch()
|
|
|
ElMessage({
|
|
@@ -33,37 +73,33 @@ const { mutate: handleFinish } = useMutation(finishProjectMileStone, {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
+const handleFinish = (item) => {
|
|
|
+ if (item.is_edit) {
|
|
|
+ if (!item.id) {
|
|
|
+ //新增保存
|
|
|
+ addProjectMilestone(item)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ updateProjectMilestone(item)
|
|
|
+ if (item.actualFinishTime) {
|
|
|
+ handleFinishMutate({ id: item.id, projectId: item.projectId })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ item.is_edit = !item.is_edit
|
|
|
+}
|
|
|
const pMileStoneAddHandle = () => {
|
|
|
projectMilestoneList.value.push({
|
|
|
- id: '',
|
|
|
name: '',
|
|
|
planFinishTime: '',
|
|
|
actualFinishTime: '',
|
|
|
- state: 2,
|
|
|
- sortnum: 1,
|
|
|
- projectId: ''
|
|
|
+ is_edit: true
|
|
|
})
|
|
|
}
|
|
|
-interface StateTypeInterface {
|
|
|
- value: number
|
|
|
- label: string
|
|
|
-}
|
|
|
-const stateTypes: StateTypeInterface[] = [
|
|
|
- {
|
|
|
- value: 0,
|
|
|
- label: '未开始'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- label: '进行中'
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- label: '已完成'
|
|
|
- }
|
|
|
-]
|
|
|
const confirmHandle = (id: string, index: number) => {
|
|
|
projectMilestoneList.value.splice(index, 1)
|
|
|
+ if (id) {
|
|
|
+ deleteProjectMilestone(id)
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -76,13 +112,13 @@ const confirmHandle = (id: string, index: number) => {
|
|
|
<el-table :data="projectMilestoneList" border style="width: 100%" header-align="center">
|
|
|
<el-table-column label="里程碑名称">
|
|
|
<template #default="scope">
|
|
|
- <el-input :disabled="scope.row.id !== ''" v-model="scope.row.name" />
|
|
|
+ <el-input :disabled="!scope.row.is_edit" v-model="scope.row.name" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="planFinishTime" label="计划完成时间" width="260">
|
|
|
<template #default="scope">
|
|
|
<el-date-picker
|
|
|
- :disabled="scope.row.id !== ''"
|
|
|
+ :disabled="!scope.row.is_edit"
|
|
|
style="width: 100%"
|
|
|
v-model="scope.row.planFinishTime"
|
|
|
value-format="YYYY-MM-DD"
|
|
@@ -93,32 +129,23 @@ const confirmHandle = (id: string, index: number) => {
|
|
|
<el-table-column label="实际完成时间" prop="actualFinishTime" width="260">
|
|
|
<template #default="scope">
|
|
|
<el-date-picker
|
|
|
- :disabled="scope.row.id !== ''"
|
|
|
+ :disabled="!scope.row.is_edit"
|
|
|
style="width: 100%"
|
|
|
v-model="scope.row.actualFinishTime"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
/>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="状态" width="200">
|
|
|
+ <el-table-column label="项目进度" width="200">
|
|
|
<template #default="scope">
|
|
|
- <el-select :disabled="scope.row.id !== ''" v-model="scope.row.state">
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in stateTypes"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <el-input :disabled="!scope.row.is_edit" v-model="scope.row.name" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
>
|
|
|
<el-table-column label="操作" width="200">
|
|
|
<template #default="scope">
|
|
|
- <el-button
|
|
|
- @click="handleFinish({ id: scope.row.id, projectId: scope.row.projectId })"
|
|
|
- type="text"
|
|
|
- >完成
|
|
|
+ <el-button @click="handleFinish(scope.row)" type="text"
|
|
|
+ >{{ !scope.row.is_edit ? '编辑' : '保存' }}
|
|
|
</el-button>
|
|
|
<el-popconfirm title="确定删除?" @confirm="confirmHandle(scope.row.id, scope.$index)">
|
|
|
<template #reference>
|