Commit 348762ae6aea60989c31e8fe7d6dcbc8c5b290ea
1 parent
1425f7df
1. 修复 ProcessViewer 找不到 taskList 报错，= = 变量名改了。
2. 增加事件监听器，悬浮可以展示部分信息
Showing
2 changed files
with
40 additions
and
3 deletions
yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
| ... | ... | @@ -41,6 +41,8 @@ export default { |
| 41 | 41 | this.$emit("destroy", this.bpmnModeler); |
| 42 | 42 | this.bpmnModeler = null; |
| 43 | 43 | }); |
| 44 | + // 初始模型的监听器 | |
| 45 | + this.initModelListeners(); | |
| 44 | 46 | }, |
| 45 | 47 | watch: { |
| 46 | 48 | value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图 |
| ... | ... | @@ -140,7 +142,7 @@ export default { |
| 140 | 142 | if (activity) { |
| 141 | 143 | canvas.addMarker(n.id, activity.endTime ? 'highlight' : 'highlight-todo') |
| 142 | 144 | n.outgoing?.forEach(nn => { |
| 143 | - const targetTask = this.taskList.find(m => m.key === nn.targetRef.id) | |
| 145 | + const targetTask = activityList.find(m => m.key === nn.targetRef.id) | |
| 144 | 146 | if (targetTask) { |
| 145 | 147 | canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo') |
| 146 | 148 | canvas.addMarker(nn.targetRef.id, targetTask.endTime ? 'highlight' : 'highlight-todo') |
| ... | ... | @@ -166,7 +168,41 @@ export default { |
| 166 | 168 | } |
| 167 | 169 | } |
| 168 | 170 | }) |
| 169 | - } | |
| 171 | + }, | |
| 172 | + initModelListeners() { | |
| 173 | + const EventBus = this.bpmnModeler.get("eventBus"); | |
| 174 | + const that = this; | |
| 175 | + // 注册需要的监听事件, 将. 替换为 - , 避免解析异常 | |
| 176 | + EventBus.on('element.hover', function(eventObj) { | |
| 177 | + let element = eventObj ? eventObj.element : null; | |
| 178 | + that.elementHover(element); | |
| 179 | + }); | |
| 180 | + EventBus.on('element.out', function(eventObj) { | |
| 181 | + let element = eventObj ? eventObj.element : null; | |
| 182 | + that.elementOut(element); | |
| 183 | + }); | |
| 184 | + }, | |
| 185 | + // 流程图的元素被 hover | |
| 186 | + elementHover(element) { | |
| 187 | + this.element = element; | |
| 188 | + !this.elementOverlayIds && (this.elementOverlayIds = {}); | |
| 189 | + !this.overlays && (this.overlays = this.bpmnModeler.get("overlays")); | |
| 190 | + // 展示信息 | |
| 191 | + if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") { | |
| 192 | + this.elementOverlayIds[element.id] = this.overlays.add(element, { | |
| 193 | + position: { left: 0, bottom: 0 }, | |
| 194 | + html: `<div class="element-overlays"> | |
| 195 | + <p>Elemet id: ${element.id}</p> | |
| 196 | + <p>Elemet type: ${element.type}</p> | |
| 197 | + </div>` | |
| 198 | + }); | |
| 199 | + } | |
| 200 | + }, | |
| 201 | + // 流程图的元素被 out | |
| 202 | + elementOut(element) { | |
| 203 | + this.overlays.remove({ element }); | |
| 204 | + this.elementOverlayIds[element.id] = null; | |
| 205 | + }, | |
| 170 | 206 | } |
| 171 | 207 | }; |
| 172 | 208 | </script> | ... | ... |
yudao-admin-ui/src/views/bpm/processInstance/detail.vue