fix: 修复时间线组件中存在审批意见时，候选人名称头像样式布局错位问题
GoldenZqqq
parent
cd69659c93
commit
0fbd98291e
|
|
@ -146,100 +146,6 @@ const getDefinitionList = async () => {
|
|||
processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
|
||||
suspensionState: 1
|
||||
})
|
||||
/* 测试数据 */
|
||||
// processDefinitionList.value = [
|
||||
// {
|
||||
// id: 'business:3:fab1dceb-95be-11ef-8c7d-00a6181404fd',
|
||||
// version: 3,
|
||||
// name: '商务管理',
|
||||
// key: 'business',
|
||||
// icon: 'https://picsum.photos/200?r=2',
|
||||
// description: '商务管理',
|
||||
// category: 'test0',
|
||||
// categoryName: '分类0',
|
||||
// formType: 10,
|
||||
// formId: 27,
|
||||
// formName: null,
|
||||
// formConf:
|
||||
// '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":false,"innerText":"提交"}}',
|
||||
// formFields: [
|
||||
// '{"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"}',
|
||||
// '{"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"}]}',
|
||||
// '{"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"}'
|
||||
// ],
|
||||
// formCustomCreatePath: '',
|
||||
// formCustomViewPath: '',
|
||||
// suspensionState: 1,
|
||||
// deploymentTime: null,
|
||||
// bpmnXml: null,
|
||||
// startUserSelectTasks: null
|
||||
// },
|
||||
// {
|
||||
// id: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||||
// version: 1,
|
||||
// name: 'oa_leave',
|
||||
// key: 'oa_leave',
|
||||
// icon: null,
|
||||
// description: 'oa_leave',
|
||||
// category: 'etst',
|
||||
// categoryName: '分类1',
|
||||
// formType: 20,
|
||||
// formId: null,
|
||||
// formName: null,
|
||||
// formConf: null,
|
||||
// formFields: null,
|
||||
// formCustomCreatePath: '/bpm/oa/leave/create',
|
||||
// formCustomViewPath: '/bpm/oa/leave/detail',
|
||||
// suspensionState: 1,
|
||||
// deploymentTime: null,
|
||||
// bpmnXml: null,
|
||||
// startUserSelectTasks: null
|
||||
// },
|
||||
// {
|
||||
// id: 'oa_leave:3:c9d06889-94fd-11ef-bf08-00a6181404fd',
|
||||
// version: 3,
|
||||
// name: '请假流程',
|
||||
// key: 'oa_leave',
|
||||
// icon: 'https://picsum.photos/200?r=1',
|
||||
// description: '请假流程',
|
||||
// category: 'test3',
|
||||
// categoryName: '分类3',
|
||||
// formType: 10,
|
||||
// formId: 27,
|
||||
// formName: null,
|
||||
// formConf:
|
||||
// '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
|
||||
// formFields: [
|
||||
// '{"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"}',
|
||||
// '{"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"}]}'
|
||||
// ],
|
||||
// formCustomCreatePath: 'bpm/oa/leave/create',
|
||||
// formCustomViewPath: 'bpm/oa/leave/create',
|
||||
// suspensionState: 1,
|
||||
// deploymentTime: null,
|
||||
// bpmnXml: null,
|
||||
// startUserSelectTasks: null
|
||||
// }
|
||||
// ]
|
||||
/* 测试数据 */
|
||||
// processDefinitionList.value = [
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value,
|
||||
// ...processDefinitionList.value
|
||||
// ]
|
||||
// 初始化过滤列表为全部流程定义
|
||||
filteredProcessDefinitionList.value = processDefinitionList.value
|
||||
} finally {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}`">
|
||||
<!-- 第一行：节点名称、时间 -->
|
||||
<div class="flex w-full">
|
||||
<div class="font-bold"> {{ activity.name }}</div>
|
||||
|
|
@ -36,53 +36,53 @@
|
|||
{{ getApprovalNodeTime(activity) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center flex-wrap mt-1">
|
||||
<div class="flex items-center flex-wrap mt-1 gap2">
|
||||
<!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
|
||||
<div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
|
||||
<div class="flex flex-col pr-2 gap2">
|
||||
<div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
|
||||
<div
|
||||
class="position-relative flex flex-wrap gap2"
|
||||
v-if="task.assigneeUser || task.ownerUser"
|
||||
>
|
||||
<!-- 信息：头像昵称 -->
|
||||
<div
|
||||
class="position-relative flex flex-wrap gap2"
|
||||
v-if="task.assigneeUser || task.ownerUser"
|
||||
class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
|
||||
>
|
||||
<!-- 信息：头像昵称 -->
|
||||
<template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
|
||||
<el-avatar
|
||||
:size="28"
|
||||
v-if="task.assigneeUser?.avatar"
|
||||
:src="task.assigneeUser?.avatar"
|
||||
/>
|
||||
<el-avatar :size="28" v-else>
|
||||
{{ task.assigneeUser?.nickname.substring(0, 1) }}
|
||||
</el-avatar>
|
||||
{{ task.assigneeUser?.nickname }}
|
||||
</template>
|
||||
<template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
|
||||
<el-avatar
|
||||
:size="28"
|
||||
v-if="task.ownerUser?.avatar"
|
||||
:src="task.ownerUser?.avatar"
|
||||
/>
|
||||
<el-avatar :size="28" v-else>
|
||||
{{ task.ownerUser?.nickname.substring(0, 1) }}
|
||||
</el-avatar>
|
||||
{{ task.ownerUser?.nickname }}
|
||||
</template>
|
||||
<!-- 信息：任务 ICON -->
|
||||
<div
|
||||
class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
|
||||
v-if="onlyStatusIconShow.includes(task.status)"
|
||||
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
|
||||
>
|
||||
<template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
|
||||
<el-avatar
|
||||
:size="28"
|
||||
v-if="task.assigneeUser?.avatar"
|
||||
:src="task.assigneeUser?.avatar"
|
||||
/>
|
||||
<el-avatar :size="28" v-else>
|
||||
{{ task.assigneeUser?.nickname.substring(0, 1) }}
|
||||
</el-avatar>
|
||||
{{ task.assigneeUser?.nickname }}
|
||||
</template>
|
||||
<template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
|
||||
<el-avatar
|
||||
:size="28"
|
||||
v-if="task.ownerUser?.avatar"
|
||||
:src="task.ownerUser?.avatar"
|
||||
/>
|
||||
<el-avatar :size="28" v-else>
|
||||
{{ task.ownerUser?.nickname.substring(0, 1) }}
|
||||
</el-avatar>
|
||||
{{ task.ownerUser?.nickname }}
|
||||
</template>
|
||||
<!-- 信息：任务 ICON -->
|
||||
<div
|
||||
v-if="onlyStatusIconShow.includes(task.status)"
|
||||
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
|
||||
>
|
||||
<Icon
|
||||
:size="12"
|
||||
:icon="statusIconMap2[task.status]?.icon"
|
||||
:color="statusIconMap2[task.status]?.color"
|
||||
/>
|
||||
</div>
|
||||
<Icon
|
||||
:size="12"
|
||||
:icon="statusIconMap2[task.status]?.icon"
|
||||
:color="statusIconMap2[task.status]?.color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<teleport defer :to="`#activity-task-${activity.id}`">
|
||||
<div
|
||||
v-if="
|
||||
task.reason &&
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
>
|
||||
审批意见：{{ task.reason }}
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
<!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue