Merge pull request #96 from GoldenZqqq/feature/bpm

工作流审批页面-时间线组件样式布局重构与展示逻辑调整

Author: YunaiV

src/assets/svgs/bpm/auditor.svg

@@ -35,7 +35,7 @@
             <Icon icon="fa:sort-amount-desc" class="mr-5px" />
             排序
           </el-button>
-          <el-button v-else link type="info" class="mr-20px" @click.stop="handleAddModel('create')">
+          <el-button v-else link type="info" class="mr-20px" @click.stop="openModelForm('create')">
             <Icon icon="fa:plus" class="mr-5px" />
             新建
           </el-button>
@@ -150,7 +150,7 @@
             <el-button
               link
               type="primary"
-              @click="openForm('update', scope.row.id)"
+              @click="openModelForm('update', scope.row.id)"
               v-hasPermi="['bpm:model:update']"
               :disabled="!isManagerUser(scope.row)"
             >
@@ -299,12 +299,6 @@ const handleCategoryCommand = (command: string) => {
   }
 }
 
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (row: any) => {
   try {
@@ -481,8 +475,8 @@ const handleDeleteGroup = async () => {
 
 // 添加流程模型弹窗
 const modelFormRef = ref()
-const handleAddModel = (type: string) => {
-  modelFormRef.value.open(type)
+const openModelForm = (type: string, id?: number) => {
+  modelFormRef.value.open(type, id)
 }
 
 watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })

src/assets/svgs/bpm/condition.svg

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