vue使用bpmn结合activiti版

阳光穿透心脏的1/2处 2023-06-21 07:22 22阅读 0赞

1.首先安装包：

npm i bpmn-js

安装bpmn-js-properties-panel、activiti-bpmn-moddle：

修改package.json：

"bpmn-js-properties-panel": "https://github.com/RubyLinT/bpmn-js-properties-panel.git",

"activiti-bpmn-moddle": "https://github.com/igdianov/activiti-bpmn-moddle.git",

npm i

2.使用实例：

<template>
      <div class="containers" ref="content">
        <div class="canvas" ref="canvas"></div>
        <div id="js-properties-panel" class="panel"></div>
        <ul class="buttons">
          <li>下载</li>
          <li>
            <a ref="saveDiagram" href="javascript:" title="download BPMN diagram">BPMN diagram</a>
          </li>
          <li>
            <a ref="saveSvg" href="javascript:" title="download as SVG image">SVG image</a>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    // 引入相关的依赖
    // import BpmnViewer from 'bpmn-js'
    import BpmnModeler from 'bpmn-js/lib/Modeler'
    import propertiesPanelModule from 'bpmn-js-properties-panel'
    import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/activiti'
    import activitiModdleDescriptor from 'activiti-bpmn-moddle/resources/activiti'
    
    export default {
      data () {
        return {
          // bpmn建模器
          bpmnModeler: null,
          container: null,
          canvas: null,
          xmlStr: null,
          processName: ''
        }
      },
      methods: {
        createNewDiagram () {
          const bpmnXmlStr = `<?xml version="1.0" encoding="UTF-8"?>
            <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="6.0.4">
              <process id="Process_1" isExecutable="true">
                <startEvent id="StartEvent_1acpsqt" />
              </process>
              <bpmndi:BPMNDiagram id="BpmnDiagram_1">
                <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
                  <bpmndi:BPMNShape id="StartEvent_1acpsqt_di" bpmnElement="StartEvent_1acpsqt">
                    <omgdc:Bounds x="152" y="82" width="36" height="36" />
                  </bpmndi:BPMNShape>
                </bpmndi:BPMNPlane>
              </bpmndi:BPMNDiagram>
            </definitions>`
          // 将字符串转换成图显示出来
          this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
            if (err) {
              console.error(err)
            }
          })
        },
        // 下载为SVG格式,done是个函数，调用的时候传入的
        saveSVG (done) {
          // 把传入的done再传给bpmn原型的saveSVG函数调用
          this.bpmnModeler.saveSVG(done)
        },
        // 下载为SVG格式,done是个函数，调用的时候传入的
        saveDiagram (done) {
          // 把传入的done再传给bpmn原型的saveXML函数调用
          this.bpmnModeler.saveXML({ format: true }, function (err, xml) {
            done(err, xml)
          })
        },
        // 当图发生改变的时候会调用这个函数，这个data就是图的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
          }
        }
      },
      mounted () {
        // 获取到属性ref为“content”的dom节点
        this.container = this.$refs.content
        // 获取到属性ref为“canvas”的dom节点
        const canvas = this.$refs.canvas
    
        // 建模，官方文档这里讲的很详细
        this.bpmnModeler = new BpmnModeler({
          container: canvas,
          // 添加控制板
          propertiesPanel: {
            parent: '#js-properties-panel'
          },
          additionalModules: [
            // 左边工具栏以及节点
            propertiesProviderModule,
            // 右边的工具栏
            propertiesPanelModule
          ],
          moddleExtensions: {
            activiti: activitiModdleDescriptor
          }
        })
    
        // 下载画图
        let _this = this
        // 获取a标签dom节点
        const downloadLink = this.$refs.saveDiagram
        const downloadSvgLink = this.$refs.saveSvg
        // 给图绑定事件，当图有发生改变就会触发这个事件
        this.bpmnModeler.on('commandStack.changed', function () {
          _this.saveSVG(function (err, svg) {
            _this.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
          })
    
          _this.saveDiagram(function (err, xml) {
            _this.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
          })
        })
    
        this.createNewDiagram(this.bpmnModeler)
      }
    }
    </script>
    
    <style lang="scss">
      /*左边工具栏以及编辑节点的样式*/
      @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 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
      .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 90%;
      }
      .canvas{
        width: 100%;
        height: 100%;
      }
      .panel{
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
      }
      .buttons{
        position: absolute;
        left: 20px;
        bottom: 20px;
        &>li{
          display:inline-block;margin: 5px;
          &>a{
            color: #999;
            background: #eee;
            cursor: not-allowed;
            padding: 8px;
            border: 1px solid #ccc;
            &.active{
              color: #333;
              background: #fff;
              cursor: pointer;
            }
          }
        }
      }
    </style>