bpmn-js VUE前端部署及汉化

版权声明：转载请附上原文出处链接和本声明。

今天给大家分享一款JS工作流绘制框架：bpmn-js，官网地址：bpmn-js，通过这个框架可以在网页上编写工作流，支持在线编写并绑定业务，使用方法如下：

首先安装bpmn-js依赖

npm install --save bpmn-js

npm install --save camunda-bpmn-moddle

npm install --save bpmn-js-properties-panel

在安装过程中可能会出现以下提示

解决方法如下（依次执行下面三个步骤）：

npm audit fix

npm audit fix --force

npm audit

如果项目里没有安装webpack打包，还要安装一下webpack

npm install webpack --save-dev

接下来就是编写代码了：

.VUE

<template>
  <div class="flow-container">
    <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 diagrama>
      li>
      <li>
        <a ref="saveSvg" href="javascript:" title="download as SVG image">SVG imagea>
      li>
    ul>
    div>
  div>
template>

JavaScript

<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/camunda'
  import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

export default {
     
  name: 'flow_bpmn',
  data(){
     
    return {
     
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null,
      xmlStr: null,
      processName: ''
    }
  },
  watch: {
     

  },
  methods:{
     
      createNewDiagram() {
     
        const bpmnXmlStr = '\n' +
          '\n' +
          '  \n' +
          '    \n' +
          '      SequenceFlow_0nrfbee\n' +
          '    \n' +
          '    \n' +
          '      SequenceFlow_0nrfbee\n' +
          '      SequenceFlow_00ho26x\n' +
          '    \n' +          
          '    \n' +
          '    \n' +
          '    \n' +
          '  \n' +
          '  \n' +
          '    \n' +
          '      \n' +
          '        \n' +
          '        \n' +
          '          \n' +
          '        \n' +
          '      \n' +
          '      \n' +
          '        \n' +
          '      \n' +
          '      \n' +
          '        \n' +
          '      \n' +
          '      \n' +
          '        \n' +
          '        \n' +
          '          \n' +
          '        \n' +
          '      \n' +
          '      \n' +
          '        \n' +
          '        \n' +
          '        \n' +
          '        \n' +
          '      \n' +
          '    \n' +
          '  \n' +
          '\n'
        // 将字符串转换成图显示出来
        this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
     
          if (err) {
     
            console.error(err);
          }
          else {
     
            // 这里还没用到这个，先注释掉吧
            // that.success()
          }
        })
      },
      // 下载为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: {
     
          camunda: camundaModdleDescriptor
        }
      });

      // 下载画图
      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>

CSS

运行后页面如下：

一看都是英文，怎么给客户用呢，于是开始捣鼓汉化版：
1.首先在js层引入这个文件:

import customTranslateModule from "../components/bpmn-config/customTranslate";//汉化

这个文件的提取链接：https://pan.baidu.com/s/1Xeb-cINF5AxqwOaLMHHnJg
提取码：ie2x

2.然后在js中的additionalModules引入这个模块

//汉化版
customTranslateModule

3.运行一下，loading…,大功告成！

接下来的时间就等着下班吧！！！
整理不易，请给小白一点鼓励吧！