Bpmn.js流程建模结合业务整合工作流（一）

沉默是金~

已于 2023-06-26 18:22:26 修改

阅读量676

点赞数

文章标签： javascript 前端开发语言

于 2023-06-25 11:06:20 首次发布

本文链接：https://blog.csdn.net/wyhc2021/article/details/131371928

版权

低代码平台专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了Bpmn.js，一个用于前端的BPMN2.0渲染工具包和建模器。文章详细阐述了在项目中使用bpmn.js的背景，指出国内相关教程和文档的缺乏，并提供了学习资源。接着，作者分享了安装bpmn.js及其依赖的步骤，以及在Vue3项目中的具体应用，包括自定义工具栏和属性面板的实现。文章以代码示例展示了流程图的初始化和事件绑定，最后预告了后续关于工具栏、属性绑定和XML保存等功能的讨论。

摘要由CSDN通过智能技术生成

bmpn.js是什么？先上图

初步认识bpmn.js 相关文档直接上链接

全网最详bpmn.js教材-基础篇 - 掘金bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 因为公司业务的需要因而要在项目中使用到bpmn.js,但是由于bpmn.js的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己去找…https://juejin.cn/post/6844904017584193544

bpmn.js若依管理系统版本流程管理demo 直接上链接 vue2有源码 vue3版本目前未开源

介绍 · 语雀RuoYi-Flowable基于RuoYi+Flowa...https://www.yuque.com/u1024153/icipor/vh4wfl本专栏主要讲述bpmn.js如何使用以及如何与业务关联在一起包括流程建模---->发起流程---->流程待办--->流程结束已办理查看等

首先开篇文章上面的链接查看了解完后直接上代码了开撸

1、安装bpmn.js

需要这两个依赖

npm install bpmn.js -- save |或者 npm install bpmn.js -g

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

main.js里面定义全局样式引用使用他自带的工具栏样式和右侧属性样式（也可以在组件内部引用）

import 'ant-design-vue/dist/antd.css';
//工作流bpmn-js组件样式
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
// 右边工具栏样式
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'
import 'bpmn-js-properties-panel/dist/assets/element-templates.css'

页面组件使用bmpn.js（SFC）

目前项目用的vue3版本 vue2版的bpmn.js直接拿来会报各种依赖错误干脆直接自定义上方工具和右侧属性其他的用自带的不动改动的地方不大~

比如这个红框的自定义按钮基本够用了

自定义按钮

自定义右侧属性

好了抛开自定义的 bpmn.js的基本使用如下

页面引用

import BpmnModeler from "bpmn-js/lib/Modeler";
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'

index.vue文件

<template>
<div>
 <div class="canvas" ref="canvas"></div>
</div>
</template>

//初始化默认模板开始节点
data(){

    return{

// 初始xml
      initTemplate: `
      <?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"                 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:flowable="http://flowable.org/bpmn" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">
  <process id="LeaveApplication" name="请假申请" flowable:processCategory="oa">
    <startEvent id="Event_1ki0l0y" name="开始" />
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="LeaveApplication">
      <bpmndi:BPMNShape id="Event_1ki0l0y_di" bpmnElement="Event_1ki0l0y">
        <omgdc:Bounds x="312" y="262" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="319" y="305" width="23" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>
`
}

}

初始化

    /**
     * 初始化方法
     */
    init() {
      var type = this.$route.query.type //获取是新增流程还是修改流程用的
      // 获取画布 element
      this.canvas = this.$refs.canvas; //自定义的ref
      const customTranslateModule = {
        translate: ['value', customTranslate]
      };
      // 创建Bpmn对象
      this.bpmnModeler = new BpmnModeler({
        // 设置bpmn的绘图容器为上门获取的画布 element
        container: this.canvas,
        propertiesPanel: {
          parent: '#properties'
        },
        additionalModules: [
          customTranslateModule,

        ],
      });
      if (type == "修改") {
        this.deployId = this.$route.query.deployId
        console.log(this.deployId)
        this.getModelDetail(this.deployId,this.initDiagram) //自定义方法进行渲染保存过的xml 后台查询 这里自己修改
      }else {
        this.initDiagram(this.initTemplate,false) //初始化xml内容
      }
      console.log(this.initTemplate)
      this.initEvent() //点击节点事件 用到的时候再说
    },

    //initEvent () {
     // const eventBus = this.bpmnModeler.get('eventBus')
     // eventBus.on('selection.changed', e => {
      //  this.elementSelector = e.newSelection
      //  this.isOpenColor = false
     // })
  //  },

