bpmn.js 流程基本使用

实际项目需求:

我们公司的项目需求不是一般的审批流,而是通过构建流程 然后后端通过Flowable流程引擎执行过后给出结果(比如获取参数执行流程然后输出结果 或者中间穿插分支 根据条件走不通分支 输出结果)

bpmn的实现机理:

Flowable和bpmn之间通过协商好的xml格式数据进行沟通. 
Flowable通过jar包或者自己的api进行解析xml进行流程执行 
bpmn通过页面拖拽输入输出 生成约定好格式的xml (json转化xml  xml转化json)

参考资料:

https://juejin.cn/post/6844904017567416328 bpmn中文非官方教程经验
https://juejin.cn/post/6912331982701592590 自定义文件及自定义属性字段规则

初始化:

import BpmnModeler from 'bpmn-js/lib/Modeler'; // 引入bpmn文件
import customTranslate from '@/translate/customTranslate'; // 引入自定义文件配置(英文转中文)
import 'bpmn-js/dist/assets/diagram-js.css'; // 引入相关样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import {onUpdateJson, onGetAll} from '@/services/process';
import defaultXml from '@/defaultBpmn'; // 引入xml初始化格式(除了节点需要更改其他东西一般不变)
import {bpmnToObj, objToBpmn} from '@/utils/util'; // bpmn转化json  json转化bpmn方法
import flowableModdleDescriptor from '@/flowable/index'; // 自定义标签属性(需要严格遵守 不然会出现字段转化的时候类型错误)
import Elements from '@/palettes'; // 引入自定义节点
import JsonView from 'vue-json-viewer'; // json转化

async mounted() {
    const {uuid} = this.$route.query;
    const res = await onGetAll({processId: uuid});
    const {processJson} = typeof res === 'string' ? JSON.parse(res) : res;
    this.loading = false;
    this.$nextTick(() => {
      this.bpmnModeler = new BpmnModeler({
        container: this.$refs.canvas,
        additionalModules: [{translate: ['value', customTranslate]}, Elements],
        moddleExtensions: {
          flowable: flowableModdleDescriptor
        }
      });
      this.createDiagram(processJson || defaultXml(uuid));  // 初始化流程图
    });
  },
  async createDiagram(xmlStr) {
      try {
        await this.bpmnModeler.importXML(xmlStr);
        this.addEventBusListener();
      } catch (err) {
        console.log(err);
        this.$message.error(err || '数据出错，请联系管理员');
      }
    },

然后根据业务需求 添加节点事件监控(如 获取数据后 开始节点数据如何处理  分支节点和业务节点如何处理)
节点添加点击事件  节点切换如何区分数据如何在节点来回切换之间保存并转化