feat: 审批记录时间线抽取为单独组件；时间线整体样式优化、展示逻辑TODO
GoldenZqqq
parent
7151695103
commit
a9623e3001
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<el-timeline class="pt-20px">
|
||||
<el-timeline-item v-for="(activity, index) in mockData" :key="index" size="large">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="font-bold"> {{ activity.name }}</div>
|
||||
<div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
|
||||
<div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
|
||||
<div class="mb-5px">审批意见：</div>
|
||||
<div
|
||||
class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
|
||||
>
|
||||
{{ activity.opinion }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activity.createTime" class="text-#a5a5a5 text-13px">
|
||||
{{ formatDate(activity.createTime) }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 该节点用户的头像 -->
|
||||
<template #dot>
|
||||
<div class="w-35px h-35px position-relative">
|
||||
<img
|
||||
src="@/assets/imgs/avatar.jpg"
|
||||
class="rounded-full w-full h-full position-absolute bottom-6px right-12px"
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
class="position-absolute top-16px left-8px bg-#fff rounded-full flex items-center content-center p-2px"
|
||||
>
|
||||
<Icon
|
||||
:size="12"
|
||||
:icon="optIconMap[activity.status]?.icon"
|
||||
:color="optIconMap[activity.status]?.color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceTimeline' })
|
||||
defineProps({
|
||||
tasks: propTypes.array // 流程任务的数组
|
||||
})
|
||||
|
||||
const optIconMap = {
|
||||
// 审批中
|
||||
'1': {
|
||||
color: '#00b32a',
|
||||
icon: 'fa-solid:clock'
|
||||
},
|
||||
// 审批通过
|
||||
'2': { color: '#00b32a', icon: 'fa-solid:check-circle' },
|
||||
// 审批不通过
|
||||
'3': { color: '#f46b6c', icon: 'fa-solid:times-circle' }
|
||||
}
|
||||
|
||||
const mockData: any = [
|
||||
{
|
||||
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
|
||||
name: '发起人',
|
||||
createTime: 1725237646192,
|
||||
endTime: null,
|
||||
durationInMillis: null,
|
||||
status: 1,
|
||||
reason: null,
|
||||
ownerUser: null,
|
||||
assigneeUser: {
|
||||
id: 104,
|
||||
nickname: '测试号',
|
||||
deptId: 107,
|
||||
deptName: '运维部门'
|
||||
},
|
||||
taskDefinitionKey: 'task-01',
|
||||
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||||
processInstance: {
|
||||
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||||
name: 'oa_leave',
|
||||
createTime: null,
|
||||
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||||
startUser: null
|
||||
},
|
||||
parentTaskId: null,
|
||||
children: null,
|
||||
formId: null,
|
||||
formName: null,
|
||||
formConf: null,
|
||||
formFields: null,
|
||||
formVariables: null
|
||||
},
|
||||
{
|
||||
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
|
||||
name: '领导审批',
|
||||
createTime: 1725237646192,
|
||||
endTime: null,
|
||||
durationInMillis: null,
|
||||
status: 2,
|
||||
reason: null,
|
||||
ownerUser: null,
|
||||
assigneeUser: {
|
||||
id: 104,
|
||||
nickname: '领导',
|
||||
deptId: 107,
|
||||
deptName: '运维部门'
|
||||
},
|
||||
taskDefinitionKey: 'task-01',
|
||||
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||||
processInstance: {
|
||||
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||||
name: 'oa_leave',
|
||||
createTime: null,
|
||||
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||||
startUser: null
|
||||
},
|
||||
parentTaskId: null,
|
||||
children: null,
|
||||
formId: null,
|
||||
formName: null,
|
||||
formConf: null,
|
||||
formFields: null,
|
||||
formVariables: null
|
||||
},
|
||||
{
|
||||
id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
|
||||
name: '财务总监审核',
|
||||
createTime: 1725237646192,
|
||||
endTime: null,
|
||||
durationInMillis: null,
|
||||
status: 3,
|
||||
reason: null,
|
||||
ownerUser: null,
|
||||
assigneeUser: {
|
||||
id: 104,
|
||||
nickname: '财务总监',
|
||||
deptId: 107,
|
||||
deptName: '运维部门'
|
||||
},
|
||||
taskDefinitionKey: 'task-01',
|
||||
processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||||
processInstance: {
|
||||
id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
|
||||
name: 'oa_leave',
|
||||
createTime: null,
|
||||
processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
|
||||
startUser: null
|
||||
},
|
||||
parentTaskId: null,
|
||||
children: null,
|
||||
formId: null,
|
||||
formName: null,
|
||||
formConf: null,
|
||||
formFields: null,
|
||||
formVariables: null
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -56,51 +56,8 @@
|
|||
/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<!-- TODO @GoldenZqqq：后续这个，也拆个小组件出来 -->
|
||||
<el-timeline class="pt-20px">
|
||||
<el-timeline-item type="primary" size="large">
|
||||
<div class="flex flex-col items-start gap-2">
|
||||
<div class="font-bold"> 发起人：{{ processInstance?.startUser?.nickname }}</div>
|
||||
<el-tag type="success">发起</el-tag>
|
||||
<div class="text-#a5a5a5 text-12px">
|
||||
发起时间：{{ formatDate(processInstance.startTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in tasks"
|
||||
:key="index"
|
||||
type="primary"
|
||||
size="large"
|
||||
>
|
||||
<div class="flex flex-col items-start gap-2">
|
||||
<div class="font-bold"> 审批人：{{ activity.assigneeUser?.nickname }}</div>
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
|
||||
:value="activity.status"
|
||||
/>
|
||||
<!-- TODO：暂无该字段 -->
|
||||
<div v-if="activity.receiveTime" class="text-#a5a5a5 text-12px">
|
||||
接收时间：{{ formatDate(activity.receiveTime) }}
|
||||
</div>
|
||||
<div v-if="activity.createTime" class="text-#a5a5a5 text-12px">
|
||||
审批时间：{{ formatDate(activity.createTime) }}
|
||||
</div>
|
||||
<div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
|
||||
<div class="mb-5px">审批意见：</div>
|
||||
<div
|
||||
class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
|
||||
>
|
||||
{{ activity.opinion }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 该节点用户的头像 -->
|
||||
<!-- <template #dot>
|
||||
<img :src="activity?.avatar" alt="" />
|
||||
</template> -->
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<!-- 审批记录时间线 -->
|
||||
<ProcessInstanceTimeline :process-instance="processInstance" :tasks="tasks" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
|
|
@ -139,6 +96,7 @@ import * as TaskApi from '@/api/bpm/task'
|
|||
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
|
||||
import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
|
||||
import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
|
||||
import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
|
||||
import { registerComponent } from '@/utils/routerHelper'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import audit1 from '@/assets/svgs/bpm/audit1.svg'
|
||||
|
|
|
|||
Loading…
Reference in New Issue