Skip to content

Commit a9623e3

Browse files
GoldenZqqqGoldenZqqq
committed
feat: 审批记录时间线抽取为单独组件；时间线整体样式优化、展示逻辑TODO
1 parent 7151695 commit a9623e3

File tree

2 files changed

+164
-45
lines changed

2 files changed

+164
-45
lines changed

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

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<template>
2+
<el-timeline class="pt-20px">
3+
<el-timeline-item v-for="(activity, index) in mockData" :key="index" size="large">
4+
<div class="flex flex-col items-start">
5+
<div class="font-bold"> {{ activity.name }}</div>
6+
<div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
7+
<div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
8+
<div class="mb-5px">审批意见：</div>
9+
<div
10+
class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
11+
>
12+
{{ activity.opinion }}
13+
</div>
14+
</div>
15+
<div v-if="activity.createTime" class="text-#a5a5a5 text-13px">
16+
{{ formatDate(activity.createTime) }}
17+
</div>
18+
</div>
19+
<!-- 该节点用户的头像 -->
20+
<template #dot>
21+
<div class="w-35px h-35px position-relative">
22+
<img
23+
src="@/assets/imgs/avatar.jpg"
24+
class="rounded-full w-full h-full position-absolute bottom-6px right-12px"
25+
alt=""
26+
/>
27+
<div
28+
class="position-absolute top-16px left-8px bg-#fff rounded-full flex items-center content-center p-2px"
29+
>
30+
<Icon
31+
:size="12"
32+
:icon="optIconMap[activity.status]?.icon"
33+
:color="optIconMap[activity.status]?.color"
34+
/>
35+
</div>
36+
</div>
37+
</template>
38+
</el-timeline-item>
39+
</el-timeline>
40+
</template>
41+
42+
<script lang="ts" setup>
43+
import { formatDate } from '@/utils/formatTime'
44+
import { propTypes } from '@/utils/propTypes'
45+
46+
defineOptions({ name: 'BpmProcessInstanceTimeline' })
47+
defineProps({
48+
tasks: propTypes.array // 流程任务的数组
49+
})
50+
51+
const optIconMap = {
52+
// 审批中
53+
'1': {
54+
color: '#00b32a',
55+
icon: 'fa-solid:clock'
56+
},
57+
// 审批通过
58+
'2': { color: '#00b32a', icon: 'fa-solid:check-circle' },
59+
// 审批不通过
60+
'3': { color: '#f46b6c', icon: 'fa-solid:times-circle' }
61+
}
62+
63+
const mockData: any = [
64+
{
65+
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
66+
name: '发起人',
67+
createTime: 1725237646192,
68+
endTime: null,
69+
durationInMillis: null,
70+
status: 1,
71+
reason: null,
72+
ownerUser: null,
73+
assigneeUser: {
74+
id: 104,
75+
nickname: '测试号',
76+
deptId: 107,
77+
deptName: '运维部门'
78+
},
79+
taskDefinitionKey: 'task-01',
80+
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
81+
processInstance: {
82+
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
83+
name: 'oa_leave',
84+
createTime: null,
85+
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
86+
startUser: null
87+
},
88+
parentTaskId: null,
89+
children: null,
90+
formId: null,
91+
formName: null,
92+
formConf: null,
93+
formFields: null,
94+
formVariables: null
95+
},
96+
{
97+
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
98+
name: '领导审批',
99+
createTime: 1725237646192,
100+
endTime: null,
101+
durationInMillis: null,
102+
status: 2,
103+
reason: null,
104+
ownerUser: null,
105+
assigneeUser: {
106+
id: 104,
107+
nickname: '领导',
108+
deptId: 107,
109+
deptName: '运维部门'
110+
},
111+
taskDefinitionKey: 'task-01',
112+
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
113+
processInstance: {
114+
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
115+
name: 'oa_leave',
116+
createTime: null,
117+
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
118+
startUser: null
119+
},
120+
parentTaskId: null,
121+
children: null,
122+
formId: null,
123+
formName: null,
124+
formConf: null,
125+
formFields: null,
126+
formVariables: null
127+
},
128+
{
129+
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
130+
name: '财务总监审核',
131+
createTime: 1725237646192,
132+
endTime: null,
133+
durationInMillis: null,
134+
status: 3,
135+
reason: null,
136+
ownerUser: null,
137+
assigneeUser: {
138+
id: 104,
139+
nickname: '财务总监',
140+
deptId: 107,
141+
deptName: '运维部门'
142+
},
143+
taskDefinitionKey: 'task-01',
144+
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
145+
processInstance: {
146+
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
147+
name: 'oa_leave',
148+
createTime: null,
149+
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
150+
startUser: null
151+
},
152+
parentTaskId: null,
153+
children: null,
154+
formId: null,
155+
formName: null,
156+
formConf: null,
157+
formFields: null,
158+
formVariables: null
159+
}
160+
]
161+
</script>

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

Lines changed: 3 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -56,51 +56,8 @@
5656
/>
5757
</el-col>
5858
<el-col :span="6">
59-
<!-- TODO @GoldenZqqq：后续这个，也拆个小组件出来 -->
60-
<el-timeline class="pt-20px">
61-
<el-timeline-item type="primary" size="large">
62-
<div class="flex flex-col items-start gap-2">
63-
<div class="font-bold"> 发起人：{{ processInstance?.startUser?.nickname }}</div>
64-
<el-tag type="success">发起</el-tag>
65-
<div class="text-#a5a5a5 text-12px">
66-
发起时间：{{ formatDate(processInstance.startTime) }}
67-
</div>
68-
</div>
69-
</el-timeline-item>
70-
<el-timeline-item
71-
v-for="(activity, index) in tasks"
72-
:key="index"
73-
type="primary"
74-
size="large"
75-
>
76-
<div class="flex flex-col items-start gap-2">
77-
<div class="font-bold"> 审批人：{{ activity.assigneeUser?.nickname }}</div>
78-
<dict-tag
79-
:type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
80-
:value="activity.status"
81-
/>
82-
<!-- TODO：暂无该字段 -->
83-
<div v-if="activity.receiveTime" class="text-#a5a5a5 text-12px">
84-
接收时间：{{ formatDate(activity.receiveTime) }}
85-
</div>
86-
<div v-if="activity.createTime" class="text-#a5a5a5 text-12px">
87-
审批时间：{{ formatDate(activity.createTime) }}
88-
</div>
89-
<div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
90-
<div class="mb-5px">审批意见：</div>
91-
<div
92-
class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
93-
>
94-
{{ activity.opinion }}
95-
</div>
96-
</div>
97-
</div>
98-
<!-- 该节点用户的头像 -->
99-
<!-- <template #dot>
100-
<img :src="activity?.avatar" alt="" />
101-
</template> -->
102-
</el-timeline-item>
103-
</el-timeline>
59+
<!-- 审批记录时间线 -->
60+
<ProcessInstanceTimeline :process-instance="processInstance" :tasks="tasks" />
10461
</el-col>
10562
</el-row>
10663
</el-tab-pane>
@@ -139,6 +96,7 @@ import * as TaskApi from '@/api/bpm/task'
13996
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
14097
import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
14198
import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
99+
import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
142100
import { registerComponent } from '@/utils/routerHelper'
143101
import * as UserApi from '@/api/system/user'
144102
import audit1 from '@/assets/svgs/bpm/audit1.svg'

0 commit comments

Comments
 (0)