flowable实战(十五):关于流程设计器: bpmn.js与vue的整合
一、前言:由于flowable本身带的Moder风格实在与前端页面风格不一样,同时由于Modeler采用Angular.js写的,改造起来相对有一定的难度,所以打算换成bpmn.js当成流程设计器。二、与vue的整合1.安装以下包进开发环境npm install --save bpmn-js;npm install -- save bpmn-js-prope...
一、前言:
由于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官方例子代码即可。
版权声明:不得转载。作者:热水。
更多推荐
所有评论(0)