Merge remote-tracking branch 'origin/dev' into dev

src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -11,6 +11,7 @@ import BpmnViewer from 'bpmn-js/lib/Viewer'
 import DefaultEmptyXML from './plugins/defaultEmpty'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
+import { isEmpty } from '@/utils/is'
 
 defineOptions({ name: 'MyProcessViewer' })
 
@@ -85,6 +86,7 @@ const createNewDiagram = async (xml) => {
     // console.error(`[Process Designer Warn]: ${e?.message || e}`);
   }
 }
+
 /* 高亮流程图 */
 // TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
 const highlightDiagram = async () => {
@@ -97,6 +99,9 @@ const highlightDiagram = async () => {
   let canvas = bpmnModeler.get('canvas')
   let todoActivity: any = activityList.find((m: any) => !m.endTime) // 找到待办的任务
   let endActivity: any = activityList[activityList.length - 1] // 获得最后一个任务
+  let findProcessTask = false //是否已经高亮了进行中的任务
+  //进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
+  let removeTaskDefinitionKeyList = []
   // debugger
   bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n: any) => {
     let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
@@ -110,9 +115,17 @@ const highlightDiagram = async () => {
       if (!task) {
         return
       }
+      //进行中的任务已经高亮过了，则不高亮后面的任务了
+      if (findProcessTask) {
+        removeTaskDefinitionKeyList.push(n.id)
+        return
+      }
       // 高亮任务
       canvas.addMarker(n.id, getResultCss(task.result))
-
+      //标记是否高亮了进行中任务
+      if (task.result === 1) {
+        findProcessTask = true
+      }
       // 如果非通过，就不走后面的线条了
       if (task.result !== 2) {
         return
@@ -212,6 +225,11 @@ const highlightDiagram = async () => {
       }
     }
   })
+  if (!isEmpty(removeTaskDefinitionKeyList)) {
+    taskList.value = taskList.value.filter(
+      (item) => !removeTaskDefinitionKeyList.includes(item.definitionKey)
+    )
+  }
 }
 const getActivityHighlightCss = (activity) => {
   return activity.endTime ? 'highlight' : 'highlight-todo'
@@ -229,6 +247,9 @@ const getResultCss = (result) => {
   } else if (result === 4) {
     // 已取消
     return 'highlight-cancel'
+  } else if (result === 5) {
+    // 退回
+    return 'highlight-return'
   }
   return ''
 }
@@ -273,9 +294,9 @@ const elementHover = (element) => {
   console.log(element.value, 'element.value')
   const activity = activityLists.value.find((m) => m.key === element.value.id)
   console.log(activity, 'activityactivityactivityactivity')
-  // if (!activity) {
-  //   return
-  // }
+  if (!activity) {
+    return
+  }
   if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
     let html = `<div class="element-overlays">
             <p>Elemet id: ${element.value.id}</p>
@@ -564,6 +585,45 @@ watch(
   stroke: grey !important;
 }
 
+/** 回退 */
+.highlight-return.djs-shape .djs-visual > :nth-child(1) {
+  fill: #e6a23c !important;
+  stroke: #e6a23c !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-return.djs-shape .djs-visual > :nth-child(2) {
+  fill: #e6a23c !important;
+}
+.highlight-return.djs-shape .djs-visual > path {
+  fill: #e6a23c !important;
+  fill-opacity: 0.2 !important;
+  stroke: #e6a23c !important;
+}
+.highlight-return.djs-connection > .djs-visual > path {
+  stroke: #e6a23c !important;
+}
+
+.highlight-return:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: #e6a23c !important; /* color elements as green */
+}
+
+:deep(.highlight-return.djs-shape .djs-visual > :nth-child(1)) {
+  fill: #e6a23c !important;
+  stroke: #e6a23c !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight-return.djs-shape .djs-visual > :nth-child(2)) {
+  fill: #e6a23c !important;
+}
+:deep(.highlight-return.djs-shape .djs-visual > path) {
+  fill: #e6a23c !important;
+  fill-opacity: 0.2 !important;
+  stroke: #e6a23c !important;
+}
+:deep(.highlight-return.djs-connection > .djs-visual > path) {
+  stroke: #e6a23c !important;
+}
+
 .element-overlays {
   width: 200px;
   padding: 8px;