【一种关于flowable 的工作流设计器】workflow-bpmn-modeler-antdv的使用

一时失言乱红尘 2024-04-06 10:19 57阅读 0赞

#### 一，Flowable简介 ####

Flowable是一个使用Java编写的轻量级业务流程引擎。Flowable流程引擎可用于部署BPMN 2.0流程定义（用于定义流程的行业XML标准）， 创建这些流程定义的流程实例，进行查询，访问运行中或历史的流程实例与相关数据，等等。

Flowable项目源自于Activiti，通过两个框架的发展史即知。在2016.7~2017.5期间Activiti团队内部已经产生了重大的分歧，于是原班核心人员（Activiti5以及6比较核心的leader）Tijs Rademakers和Joram Barrez等便去开发Flowable框架了，原来的Activiti6以及Activiti5代码则留给 Salaboy团队进行开发和维护。Flowable是基于Activiti-6.0.0.Beta4分支开发的。目前Flowable已经修复了Activiti6很多的bug，可以实现零成本从Activiti迁移到Flowable。

详细的内容参见 [Flowable BPMN 用户手册][Flowable BPMN]

#### 二，设计器bpmn.js ####

bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成。  
详见 [bpmnjs官网][bpmnjs]

#### 三，集成设计器workflow-bpmn-modeler-antdv ####

集成现成的Vue设计器组件workflow-bpmn-modeler-antdv

其中Vue设计器组件有两个版本：  
\*\*

1.  Element UI版本 workflow-bpmn-modeler
2.  Ant Design Vue 版本 workflow-bpmn-modeler-antdv

\*\*  
下文以Ant Design Vue版本介绍案例

#### 1，创建vue项目 ####

vue create bpmn-model-demo
    cd bpmn-model-demo

#### 2，安装less和less loader相关依赖 ####

npm install less@3.9.0 less-loader@5.0.0 --save-dev

#### 3，安装流程模型设计器 ####

workflow-bpmn-modeler-antdv版本信息  
![在这里插入图片描述][cd87e2f2fb6141fe8822a0b91a96baec.png]

npm i workflow-bpmn-modeler-antdv

#### 4，安装后项目的package.json ####

{
      "name": "bpmn-model-demo",
      "version": "0.1.0",
      "private": true,
      "author": "tigerhhzz <5758703@qq.com>",
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "ant-design-vue": "^1.7.2",
        "core-js": "^3.8.3",
        "vue": "^2.6.14",
        "vue-router": "^3.2.0",
        "workflow-bpmn-modeler-antdv": "^1.0.7"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "^5.0.8",
        "@vue/cli-plugin-eslint": "^5.0.8",
        "@vue/cli-service": "^5.0.8",
        "@vue/eslint-config-standard": "^6.1.0",
        "eslint": "^7.32.0",
        "eslint-plugin-import": "^2.25.3",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^5.1.0",
        "eslint-plugin-vue": "^8.0.3",
        "less": "^3.9.0",
        "less-loader": "^5.0.0",
        "vue-template-compiler": "^2.6.14"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "@vue/standard"
        ],
        "parserOptions": {
          "parser": "@babel/eslint-parser"
        },
        "rules": {}
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

#### 5，main.js 全局引入Ant Design Vue ####

import Vue from 'vue'
    import App from './App.vue'
    import Antd from 'ant-design-vue'
    import 'ant-design-vue/dist/antd.css'
    
    Vue.config.productionTip = false
    
    Vue.use(Antd)
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')

#### 6，直接在app.vue中使用模型流程设计器 ####

app.vue 完整代码如下：

