优化 bpm 高亮流程图的前端

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/task/vo/activity/BpmActivityRespVO.java

@@ -20,6 +20,9 @@ public class BpmActivityRespVO {
     @ApiModelProperty(value = "流程活动的结束时间", required = true)
     private Date endTime;
 
+    @ApiModelProperty(value = "关联的流程任务的编号", example = "2048", notes = "关联的流程任务，只有 UserTask 等类型才有")
+    private String taskId;
+
     /**
      * 关联的流程任务，只有 UserTask 类型才有
      */

yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -37,6 +37,8 @@ export default {
     return {
       xml: '',
       activityList: [],
+      processInstance: undefined,
+      taskList: [],
     };
   },
   mounted() {
@@ -61,6 +63,14 @@ export default {
     activityData: function (newActivityData) {
       this.activityList = newActivityData;
       this.createNewDiagram(this.xml);
+    },
+    processInstanceData: function (newProcessInstanceData) {
+      this.processInstance = newProcessInstanceData;
+      this.createNewDiagram(this.xml);
+    },
+    taskData: function (newTaskListData) {
+      this.taskList = newTaskListData;
+      this.createNewDiagram(this.xml);
     }
   },
   methods: {
@@ -94,6 +104,11 @@ export default {
     /* 高亮流程图 */
     // TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
     async highlightDiagram() {
+      // let activityList = this.activityList.filter(task => {
+      //   if (task.type !== 'sequenceFlow') { // 去除连线元素
+      //     return true;
+      //   }
+      // });
       let activityList = this.activityList;
       if (activityList.length === 0) {
         return;
@@ -109,20 +124,15 @@ export default {
           if (!activity) {
             return;
           }
-          // TODO 芋艿：
+          // 处理用户任务的高亮
-          if (activity.task) {
+          const task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
-            const result = activity.task.result;
+          if (task) {
-            if (result === 1) {
+            canvas.addMarker(n.id, this.getTaskHighlightCss(task));
-              canvas.addMarker(n.id, 'highlight-todo');
-            } else if (result === 2) {
-              canvas.addMarker(n.id, 'highlight');
-            } else if (result === 3) {
-              canvas.addMarker(n.id, 'highlight-reject');
-            } else if (result === 4) {
-              canvas.addMarker(n.id, 'highlight-cancel');
-            }
           }
+
+          debugger
           n.outgoing?.forEach(nn => {
+            debugger
             let targetActivity = activityList.find(m => m.key === nn.targetRef.id)
             if (targetActivity) {
               debugger
@@ -190,8 +200,15 @@ export default {
       return activity.endTime ? 'highlight' : 'highlight-todo';
     },
     getTaskHighlightCss(task) {
-      if (!task) {
+      const result = task.result;
-        return '';
+      if (result === 1) {
+        return 'highlight-todo';
+      } else if (result === 2) {
+        return 'highlight';
+      } else if (result === 3) {
+        return 'highlight-reject';
+      } else if (result === 4) {
+        return 'highlight-cancel';
       }
       return '';
     },

yudao-admin-ui/src/views/bpm/processInstance/detail.vue

@@ -74,7 +74,8 @@
       <div slot="header" class="clearfix">
         <span class="el-icon-picture-outline">流程图</span>
       </div>
-      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"/>
+      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"
+            :processInstanceData="processInstance" :taskData="tasks" />
     </el-card>
 
     <!-- 对话框(转派审批人) -->