bpmn2vue设计器_[完全⾃定义]使⽤vue+bpmn-js实现activiti
的流程设计器
写在前⾯：⼤家都是给赞王
Hello ⼤家好，我是易样(容易不⼀样，我们不⼀样，⼀天⼀个样)。
好久没更新⽂章了，没更新⽂章的这些时间我都在闭关修炼，努⼒提升⾃⾝技术，毕竟我2020年的flag是成为⼤⽜。
今天给⼤家带来的这篇⽂章是整理我使⽤bpmn-js实现activiti流程设计器的经验之谈，bpmn-js的中⽂⽂档不多，很多⼈都不如何⼊⼿开发，并且bpmn-js的后端使⽤的是Camunda，如何使⽤activiti也是困扰了很多开发。
不要怕，让⼩来教教你。
如果你是react技术栈或许这个项⽬更满⾜你的需求：
react + bpmn-js + antd实现流程设计器和流程跟踪: github/griabcrh/re…
问题
需要前后端分离、觉得activiti的设计器不好⽤、使⽤bpmn-js实现设计器，但后端⽤的是activiti，xml不兼容怎么办？
解决
不⽌我这⼀种解决⽅法，我这⾥只提供我的解决⽅法。
1 使⽤Bpmn-js开发设计器
关于bpmn-js如何使⽤建议搭建去github上⾯搜索，这⾥贴上官⽹地址： github/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
/
/ 'ved', 'd', 've'
const events = ['shape.added', 'd', 'ved']
events.forEach(function(event) {
(event, e => {
var elementRegistry = ('elementRegistry')
var shape = e.element ? (e.element.id) : e.shape
// console.log(shape)
if (event === 'shape.added') {
console.log('新增了shape');
// 展⽰新增图形的属性
that.key = e.place('_label', '');
that.propsComponent = pe); that.element = e.element;
} else if (event === 'd') {
console.log('移动了shape')
// 展⽰新增图形的属性
that.key = shape.id;
that.propsComponent = pe); that.element = e.shape;
} else if (event === 'ved') {
console.log('删除了shape')
// 展⽰默认的属性
that.propsComponent = 'CommonProps'
}
})
})
},
addEventBusListener() {
// 监听 element
let that = this
const eventBus = ('eventBus')
const eventTypes = ['element.click', 'element.changed', 'selection.changed'] eventTypes.forEach(function(eventType) {
<(eventType, function(e) {
if (eventType === 'element.changed') {
that.elementChanged(e)
} else if (eventType === 'element.click') {
console.log('点击了element');
if (!e || pe == 'bpmn:Process') {
that.key = '1';
that.propsComponent = 'CommonProps'
that.element = e.element;
} else {
// 展⽰新增图形的属性
that.key = e.element.id;
that.propsComponent = ComponentByEleType(pe); that.element = e.element;
}
}
})
})
},
复制代码
由于vue的特殊性，在使⽤属性组件前，还需要引⼊组件
components: {
CommonProps,
ProcessProps,
StartEventProps,
EndEventProps,
IntermediateThrowEventProps,
ExclusiveGatewayProps,
ParallelGatewayProps,
InclusiveGatewayProps,
UserTaskProps,
SequenceFlowProps,
CallActivityProps
},
复制代码
接下来就是实现各个事件属性的页⾯了。
我特意为你们单独抽离的demo，不要辜负我的良苦⽤⼼呀
1.2 适配activiti
由于bpmn-js官⽅是适配camunda的，所以对activiti存在不兼容的地⽅，为了让bpmn-js能使⽤activiti，我们需要在BpmnModeler中扩展activiti 代码如下：
import activitiModdleDescriptor from '../js/activiti.json';
this.bpmnModeler = new BpmnModeler({
container: canvas,
//添加属性⾯板，添加翻译模块
additionalModules: [
customTranslateModule,
customControlsModule
],
//模块拓展，拓展activiti的描述
moddleExtensions: {
activiti: activitiModdleDescriptor
}
});
复制代码
关于activiti.json⽂件，我建议你看⾃定义元模型⽰例
1.2.1 关于activiti.json⽂件怎么配置
{
"name": "Activiti", // 标识是activiti
"uri": "/bpmn", // 添加activiti的命名空间
"prefix": "activiti", // 属性前缀
"xml": {
"tagAlias": "lowerCase"
},
"associations": [],
"types": [
{
"name": "Process", // 标签
"isAbstract": true,
"extends": [
"bpmn:Process" // 继承⾃
],
"properties": [ // 这个标签的属性
{
"name": "candidateStarterGroups", // 属性名
"isAttr": true, // 是否是属性
"type": "String" // 属性类型
},
{
"name": "candidateStarterUsers",
"isAttr": true,
"type": "String"
},
{
"name": "versionTag",
"isAttr": true,
"type": "String"
},
{
"name": "historyTimeToLive",
"isAttr": true,
"type": "String"
},
{
"name": "isStartableInTasklist",
"isAttr": true,
"type": "Boolean",
"default": true // 给属性添加默认值，但这个默认值没有写⼊xml中},
{
"name":"executionListener", // 属性
"isAbstract": true, // 抽象
"type":"Expression" // 类型是表达式
}
vuejs流程图插件]
},
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论