02.activiti流程配置——vue整合bpmn.js

    acitivti提供了流程圖繪制的應用，可以整合到流程項目鍾。但是現在很多項目都是前后端分離，vue前端開發比較多。所以，我用vue整合了一下bpmn。具體的整合過程，網上有大把的資料可以參考；我這邊就不羅列了。

    我主要記錄一下，vue整合bpmn過程中，對於activiti流程而言有幾個地方要注意：

增加側邊欄，調整側邊欄樣式

1.增加側欄依賴

npm install camunda-bpmn-moddle

npm install bpmn-js-properties-panel

npm install bpmn-js

2.增加到頁面

mounted() {
            var than = this
            // 獲取到屬性ref為“content”的dom節點
            this.container = this.$refs.content
            const canvas = this.$refs.canvas; // 獲取到屬性ref為“canvas”的dom節點

            this.bpmnModeler = new BpmnModeler({ // 建模，官方文檔這里講的很詳細
                container: canvas,
                // 添加控制板
                propertiesPanel: {
                    parent: '#js-properties-panel'
                },
                additionalModules: [
                    customTranslateModule,
                    propertiesProviderModule, // 左邊工具欄以及節點
                    propertiesPanelModule, // 右邊的工具欄
                ],
                moddleExtensions: {
                    camunda: camundaModdleDescriptor,
                    // activiti:activitiDescriptor
                }
            })

        },

3.引入樣式

import './style/bpmn-properties-theme.css';

4.調整樣式

https://gitee.com/wuzhiaite/cs_vue/tree/master/src/index/components/conf/bpmn/style

流程圖繪制好后XML標簽的替換

 formXML(data){
            var temp = data.replace(/camunda/ig,"activiti");
            temp = temp.replace(/FormField/ig,'formProperty');
            return temp ;
        },