# bpmn-panel-antdv

**Repository Path**: glf_gao/bpmn-panel-antdv

## Basic Information

- **Project Name**: bpmn-panel-antdv
- **Description**: bpmn-panel-antdv
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2023-06-28
- **Last Updated**: 2025-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <a href="https://github.com/miyuesc/bpmn-process-designer">
   <img alt="logo" src="./public/icon-process.png" />
  </a>
</p>

<h1 align="center">Bpmn Panel Antdv</h1>

## 项目简介

本项目基于 `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。

## 安装和使用

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

# 安装依赖
yarn

# 启动项目
yarn serve
```

## 开发指南

`bpmn.js` 的 **核心原理与常规改造** 可以参见我的文章：[Bpmn.js 进阶指南之原理分析与模块改造](https://juejin.cn/post/7117481147277246500)

**常用模块的开发及自定义**，参见 [Bpmn.js 全面进阶指南](https://juejin.cn/column/6964382482007490590)

## 功能说明

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

- `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] 任务多实例（会签、或签）

## 安装

> 安装表单设计器

```cmd
npm i bpmn-panel-antdv --save

# OR
yarn add bpmn-panel-antdv
```

###

## 使用组件

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

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

```html
<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 组件)

```html
<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 全面进阶指南](https://juejin.cn/column/6964382482007490590)
2. 霖呆呆：[《全网最详 bpmn.js 教材目录》](https://juejin.cn/post/6844904017567416328)，[关于 bpmn.js 交流群的说明](https://juejin.cn/post/6844904041026158599)

## 开源许可