From 348762ae6aea60989c31e8fe7d6dcbc8c5b290ea Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 19 Jan 2022 13:39:12 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E4=BF=AE=E5=A4=8D=20ProcessViewer=20?=
 =?UTF-8?q?=E6=89=BE=E4=B8=8D=E5=88=B0=20taskList=20=E6=8A=A5=E9=94=99?=
 =?UTF-8?q?=EF=BC=8C=3D=20=3D=20=E5=8F=98=E9=87=8F=E5=90=8D=E6=94=B9?=
 =?UTF-8?q?=E4=BA=86=E3=80=82=202.=20=E5=A2=9E=E5=8A=A0=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC=E5=99=A8=EF=BC=8C=E6=82=AC=E6=B5=AE=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E5=B1=95=E7=A4=BA=E9=83=A8=E5=88=86=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessViewer.vue        | 40 ++++++++++++++++++-
 .../src/views/bpm/processInstance/detail.vue  |  3 +-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index a1546e92d..fa4801569 100644
--- a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -41,6 +41,8 @@ export default {
       this.$emit("destroy", this.bpmnModeler);
       this.bpmnModeler = null;
     });
+    // 初始模型的监听器
+    this.initModelListeners();
   },
   watch: {
     value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图
@@ -140,7 +142,7 @@ export default {
           if (activity) {
             canvas.addMarker(n.id, activity.endTime ? 'highlight' : 'highlight-todo')
             n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              const targetTask = activityList.find(m => m.key === nn.targetRef.id)
               if (targetTask) {
                 canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
                 canvas.addMarker(nn.targetRef.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
@@ -166,7 +168,41 @@ export default {
           }
         }
       })
-    }
+    },
+    initModelListeners() {
+      const EventBus = this.bpmnModeler.get("eventBus");
+      const that = this;
+      // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+      EventBus.on('element.hover', function(eventObj) {
+        let element = eventObj ? eventObj.element : null;
+        that.elementHover(element);
+      });
+      EventBus.on('element.out', function(eventObj) {
+        let element = eventObj ? eventObj.element : null;
+        that.elementOut(element);
+      });
+    },
+    // 流程图的元素被 hover
+    elementHover(element) {
+      this.element = element;
+      !this.elementOverlayIds && (this.elementOverlayIds = {});
+      !this.overlays && (this.overlays = this.bpmnModeler.get("overlays"));
+      // 展示信息
+      if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") {
+        this.elementOverlayIds[element.id] = this.overlays.add(element, {
+          position: { left: 0, bottom: 0 },
+          html: `<div class="element-overlays">
+            <p>Elemet id: ${element.id}</p>
+            <p>Elemet type: ${element.type}</p>
+          </div>`
+        });
+      }
+    },
+    // 流程图的元素被 out
+    elementOut(element) {
+      this.overlays.remove({ element });
+      this.elementOverlayIds[element.id] = null;
+    },
   }
 };
 </script>
diff --git a/yudao-admin-ui/src/views/bpm/processInstance/detail.vue b/yudao-admin-ui/src/views/bpm/processInstance/detail.vue
index 433bd6b2b..6054222f3 100644
--- a/yudao-admin-ui/src/views/bpm/processInstance/detail.vue
+++ b/yudao-admin-ui/src/views/bpm/processInstance/detail.vue
@@ -68,7 +68,8 @@
         </div>
       </el-col>
     </el-card>
-    <!-- TODO 流程图 -->
+
+    <!-- 高亮流程图 -->
     <el-card class="box-card" v-loading="processInstanceLoading">
       <div slot="header" class="clearfix">
         <span class="el-icon-picture-outline">流程图</span>