bpmn+vue 中文文档

1.初始化项目

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '@/mock/xmlStr'
export default {
    mounted () {
        this.init()
    },
    methods: {
        init () {
            // 获取到属性ref为“canvas”的dom节点
            const canvas = this.$refs.canvas
            // 建模
            const customTranslateModule = {
              translate: ['value', customTranslate]
            }
            this.bpmnModeler = new BpmnModeler({
              container: canvas,
              // 添加控制板
              propertiesPanel: {
                parent: '#js-properties-panel'
              },
              additionalModules: [
               // 左边工具栏以及节点
               propertiesProviderModule,
               customTranslateModule
             ]
           })
            this.createNewDiagram(xmlStr)
        },
        async createNewDiagram(xmlStr) {
          // 将字符串转换成图显示出来
          await this.bpmnModeler.importXML(xmlStr, (err) => {
            if (err) {
            } else {
              // 这里是成功之后的回调, 可以在这里做一系列事情
              this.addEventBusListener();
            }
          })
        }
    }
}
</script>

2. 节点的事件或方法：

// 监听 element

const eventBus = this.bpmnModeler.get('eventBus');

//  获取流程的所有元素

const elements = this..bpmnModeler.get('elementRegistry')._elements

//  监听流程节点内容发生改变的事件

this.bpmnModeler.on('commandStack.changed', async function() {}）

//  格式化保存流程图为xml文件

this..bpmnModeler.saveXML({ format: true }, async function(err, xml) {})

// 得到流程xml的name的集合
getXmlName(xmlString) {
   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(xmlString, 'text/xml')
   const nodes = xmlDoc.querySelectorAll('*[name]');
   const names = Array.from(nodes).map(node => node.getAttribute('name'))
   return names
}

addEventBusListener() {
      // 监听 element
      const eventBus = this.bpmnModeler.get('eventBus');
      const eventTypes = ['element.click', 'element.changed', 'element.updateLabel'];

      let that = this;
      eventTypes.forEach(function(eventType) {
        eventBus.on(eventType, async function(e) {
          if (!e) return;
          const type = e.element.type  // 选中元素的类型
          that.selected = typeof e.element.parent !== 'undefined' // 判断是否选中元素

          if (eventType === 'element.changed') {
          } else if (eventType === 'element.click') {
          }
        })
      })

      // 修改节点内容事件
      this.bpmnModeler.on('commandStack.changed', async function() {
        await that.bpmnModeler.saveXML({ format: true }, async function(err, xml) {
          let allElementId = []
          for (let i in that.bpmnModeler.get('elementRegistry')._elements) {
            if (i === 'StartEvent_1y45yut' || i.indexOf('Task_') > -1 || i.indexOf('Activity_') > -1 || (i.indexOf('Gateway_') > -1 && i.indexOf('label') === -1)) {
              allElementId.push(i)
            }
          }
          if (that.getXmlName(xml).length < allElementId.length) {
            // name为空,给name赋值id
            let newxml = xml.replace(('id="' + allElementId[allElementId.length - 1] + '"'), ('id="' + allElementId[allElementId.length - 1] + '" name="' + allElementId[allElementId.length - 1] + '"'))
            that.bpmnModeler.clear();
            await that.bpmnModeler.importXML(newxml);
          }
          that.camunda.process.processXml = xml
          that.updateNodes(that.bpmnModeler.get('elementRegistry')._elements, that.getXmlName(xml))
        })
      })
}

3.bpmn官网：BPMN Editor | bpmn-js modeler Demo | demo.bpmn.io

4.流程设定可参考简道云的设计，简道云的网址：简道云登录_简道云系统入口_零代码平台登录_无代码平台登录-简道云