bpmn.js流程设计器组件

1、调整设计器UI布局，基于vue-elementui美化属性面板
2、支持设置任务变量、表达式、分支条件等，满足90%以上的业务需求
3、支持flowable和activiti

组件常用方法

1、配置支持flowable(activiti)

<vue-bpmn product="flowable"></vue-bpmn>

2、组件还在完善中，如果有需要扩展需求，可以参考以下三个事件：

// 监听选择事件，改变属性栏表单的显示与隐藏
this.modeler.on("selection.changed", e => {
  // TODO
})
// 监听内容变化事件，改变属性栏的值
this.modeler.on("element.changed", e => {
  // TODO
})
// 监听点击事件
this.modeler.on("element.click", e => {
  // TODO
})

安装运行

# npm用户
npm i # 或 npm install
npm run serve
npm run build
# yarn用户
yarn install
yarn serve
yarn build

调整后的截图

在线demo:

后端代码，参照：https://github.com/fengli01/bpmn-spring-boot.git