前端bpmn.js
项目背景,这是公司重构的项目,画图的功能是在后台利用activiti来写的,在前台是显示回看的效果。项目之前是利用的activiti在前端的使用,引入js插件的形式,用jquery来写的,代码冗余,每次维护都要阅读大量源码,成本较高,新的项目采用的是vue框架,经过筛选最终确定bpmn.js。
项目需求:封装成插件,只能显示,动态回看流程,点击查看具体流程的人员信息。
项目中安装bpmn
项目背景:后台activit,前端:vue+element+bpmn.js
安装命令:yarn add bpmn-js
yarn add bpmn-js-properties-panel
yarn add camunda-bpmn-moddle
项目中的应用
在html中创建画布
<!-- 创建一个canvas画布 npmn-js是通过canvas实现绘图的,并设置ref让vue获取到element -->
<div class="bpmn-canvas" ref="canvas" style="height:500px"></div>
在后面的代码中获取画布,
init() {
// 获取画布 element
this.canvas = this.$refs.canvas;
// 创建Bpmn对象
this.bpmnModeler = new BpmnModeler({
// 设置bpmn的绘图容器为上门获取的画布 element
container: this.canvas,
additionalModules: [
{
paletteProvider: ["value", ""], // 禁用左面板
labelEditingProvider: ["value", ""], // 禁用编辑
contextPadProvider: ["value", ""], // 禁用点击出现的contextPad
interactionEvents: ["type", InteractionEvents]
}
]
});
var eventBus = this.bpmnModeler.get("eventBus");
let that = this;
eventBus.on("element.click", function(evt) {
console.log(evt);
if (evt.element.type !== "bpmn:UserTask") {
return;
}
that.dialogVisible = true;
});
// 初始化建模器内容
this.initDiagram(this.initTemplate);
},
initDiagram(bpmn) { //将生成的xml导入到画布
// 将xml导入Bpmn-js建模器
this.bpmnModeler.importXML(bpmn, err => {
if (err) {
this.$Message.error("打开模型出错,请确认该模型符合Bpmn2.0规范");
}
});
},
additionalModules里面是对一些功能的禁用,添加。重点讲一下interactionEvents,是对流程线的拖动的禁用,这个需要在文件中引入interactionEvents.js的,并且在文件中的function fire(type, event, element) {}函数中进行操作,如果是所有的事件都禁止,可以直接return,也可以进行判断根绝自己的需求来,这里的我需求是只允许点击:
function fire(type, event, element) {
if(type !== 'element.click'){
return;
}
}
对于点击事件的处理是在init(){}里面:
var eventBus = this.bpmnModeler.get("eventBus");
let that = this;
eventBus.on("element.click", function(evt) {
console.log(evt);
if (evt.element.type !== "bpmn:UserTask") {
return;
}
that.dialogVisible = true;
});
后面的需求就是改变节点的颜色,这里要提一下,如果是引入viwer的话是获取不到modeling的,所以这里选用的是BpmnModeler。改变颜色的代码如下:
onChangeColor() {
// this.init()
let colorStr = "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
var elementRegistry = this.bpmnModeler.get("elementRegistry"),
modeling = this.bpmnModeler.get("modeling");
let keys = Object.keys(elementRegistry._elements);
console.log(keys);
let mmmm = keys.splice(keys.indexOf("sid-89CC69DB-1B9E-4788-9C72-DA8A396F66E8"))
console.log(mmmm);
mmmm.forEach((v, index) => {
setTimeout(() => {
modeling.setColor([elementRegistry.get(v)], {
stroke: colorStr
// fill: 'green'
});
}, index * 500);
});
}
因为这里要实现的是慢慢一步步的显示步骤,所以用了一个定时器。