| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| 3e359e | 2 | <el-table :data="tasks" border header-cell-class-name="table-header-gray"> |
| H | 3 | <el-table-column label="审批节点" prop="name" min-width="120" align="center" /> |
| 4 | <el-table-column label="审批人" min-width="100" align="center"> | |
| 5 | <template #default="scope"> | |
| 6 | {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }} | |
| 7 | </template> | |
| 8 | </el-table-column> | |
| 9 | <el-table-column | |
| 10 | :formatter="dateFormatter" | |
| 11 | align="center" | |
| 12 | label="开始时间" | |
| 13 | prop="createTime" | |
| 14 | min-width="140" | |
| 15 | /> | |
| 16 | <el-table-column | |
| 17 | :formatter="dateFormatter" | |
| 18 | align="center" | |
| 19 | label="结束时间" | |
| 20 | prop="endTime" | |
| 21 | min-width="140" | |
| 22 | /> | |
| 23 | <el-table-column align="center" label="审批状态" prop="status" min-width="90"> | |
| 24 | <template #default="scope"> | |
| 25 | <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" /> | |
| 26 | </template> | |
| 27 | </el-table-column> | |
| 28 | <el-table-column align="center" label="审批建议" prop="reason" min-width="200"> | |
| 29 | <template #default="scope"> | |
| 30 | {{ scope.row.reason }} | |
| 31 | <el-button | |
| 32 | class="ml-10px" | |
| 33 | size="small" | |
| 34 | v-if="scope.row.formId > 0" | |
| 35 | @click="handleFormDetail(scope.row)" | |
| 36 | > | |
| 37 | <Icon icon="ep:document" /> 查看表单 | |
| 38 | </el-button> | |
| 39 | </template> | |
| 40 | </el-table-column> | |
| 41 | <el-table-column align="center" label="耗时" prop="durationInMillis" min-width="100"> | |
| 42 | <template #default="scope"> | |
| 43 | {{ formatPast2(scope.row.durationInMillis) }} | |
| 44 | </template> | |
| 45 | </el-table-column> | |
| 46 | </el-table> | |
| 820397 | 47 | |
| H | 48 | <!-- 弹窗：表单 --> |
| 49 | <Dialog title="表单详情" v-model="taskFormVisible" width="600"> | |
| 50 | <form-create | |
| 51 | ref="fApi" | |
| 52 | v-model="taskForm.value" | |
| 53 | :option="taskForm.option" | |
| 54 | :rule="taskForm.rule" | |
| 55 | /> | |
| 56 | </Dialog> | |
| 57 | </template> | |
| 58 | <script lang="ts" setup> | |
| 3e359e | 59 | import { dateFormatter, formatPast2 } from '@/utils/formatTime' |
| 820397 | 60 | import { propTypes } from '@/utils/propTypes' |
| H | 61 | import { DICT_TYPE } from '@/utils/dict' |
| 62 | import type { ApiAttrs } from '@form-create/element-ui/types/config' | |
| 63 | import { setConfAndFields2 } from '@/utils/formCreate' | |
| 3e359e | 64 | import * as TaskApi from '@/api/bpm/task' |
| 820397 | 65 | |
| H | 66 | defineOptions({ name: 'BpmProcessInstanceTaskList' }) |
| 67 | ||
| 3e359e | 68 | const props = defineProps({ |
| H | 69 | loading: propTypes.bool.def(false), // 是否加载中 |
| 70 | id: propTypes.string // 流程实例的编号 | |
| 820397 | 71 | }) |
| 3e359e | 72 | const tasks = ref([]) // 流程任务的数组 |
| 820397 | 73 | |
| H | 74 | /** 查看表单 */ |
| 75 | const fApi = ref<ApiAttrs>() // form-create 的 API 操作类 | |
| 76 | const taskForm = ref({ | |
| 77 | rule: [], | |
| 78 | option: {}, | |
| 79 | value: {} | |
| 80 | }) // 流程任务的表单详情 | |
| 81 | const taskFormVisible = ref(false) | |
| 3e359e | 82 | const handleFormDetail = async (row: any) => { |
| 820397 | 83 | // 设置表单 |
| H | 84 | setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables) |
| 85 | // 弹窗打开 | |
| 86 | taskFormVisible.value = true | |
| 87 | // 隐藏提交、重置按钮，设置禁用只读 | |
| 88 | await nextTick() | |
| 89 | fApi.value.fapi.btn.show(false) | |
| 90 | fApi.value?.fapi?.resetBtn.show(false) | |
| 91 | fApi.value?.fapi?.disabled(true) | |
| 92 | } | |
| 93 | ||
| 3e359e | 94 | /** 只有 loading 完成时，才去加载流程列表 */ |
| H | 95 | watch( |
| 96 | () => props.loading, | |
| 97 | async (value) => { | |
| 98 | if (value) { | |
| 99 | tasks.value = await TaskApi.getTaskListByProcessInstanceId(props.id) | |
| 100 | } | |
| 101 | } | |
| 102 | ) | |
| 820397 | 103 | </script> |
