Skip to content

Commit d16194b

Browse files
committed
BPM:优化 task 审批详情界面,增加开始时间、结束时间的展示
1 parent d0f7334 commit d16194b

File tree

12 files changed

+91
-59
lines changed

12 files changed

+91
-59
lines changed

src/api/bpm/form/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ export const getFormPage = async (params) => {
4949
}
5050

5151
// 获得动态表单的精简列表
52-
export const getSimpleFormList = async () => {
52+
export const getFormSimpleList = async () => {
5353
return await request.get({
54-
url: '/bpm/form/list-all-simple'
54+
url: '/bpm/form/simple-list'
5555
})
5656
}

src/api/bpm/leave/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import request from '@/config/axios'
22

33
export type LeaveVO = {
44
id: number
5-
result: number
5+
status: number
66
type: number
77
reason: string
88
processInstanceId: string

src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const highlightDiagram = async () => {
115115
if (!task) {
116116
return
117117
}
118-
//进行中的任务已经高亮过了,则不高亮后面的任务了
118+
// 进行中的任务已经高亮过了,则不高亮后面的任务了
119119
if (findProcessTask) {
120120
removeTaskDefinitionKeyList.push(n.id)
121121
return
@@ -194,6 +194,7 @@ const highlightDiagram = async () => {
194194
})
195195
} else if (n.$type === 'bpmn:StartEvent') {
196196
// 开始节点
197+
canvas.addMarker(n.id, 'highlight')
197198
n.outgoing?.forEach((nn) => {
198199
// outgoing 例如说【bpmn:SequenceFlow】连线
199200
// 获得连线是否有指向目标。如果有,则进行高亮
@@ -223,40 +224,49 @@ const highlightDiagram = async () => {
223224
canvas.addMarker(out.id, getResultCss(2))
224225
})
225226
}
227+
} else if (n.$type === 'bpmn:SequenceFlow') {
228+
let targetActivity = activityList.find((m: any) => m.key === n.targetRef.id)
229+
if (targetActivity) {
230+
canvas.addMarker(n.id, getActivityHighlightCss(targetActivity))
231+
}
226232
}
227233
})
228234
if (!isEmpty(removeTaskDefinitionKeyList)) {
229-
// TODO 芋艿:后面 .definitionKey 再看
230235
taskList.value = taskList.value.filter(
231-
(item) => !removeTaskDefinitionKeyList.includes(item.definitionKey)
236+
(item) => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey)
232237
)
233238
}
234239
}
240+
235241
const getActivityHighlightCss = (activity) => {
236242
return activity.endTime ? 'highlight' : 'highlight-todo'
237243
}
238-
const getResultCss = (result) => {
239-
if (result === 1) {
244+
245+
const getResultCss = (status) => {
246+
if (status === 1) {
240247
// 审批中
241248
return 'highlight-todo'
242-
} else if (result === 2) {
249+
} else if (status === 2) {
243250
// 已通过
244251
return 'highlight'
245-
} else if (result === 3) {
252+
} else if (status === 3) {
246253
// 不通过
247254
return 'highlight-reject'
248-
} else if (result === 4) {
255+
} else if (status === 4) {
249256
// 已取消
250257
return 'highlight-cancel'
251-
} else if (result === 5) {
258+
} else if (status === 5) {
252259
// 退回
253260
return 'highlight-return'
254-
} else if (result === 6) {
261+
} else if (status === 6) {
255262
// 委派
256-
return 'highlight-return'
257-
} else if (result === 7 || result === 8 || result === 9) {
258-
// 待后加签任务完成/待前加签任务完成/待前置任务完成
259-
return 'highlight-return'
263+
return 'highlight-todo'
264+
} else if (status === 7) {
265+
// 审批通过中
266+
return 'highlight-todo'
267+
} else if (status === 0) {
268+
// 待审批
269+
return 'highlight-todo'
260270
}
261271
return ''
262272
}
@@ -297,10 +307,10 @@ const elementHover = (element) => {
297307
!elementOverlayIds.value && (elementOverlayIds.value = {})
298308
!overlays.value && (overlays.value = bpmnModeler.get('overlays'))
299309
// 展示信息
300-
console.log(activityLists.value, 'activityLists.value')
301-
console.log(element.value, 'element.value')
310+
// console.log(activityLists.value, 'activityLists.value')
311+
// console.log(element.value, 'element.value')
302312
const activity = activityLists.value.find((m) => m.key === element.value.id)
303-
console.log(activity, 'activityactivityactivityactivity')
313+
// console.log(activity, 'activityactivityactivityactivity')
304314
if (!activity) {
305315
return
306316
}
@@ -314,12 +324,11 @@ const elementHover = (element) => {
314324
<p>部门:${processInstance.value.startUser.deptName}</p>
315325
<p>创建时间:${formatDate(processInstance.value.createTime)}`
316326
} else if (element.value.type === 'bpmn:UserTask') {
317-
// debugger
318327
let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
319328
if (!task) {
320329
return
321330
}
322-
let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
331+
let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
323332
let dataResult = ''
324333
optionData.forEach((element) => {
325334
if (element.value == task.status) {
@@ -352,7 +361,7 @@ const elementHover = (element) => {
352361
}
353362
console.log(html)
354363
} else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
355-
let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
364+
let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
356365
let dataResult = ''
357366
optionData.forEach((element) => {
358367
if (element.value == processInstance.value.status) {
@@ -375,6 +384,7 @@ const elementHover = (element) => {
375384
})
376385
}
377386
}
387+
378388
// 流程图的元素被 out
379389
const elementOut = (element) => {
380390
toRaw(overlays.value).remove({ element })
@@ -390,6 +400,7 @@ onMounted(() => {
390400
// 初始模型的监听器
391401
initModelListeners()
392402
})
403+
393404
onBeforeUnmount(() => {
394405
// this.$once('hook:beforeDestroy', () => {
395406
// })
@@ -428,7 +439,7 @@ watch(
428439
)
429440
</script>
430441

431-
<style>
442+
<style lang="scss">
432443
/** 处理中 */
433444
.highlight-todo.djs-connection > .djs-visual > path {
434445
stroke: #1890ff !important;
@@ -502,6 +513,10 @@ watch(
502513
stroke: green !important;
503514
}
504515
516+
.djs-element.highlight > .djs-visual > path {
517+
stroke: green !important;
518+
}
519+
505520
/** 不通过 */
506521
.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
507522
fill: red !important;
@@ -521,6 +536,7 @@ watch(
521536
522537
.highlight-reject.djs-connection > .djs-visual > path {
523538
stroke: red !important;
539+
marker-end: url(#sequenceflow-end-white-success) !important;
524540
}
525541
526542
.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {

src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -461,7 +461,7 @@ const updateElementExtensions = () => {
461461
462462
const formList = ref([]) // 流程表单的下拉框的数据
463463
onMounted(async () => {
464-
formList.value = await FormApi.getSimpleFormList()
464+
formList.value = await FormApi.getFormSimpleList()
465465
})
466466
467467
watch(

src/utils/dict.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export enum DICT_TYPE {
139139
BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
140140
BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy',
141141
BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
142-
BPM_PROCESS_INSTANCE_RESULT = 'bpm_process_instance_result', // TODO @芋艿:改名
142+
BPM_TASK_STATUS = 'bpm_task_status',
143143
BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
144144

145145
// ========== PAY 模块 ==========

src/views/bpm/model/ModelForm.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ const open = async (type: string, id?: number) => {
173173
}
174174
}
175175
// 获得流程表单的下拉框的数据
176-
formList.value = await FormApi.getSimpleFormList()
176+
formList.value = await FormApi.getFormSimpleList()
177177
// 查询流程分类列表
178178
categoryList.value = await CategoryApi.getCategorySimpleList()
179179
}

src/views/bpm/model/ModelImportForm.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ const submitFormSuccess = async (response: any) => {
109109
}
110110
// 提示成功
111111
message.success('导入流程成功!请点击【设计流程】按钮,进行编辑保存后,才可以进行【发布流程】')
112+
dialogVisible.value = false
112113
// 发送操作成功的事件
113114
emit('success')
114115
}

src/views/bpm/oa/leave/index.vue

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,15 @@
3636
value-format="YYYY-MM-DD HH:mm:ss"
3737
/>
3838
</el-form-item>
39-
<el-form-item label="结果" prop="result">
40-
<el-select v-model="queryParams.result" class="!w-240px" clearable placeholder="请选择结果">
39+
<el-form-item label="审批结果" prop="result">
40+
<el-select
41+
v-model="queryParams.result"
42+
class="!w-240px"
43+
clearable
44+
placeholder="请选择审批结果"
45+
>
4146
<el-option
42-
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
47+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
4348
:key="dict.value"
4449
:label="dict.label"
4550
:value="dict.value"
@@ -78,7 +83,7 @@
7883
<el-table-column align="center" label="申请编号" prop="id" />
7984
<el-table-column align="center" label="状态" prop="result">
8085
<template #default="scope">
81-
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result" />
86+
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.result" />
8287
</template>
8388
</el-table-column>
8489
<el-table-column
@@ -166,7 +171,7 @@ const queryParams = reactive({
166171
pageNo: 1,
167172
pageSize: 10,
168173
type: undefined,
169-
result: undefined,
174+
status: undefined,
170175
reason: undefined,
171176
createTime: []
172177
})

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

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,26 @@
66
<el-col :offset="3" :span="17">
77
<div class="block">
88
<el-timeline>
9+
<el-timeline-item
10+
v-if="processInstance.endTime"
11+
:type="getProcessInstanceTimelineItemType(processInstance)"
12+
>
13+
<p style="font-weight: 700">
14+
结束流程:在 {{ formatDate(processInstance?.endTime) }} 结束
15+
<dict-tag
16+
:type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
17+
:value="processInstance.status"
18+
/>
19+
</p>
20+
</el-timeline-item>
921
<el-timeline-item
1022
v-for="(item, index) in tasks"
1123
:key="index"
12-
:icon="getTimelineItemIcon(item)"
13-
:type="getTimelineItemType(item)"
24+
:type="getTaskTimelineItemType(item)"
1425
>
1526
<p style="font-weight: 700">
16-
任务:{{ item.name }}
17-
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="item.status" />
27+
审批任务:{{ item.name }}
28+
<dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
1829
<el-button
1930
class="ml-10px"
2031
v-if="!isEmpty(item.children)"
@@ -56,6 +67,12 @@
5667
<p v-if="item.reason"> 审批建议:{{ item.reason }} </p>
5768
</el-card>
5869
</el-timeline-item>
70+
<el-timeline-item type="success">
71+
<p style="font-weight: 700">
72+
发起流程:【{{ processInstance.startUser?.nickname }}】在
73+
{{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
74+
</p>
75+
</el-timeline-item>
5976
</el-timeline>
6077
</div>
6178
</el-col>
@@ -86,33 +103,27 @@ defineOptions({ name: 'BpmProcessInstanceTaskList' })
86103
87104
defineProps({
88105
loading: propTypes.bool, // 是否加载中
106+
processInstance: propTypes.object, // 流程实例
89107
tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
90108
})
91109
92-
/** 获得任务对应的 icon */
93-
// TODO @芋艿:对应的 icon 需要调整
94-
const getTimelineItemIcon = (item) => {
95-
if (item.status === 1) {
96-
return 'el-icon-time'
97-
}
110+
/** 获得流程实例对应的颜色 */
111+
const getProcessInstanceTimelineItemType = (item: any) => {
98112
if (item.status === 2) {
99-
return 'el-icon-check'
113+
return 'success'
100114
}
101115
if (item.status === 3) {
102-
return 'el-icon-close'
116+
return 'danger'
103117
}
104118
if (item.status === 4) {
105-
return 'el-icon-remove-outline'
106-
}
107-
if (item.status === 5) {
108-
return 'el-icon-back'
119+
return 'warning'
109120
}
110121
return ''
111122
}
112123
113124
/** 获得任务对应的颜色 */
114-
const getTimelineItemType = (item: any) => {
115-
if (item.status === 1) {
125+
const getTaskTimelineItemType = (item: any) => {
126+
if ([0, 1, 6, 7].includes(item.status)) {
116127
return 'primary'
117128
}
118129
if (item.status === 2) {
@@ -127,12 +138,6 @@ const getTimelineItemType = (item: any) => {
127138
if (item.status === 5) {
128139
return 'warning'
129140
}
130-
if (item.status === 6) {
131-
return 'default'
132-
}
133-
if (item.status === 7 || item.status === 8) {
134-
return 'warning'
135-
}
136141
return ''
137142
}
138143

src/views/bpm/processInstance/detail/dialog/TaskSignList.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</el-table-column>
2828
<el-table-column label="审批状态" prop="status" width="120">
2929
<template #default="scope">
30-
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.status" />
30+
<dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
3131
</template>
3232
</el-table-column>
3333
<el-table-column

0 commit comments

Comments
 (0)