bpmnjs自定义之初始化流程设计器[新建、编辑、保存、发布的使用例子]

写了很多关于bpmnjs的使用方法，突然发现没有写一篇怎么初始化流程设计器的例子给大家参考，其实这个过程已经写过了，只不过没有单独作为一篇文章写出来，而是放在了自定义bpmnjs右侧属性面板的文章里：

bpmnjs自定义右侧属性面板properties-panel

所以可能大家没有发现，今天单独拿出来作为独立一篇，方便大家查阅；
打开流程设计器，发现左侧图标拖不进画布里，画布提示底色变红，大多数情况是因为没有引入bpmnjs初始化xml，具体初始化过程看下面的代码：

template部分：

<el-form>
    <el-form-item>
        <div ref="paletteBox" class="palette-box"></div>
        <div ref="bpmnbox" class="canvas-box"></div>
        <custom-properties-panel
            ref="propertiesPanel"
            :modeler="awaitModeler"
            :queryData="queryData"
        />
    </el-form-item>
</el-form>

js部分：

import customPropertiesPanel from './properties-panel';
export default {
    components:{
        customPropertiesPanel
    },
    data(){
        return {
            xml:'',
            modeler:"",
            awaitModeler:'',
            queryData:"",
            type:'create'
        }
    },
    computed:{
        queryData(){
            return {
                formId: '',
                flowId: ''
            }
        },
    }，
    async mounted(){
        await this.getXml()
        await this.getModelerInit()
        this.createModifyDiagram()
    },
    methods:{
        async getXml(){
            this.xml = this.type=='create'?"" : await this.$axios({url:'getXmlDatasUrl',method:'post'...})
        },
        async getModelerInit(){
            this.modeler = await this.getModeler()
        },
        async createModifyDiagram() {
            if(!this.xml) {
                //新建
                let processId = 'process_'+Math.random()
                //这里的newDiagram一般都是固定的，所以可以用js文件存起来引用，具体内容看文章末尾更多api有给出
                this.xml = await (require('@/components/bpmnProcess/plugins/newDiagram').default)(processId,'','','')
            } else {
                //回填
                this.xml = this.xml.replace(/CDATA/g,"").replace(/\<\!\[\[/g,'').replace(/\]\]\>/g,"")
            }
            this.modeler.importXML(this.xml).then((res) => {
                this.modeler.get('canvas').zoom('fit-viewport', 'auto')
                this.awaitModeler = this.modeler
            })
        },
        async handleSubmit() {
            //编辑完后获取最新xml，验证、保存、发布等操作
            const {xml} = await this.modeler.saveXML({format: true})
            const {svg} = await this.modeler.saveSVG()
            this.xml = xml
            this.allValidate()//验证是否符合规则或者漏了必填
        },
        allValidate(){
            ............
            if("验证通过条件"){
                this.processSaveAndDepoly()
            }else{
                //报错或者报错且定位到报错的节点（自动选中某个节点）
            }
        },
        processSaveAndDepoly(){
            //保存并发布流程
            this.$api.process.processSaveAndDepolys().then(res => {
                //保存、发布成功提示，更新列表数据等
            })
        }
    }
}

好了，大概过程都写在上面了，算是比较完整吧，具体细节靠你们自己写了哇。

引导：

关于bpmnjs+vue的更多篇章，小编已经全部整理在这里：
bpmnjs+vue中文文档API常见方法使用总结