From 3e359e4550d018035406a97c190b98f83839ba7f Mon Sep 17 00:00:00 2001
From: houzhongjian <houzhongyi@126.com>
Date: 星期五, 13 十二月 2024 10:41:05 +0800
Subject: [PATCH] 1、工作流重做更新 2、@import修改为@use以应对sass升级弃用@import 3、进入系统后自动redirect到home页
---
src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue | 194 +++++++++++++++---------------------------------
1 files changed, 61 insertions(+), 133 deletions(-)
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
index f82e800..8690e58 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -1,85 +1,50 @@
<template>
- <el-card v-loading="loading" class="box-card">
- <template #header>
- <span class="el-icon-picture-outline">审批记录</span>
- </template>
- <el-col :offset="3" :span="17">
- <div class="block">
- <el-timeline>
- <el-timeline-item
- v-if="processInstance.endTime"
- :type="getProcessInstanceTimelineItemType(processInstance)"
- >
- <p style="font-weight: 700">
- 结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
- <dict-tag
- :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
- :value="processInstance.status"
- />
- </p>
- </el-timeline-item>
- <el-timeline-item
- v-for="(item, index) in tasks"
- :key="index"
- :type="getTaskTimelineItemType(item)"
- >
- <p style="font-weight: 700">
- 审批任务：{{ item.name }}
- <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
- <el-button
- class="ml-10px"
- v-if="!isEmpty(item.children)"
- @click="openChildrenTask(item)"
- size="small"
- >
- <Icon icon="ep:memo" /> 子任务
- </el-button>
- <el-button
- class="ml-10px"
- size="small"
- v-if="item.formId > 0"
- @click="handleFormDetail(item)"
- >
- <Icon icon="ep:document" /> 查看表单
- </el-button>
- </p>
- <el-card :body-style="{ padding: '10px' }">
- <label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
- 审批人：{{ item.assigneeUser.nickname }}
- <el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
- </label>
- <label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
- <label style="font-weight: normal; color: #8a909c">
- {{ formatDate(item?.createTime) }}
- </label>
- <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
- 审批时间：
- </label>
- <label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
- {{ formatDate(item?.endTime) }}
- </label>
- <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
- 耗时：
- </label>
- <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
- {{ formatPast2(item?.durationInMillis) }}
- </label>
- <p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
- </el-card>
- </el-timeline-item>
- <el-timeline-item type="success">
- <p style="font-weight: 700">
- 发起流程：【{{ processInstance.startUser?.nickname }}】在
- {{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
- </p>
- </el-timeline-item>
- </el-timeline>
- </div>
- </el-col>
- </el-card>
+ <el-table :data="tasks" border header-cell-class-name="table-header-gray">
+ <el-table-column label="审批节点" prop="name" min-width="120" align="center" />
+ <el-table-column label="审批人" min-width="100" align="center">
+ <template #default="scope">
+ {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+ </template>
+ </el-table-column>
+ <el-table-column
+ :formatter="dateFormatter"
+ align="center"
+ label="开始时间"
+ prop="createTime"
+ min-width="140"
+ />
+ <el-table-column
+ :formatter="dateFormatter"
+ align="center"
+ label="结束时间"
+ prop="endTime"
+ min-width="140"
+ />
+ <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+ </template>
+ </el-table-column>
+ <el-table-column align="center" label="审批建议" prop="reason" min-width="200">
+ <template #default="scope">
+ {{ scope.row.reason }}
+ <el-button
+ class="ml-10px"
+ size="small"
+ v-if="scope.row.formId > 0"
+ @click="handleFormDetail(scope.row)"
+ >
+ <Icon icon="ep:document" /> 查看表单
+ </el-button>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" label="耗时" prop="durationInMillis" min-width="100">
+ <template #default="scope">
+ {{ formatPast2(scope.row.durationInMillis) }}
+ </template>
+ </el-table-column>
+ </el-table>
- <!-- 弹窗：子任务 -->
- <TaskSignList ref="taskSignListRef" @success="refresh" />
<!-- 弹窗：表单 -->
<Dialog title="表单详情" v-model="taskFormVisible" width="600">
<form-create
@@ -91,61 +56,20 @@
</Dialog>
</template>
<script lang="ts" setup>
-import { formatDate, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'
-import { isEmpty } from '@/utils/is'
-import TaskSignList from './dialog/TaskSignList.vue'
import type { ApiAttrs } from '@form-create/element-ui/types/config'
import { setConfAndFields2 } from '@/utils/formCreate'
+import * as TaskApi from '@/api/bpm/task'
defineOptions({ name: 'BpmProcessInstanceTaskList' })
-defineProps({
- loading: propTypes.bool, // 是否加载中
- processInstance: propTypes.object, // 流程实例
- tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+const props = defineProps({
+ loading: propTypes.bool.def(false), // 是否加载中
+ id: propTypes.string // 流程实例的编号
})
-
-/** 获得流程实例对应的颜色 */
-const getProcessInstanceTimelineItemType = (item: any) => {
- if (item.status === 2) {
- return 'success'
- }
- if (item.status === 3) {
- return 'danger'
- }
- if (item.status === 4) {
- return 'warning'
- }
- return ''
-}
-
-/** 获得任务对应的颜色 */
-const getTaskTimelineItemType = (item: any) => {
- if ([0, 1, 6, 7].includes(item.status)) {
- return 'primary'
- }
- if (item.status === 2) {
- return 'success'
- }
- if (item.status === 3) {
- return 'danger'
- }
- if (item.status === 4) {
- return 'info'
- }
- if (item.status === 5) {
- return 'warning'
- }
- return ''
-}
-
-/** 子任务 */
-const taskSignListRef = ref()
-const openChildrenTask = (item: any) => {
- taskSignListRef.value.open(item)
-}
+const tasks = ref([]) // 流程任务的数组
/** 查看表单 */
const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
@@ -155,7 +79,7 @@
value: {}
}) // 流程任务的表单详情
const taskFormVisible = ref(false)
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
// 设置表单
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
// 弹窗打开
@@ -167,9 +91,13 @@
fApi.value?.fapi?.disabled(true)
}
-/** 刷新数据 */
-const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
-const refresh = () => {
- emit('refresh')
-}
+/** 只有 loading 完成时，才去加载流程列表 */
+watch(
+ () => props.loading,
+ async (value) => {
+ if (value) {
+ tasks.value = await TaskApi.getTaskListByProcessInstanceId(props.id)
+ }
+ }
+)
</script>
--
Gitblit v1.9.3