hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-07-16 03:45:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 工作流审批页面timeline组件节点icon展示样式自定义特殊处理

Browse Source
This commit is contained in:
GoldenZqqq
2024-10-22 16:23:35 +08:00
parent dfa9cd5a3c
commit de073e82bc
6 changed files with 146 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
View File

@ -9,8 +9,32 @@
:icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
:color="getApprovalNodeColor(activity.status)"
>
<template #dot>
<div
class="position-absolute left--10px top--6px rounded-full border border-solid border-#dedede w-30px h-30px flex justify-center items-center bg-#3f73f7 p-5px"
>
<img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
<div
class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
>
<el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
<component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
</el-icon>
</div>
</div>
</template>
<div class="flex flex-col items-start">
<div class="font-bold"> {{ activity.name }}</div>
<!-- 第一行：节点名称、时间 -->
<div class="flex w-full">
<div class="font-bold"> {{ activity.name }}</div>
<!-- 信息：时间 -->
<div
v-if="activity.status !== TaskStatusEnum.NOT_START"
class="text-#a5a5a5 text-13px mt-1 ml-auto"
>
{{ getApprovalNodeTime(activity) }}
</div>
</div>
<div class="flex items-center flex-wrap mt-1">
<!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
<div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
@ -70,7 +94,7 @@
<div
v-for="(user, idx1) in activity.candidateUsers"
:key="idx1"
class="flex items-center"
class="flex items-center self-start"
>
<div class="flex items-center flex-col pr-2">
<div class="position-relative">
@ -99,13 +123,6 @@
</div>
</div>
</div>
<!-- 信息：时间 -->
<div
v-if="activity.status !== TaskStatusEnum.NOT_START"
class="text-#a5a5a5 text-13px mt-1"
>
{{ getApprovalNodeTime(activity) }}
</div>
</div>
</el-timeline-item>
</el-timeline>
@ -117,16 +134,105 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import { TaskStatusEnum } from '@/api/bpm/task'
import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
import starterSvg from '@/assets/svgs/bpm/starter.svg'
import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
import copySvg from '@/assets/svgs/bpm/copy.svg'
import conditionSvg from '@/assets/svgs/bpm/condition.svg'
import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
defineOptions({ name: 'BpmProcessInstanceTimeline' })
defineProps<{
approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
}>()
// defineProps<{
// approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
// }>()
const approveNodes = [
{
id: 1,
name: '发起审批',
nodeType: NodeType.START_USER_NODE,
status: TaskStatusEnum.NOT_START,
startTime: new Date('2024-10-01 10:00:00'),
endTime: null,
candidateUsers: [],
tasks: []
},
{
id: 2,
name: '经理审批',
nodeType: NodeType.USER_TASK_NODE,
status: TaskStatusEnum.RUNNING, // 审批中
startTime: new Date('2024-10-02 11:00:00'),
endTime: null,
candidateUsers: [
{
nickname: '张经理',
avatar: 'https://picsum.photos/200?r=1'
},
{
nickname: '张经理',
avatar: 'https://picsum.photos/200?r=1'
},
{
nickname: '张经理',
avatar: 'https://picsum.photos/200?r=1'
},
{
nickname: '张经理',
avatar: 'https://picsum.photos/200?r=1'
}
],
tasks: [
{
assigneeUser: {
nickname: '李经理',
avatar: 'https://picsum.photos/200?r=1'
},
ownerUser: null,
status: TaskStatusEnum.RUNNING, // 审批中
reason: '同意'
}
]
},
{
id: 3,
name: '财务审批',
nodeType: NodeType.USER_TASK_NODE,
status: TaskStatusEnum.APPROVE, // 审批通过
startTime: new Date('2024-10-03 14:00:00'),
endTime: new Date('2024-10-03 15:00:00'),
candidateUsers: [],
tasks: [
{
assigneeUser: {
nickname: '王财务',
avatar: 'https://picsum.photos/200?r=1'
},
ownerUser: null,
status: TaskStatusEnum.APPROVE, // 审批通过
reason: '审批通过'
}
]
},
{
id: 4,
name: '总经理审批',
nodeType: NodeType.USER_TASK_NODE,
status: TaskStatusEnum.NOT_START, // 未开始
startTime: null,
endTime: null,
candidateUsers: [
{
nickname: '总经理',
avatar: 'https://picsum.photos/200?r=1'
}
],
tasks: []
}
]
// 审批节点
const statusIconMap2 = {
// 未开始
'-1': { color: '#e5e7ec', icon: 'ep-clock' },
'-1': { color: '#909398', icon: 'ep-clock' },
// 待审批
'0': { color: '#e5e7ec', icon: 'ep:loading' },
// 审批中
@ -147,7 +253,7 @@ const statusIconMap2 = {
const statusIconMap = {
// 审批未开始
'-1': { color: '#e5e7ec', icon: Clock },
'-1': { color: '#909398', icon: Clock },
'0': { color: '#e5e7ec', icon: Clock },
// 审批中
'1': { color: '#448ef7', icon: Loading },
@ -165,6 +271,23 @@ const statusIconMap = {
'7': { color: '#00b32a', icon: Check }
}
const nodeTypeSvgMap = {
// 发起人节点
[NodeType.START_USER_NODE]: { color: '', svg: starterSvg },
// 审批人节点
[NodeType.USER_TASK_NODE]: { color: '', svg: auditorSvg },
// 抄送人节点
[NodeType.COPY_TASK_NODE]: { color: '', svg: copySvg },
// 条件分支节点
[NodeType.CONDITION_NODE]: { color: '', svg: conditionSvg },
// 并行分支节点
[NodeType.PARALLEL_BRANCH_NODE]: { color: '', svg: parallelSvg }
}
const getApprovalNodeImg = (nodeType: NodeType) => {
return nodeTypeSvgMap[nodeType]?.svg
}
const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
if (taskStatus == TaskStatusEnum.NOT_START) {
return statusIconMap[taskStatus]?.icon
@ -181,13 +304,13 @@ const getApprovalNodeColor = (taskStatus: number) => {
const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
if (node.nodeType === NodeType.START_USER_NODE && node.startTime) {
return `发起时间：${formatDate(node.startTime)}`
return `${formatDate(node.startTime)}`
}
if (node.endTime) {
return `审批时间：${formatDate(node.endTime)}`
return `${formatDate(node.endTime)}`
}
if (node.startTime) {
return `创建时间：${formatDate(node.startTime)}`
return `${formatDate(node.startTime)}`
}
}
</script>