houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <el-drawer v-model="drawerVisible" title="子任务" size="880px">
3     <!-- 当前任务 -->
4     <template #header>
5       <h4>【{{ parentTask.name }} 】审批人:{{ parentTask?.assigneeUser?.nickname }}</h4>
6       <el-button
7         style="margin-left: 5px"
8         v-if="isSignDeleteButtonVisible(parentTask)"
9         type="danger"
10         plain
11         @click="handleSignDelete(parentTask)"
12       >
13         <Icon icon="ep:remove" /> 减签
14       </el-button>
15     </template>
16     <!-- 子任务列表 -->
17     <el-table :data="parentTask.children" style="width: 100%" row-key="id" border>
18       <el-table-column prop="assigneeUser.nickname" label="审批人" min-width="100">
19         <template #default="scope">
20           {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
21         </template>
22       </el-table-column>
23       <el-table-column prop="assigneeUser.deptName" label="所在部门" min-width="100">
24         <template #default="scope">
25           {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
26         </template>
27       </el-table-column>
28       <el-table-column label="审批状态" prop="status" width="120">
29         <template #default="scope">
30           <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
31         </template>
32       </el-table-column>
33       <el-table-column
34         label="提交时间"
35         align="center"
36         prop="createTime"
37         width="180"
38         :formatter="dateFormatter"
39       />
40       <el-table-column
41         label="结束时间"
42         align="center"
43         prop="endTime"
44         width="180"
45         :formatter="dateFormatter"
46       />
47       <el-table-column label="操作" prop="operation" width="90">
48         <template #default="scope">
49           <el-button
50             v-if="isSignDeleteButtonVisible(scope.row)"
51             type="danger"
52             plain
53             size="small"
54             @click="handleSignDelete(scope.row)"
55           >
56             <Icon icon="ep:remove" /> 减签
57           </el-button>
58         </template>
59       </el-table-column>
60     </el-table>
61
62     <!-- 减签 -->
63     <TaskSignDeleteForm ref="taskSignDeleteFormRef" @success="handleSignDeleteSuccess" />
64   </el-drawer>
65 </template>
66 <script lang="ts" setup>
67 import { isEmpty } from '@/utils/is'
68 import { DICT_TYPE } from '@/utils/dict'
69 import { dateFormatter } from '@/utils/formatTime'
70 import TaskSignDeleteForm from './TaskSignDeleteForm.vue'
71
72 defineOptions({ name: 'TaskSignList' })
73
74 const message = useMessage() // 消息弹窗
75 const drawerVisible = ref(false) // 抽屉的是否展示
76 const parentTask = ref({} as any)
77
78 /** 打开弹窗 */
79 const open = async (task: any) => {
80   if (isEmpty(task.children)) {
81     message.warning('该任务没有子任务')
82     return
83   }
84   parentTask.value = task
85   // 展开抽屉
86   drawerVisible.value = true
87 }
88 defineExpose({ open }) // 提供 openModal 方法,用于打开弹窗
89
90 /** 发起减签 */
91 const taskSignDeleteFormRef = ref()
92 const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
93 const handleSignDelete = (item: any) => {
94   taskSignDeleteFormRef.value.open(item.id)
95 }
96 const handleSignDeleteSuccess = () => {
97   emit('success')
98   // 关闭抽屉
99   drawerVisible.value = false
100 }
101
102 /** 是否显示减签按钮 */
103 const isSignDeleteButtonVisible = (task: any) => {
104   return task && task.children && !isEmpty(task.children)
105 }
106 </script>