|
@@ -1,18 +1,22 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ProjectQueryParams } from '@/interface/project'
|
|
|
import { useMutation, useQuery } from '@tanstack/vue-query'
|
|
|
import { finishProjectMileStone, getProjectMileStone } from '@/service/project'
|
|
|
|
|
|
-const stoneStatus = ['未开始', '进行中', '已完成']
|
|
|
-
|
|
|
/**
|
|
|
* 项目里程碑
|
|
|
*/
|
|
|
-const props = defineProps<ProjectQueryParams>()
|
|
|
-const { projectId } = toRefs(props)
|
|
|
-const { data: projectMilestoneList, refetch } = useQuery(
|
|
|
- [getProjectMileStone.name, unref(projectId)],
|
|
|
- async () => await getProjectMileStone(unref(projectId))
|
|
|
+const props = defineProps<{
|
|
|
+ projectId: string
|
|
|
+}>()
|
|
|
+const projectMilestoneList = ref<any>([])
|
|
|
+const { refetch } = useQuery(
|
|
|
+ [getProjectMileStone.name, props.projectId],
|
|
|
+ async () => await getProjectMileStone(props.projectId),
|
|
|
+ {
|
|
|
+ onSuccess: (data) => {
|
|
|
+ projectMilestoneList.value = data
|
|
|
+ }
|
|
|
+ }
|
|
|
)
|
|
|
watch(
|
|
|
() => props.projectId,
|
|
@@ -20,7 +24,7 @@ watch(
|
|
|
refetch()
|
|
|
}
|
|
|
)
|
|
|
-const { mutate: handleFinish, isLoading } = useMutation(finishProjectMileStone, {
|
|
|
+const { mutate: handleFinish } = useMutation(finishProjectMileStone, {
|
|
|
onSuccess: () => {
|
|
|
refetch()
|
|
|
ElMessage({
|
|
@@ -29,31 +33,98 @@ const { mutate: handleFinish, isLoading } = useMutation(finishProjectMileStone,
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
+const pMileStoneAddHandle = () => {
|
|
|
+ projectMilestoneList.value.push({
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ planFinishTime: '',
|
|
|
+ actualFinishTime: '',
|
|
|
+ state: 2,
|
|
|
+ sortnum: 1,
|
|
|
+ projectId: ''
|
|
|
+ })
|
|
|
+}
|
|
|
+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)
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="xmjdBox">
|
|
|
+ <div class="btnGroup">
|
|
|
+ <el-button type="primary" @click="pMileStoneAddHandle"> 新增 </el-button>
|
|
|
+ </div>
|
|
|
<div class="tableBox">
|
|
|
- <el-table :data="projectMilestoneList" style="width: 100%">
|
|
|
- <el-table-column type="sortnum" label="序号" width="100" />
|
|
|
- <el-table-column prop="name" label="里程碑名称" />
|
|
|
- <el-table-column prop="planFinishTime" label="计划完成时间" width="200" />
|
|
|
- <el-table-column label="实际完成时间" prop="actualFinishTime" width="200" />
|
|
|
- <el-table-column label="状态" prop="state" width="200">
|
|
|
+ <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" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="planFinishTime" label="计划完成时间" width="260">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-date-picker
|
|
|
+ :disabled="scope.row.id !== ''"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="scope.row.planFinishTime"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="实际完成时间" prop="actualFinishTime" width="260">
|
|
|
<template #default="scope">
|
|
|
- {{ stoneStatus?.[Number(scope.row?.state ?? 0)] ?? '-' }}
|
|
|
+ <el-date-picker
|
|
|
+ :disabled="scope.row.id !== ''"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="scope.row.actualFinishTime"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <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>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
>
|
|
|
<el-table-column label="操作" width="200">
|
|
|
<template #default="scope">
|
|
|
<el-button
|
|
|
- v-if="scope.row?.state !== 2"
|
|
|
- @click="handleFinish(scope.row.id)"
|
|
|
+ @click="handleFinish({ id: scope.row.id, projectId: scope.row.projectId })"
|
|
|
type="text"
|
|
|
- size="small"
|
|
|
>完成
|
|
|
</el-button>
|
|
|
+ <el-popconfirm title="确定删除?" @confirm="confirmHandle(scope.row.id, scope.$index)">
|
|
|
+ <template #reference>
|
|
|
+ <el-button style="margin-left: 20px" type="text">刪除 </el-button>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -64,5 +135,9 @@ const { mutate: handleFinish, isLoading } = useMutation(finishProjectMileStone,
|
|
|
<style scoped lang="scss">
|
|
|
.xmjdBox {
|
|
|
margin-top: 20px;
|
|
|
+ > .btnGroup {
|
|
|
+ text-align: right;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|