1.安装bpmn.js

安装命令：npm install bpmn-js bpmn-js-properties-panel

2.汉化

汉化包：customTranslate

主要代码：

importcustomTranslatefrom'../../customTranslate';

constcustomTranslateModule={

translate:["value",customTranslate]}

additionalModules：[propertiesProviderModule,propertiesPanelModule,customTranslateModule]

3.整合activiti

引入activiti.json文件: import activitiModdleDescriptor from '@/api/bpmnjs/activiti.json'

主要代码

// 初始化BpmnModeler

    initBpmnModeler() {

      this.container = this.$refs.content

      const canvas = this.$refs.canvas

      var customTranslateModule = {

        translate: ['value', customTranslate]

      }

      this.bpmnModeler = new BpmnModeler({

        container: canvas,

        propertiesPanel: {

          parent: '#js-properties-panel'

        },

        additionalModules: [

          // 右边的工具栏

          propertiesPanelModule,

          // 左边工具栏以及节点

          propertiesProviderModule,

          // customControlsModule,

          // 汉化

          customTranslateModule,

          BpmnModeler, {

            // paletteProvider: ['value', ''], // 禁用左面板

            // labelEditingProvider: ['value', ''], // 禁用编辑

            // contextPadProvider: ['value', ''], // 禁用点击出现的contextPad

            // bendpoints: ['value', {}], // 禁止流程线变换waypoints

            zoomScroll: ['value', ''] // 禁止画布滚动

            // moveCanvas: ['value', ''] // 禁止拖拽

          }

        ],

        moddleExtensions: {

          // 模块拓展，拓展activiti的描述

          activiti: activitiModdleDescriptor

          // camunda: camundaModdleDescriptor

        }

      })

      this.importBpmnXml()

    }

// 前进

    handleRedo() {

      this.bpmnModeler.get('commandStack').redo()

    },

// 后退

    handleUndo() {

      this.bpmnModeler.get('commandStack').undo()

    },

// 导出bpmn文件

    exportBpmn() {

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

        if (err) {

          return console.error('无法保存BPMN', err)

        }

        // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候）

        if (window.navigator.msSaveOrOpenBlob) {

          var blob = new Blob([xml], { type: 'text/plain' })

          window.navigator.msSaveOrOpenBlob(blob, 'activiti.bpmn')

        } else {

          var eleLink = document.createElement('a')

          eleLink.download = 'activiti.bpmn'

          eleLink.style.display = 'none'

          const blob = new Blob([xml]) // 字符内容转变成blob地址

          eleLink.href = URL.createObjectURL(blob)

          document.body.appendChild(eleLink) // 触发点击

          eleLink.click()

          document.body.removeChild(eleLink) // 然后移除

        }

      })

    },

// 导出图片

    exportImg() {

      if (window.navigator.msSaveOrOpenBlob) {

        console.log('IE浏览器无法下载，建议使用谷歌浏览器')

        return

      }

      // 获取SVG数据（图片）

      this.bpmnModeler.saveSVG({ format: true }, (err, data) => {

        if (err) {

          console.log('保存失败')

        }

        var svgXml = data

        var canvas = document.createElement('canvas') // 准备空画布

        canvas.width = '1000px'

        canvas.height = screen.availHeight

        canvas.fillStyle = '#FFFFFF'

        canvg(canvas, svgXml)

        var imagedata = canvas.toDataURL('image/png')

        // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候）

        if (window.navigator.msSaveOrOpenBlob) {

          var bstr = atob(imagedata.split(',')[1])

          var n = bstr.length

          var u8arr = new Uint8Array(n)

          while (n--) {

            u8arr[n] = bstr.charCodeAt(n)

          }

          var blob = new Blob([u8arr])

          window.navigator.msSaveOrOpenBlob(blob, 'activiti.png')

        } else {

          var a = document.createElement('a')

          a.href = imagedata // 将画布内的信息导出为png图片数据

          a.download = 'activiti' // 设定下载名称

          a.click() // 点击触发下载

        }

      })

    },

// 直接部署(前后端)

deployEvent() {

      const formData = new FormData()

      // 获取保存的bpmn，发送给后台

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

        if (err) {

          return console.error('无法保存BPMN', err)

        }

        formData.append('reportFile', new Blob([xml], { type: 'text/xml' }), 'activiti.bpmn')

      })

      uploadFilesDirect(formData).then(data => {

        // 跳转到流程管理列表

        this.$router.push({

          path: '/activiti/index'

        })

        this.$notify({

          title: '成功',

          message: '发布成功！',

          type: 'success'

        })

      }).catch(response => {

        this.$notify.error({

          title: '错误',

          message: '发布失败！'

        })

      })

    },

export function uploadFiles(formData) {

  return request({

    url: '/processDefinition/deploy',

    method: 'POST',

    data: formData

  })

}

@RequestMapping(value = "/deploy/direct", method = RequestMethod.POST)

public ResultVo<String> deployDirect(MultipartFile[] reportFile) {

String processes = "processes";

for (MultipartFile multipartFileBpmn : reportFile) {

    try {

FileUtils.upload(multipartFileBpmn.getInputStream(), processes , multipartFileBpmn.getOriginalFilename());

String filePath = ResourceUtils.getURL("classpath:").getPath() + File.separator + processes

+ File.separator;

FileInputStream bpmnStream = new FileInputStream(filePath + multipartFileBpmn.getOriginalFilename());

repositoryService.createDeployment()

        .addInputStream("activiti.bpmn", bpmnStream)

                        .deploy();

} catch (Exception e) {

logger.error(e.getMessage());

throw new BaseException(BaseExceptionCode.文件下载失败);

}

}

return ResultVo.success();

}