bpmn-js：vue集成bpmn-js流程设计器并汉化

最近工作转到工作流模块开发了，需要开发一个流程设计器。

于是就开始接触到bpmn-js，搜索了不少资料，整合demo。现在总结一下如何在vue工程中集成bpmn-js流程设计器。

集成的效果：

 

目前这个demo只是初步实现简单的几个功能。业务当中要扩展的话，就需要老铁更进一步进行改造和完善了。

1、保存模型为BPMN 的xml格式，这个xml数据可以提交到后端工作流引擎保存，完成流程设计的功能。

2、保存SVG。

3、导入BPMN。将文件中的xml数据转化为流程图，重新设计或保存。

相关资源

1、【bpmn.js教材目录】：

https://github.com/LinDaiDai/bpmn-chinese-document/blob/master/directory.md

 

package.json引入依赖

yarn add bpmn-js 

yarn add bpmn-js-properties-panel

yarn add bpmn-moddle

 

vue页面完整代码

<template>

    <div class="containers" ref="content">
        <a-space>
            <a-button @click="downloadBpmn">
                <a-icon type="download"/>
                保存BPMN
            </a-button>
            <a-button @click="downloadSvg">
                <a-icon type="download"/>
                保存SVG
            </a-button>

            <a-upload
                :file-list="uploadBpmnFileList"
                :before-upload="beforeUpload"
            >
                <a-button>
                    <a-icon type="upload"/>
                    导入BPMN
                </a-button>
            </a-upload>

            <a-button-group>
                <a-button @click="handlerUndo">撤销</a-button>
                <a-button @click="handlerRedo">恢复</a-button>
            </a-button-group>

            <a-button-group>
                <a-button @click="handlerZoom(0.1)">放大</a-button>
                <a-button @click="handlerZoom(-0.1)">缩小</a-button>
                <a-button @click="handlerZoom(0)">还原</a-button>
            </a-button-group>

            <a hidden ref="downloadLink"></a>
        </a-space>

        <div class="canvas" ref="canvas"></div>
        <div id="js-properties-panel" class="panel"></div>
    </div>

</template>

<script>

import BpmnModeler from 'bpmn-js/lib/Modeler';

import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/bpmn';
import bpmnModdleDescriptor from 'bpmn-moddle/resources/bpmn/json/bpmn.json';

// BPMN国际化
import customTranslate from '@/bpmnJs/customTranslate/customTranslate';
// 自定义汉化模块
var customTranslateModule = {
    translate: ['value', customTranslate]
};

import {xmlStr} from '@/bpmnJs/mockBpmnXml/bpmnMockXml';

export default {
    components: {},
    data() {
        return {
            bpmnModeler: null,
            container: null,
            canvas: null,

            uploadBpmnFileList: [],
            scale: 1,
        }
    },
    created() {

    },
    mounted() {
        this.init();
    },
    methods: {

        /**
         * 初始化流程设计器对象
         * @returns {Promise<void>}
         */
        async init() {
            // 获取到属性ref为“content”的dom节点
            this.container = this.$refs.content
            // 获取到属性ref为“canvas”的dom节点
            const canvas = this.$refs.canvas
            // 创建BpmnModeler
            this.bpmnModeler = new BpmnModeler({
                container: canvas,
                // 加入工具栏支持
                propertiesPanel: {
                    parent: '#js-properties-panel'
                },
                additionalModules: [
                    // 左边工具栏以及节点
                    propertiesProviderModule,
                    // 右边的工具栏
                    propertiesPanelModule,
                    // 国际化
                    customTranslateModule
                ],
                moddleExtensions: {
                    bpmn: bpmnModdleDescriptor
                }
            });
            // 创建新流程
            await this.createNewDiagram(xmlStr);
        },

        /**
         * 创建新流程
         * @param bpmn BPMN流程XML报文
         * @returns {Promise<void>}
         */