流程设计器

快速介绍

bpmn-js是BPMN2.0渲染工具包和WEB建模器，它是用JavaScript编写的，将BPMN2.0图嵌入到浏览器中，不需要服务器后端。

github地址：https://github.com/bpmn-io
demo地址：https://demo.bpmn.io/s/start

了解bpmn-js内部

如下面的架构图所示，bpmn-js构建在两个重要的库之上：diagram-js和bpmn-moddle。

架构图.png

如何使用(基于vue)

首先通过npm安装bpmn-js：

npm install bpmn-js

通过ES访问BPMN建模器：

<template>
  <div class="containers" ref="content">
    <div class="canvas" ref="canvas"></div>
    <ul class="buttons">
      <li>下载</li>
      <li>
        <a ref="saveDiagram" href="javascript:" title="download BPMN diagram">BPMN diagram</a>
      </li>
    </ul>
  </div>
</template>
<script>
  import BpmnModeler from 'bpmn-js/lib/Modeler'
  export default {
  data () {
    return {
      // bpmn建模器
      bpmnModeler: null
    }
  },
 mounted () {
    // 获取到属性ref为"canvas"的dom节点
    const canvas = this.$refs.canvas
    // 新建modeler实例，并挂载到dom节点上
    this.bpmnModeler = new BpmnModeler({
      container: canvas
    })
    // 渲染图画
    this.createNewDiagram()
  },
  methods: {
    createNewDiagram () {
      const bpmnXmlStr = '<?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:startEvent id="StartEvent_1"/>\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>'
      // 将符合BPMN2.0标准的xml解析成对象树渲染成图显示出来
      this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
        if (err) {
          console.error(err)
        }
      })
    }
   }
  }
</script>

添加样式表

将建模器嵌入到页面时，需引入diagram-js样式表以及BPMN图标字体：

<style lang="scss">
  /*左边工具栏以及编辑节点的样式*/
  @import 'bpmn-js/dist/assets/diagram-js.css';
  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
</style>

生命周期挂钩事件

通过事件绑定建模器的生命周期以及图表交互：

// 给建模器绑定事件，当模型有发生改变就会触发这个事件
let _this = this
// 获取a标签dom节点
const downloadLink = this.$refs.saveDiagram
this.bpmnModeler.on('commandStack.changed', function () {
  _this.bpmnModeler.saveXML({ format: true }, function (err, xml) {
    _this.setEncoded(downloadLink, 'diagram.bpmn.xml', err ? null : xml)
  })
})
setEncoded (link, name, data) {
  // 把xml转换为URI，下载要用到的
  const encodedData = encodeURIComponent(data)
  // 获取到图的xml，保存就是把这个xml提交给后台
  this.xmlStr = data
  // 下载图的具体操作,改变a的属性，className令a标签可点击，href令能下载，download是下载的文件的名字
  if (data) {
   link.className = 'active'
   link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
   link.download = name
  }
}

扩展功能

• i18n - 自定义翻译模块
• properties-panel - 属性面板
• custom-elements - 创建自定义元素
• custom-modeling-rules - 自定义建模规则