Skip to content

Commit 0fbd982

Browse files
GoldenZqqqGoldenZqqq
committed
fix: 修复时间线组件中存在审批意见时，候选人名称头像样式布局错位问题
1 parent cd69659 commit 0fbd982

File tree

2 files changed

+42
-136
lines changed

2 files changed

+42
-136
lines changed

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

Lines changed: 0 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -146,100 +146,6 @@ const getDefinitionList = async () => {
146146
processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
147147
suspensionState: 1
148148
})
149-
/* 测试数据 */
150-
// processDefinitionList.value = [
151-
// {
152-
// id: 'business:3:fab1dceb-95be-11ef-8c7d-00a6181404fd',
153-
// version: 3,
154-
// name: '商务管理',
155-
// key: 'business',
156-
// icon: 'https://picsum.photos/200?r=2',
157-
// description: '商务管理',
158-
// category: 'test0',
159-
// categoryName: '分类0',
160-
// formType: 10,
161-
// formId: 27,
162-
// formName: null,
163-
// formConf:
164-
// '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":false,"innerText":"提交"}}',
165-
// formFields: [
166-
// '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
167-
// '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}',
168-
// '{"type":"datePicker","field":"Finom2tsbwbpadc","title":"请假时间段","info":"","$required":false,"props":{"type":"datetimerange"},"_fc_id":"id_F028m2tsbwbpaec","name":"ref_F0okm2tsbwbpafc","display":true,"hidden":false,"_fc_drag_tag":"dateRange"}'
169-
// ],
170-
// formCustomCreatePath: '',
171-
// formCustomViewPath: '',
172-
// suspensionState: 1,
173-
// deploymentTime: null,
174-
// bpmnXml: null,
175-
// startUserSelectTasks: null
176-
// },
177-
// {
178-
// id: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
179-
// version: 1,
180-
// name: 'oa_leave',
181-
// key: 'oa_leave',
182-
// icon: null,
183-
// description: 'oa_leave',
184-
// category: 'etst',
185-
// categoryName: '分类1',
186-
// formType: 20,
187-
// formId: null,
188-
// formName: null,
189-
// formConf: null,
190-
// formFields: null,
191-
// formCustomCreatePath: '/bpm/oa/leave/create',
192-
// formCustomViewPath: '/bpm/oa/leave/detail',
193-
// suspensionState: 1,
194-
// deploymentTime: null,
195-
// bpmnXml: null,
196-
// startUserSelectTasks: null
197-
// },
198-
// {
199-
// id: 'oa_leave:3:c9d06889-94fd-11ef-bf08-00a6181404fd',
200-
// version: 3,
201-
// name: '请假流程',
202-
// key: 'oa_leave',
203-
// icon: 'https://picsum.photos/200?r=1',
204-
// description: '请假流程',
205-
// category: 'test3',
206-
// categoryName: '分类3',
207-
// formType: 10,
208-
// formId: 27,
209-
// formName: null,
210-
// formConf:
211-
// '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
212-
// formFields: [
213-
// '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
214-
// '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
215-
// ],
216-
// formCustomCreatePath: 'bpm/oa/leave/create',
217-
// formCustomViewPath: 'bpm/oa/leave/create',
218-
// suspensionState: 1,
219-
// deploymentTime: null,
220-
// bpmnXml: null,
221-
// startUserSelectTasks: null
222-
// }
223-
// ]
224-
/* 测试数据 */
225-
// processDefinitionList.value = [
226-
// ...processDefinitionList.value,
227-
// ...processDefinitionList.value,
228-
// ...processDefinitionList.value,
229-
// ...processDefinitionList.value,
230-
// ...processDefinitionList.value,
231-
// ...processDefinitionList.value,
232-
// ...processDefinitionList.value,
233-
// ...processDefinitionList.value,
234-
// ...processDefinitionList.value,
235-
// ...processDefinitionList.value,
236-
// ...processDefinitionList.value,
237-
// ...processDefinitionList.value,
238-
// ...processDefinitionList.value,
239-
// ...processDefinitionList.value,
240-
// ...processDefinitionList.value,
241-
// ...processDefinitionList.value
242-
// ]
243149
// 初始化过滤列表为全部流程定义
244150
filteredProcessDefinitionList.value = processDefinitionList.value
245151
} finally {

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

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</div>
2525
</div>
2626
</template>
27-
<div class="flex flex-col items-start">
27+
<div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}`">
2828
<!-- 第一行：节点名称、时间 -->
2929
<div class="flex w-full">
3030
<div class="font-bold"> {{ activity.name }}</div>
@@ -36,53 +36,53 @@
3636
{{ getApprovalNodeTime(activity) }}
3737
</div>
3838
</div>
39-
<div class="flex items-center flex-wrap mt-1">
39+
<div class="flex items-center flex-wrap mt-1 gap2">
4040
<!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
41-
<div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
42-
<div class="flex flex-col pr-2 gap2">
41+
<div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
42+
<div
43+
class="position-relative flex flex-wrap gap2"
44+
v-if="task.assigneeUser || task.ownerUser"
45+
>
46+
<!-- 信息：头像昵称 -->
4347
<div
44-
class="position-relative flex flex-wrap gap2"
45-
v-if="task.assigneeUser || task.ownerUser"
48+
class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
4649
>
47-
<!-- 信息：头像昵称 -->
50+
<template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
51+
<el-avatar
52+
:size="28"
53+
v-if="task.assigneeUser?.avatar"
54+
:src="task.assigneeUser?.avatar"
55+
/>
56+
<el-avatar :size="28" v-else>
57+
{{ task.assigneeUser?.nickname.substring(0, 1) }}
58+
</el-avatar>
59+
{{ task.assigneeUser?.nickname }}
60+
</template>
61+
<template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
62+
<el-avatar
63+
:size="28"
64+
v-if="task.ownerUser?.avatar"
65+
:src="task.ownerUser?.avatar"
66+
/>
67+
<el-avatar :size="28" v-else>
68+
{{ task.ownerUser?.nickname.substring(0, 1) }}
69+
</el-avatar>
70+
{{ task.ownerUser?.nickname }}
71+
</template>
72+
<!-- 信息：任务 ICON -->
4873
<div
49-
class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
74+
v-if="onlyStatusIconShow.includes(task.status)"
75+
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
5076
>
51-
<template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
52-
<el-avatar
53-
:size="28"
54-
v-if="task.assigneeUser?.avatar"
55-
:src="task.assigneeUser?.avatar"
56-
/>
57-
<el-avatar :size="28" v-else>
58-
{{ task.assigneeUser?.nickname.substring(0, 1) }}
59-
</el-avatar>
60-
{{ task.assigneeUser?.nickname }}
61-
</template>
62-
<template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
63-
<el-avatar
64-
:size="28"
65-
v-if="task.ownerUser?.avatar"
66-
:src="task.ownerUser?.avatar"
67-
/>
68-
<el-avatar :size="28" v-else>
69-
{{ task.ownerUser?.nickname.substring(0, 1) }}
70-
</el-avatar>
71-
{{ task.ownerUser?.nickname }}
72-
</template>
73-
<!-- 信息：任务 ICON -->
74-
<div
75-
v-if="onlyStatusIconShow.includes(task.status)"
76-
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
77-
>
78-
<Icon
79-
:size="12"
80-
:icon="statusIconMap2[task.status]?.icon"
81-
:color="statusIconMap2[task.status]?.color"
82-
/>
83-
</div>
77+
<Icon
78+
:size="12"
79+
:icon="statusIconMap2[task.status]?.icon"
80+
:color="statusIconMap2[task.status]?.color"
81+
/>
8482
</div>
8583
</div>
84+
</div>
85+
<teleport defer :to="`#activity-task-${activity.id}`">
8686
<div
8787
v-if="
8888
task.reason &&
@@ -92,7 +92,7 @@
9292
>
9393
审批意见：{{ task.reason }}
9494
</div>
95-
</div>
95+
</teleport>
9696
</div>
9797
<!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
9898
<div

0 commit comments

Comments
 (0)