this.initDiagram方法如下 xml渲染到流程图中

    /**
     * 将xml导入Bpmn-js建模器
     * @param bpmn
     * @returns {Promise<void>}
     */
    async initDiagram(bpmn,flag) {
      try {
        const result = await this.bpmnModeler.importXML(bpmn);
        this.adjustPalette() //自定义左侧工具栏排版 添加文件字体提示
        const {warnings} = result;
        console.log(warnings);
        //添加绑定事件，用于获取修改后的xml
        this.addBpmnListener()
        //自适应屏幕
        this.zsyScreen()
      } catch (err) {
        console.log(err.message, err.warnings);
        this.$message.error("打开模型出错,请确认该模型符合Bpmn2.0规范");
      }
    },

其中这个this.adjustPalette() 是自定义左侧工具栏排版用的

// 调整左侧工具栏排版
    adjustPalette() {
      try {
        // 获取 bpmn 设计器实例
        const canvas = this.$refs.canvas
        this.djsPalette = canvas.children[0].children[1].children[5]//自己看看这里是第几个元素 添加工具按钮这里会变 挺不友好的其实哈哈
        const djsPalStyle = {//样式啥的按自己的来就行
          width: '190px',
          padding: '5px',
          background: 'white',
          'font-size':'12px',
          left: 0,
          top:0,
          borderRadius: 0,
          'overflow-x':'hidden',
          transition: 'all 0.5s ease'
        }
        for (var key in djsPalStyle) {
          this.djsPalette.style[key] = djsPalStyle[key]
        }
        const palette = this.djsPalette.children[0]
        palette.style.width='220px'
        const allGroups = palette.children
        // allGroups[0].style['display'] = 'none'
        // 修改控件样式
        for (var gKey in allGroups) {
          const group = allGroups[gKey]
          for (var cKey in group.children) {
            const control = group.children[cKey]
            console.log(control.title)
            const controlStyle = {
              display: 'flex',
              justifyContent: 'flex-start',
              alignItems: 'center',
              width: '100%',
              padding: '5px',
              'font-size':'20px',
            }
            if (
                control.className &&
                control.dataset &&
                control.className.indexOf('entry') !== -1
            ) {
              control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
                  control.title
              }</div>`
              for (var csKey in controlStyle) {
                control.style[csKey] = controlStyle[csKey]
              }
            }
          }
        }
      } catch (e) {
        console.log(e)
      }
    },

this.addBpmnListener()这个方法是添加绑定事件

/**
 * 添加绑定事件
 */
addBpmnListener () {
  const that = this
  // 给图绑定事件，当图有发生改变就会触发这个事件
  this.bpmnModeler.on('commandStack.changed', function () {
    that.rootElement = that.bpmnModeler.getDefinitions().rootElements[0];
    that.getNewXML()
    that.getNewSVG()
  })
},
/**
 * 获取SVG格式
 */
async getNewSVG() {
  const that = this
  try {
    const result = await this.bpmnModeler.saveSVG();
    const {svg} = result;
    that.newSVG = svg
  } catch (err) {
    console.log(err);
  }
},
/**
 * 获取bpmn格式
 */
async getNewXML() {
  const that = this
  try {
    const result = await this.bpmnModeler.saveXML();
    const {xml} = result;
    that.newXML = xml
  } catch (err) {
    console.log(err);
  }
},

自适应屏幕方法

    /**自适应屏幕**/
    zsyScreen(){
      this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
    },

好了这个时候启动代码运行效果应该这个样子

好了流程建模的基本使用介绍到这里有错误请指正~

下面的文章将会介绍工具栏的使用以及右侧属性绑定到节点上面保存为xml等功能

沉默是金~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录