项目简介

本项目基于 bpmn-process-designer项目 panel 组件，框架转换为ant-design-vue，扩展了 assignee、FormSupported 等属性，后续会继续扩展

基于 bpmn.js，Vue 2.x 和 ant-design-vue 开发的 BPMN 2.0 流程设计器（网页版），您可以使用它在浏览器上查看和编辑符合 BPMN 2.0 规范的流程文件。

项目目前内置 camunda 流程引擎支持文件，之后会拓展支持 activiti、flowable。

安装和使用

# 克隆仓库
git clone https://gitee.com/glf_gao/bpmn-panel-antdv.git

# 安装依赖
yarn

# 启动项目
yarn serve

开发指南

bpmn.js 的 核心原理与常规改造 可以参见我的文章：Bpmn.js 进阶指南之原理分析与模块改造

常用模块的开发及自定义，参见 Bpmn.js 全面进阶指南

功能说明

当前项目内主要包含五个组件：

• Toolbar：顶部工具栏，依赖 Designer 组件实现 xml 文件的导入导出和预览，支持对齐、缩放、撤销恢复及其他第三方扩展模块开关
• Panel：自定义属性面板，包括基础属性、扩展属性、监听器、注释文档等配置；支持使用原生属性面板

另外包含一些 bpmn.js 的扩展：

• additional-modules：基于 bpmn.js 的原生模块进行扩展/重写的功能模块，只有 bpmn.js 关联。目前包含 palette、contextMenu、renderer 等部分，也是扩展大家进行二次开发的核心参考代码
• bo-utils：与元素 businessObject 相关的公共方法，主要涉及属性读取和更新；与后端使用的流程引擎绑定
• bpmn-utils：bpmn.js 相关的一些公共方法
• moddle-extensions：BPMN 2.0 规范格式的 JSON Schema 文档，包含基础的 bpmn.json，三大流程引擎文档与自定义元素文档

整个项目包含了 BpmnInstance 和 EventBus 两种消息传递方式：

• BpmnInstance 中主要存放当前 Modeler 实例与节点实例，以及项目配置项，在二次开发过程中可以采用别的数据共享方式取代
• EventBus 事件总线是该项目的 核心消息传递方式：因为 节点实例不能被 Vue 进行响应式处理，影响性能且容易产生属性读取更新错误，并且 表单需要实时监听节点变化，所以通过消息总线共享事件和数据是比较好的处理方式。

可用功能

1. 工具栏

• [x] 导入文件
• [x] 导出文件（xml, bpmn, svg）
• [x] 预览文件字符串（xml, json）
• [x] 元素对其（垂直上中下、水平左中右）
• [x] 缩放
• [x] 撤销恢复与重做

3. 属性面板

• [x] 基础信息（id, name, version, executable ...）
• [x] 附件文档（documentation）
• [x] 执行作业
• [x] 用户分配
• [x] 异步配置
• [x] 流程启动项
• [x] 扩展属性
• [x] 执行监听器
• [x] 流转条件
• [x] 任务监听器
• [x] 任务多实例（会签、或签）

安装

安装表单设计器

npm i bpmn-panel-antdv --save

# OR
yarn add bpmn-panel-antdv

使用组件

方式 1 (完整引入),详情参考示例文件

// 在main.js引入
import BpmnPanelAntdvInit from "@packages/index";
Vue.use(BpmnPanelAntdvInit);

<template>
  <div>
    <bpmn-panel-antdv :options="options" />
  </div>
</template>
<script>
  import { BpmnPanelAntdv } from 'bpmn-panel-antdv'
  import 'bpmn-panel-antdv/lib/bpmn-panel-antdv.css'
  export default {
    components:{
      BpmnPanelAntdv
    },
    data(){
      options:{
        idAndNameDisabled:true,//流程id和name禁用编辑
        async assigneeApi(parms){
          /**
           * 不分页示例
           * parms为查询及分页参数，需要自行处理
           * 返回参数需要按该格式组装
           */
          return [{label:'管理员',value:'admin'}]
        },
        candidateUsersApi(parms){
          /**
           * 分页示例
           * parms为查询及分页参数，需要自行处理
           * 返回参数需要按该格式组装
           */
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve({
                total:100,
                result:[
                  {label:'管理员',value:'admin'},
                  {label:'张三',value:'zhangsan'}
                ]
              })
            },2000)
          })
        }
      }
    },
    methods: {
      initBpmn(){
        const canvas = this.$refs.canvas;
        this.bpmnModeler = new BpmnModeler({// 建模
          container: canvas,
          propertiesPanel: {
            parent: "#js-properties-panel" // 添加控制板
          },
          additionalModules: [
            TokenSimulationModule
          ],
          moddleExtensions: {
            camunda: CamundaBpmnModdle
          }
        });
        this.$refs.BpmnPanelAntdv.init(this.bpmnModeler);
      }
    }
  }
</script>

方式 2 (使用 mini 包，请确保你已引入 BpmnPanelAntdv 组件所需 的 antv 组件)

<template>
  <div>
    <bpmn-panel-antdv :options="options" />
  </div>
</template>
<script>
  import { BpmnPanelAntdv } from 'bpmn-panel-antdv/lib/bpmn-panel-antdv-mini.umd'
  import 'bpmn-panel-antdv/lib/bpmn-panel-antdv-mini.css'
  export default {
    components:{
      BpmnPanelAntdv
    },
    data(){
      options:{
        idAndNameDisabled:true,//流程id和name禁用编辑
        async assigneeApi(parms){
          /**
           * 不分页示例
           * parms为查询及分页参数，需要自行处理
           * 返回参数需要按该格式组装
           */
          return [{label:'管理员',value:'admin'}]
        },
        candidateUsersApi(parms){
          /**
           * 分页示例
           * parms为查询及分页参数，需要自行处理
           * 返回参数需要按该格式组装
           */
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve({
                total:100,
                result:[
                  {label:'管理员',value:'admin'},
                  {label:'张三',value:'zhangsan'}
                ]
              })
            },2000)
          })
        }
      }
    },
    methods: {
      initBpmn(){
        const canvas = this.$refs.canvas;
        this.bpmnModeler = new BpmnModeler({// 建模
          container: canvas,
          propertiesPanel: {
            parent: "#js-properties-panel" // 添加控制板
          },
          additionalModules: [
            TokenSimulationModule
          ],
          moddleExtensions: {
            camunda: CamundaBpmnModdle
          }
        });
        this.$refs.BpmnPanelAntdv.init(this.bpmnModeler);
      }
    }
  }
</script>

友情链接

1. MiyueFE：Bpmn.js 全面进阶指南
2. 霖呆呆：《全网最详 bpmn.js 教材目录》，关于 bpmn.js 交流群的说明

开源许可