flowable实战（十五）:关于流程设计器： bpmn.js与vue的整合

一、前言：

       由于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）打开：打开本地的*.bpmn20.xml模型文件,并在bpmn.js插件的画布上显示出来。

   （2）创建：创建一个新的流程，在画布上供用户拖拉完成。

   （3）导出流程模板：导成一个xml或者zip的形式。

   （4）撤销：支持向前或向后撤销，即撤销在画布上刚才操作。

     (5)  放大/缩小：支持画布的放大与缩小，以及重置恢常正常大小。

     (6) 保存流程的模型到自己的定义数据库表，同时同步更新到act_de_model表中。

     (7) 节点属性面板的定制功能开发。

三、整合的真实效果如下：

四、功能代码参

考bpmn.js官方例子代码即可。

版权声明：不得转载。作者：热水。