一、前言：

由于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) 節點屬性面板的定制功能開發。

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

總結

以上是生活随笔為你收集整理的flowable实战（十五）关于流程设计器 bpmn.js与vue的整合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。