vue引入工作流bpmn-js_vue自定义页面引入工作流

#原因
因为工作要求引入工作流，所以采用了bpmn-js，官网上看了一下，结合网上搜索到的资料，做一个整理。

引入的方法

//先要npm install  bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle这三个包
import Modeler from 'bpmn-js/lib/Modeler'
import propertiesPanelModule from 'bpmn-js-properties-panel'// 属性面板
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'// 扩展属性
//样式引入（工具栏和属性栏）
  @import 'node_modules/bpmn-js/dist/assets/diagram-js.css';
  @import ‘’node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  @import 'node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  @import 'node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
  @import 'node_modules/bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
1
2
3
4
5
6
7
8
9
10
11

#初始化数据

    async initData() {
      const vm = this
      vm.bpmnInfo.xmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
        '<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http
1
2
3