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

Author: GoldenZqqq

src/assets/svgs/bpm/auditor.svg

@@ -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>