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