bpmn2 vue 设计器_[完全自定义]使用vue+bpmn-js实现activiti的流程设计器

写在前面：大家都是给赞王

Hello 大家好，我是易样(容易不一样，我们不一样，一天一个样)。

好久没更新文章了，没更新文章的这些时间我都在闭关修炼，努力提升自身技术，毕竟我2020年的flag是成为大牛。

今天给大家带来的这篇文章是整理我使用bpmn-js实现activiti流程设计器的经验之谈，bpmn-js的中文文档不多，很多人都不如何入手开发，并且bpmn-js的后端使用的是Camunda，如何使用activiti也是困扰了很多开发。

不要怕，让小姐姐来教教你。

如果你是react技术栈或许这个项目更满足你的需求：

react + bpmn-js + antd实现流程设计器和流程跟踪: github.com/griabcrh/re…

问题

需要前后端分离、觉得activiti的设计器不好用、使用bpmn-js实现设计器，但后端用的是activiti，xml不兼容怎么办？

解决

不止我这一种解决方法，我这里只提供我的解决方法。

1 使用Bpmn-js开发设计器

关于bpmn-js如何使用建议搭建去github上面搜索，这里贴上官网地址： github.com/bpmn-io/bpm…

笔者开发设计器时参考了霖呆呆的关于bpmn-js从0开发的一系列文章，地址： juejin.im/post/684490…

相信大家看完以上我贴的文章，对bpmn-js已经很熟悉了；接下来我来解释一下我的项目:

环境：windows10

开发工具：vscode、IDEA

**技术：**前端：vue+webpack,后端springboot+activiti

1.1 自定义右边属性面板

如图，是我完全自定义的属性面板

部分代码如下：

复制代码

我是通过propsComponent属性的变化来显示不同事件的属性，比如用户任务的属性、网关的属性

propsComponent属性是通过监听modeler、element来改变值的，代码如下：

addModelerListener() {

// 监听 modeler

const bpmnjs = this.bpmnModeler

const that = this

// 'shape.removed', 'connect.end', 'connect.move'

const events = ['shape.added', 'shape.move.end', 'shape.removed']

events.forEach(function(event) {

that.bpmnModeler.on(event, e => {

var elementRegistry = bpmnjs.get('elementRegistry')

var shape = e.element ? elementRegistry.get(e.element.id) : e.shape

// console.log(shape)

if (event === 'shape.added') {

console.log('新增了shape');

// 展示新增图形的属性

that.key = e.element.id.replace('_label', '');

that.propsComponent = bpmnHelper.getComponentByEleType(shape.type);

that.element = e.element;

} else if (event === 'shape.move.end') {

console.log('移动了shape')

// 展示新增图形的属性

that.key = shape.id;

that.propsComponent = bpmnHelper.getComponentByEleType(shape.type);

that.element = e.shape;

} else if (event === 'shape.removed') {

console.log('删除了shape')

// 展示默认的属性

that.propsComponent = 'CommonProps'

}

})

})

},

addEventBusListener() {

// 监听 element

let that = this

const eventBus = this.bpmnModeler.get('eventBus')

const eventTypes = ['element.click', 'element.changed', 'selection.changed']

eventTypes.forEach(function(eventType) {

eventBus.on(eventType, function(e) {

if (eventType === 'element.changed') {

that.elementChanged(e)

} else if (eventType === 'element.click') {

console.log('点击了element');

if (!e || e.element.type == 'bpmn:Process') {

that.key = '1';

that.propsComponent = 'CommonProps'

that.element = e.element;

} else {

// 展示新增图形的属性

that.key = e.element.id;

that.propsComponent = bpmnHelper.getComponentByEleType(e.element.type);

that.element = e.element;

}

}

})

})

},

复制代码

由于