<template>
      <div id="app">
        <bpmn-modeler
            ref="refNode"
            :xml="xml"
            :is-view="false"
            :categories="categories"
            :categories-fields="categoriesFields"
            :users="users"
            :groups="groups"
            :candidate-user-data-source="candidateUserDataSource"
            :candidate-group-data-source="candidateGroupDataSource"
    
            :paletteToolShow="paletteToolShow"
            :panelFilters="panelFilters"
            :paletteFilters="paletteFilters"
            :associate-form-config="associateFormConfig"
            :associate-form-data-options="associateFormDataOptions"
            :assignee-data-source="assigneeDataSource"
            :due-date-data-source="dueDateDataSource"
            :follow-up-date-data-source="followUpDateDataSource"
            :initiator-data-source="initiatorDataSource"
            :skip-expression-data-source="skipExpressionDataSource"
            :condition-expression-data-source="conditionExpressionDataSource"
            @save="saveModeler"
            @showForm="showAssociateForm"
            @createForm="createAssociateForm"
        >
          
          <div slot="header-left">
            <a-button>左边扩展</a-button>
          </div>
          
          <div slot="header-right">
            <a-button>右边扩展</a-button>
          </div>
        </bpmn-modeler>
    
        <a-modal v-model:visible="formShowVisible" title="显示表单" width="400px">
          <template #footer>
          </template>
          【显示表单】本功能为外部扩展，非组件内部弹窗,用于接入flowable动态表单或其他自定义动态表单....
        </a-modal>
        <a-modal v-model:visible="formCreateVisible" title="创建表单" width="400px">
          <template #footer>
          </template>
          【创建表单】本功能为外部扩展，非组件内部弹窗,用于接入flowable动态表单或其他自定义动态表单....
        </a-modal>
      </div>
    </template>
    
    <script>
    //需要依赖ant-design-vue和less
    /**
     * package包引入
     * 内部依赖版本：
     * "bpmn-js": "^7.2.1",
     * "vue-codemirror": "^4.0.6"
     */
    //import bpmnModeler from '../package/index'
    //1.0.1 版本引用
    //import bpmnModeler from 'workflow-bpmn-modeler-antdv/package/';
    //1.0.2 版本引用
    import bpmnModeler from 'workflow-bpmn-modeler-antdv';
    export default {
      components: {
        bpmnModeler
      },
      data() {
        return {
          xml: '', // 后端查询到的xml
          //指定或候选人
          users: [
            { name: '张三', id: 'zhangsan' },
            { name: '李四', id: 'lisi' },
            { name: '王五', id: 'wangwu' }
          ],
          //候选组
          groups: [
            { name: 'web组', id: 'web' },
            { name: 'java组', id: 'java' },
            { name: 'python组', id: 'python' }
          ],
          //分类
          categories: [
            { name: 'OA', id: 'oa', children: [{ name: '请假', id: 'leave' }] },
            { name: '财务', id: 'finance' }
          ],
          //过滤面板参数，参数见文档
          panelFilters: [],
          //panelFilters: ['category','message'],
          //左侧操作组件栏过滤，过滤参数见文档
          //paletteFilters:['space-tool','create.start-event','create.task'],
          paletteFilters: [],
          //左侧操作组件栏，行为组件是否显示，设置false组件的操作栏将被隐藏
          paletteToolShow: true,
          //头部右侧操作栏显示内容配置
          rightActionConfig: {
            'showCode': {
              'show': true,
              'icon': true,
              'label': 'XML'
            },
            'downloadXML': {
              'show': true,
              'icon': true,
              'label': 'XML'
            },
            'downloadSVG': {
              'show': true,
              'icon': true,
              'label': 'SVG'
            },
            'save': {
              'show': true,
              'icon': true,
              'label': '保存'
            }
          },
          /**
           * 关联表单配置
           */
          associateFormConfig: {
            enable: true, //此项为false，显示表单标识输入框，后两项设置两项均无效
            isPreview: true,
            isCreate: true
          },
          //关联表单动态表达式数据源
          associateFormDataOptions: [],
          //分配指定人动态表达式数据源
          assigneeDataSource: ['#{approval}', '${approverId}', '${INITIATOR}'],
          //分配候选人动态表达式数据源
          candidateUserDataSource: ['#{approval}', '#{app}'],
          //分配候选组动态表达式数据源
          candidateGroupDataSource: ['#{approval}', '#{app}'],
          //过期时间动态表达式数据源
          dueDateDataSource: ['${dueDate}'],
          //观察时间动态表达式数据源
          followUpDateDataSource: ['${followUpDate}'],
          //开始节点发起人动态表达式数据源
          initiatorDataSource: ['initiator'],
          //跳过表达式动态表达式数据源
          skipExpressionDataSource: [],
          //跳转表达式动态表达式数据源
          conditionExpressionDataSource: ['${approve}', '${!approve}'],
    
          //自己业务数据
          //关联表单扩展，用于接入flowable动态表单或其他自定义动态表单
          formShowVisible: false,
          formCreateVisible: false
        }
      },
      mounted() {
        this.getModelDetail()
      },
      methods: {
        getModelDetail() {
          fetch('https://cdn.jsdelivr.net/gh/Vincent-Vic/workflow-bpmn-modeler-antdv@master/src/Leave.bpmn20.xml')
              .then(response => {
                return response.text()
              }).then(xml => {
            this.xml = xml
          })
        },
        saveModeler(data) {
          console.log(data)
        },
        showAssociateForm(formKey) {
          console.log(formKey)
          this.formShowVisible = true
        },
        createAssociateForm() {
          console.log('create form')
          this.formCreateVisible = true
        }
      }
    }
    </script>
    
    <style lang="less">
    html, body, #app {
      height: 100%;
      margin: 0;
    }
    </style>

#### 7，运行效果 ####

![在这里插入图片描述][ef92bfb6b78f44039bb3582231dd9e56.png]

#### 8，workflow-bpmn-modeler-antdv组件参数描述： ####

