Skip to content

Commit 98e9ba4

Browse files
YunaiVYunaiV
committed
【功能修改】工作流：流程审批详情的“流程记录”，从 timeline 改成 list table
1 parent 5121d56 commit 98e9ba4

File tree

2 files changed

+67
-161
lines changed

2 files changed

+67
-161
lines changed

‎src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue

Lines changed: 61 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,49 @@
11
<template>
2-
<el-card v-loading="loading" class="box-card">
3-
<el-col>
4-
<div class="block">
5-
<el-timeline>
6-
<el-timeline-item
7-
v-if="processInstance.endTime"
8-
:type="getProcessInstanceTimelineItemType(processInstance)"
9-
>
10-
<p style="font-weight: 700">
11-
结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
12-
<dict-tag
13-
:type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
14-
:value="processInstance.status"
15-
/>
16-
</p>
17-
</el-timeline-item>
18-
<el-timeline-item
19-
v-for="(item, index) in tasks"
20-
:key="index"
21-
:type="getTaskTimelineItemType(item)"
22-
>
23-
<p style="font-weight: 700">
24-
审批任务：{{ item.name }}
25-
<dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
26-
<el-button
27-
class="ml-10px"
28-
size="small"
29-
v-if="item.formId > 0"
30-
@click="handleFormDetail(item)"
31-
>
32-
<Icon icon="ep:document" /> 查看表单
33-
</el-button>
34-
</p>
35-
<el-card :body-style="{ padding: '10px' }">
36-
<label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
37-
审批人：{{ item.assigneeUser.nickname }}
38-
<el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
39-
</label>
40-
<label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
41-
<label style="font-weight: normal; color: #8a909c">
42-
{{ formatDate(item?.createTime) }}
43-
</label>
44-
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
45-
审批时间：
46-
</label>
47-
<label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
48-
{{ formatDate(item?.endTime) }}
49-
</label>
50-
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
51-
耗时：
52-
</label>
53-
<label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
54-
{{ formatPast2(item?.durationInMillis) }}
55-
</label>
56-
<p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
57-
</el-card>
58-
</el-timeline-item>
59-
<el-timeline-item type="success">
60-
<p style="font-weight: 700">
61-
发起流程：【{{ processInstance.startUser?.nickname }}】在
62-
{{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
63-
</p>
64-
</el-timeline-item>
65-
</el-timeline>
66-
</div>
67-
</el-col>
68-
</el-card>
2+
<el-table :data="tasks" border header-cell-class-name="table-header-gray">
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>
6947

7048
<!-- 弹窗：表单 -->
7149
<Dialog title="表单详情" v-model="taskFormVisible" width="600">
@@ -78,53 +56,20 @@
7856
</Dialog>
7957
</template>
8058
<script lang="ts" setup>
81-
import { formatDate, formatPast2 } from '@/utils/formatTime'
59+
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
8260
import { propTypes } from '@/utils/propTypes'
8361
import { DICT_TYPE } from '@/utils/dict'
8462
import type { ApiAttrs } from '@form-create/element-ui/types/config'
8563
import { setConfAndFields2 } from '@/utils/formCreate'
64+
import * as TaskApi from '@/api/bpm/task'
8665
8766
defineOptions({ name: 'BpmProcessInstanceTaskList' })
8867
89-
defineProps({
90-
loading: propTypes.bool, // 是否加载中
91-
processInstance: propTypes.object, // 流程实例
92-
tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
68+
const props = defineProps({
69+
loading: propTypes.bool.def(false), // 是否加载中
70+
id: propTypes.string // 流程实例的编号
9371
})
94-
95-
/** 获得流程实例对应的颜色 */
96-
const getProcessInstanceTimelineItemType = (item: any) => {
97-
if (item.status === 2) {
98-
return 'success'
99-
}
100-
if (item.status === 3) {
101-
return 'danger'
102-
}
103-
if (item.status === 4) {
104-
return 'warning'
105-
}
106-
return ''
107-
}
108-
109-
/** 获得任务对应的颜色 */
110-
const getTaskTimelineItemType = (item: any) => {
111-
if ([0, 1, 6, 7].includes(item.status)) {
112-
return 'primary'
113-
}
114-
if (item.status === 2) {
115-
return 'success'
116-
}
117-
if (item.status === 3) {
118-
return 'danger'
119-
}
120-
if (item.status === 4) {
121-
return 'info'
122-
}
123-
if (item.status === 5) {
124-
return 'warning'
125-
}
126-
return ''
127-
}
72+
const tasks = ref([]) // 流程任务的数组
12873
12974
/** 查看表单 */
13075
const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
@@ -134,7 +79,7 @@ const taskForm = ref({
13479
value: {}
13580
}) // 流程任务的表单详情
13681
const taskFormVisible = ref(false)
137-
const handleFormDetail = async (row) => {
82+
const handleFormDetail = async (row: any) => {
13883
// 设置表单
13984
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
14085
// 弹窗打开
@@ -146,9 +91,13 @@ const handleFormDetail = async (row) => {
14691
fApi.value?.fapi?.disabled(true)
14792
}
14893
149-
/** 刷新数据 */
150-
const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
151-
const refresh = () => {
152-
emit('refresh')
153-
}
94+
/** 只有 loading 完成时，才去加载流程列表 */
95+
watch(
96+
() => props.loading,
97+
async (value) => {
98+
if (value) {
99+
tasks.value = await TaskApi.getTaskListByProcessInstanceId(props.id)
100+
}
101+
}
102+
)
154103
</script>

‎src/views/bpm/processInstance/detail/index.vue

Lines changed: 6 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
</el-col>
6666
<el-col :span="7">
6767
<!-- 审批记录时间线 -->
68-
<ProcessInstanceTimeline ref="timelineRef" :activity-nodes="activityNodes" />
68+
<ProcessInstanceTimeline :activity-nodes="activityNodes" />
6969
</el-col>
7070
</el-row>
7171
</el-scrollbar>
@@ -96,12 +96,7 @@
9696
<el-tab-pane label="流转记录" name="record">
9797
<div class="form-scroll-area">
9898
<el-scrollbar>
99-
<ProcessInstanceTaskList
100-
:loading="tasksLoad"
101-
:process-instance="processInstance"
102-
:tasks="tasks"
103-
:show-header="false"
104-
/>
99+
<ProcessInstanceTaskList :loading="processInstanceLoading" :id="id" />
105100
</el-scrollbar>
106101
</div>
107102
</el-tab-pane>
@@ -135,14 +130,14 @@ import { BpmModelType } from '@/utils/constants'
135130
import { setConfAndFields2 } from '@/utils/formCreate'
136131
import type { ApiAttrs } from '@form-create/element-ui/types/config'
137132
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
138-
import * as TaskApi from '@/api/bpm/task'
133+
import * as UserApi from '@/api/system/user'
139134
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
140135
import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
141136
import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
142137
import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
143138
import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
144-
import * as UserApi from '@/api/system/user'
145139
import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
140+
// TODO 代码优化，换个明确的 icon 名字
146141
import audit1 from '@/assets/svgs/bpm/audit1.svg'
147142
import audit2 from '@/assets/svgs/bpm/audit2.svg'
148143
import audit3 from '@/assets/svgs/bpm/audit3.svg'
@@ -158,11 +153,8 @@ const message = useMessage() // 消息弹窗
158153
const processInstanceLoading = ref(false) // 流程实例的加载中
159154
const processInstance = ref<any>({}) // 流程实例
160155
const processDefinition = ref<any>({}) // 流程定义
161-
const timelineRef = ref()
162-
// 操作按钮组件 ref
163-
const operationButtonRef = ref()
164-
const tasksLoad = ref(true) // 任务的加载中
165-
const tasks = ref<any[]>([]) // 任务列表
156+
157+
const operationButtonRef = ref() // 操作按钮组件 ref
166158
const auditIcons = {
167159
1: audit1,
168160
2: audit2,
@@ -180,10 +172,7 @@ const detailForm = ref({
180172
181173
/** 获得详情 */
182174
const getDetail = () => {
183-
// 1. 获取审批详情
184175
getApprovalDetail()
185-
// 2. 获得流程任务列表
186-
getTaskList()
187176
}
188177
189178
/** 加载流程实例 */
@@ -269,38 +258,6 @@ const setFieldPermission = (field: string, permission: string) => {
269258
}
270259
}
271260
272-
/** 加载任务列表 */
273-
const getTaskList = async () => {
274-
try {
275-
// 获得未取消的任务
276-
tasksLoad.value = true
277-
const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
278-
tasks.value = []
279-
// 1.1 移除已取消的审批
280-
data.forEach((task: any) => {
281-
if (task.status !== 4) {
282-
tasks.value.push(task)
283-
}
284-
})
285-
// 1.2 排序，将未完成的排在前面，已完成的排在后面；
286-
tasks.value.sort((a, b) => {
287-
// 有已完成的情况，按照完成时间倒序
288-
if (a.endTime && b.endTime) {
289-
return b.endTime - a.endTime
290-
} else if (a.endTime) {
291-
return 1
292-
} else if (b.endTime) {
293-
return -1
294-
// 都是未完成，按照创建时间倒序
295-
} else {
296-
return b.createTime - a.createTime
297-
}
298-
})
299-
} finally {
300-
tasksLoad.value = false
301-
}
302-
}
303-
304261
/**
305262
* 操作成功后刷新
306263
*/

0 commit comments

Comments
 (0)