原因

因为工作要求引入工作流，所以采用了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';

初始化数据

    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://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
        '  <bpmn2:process id="Process_1" isExecutable="false">\n' +
        '  </bpmn2:process>\n' +
        '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
        '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
        '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
        '        <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>\n' +
        '      </bpmndi:BPMNShape>\n' +
        '    </bpmndi:BPMNPlane>\n' +
        '  </bpmndi:BPMNDiagram>\n' +
        '</bpmn2:definitions>'
      vm.createNewDiagram()
    },

初始化模板

    createModeler() {
      // create a modeler
      this.bpmnModeler = new Modeler(
        { container: '#canvas',
          // 添加控制板
          propertiesPanel: {
            parent: '#js-properties-panel'
          },
          additionalModules: [
            // 左边工具栏以及节点
            propertiesProviderModule,
            // 右边的工具栏
            propertiesPanelModule
          ],
          moddleExtensions: {
            camunda: camundaModdleDescriptor
          }
        })
      // 实时保存
      const _this = this
      // 给图绑定事件，当图有发生改变就会触发这个事件
      this.bpmnModeler.on('commandStack.changed', function() {
        _this.saveBmap()
      })
    },

目前我用到的几个方法（保存，上传文件，下载，撤销，恢复撤销，放大，缩小）

保存
    // 实时保存
    saveBmap() {
      const vm = this
      vm.bpmnModeler.saveXML({ format: true }, (err, xml) => {
        if (err) { return }
        vm.bpmnInfo.xmlStr = xml
      })
      vm.bpmnModeler.saveSVG({ format: true }, (err, data) => {
        if (err) { return }
      })
    },
    // 上传文件
    handleOpenFile(e) {
      const vm = this
      const input = document.createElement('input')
      input.type = 'file'
      input.click()// 打开文件选择框
      input.onchange = function() {
        const file = input.files[0]
        if (window.FileReader) {
          try {
            var fr = new FileReader()
            fr.readAsText(file) // 将文件读取为文本
            fr.onload = function(e) {
              vm.bpmnInfo.xmlStr = fr.result
              vm.createNewDiagram()
            }
          } catch (e) {
            errorInfo(e.toString())
          }
        } else {
          errorInfo('您的浏览器可能不支持此操作')
        }
      }
      document.body.removeChild(input)
    },
    // 下载xml/svg
    download(type, data, name) {
      // 下载xml/svg
      let dataTrack = ''
      const a = document.createElement('a')
      switch (type) {
        case 'xml':
          dataTrack = 'bpmn'
          break
        case 'svg':
          dataTrack = 'svg'
          break
        default:
          break
      }
      const reName = name || `diagram.${dataTrack}`
      a.setAttribute(
        'href',
        `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
      )
      a.setAttribute('target', '_blank')
      a.setAttribute('dataTrack', `diagram:download-${dataTrack}`)
      a.setAttribute('download', reName)
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    // 下载 XML 格式
    handleDownloadXml() {
      this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
        if (err) {
          alert('导出错误，请重试')
        } else {
          this.download('xml', xml)
        }
      })
    },
    // 下载 SVG 格式
    saveImg() {
      this.bpmnModeler.saveSVG({ format: true }, (err, xml) => {
        if (err) {
          alert('导出错误，请重试')
        } else {
          this.download('svg', xml)
        }
      })
    },
   // 前进
    handleRedo() {
      this.bpmnModeler.get('commandStack').redo()
    },
    // 后退
    handleUndo() {
      this.bpmnModeler.get('commandStack').undo()
    },
    // 放大缩小
    handleZoom(radio) {
      const vm = this
      this.bpmnModeler.get('canvas').zoom(vm.newScale)
    }
  resetView(){
    //恢复到原位
     vm.bpmnModeler.get('canvas').zoom('fit-viewport')
   }

汉化

customTranslate 官网有直接去下载
import customTranslate from '../../customTranslate';
const customTranslateModule={
       translate:["value",customTranslate]
    }
additionalModules: [propertiesProviderModule, propertiesPanelModule,customTranslateModule],

图片

image.png

有很多不足之处，请大家指出，一起学习，共同进步。