|
|
@@ -9,103 +9,112 @@
|
|
|
: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">
|
|
|
- <div class="flex flex-col pr-2">
|
|
|
- <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
|
|
|
- <!-- 信息：头像 -->
|
|
|
- <el-avatar
|
|
|
- v-if="task.assigneeUser && task.assigneeUser.avatar"
|
|
|
- :size="36"
|
|
|
- :src="task.assigneeUser.avatar"
|
|
|
- />
|
|
|
- <el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
|
|
|
- {{ task.assigneeUser.nickname.substring(0, 1) }}
|
|
|
- </el-avatar>
|
|
|
- <el-avatar
|
|
|
- v-else-if="task.ownerUser && task.ownerUser.avatar"
|
|
|
- :src="task.ownerUser.avatar"
|
|
|
- />
|
|
|
- <el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
|
|
|
- {{ task.ownerUser.nickname.substring(0, 1) }}
|
|
|
- </el-avatar>
|
|
|
- <!-- 信息：任务 ICON -->
|
|
|
+ <div class="flex flex-col pr-2 gap2">
|
|
|
+ <div
|
|
|
+ class="position-relative flex flex-wrap gap2"
|
|
|
+ v-if="task.assigneeUser || task.ownerUser"
|
|
|
+ >
|
|
|
+ <!-- 信息：头像昵称 -->
|
|
|
<div
|
|
|
- class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
|
|
|
+ class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
|
|
|
>
|
|
|
- <Icon
|
|
|
- :size="12"
|
|
|
- :icon="statusIconMap2[task.status]?.icon"
|
|
|
- :color="statusIconMap2[task.status]?.color"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex flex-col mt-1">
|
|
|
- <!-- 信息：昵称 -->
|
|
|
- <div
|
|
|
- v-if="task.assigneeUser && task.assigneeUser.nickname"
|
|
|
- class="text-12px text-align-center"
|
|
|
- >
|
|
|
- {{ task.assigneeUser.nickname }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-else-if="task.ownerUser && task.ownerUser.nickname"
|
|
|
- class="text-10px text-align-center"
|
|
|
- >
|
|
|
- {{ task.ownerUser.nickname }}
|
|
|
+ <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>
|
|
|
</div>
|
|
|
+ <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
|
|
|
<div
|
|
|
- v-if="task.reason && activity.nodeType === NodeType.USER_TASK_NODE"
|
|
|
- class="text-#a5a5a5 text-13px mt-1"
|
|
|
+ v-for="(user, idx1) in activity.candidateUsers"
|
|
|
+ :key="idx1"
|
|
|
+ class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
|
|
|
>
|
|
|
- 审批意见：{{ task.reason }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
|
|
|
- <div
|
|
|
- v-for="(user, idx1) in activity.candidateUsers"
|
|
|
- :key="idx1"
|
|
|
- class="flex items-center"
|
|
|
- >
|
|
|
- <div class="flex items-center flex-col pr-2">
|
|
|
- <div class="position-relative">
|
|
|
- <!-- 信息：头像 -->
|
|
|
- <el-avatar :size="36" v-if="user.avatar" :src="user.avatar" />
|
|
|
- <el-avatar v-else-if="user.nickname && user.nickname">
|
|
|
- {{ user.nickname.substring(0, 1) }}
|
|
|
- </el-avatar>
|
|
|
- <!-- 信息：任务 ICON -->
|
|
|
- <div
|
|
|
- class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
|
|
|
- >
|
|
|
- <Icon
|
|
|
- :size="12"
|
|
|
- :icon="statusIconMap2['-1']?.icon"
|
|
|
- :color="statusIconMap2['-1']?.color"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex flex-col mt-1">
|
|
|
- <!-- 信息：昵称 -->
|
|
|
- <div v-if="user.nickname" class="text-10px text-align-center">
|
|
|
+ <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
|
|
|
+ <el-avatar :size="28" v-else>
|
|
|
+ {{ user.nickname.substring(0, 1) }}
|
|
|
+ </el-avatar>
|
|
|
{{ user.nickname }}
|
|
|
+
|
|
|
+ <!-- 信息：任务 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['-1']?.icon"
|
|
|
+ :color="statusIconMap2['-1']?.color"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ v-if="task.reason && activity.nodeType === NodeType.USER_TASK_NODE"
|
|
|
+ class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
|
|
|
+ >
|
|
|
+ 审批意见：{{ task.reason }}
|
|
|
+ </div>
|
|
|
</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 +126,21 @@ 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[] // 审批节点信息
|
|
|
}>()
|
|
|
|
|
|
// 审批节点
|
|
|
-
|
|
|
const statusIconMap2 = {
|
|
|
// 未开始
|
|
|
- '-1': { color: '#e5e7ec', icon: 'ep-clock' },
|
|
|
+ '-1': { color: '#909398', icon: 'ep-clock' },
|
|
|
// 待审批
|
|
|
'0': { color: '#e5e7ec', icon: 'ep:loading' },
|
|
|
// 审批中
|
|
|
@@ -147,7 +161,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 +179,27 @@ const statusIconMap = {
|
|
|
'7': { color: '#00b32a', icon: Check }
|
|
|
}
|
|
|
|
|
|
+const nodeTypeSvgMap = {
|
|
|
+ // 发起人节点
|
|
|
+ [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg },
|
|
|
+ // 审批人节点
|
|
|
+ [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
|
|
|
+ // 抄送人节点
|
|
|
+ [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg },
|
|
|
+ // 条件分支节点
|
|
|
+ [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
|
|
|
+ // 并行分支节点
|
|
|
+ [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
|
|
|
+}
|
|
|
+
|
|
|
+// 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
|
|
|
+const onlyStatusIconShow = [-1, 0, 1]
|
|
|
+
|
|
|
+// timeline时间线上icon图标
|
|
|
+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 +216,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>
|
芋道源码
