vue项目中使用bpmn-为节点添加颜色

内容概述

本系列 “vue项目中使用bpmn-xxxx” 分为五篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文

前情提要

上文我们已经实现了在外部更改节点名。此时又有新玩法：在流程图中，根据节点状态为其标记不同颜色。例如：已完成：黄色，正在进行：绿色，本次我们通过两种方式来实现该需求。效果：

<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 {tempDetail, saveCanvas} from '@api/processConfig';
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>

可爱的你可能还需要

• vue项目中使用bpmn-节点篇(为节点添加点击事件、根据id找节点实例、更新节点名字、获取指定类型的所有节点)
• vue项目中使用bpmn-流程图预览篇
• vue项目中使用bpmn-基础篇