主要参数：

![在这里插入图片描述][871ead01c8324ce28e3477cdc7560735.png]  
头部右侧导航栏按钮配置默认配置

{
      "showCode":{
        "show":true,
        "icon":true,
        "label":"XML"
      },
      "downloadXML":{
        "show":true,
        "icon":true,
        "label":"XML"
      },
      "downloadSVG":{
        "show":true,
        "icon":true,
        "label":"SVG"
      },
      "save":{
        "show":true,
        "icon":true,
        "label":"保存"
      }
    }

面板参数：

![在这里插入图片描述][6898359d071a47dca549cd3d2002c189.png]

面板部分使用Ant Design Vue的AutoComplete 自动完成组件来提高使用便携性，为提高扩展性，可以自行配置自动完成的数据，默认数据如表

过滤属性

filters: {
      type: Array,
      default: () => []
    }

参数列表

包含在参数列表的可以通过filters配置隐藏参数配置  
![在这里插入图片描述][cf9c367d7ac548af83f3ee6299ff5c8f.png]

组件栏

过滤属性  
paletteFilters 设置可以将操作栏组件隐藏  
![在这里插入图片描述][f8d2d2fd5e4d49fdb5b8a6e605e862da.png]

事件

![在这里插入图片描述][71e22f883de348de8212a076c7e53f82.png]

iframe 部署

如果你的项目是 jquery 或 react 类项目，可以通过 iframe 的方式集成该流程设计器

本仓库通过 github pages 部署了静态页面，使用 jsdelivr 做 cdn ，国内访问也非常快速，所以你可以直接集成本仓库的页面，因为全部白嫖了 github 的资源，没有自己建服务器维护，所以不用担心资源失效问题。

当然你也可以在 docs/lib 文件夹下下载对应的版本，进行本地部署。

集成方式如下（ps：可直接拷贝以下代码到一个html文件中试一下）：

<!DOCTYPE html>
    <html lang="en">
      <body>
        <iframe
          src="https://vincent-vic.github.io/workflow-bpmn-modeler-antdv/cdn/1.0.1/"
          id="myFrame"
          frameborder="0"
          width="100%"
          height="800px">
        </iframe>
    
        <script>
          let myFrame = document.getElementById("myFrame");
          // 获取到流程详情
          window.addEventListener("message", (event) => {
            console.log(event.data); // { xml: 'xxx', img: 'xxx', process: {} }
          });
          myFrame.onload = () => {
            let postMsg = {
              xml: "", // 后端查询到的xml，新建则为空串
              users: [
                { name: "张三1", id: "zhangsan" },
                { name: "李四1", id: "lisi" },
                { name: "王五1", id: "wangwu" },
              ],
              groups: [
                { name: "web组1", id: "web" },
                { name: "java组1", id: "java" },
                { name: "python组1", id: "python" },
              ],
              categorys: [
                { name: "OA1", id: "oa" },
                { name: "财务1", id: "finance" },
              ],
              isView: false
            }
            // 设置初始化值
            myFrame.contentWindow.postMessage(postMsg, "*")
          }
        </script>
      </body>
    </html>

关于定制

本组件对标的是 flowable 官方设计器，也就是实现 flowable 的 xml 规则标准，里面所用名词也都是官方文档中的专业术语。所以这个组件只是程序员在开发阶段，自己建模导出 xml 的工具，试图定制该建模器的行为都是不对的，不要把业务带到建模器中来！自己的业务应该另行开发增删改查来实现。

该组件未来也不会升级 UI 库和 vue。不管库是否兼容，通过 iframe 的方式集成建模器才是最简单正确的方式。

#### 9，完整demo下载链接 ####

[bpmn-model-demo][]

[Flowable BPMN]: https://tkjohn.github.io/flowable-userguide/#_introduction
[bpmnjs]: https://bpmn.io/
[cd87e2f2fb6141fe8822a0b91a96baec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/adac1ba9efe24eb68e1688978d504e11.png
[ef92bfb6b78f44039bb3582231dd9e56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4b620245280f4140b2ce81a9704f8a18.png
[871ead01c8324ce28e3477cdc7560735.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/41c919e494504f3b90930c81e604d8c9.png
[6898359d071a47dca549cd3d2002c189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/70d759da3c654d43986d4e6e398df137.png
[cf9c367d7ac548af83f3ee6299ff5c8f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/21ea821e664641b7a57d7913519bf6a6.png
[f8d2d2fd5e4d49fdb5b8a6e605e862da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/681fc30eee9541b388d4d97d286beea0.png
[71e22f883de348de8212a076c7e53f82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f2c78cf8a5724285ac8a1661edac6993.png
[bpmn-model-demo]: https://download.csdn.net/download/weixin_43025151/86541153