| 提交 | 用户 | 时间 | ||
| 3e359e | 1 | <template> |
| H | 2 | <div class="end-node-wrapper"> |
| 3 | <div class="end-node-box cursor-pointer" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" @click="nodeClick"> | |
| 4 | <span class="node-fixed-name" title="结束">结束</span> | |
| 5 | </div> | |
| 6 | </div> | |
| 7 | <el-dialog title="审批信息" v-model="dialogVisible" width="1000px" append-to-body> | |
| 8 | <el-row> | |
| 9 | <el-table | |
| 10 | :data="processInstanceInfos" | |
| 11 | size="small" | |
| 12 | border | |
| 13 | header-cell-class-name="table-header-gray" | |
| 14 | > | |
| 15 | <el-table-column | |
| 16 | label="序号" | |
| 17 | header-align="center" | |
| 18 | align="center" | |
| 19 | type="index" | |
| 20 | width="50" | |
| 21 | /> | |
| 22 | <el-table-column | |
| 23 | label="发起人" | |
| 24 | prop="assigneeUser.nickname" | |
| 25 | min-width="100" | |
| 26 | align="center" | |
| 27 | /> | |
| 28 | <el-table-column label="部门" min-width="100" align="center"> | |
| 29 | <template #default="scope"> | |
| 30 | {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }} | |
| 31 | </template> | |
| 32 | </el-table-column> | |
| 33 | <el-table-column | |
| 34 | :formatter="dateFormatter" | |
| 35 | align="center" | |
| 36 | label="开始时间" | |
| 37 | prop="createTime" | |
| 38 | min-width="140" | |
| 39 | /> | |
| 40 | <el-table-column | |
| 41 | :formatter="dateFormatter" | |
| 42 | align="center" | |
| 43 | label="结束时间" | |
| 44 | prop="endTime" | |
| 45 | min-width="140" | |
| 46 | /> | |
| 47 | <el-table-column align="center" label="审批状态" prop="status" min-width="90"> | |
| 48 | <template #default="scope"> | |
| 49 | <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" /> | |
| 50 | </template> | |
| 51 | </el-table-column> | |
| 52 | ||
| 53 | <el-table-column align="center" label="耗时" prop="durationInMillis" width="100"> | |
| 54 | <template #default="scope"> | |
| 55 | {{ formatPast2(scope.row.durationInMillis) }} | |
| 56 | </template> | |
| 57 | </el-table-column> | |
| 58 | </el-table> | |
| 59 | </el-row> | |
| 60 | </el-dialog> | |
| 61 | </template> | |
| 62 | <script setup lang="ts"> | |
| 63 | import { SimpleFlowNode } from '../consts' | |
| 64 | import { useWatchNode, useTaskStatusClass } from '../node' | |
| 65 | import { dateFormatter, formatPast2 } from '@/utils/formatTime' | |
| 66 | import { DICT_TYPE } from '@/utils/dict' | |
| 67 | defineOptions({ | |
| 68 | name: 'EndEventNode' | |
| 69 | }) | |
| 70 | const props = defineProps({ | |
| 71 | flowNode: { | |
| 72 | type: Object as () => SimpleFlowNode, | |
| 73 | default: () => null | |
| 74 | } | |
| 75 | }) | |
| 76 | // 监控节点变化 | |
| 77 | const currentNode = useWatchNode(props) | |
| 78 | // 是否只读 | |
| 79 | const readonly = inject<Boolean>('readonly') | |
| 80 | const processInstance = inject<Ref<any>>('processInstance') | |
| 81 | // 审批信息的弹窗显示，用于只读模式 | |
| 82 | const dialogVisible = ref(false) // 弹窗可见性 | |
| 83 | const processInstanceInfos = ref<any[]>([]) // 流程的审批信息 | |
| 84 | ||
| 85 | const nodeClick = () => { | |
| 86 | if (readonly) { | |
| 87 | if(processInstance && processInstance.value){ | |
| 88 | processInstanceInfos.value = [ | |
| 89 | { | |
| 90 | assigneeUser: processInstance.value.startUser, | |
| 91 | createTime: processInstance.value.startTime, | |
| 92 | endTime: processInstance.value.endTime, | |
| 93 | status: processInstance.value.status, | |
| 94 | durationInMillis: processInstance.value.durationInMillis | |
| 95 | } | |
| 96 | ] | |
| 97 | dialogVisible.value = true | |
| 98 | } | |
| 99 | } | |
| 100 | } | |
| 101 | </script> | |
| 102 | <style lang="scss" scoped></style> | |
