流程设计器（BPMN）

相关视频：

05、[如何实现流程模型的新建？](http://https://wx.zsxq.com/dweb2/index/topic_detail/812815541444212 "如何实现流程模型的新建？")
06、[如何实现流程模型的流程图的设计？](http://https://wx.zsxq.com/dweb2/index/topic_detail/184582218112422 "如何实现流程模型的流程图的设计？")
07、[如何实现流程模型的流程图的预览？](http://https://wx.zsxq.com/dweb2/index/topic_detail/212815541422821 "如何实现流程模型的流程图的预览？")
09、[如何实现流程模型的发布？](http://https://wx.zsxq.com/dweb2/index/topic_detail/212815541418221 "如何实现流程模型的发布？")
10、[如何实现流程定义的查询？](http://https://wx.zsxq.com/dweb2/index/topic_detail/415814421224558 "如何实现流程定义的查询？")
21、[如何实现流程的流程图的高亮？](http://https://wx.zsxq.com/dweb2/index/topic_detail/812815454242282 "如何实现流程的流程图的高亮？")

在 《审批接入（流程表单）》、《审批接入（业务表单）》 小节中，我们已经新建过流程模型，并发布为流程定义，如下图所示：

![](/media/202408/2024-08-28_083947_438143.png)
本文，我们将进一步讲解【流程模型】、【流程定义】，特别是如何使用 BPMN 流程设计器。

## 1. 流程模型
流程模型，对应 [工作流程 -> 流程管理 -> 流程模型] 菜单，如下图所示：

![](/media/202408/2024-08-28_084150_524213.png)

- 后端，由 BpmModelController 提供接口
- 前端，由 /views/bpm/model/index.vue 实现界面

### 1.1 表结构
流程设计模型部署表，由 Flowable 提供的 ACT_RE_MODEL 表实现，如下所示：

![](/media/202408/2024-08-28_084236_137458.png)
我们可以通过 META_INFO 字段，额外拓展了 icon 图标、description 描述、formType、formId、formCustomCreatePath、formCustomViewPath 表单等信息。如下图所示：

![](/media/202408/2024-08-28_084247_127704.png)

1.2 流程设计器
① BPMN 流程设计器，由项目的 ProcessDesigner.vue (opens new window)实现。

![](/media/202408/2024-08-28_084305_287691.png)

它是基于 https://github.com/miyuesc/bpmn-process-designer 拓展，底层是 bpmn-js 。
> 补充说明：
bpmn-process-designer 提供 Vue2 + ElementUI、Vue3 + NaiveUI 两个版本，而我们是 Vue3 + ElementPlus，是通过 Vue2 + ElementUI 迁移适配实现。

② BPMN 预览，支持高亮，由 ProcessViewer.vue 实现。

![](/media/202408/2024-08-28_084501_700032.png)
它是直接基于 bpmn-js (opens new window)拓展，没有基于 bpmn-process-designer。

------------

下面，我们将详细讲解 BPMN 流程设计器的各个配置项：任务（表单）、任务（审批人）、多实例（会签配置）、执行监听器、任务监听器等等。

### 1.3 任务（表单）
1.3.1 表单配置
每个任务节点，有个 [表单] 配置项，用于配置任务审批时，补充填写表单信息。如下图所示：

![](/media/202408/2024-08-28_084553_966705.png)

> 拓展知识：
① 问题：配置的表单，最终是怎么存储的？
回答：在 BPMN 的 UserTask 节点上，有个 formKey 属性，用于存储表单的 key，这里我们就存了【流程表单】的编号。
② 问题：为什么只支持【流程表单】，不支持【业务表单】呢？
回答：【业务表单】暂时没想到比较优雅的二次修改方案，因为它属于业务系统，无法在审批通过时，一起进行提交。
③ 问题：表单设计器，怎么使用远程数据？
回答：参见 https://docs.qq.com/doc/DZlNIVkZSTlVJVEd2 (opens new window)文档

1.3.2 表单效果
在审批任务通过时，需要额外填写表单信息，如下图所示：

![](/media/202408/2024-08-28_084702_321868.png)
填写的表单数据，会存储到 Flowable 任务的 variables 中，如下图所示：

![](/media/202408/2024-08-28_084714_586718.png)

### 1.4 任务（审批人）

![](/media/202408/2024-08-28_084735_702500.png)

详细见 《选择审批人、发起人自选》 文档。

### 1.5 多实例（会签配置）

![](/media/202408/2024-08-28_084813_049186.png)

详细见 《会签、或签、依次审批》 文档。

### 1.6 执行监听器

![](/media/202408/2024-08-28_084841_710639.png)

详细见 《执行监听器、任务监听器》 文档。

### 1.7 任务监听器

![](/media/202408/2024-08-28_084917_700548.png)

详细见 《执行监听器、任务监听器》 文档。

## 2. 流程定义
流程模型在部署后，会创建一个新版本的流程定义，并怪气老版本的流程定义。最终，我们点击某个流程模型的「流程定义」按钮，可以看到它对应的流程定义，如下图所示：

![](/media/202408/2024-08-28_084951_832507.png)

- 后端，由 BpmProcessDefinitionController 提供接口
- 前端，由 /views/bpm/definition/index.vue (opens new window)实现界面
### 2.1 表结构
① 流程定义表，由 Flowable 提供的 ACT_RE_PROCDEF 表实现，如下所示：

![](/media/202408/2024-08-28_085024_918442.png)
② 由于 ACT_RE_PROCDEF 表没有类似 ACT_RE_MODEL 有 META_INFO_ 字段，所以我们额外创建了一个 BPM 流程定义的信息表，用于存储流程定义的额外信息。如下所示：

> 省略 creator/create_time/updater/update_time/deleted/tenant_id 等通用字段

> CREATE TABLE `bpm_process_definition_info` (
 `id` bigint NOT NULL AUTO_INCREMENT COMMENT '编号',
 `process_definition_id` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '流程定义的编号',
 `model_id` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '流程模型的编号',
 `icon` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图标',
 `description` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '描述',
 `form_type` tinyint NOT NULL COMMENT '表单类型',
 `form_id` bigint DEFAULT NULL COMMENT '表单编号',
 `form_conf` varchar(1000) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '表单的配置',
 `form_fields` varchar(5000) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '表单项的数组',
 `form_custom_create_path` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '自定义表单的提交路径',
 `form_custom_view_path` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '自定义表单的查看路径',
 PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=246 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='BPM 流程定义的信息表';

本质上，就是把 ACT_RE_MODEL 的 META_INFO_ 字段存储到 bpm_process_definition_info 表中。
因此，最终每次流程模型在部署时，会往 Flowable 插入一条 ACT_RE_PROCDEF 记录，也会往 bpm_process_definition_info 表中插入一条记录。

### 2.2 流程定义列表（可发起流程）
注意！一个流程模型，有且仅有一个【激活】状态的流程定义。最终，用户发起流程时，选择的是【激活】状态的流程定义。如下图所示：

![](/media/202408/2024-08-28_085146_214139.png)