flowable实战（⼗五）：关于流程设计器：bpmn.js与vue的整
合
⼀、前⾔：
vuejs流程图插件由于flowable本⾝带的Moder风格实在与前端页⾯风格不⼀样，同时由于Modeler采⽤Angular.js写的，改造起来相对有⼀定的难度，所以打算换成bpmn.js当成流程设计器。
⼆、与vue的整合
1.安装以下包进开发环境
npm install --save    bpmn-js;
npm install -- save bpmn-js-properties-panel;
npm install --save camunda-bpmn-moddle;
2.定制开发以下功能：
（1）打开：打开本地的*.l模型⽂件，并在bpmn.js插件的画布上显⽰出来。
（2）创建：创建⼀个新的流程，在画布上供⽤户拖拉完成。
（3）导出流程模板：导成⼀个xml或者zip的形式。
（4）撤销：⽀持向前或向后撤销，即撤销在画布上刚才操作。
(5)  放⼤/缩⼩：⽀持画布的放⼤与缩⼩，以及重置恢常正常⼤⼩。
(6) 保存流程的模型到⾃⼰的定义数据库表，同时同步更新到act_de_model表中。
(7) 节点属性⾯板的定制功能开发。
三、整合的真实效果如下：
四、功能代码参
考bpmn.js官⽅例⼦代码即可。
版权声明：不得转载。作者：热⽔。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。