內容概述
本系列 “vue項目中使用bpmn-xxxx” 分為七篇，均為自己使用過程中用到的實例，手工原創，目前陸續更新中。主要包括vue項目中bpmn使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。如果轉載或通過爬蟲直接爬的，格式特別丑，請來原創看：我是作者原文
前情提要
上文我們已經實現了在外部更改節點名。此時又有新玩法：在流程圖中，根據節點狀態為其標記不同顏色。例如：已完成：黃色，正在進行：綠色，本次我們通過兩種方式來實現該需求。效果：
方式1：modeling.setColor
modeling.setColor接受兩個參數：參數1：節點實例，可以是單個元素，也可是多個節點組成的數組，參數2：class類
let modeling = this.bpmnModeler.get('modeling'); modeling.setColor(節點實例, { stroke: 'green', fill: 'yellow' });
方式2：Overlay
個人理解，overlay是通過定位方式在元素正上方添加一層帶顏色的蒙板
const $overlayHtml = $('<div class="highlight-overlay">').css({
width: shape.width,
height: shape.height
});
overlays.add(節點id, {
position: {top: 0, left: 0},
html: $overlayHtml
});
highlight-overlay：css中聲明好的class類名
overlays.add將創建好的蒙板定位到指定節點位置，此時節點id就是目標節點的唯一身份！
注意事項
上述兩種方式均能實現為節點添加顏色。但方式2有一點副作用，如果此時你為節點注冊了點擊事件，在節點被點擊的時候要做某些處理。此時方式2會使節點點擊事件失效。
原因：方式2中，此時節點上方有一層蒙板，並且和節點等寬等高，相當於節點被蒙板完全覆蓋。所以點擊節點的時候，點擊的是蒙版，不是節點。
不要慌，有解決辦法！此時為蒙板注冊了點擊事件，將點擊節點要做的操作給蒙板也來一份，哈哈
import $ from 'jquery'; // 引入jquery $(".djs-container").on("click", ".djs-overlays", (e) => { const parentEle = e.target.parentElement.parentElement; const shapeId = parentEle.getAttribute('data-container-id'); const temp = this.nodeList.filter( (item) => item.id === shapeId )[0]; // 此時temp就是蒙板下方的節點，要點擊節點做什么，此刻盡管拿去用 ........ });
后續
上文代碼都是片段，特此附上完整代碼：老規矩：data中的chart變量流程圖xml文件數據，由於行數過多，附在了附件中（點我！點我），使用時，將附件內容復制過來，賦值給chart即可運行！
<template>
<div class="containerBox">
<div id="container"></div>
<div style="margin-left: 200px">看我！我是點擊的節點名稱啊~
<span style="color: #eaae00">{{nodeName}}</span>
</div>
</div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import camundaExtension from './resources/camunda';
import $ from 'jquery';
export default {
name: 'index',
data() {
return {
containerEl: null,
bpmnModeler: null,
nodeName: '',
nodeList: [],
// chart變量流程圖xml文件數據，由於行數過多，附在了附件中，使用時，將附件整個賦值給chart即可
chart: ''
};
},
mounted() {
this.containerEl = document.getElementById('container');
this.bpmnModeler = new BpmnModeler({
container: this.containerEl,
moddleExtensions: {camunda: camundaExtension}
});
this.showChart();
},
methods: {
// 流程圖回顯
showChart() {
this.bpmnModeler.importXML(this.chart, (err) => {
if (!err) {
this.addEventBusListener();
this.setNodeColor();
}
});
},
setNodeColor() {
// 目的：為第一個節點添加綠色，為第二個節點添加黃色
// 實現步驟：1、找到頁面里所有節點
const elementRegistry = this.bpmnModeler.get('elementRegistry');
this.nodeList = elementRegistry.filter (
(item) => item.type === 'bpmn:UserTask' || item.type === 'bpmn:ServiceTask'
);
// 此時得到的userTaskList 便是流程圖中所有的節點的集合
console.log(this.nodeList);
// 步驟2 ：為節點添加顏色
// 方式1 ：modeling.setColor(參數1：節點，可以是單個元素實例，也可是多個節點組成的數組，參數2：class類);
let modeling = this.bpmnModeler.get('modeling');
modeling.setColor(this.nodeList[0], {
stroke: 'green',
fill: 'yellow'
});
// 方式2 ：添加蒙板
const overlays = this.bpmnModeler.get('overlays');
const shape = elementRegistry.get(this.nodeList[1].id);
if (shape) {
const $overlayHtml = $('<div class="highlight-overlay">').css({
width: shape.width,
height: shape.height
});
overlays.add(this.nodeList[1].id, {
position: {top: 0, left: 0},
html: $overlayHtml
});
}
// 此方法為了解決方式2造成的節點點擊事件失效問題，如果采用方式1，可忽略此方法
this.overlayClick();
},
overlayClick() {
$(".djs-container").on("click", ".djs-overlays", (e) => {
const parentEle = e.target.parentElement.parentElement;
const shapeId = parentEle.getAttribute('data-container-id');
const temp = this.nodeList.filter(
(item) => item.id === shapeId
)[0];
this.nodeName = temp ? temp.businessObject.name : '';
});
},
addEventBusListener() {
const eventBus = this.bpmnModeler.get('eventBus');
// 為節點注冊點擊事件，點擊節點，下方顯示點擊的節點名稱
eventBus.on('element.click', (e) => {
const {element} = e;
if (!element.parent) return;
if (!e || element.type === 'bpmn:Process') {
return false;
} else {
this.nodeName = element.businessObject.name;
}
});
}
}
};
</script>
<style lang="scss">
.containerBox {
height: calc(100vh - 220px);
position: relative;
#container {
height: calc(100% - 50px);
}
.highlight-overlay {
background-color: green;
opacity: 0.4;
border-radius: 10px;
}
}
</style>
想獲取完整源碼或有問題，歡迎大家關注我的公粽號，掃下面二維碼或微信搜“前端便利貼”，即可獲取~