# Bpmn-Project

**Repository Path**: tjs/bpmn-project

## Basic Information

- **Project Name**: Bpmn-Project
- **Description**: 流程引擎。包含基于最新版本的 Vue3 + TypeScript + ElementPlus + BPMN.js 的流程设计器，支持 Flowable 工作流引擎。如果觉得这个项目不错，麻烦点个star🌟。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 16
- **Created**: 2025-05-07
- **Last Updated**: 2025-06-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BPMN 流程设计器

基于 Vue3 + TypeScript + ElementPlus + BPMN.js 的流程设计器，支持 Flowable 工作流引擎。

![BPMN流程设计器预览](./public/bpmn.png)

## 功能特性

- 🎨 支持自定义主题和样式
- 🎨 流程设计器汉化，校验结果汉化
- 🔧 完整的工具栏功能
  - 导入/导出 BPMN 文件
  - 放大/缩小/重置视图
  - 撤销/重做操作
  - 流程模拟器
  - 小地图导航
  - 快捷键提示
- 📝 强大的属性面板
  - 基础信息配置
  - 网关配置
  - 连线配置
  - 服务任务配置
  - 事件配置
  - 监听器配置
  - 代办人配置
    - 支持多种代办人类型：用户、角色、用户组、岗位、表达式
    - 可配置代办人值，支持ID或表达式
- 🎯 支持 Flowable 工作流引擎
  - 扩展支持 assigneeType 和 assigneeValue 属性
  - 可灵活配置任务处理人
- 🌐 网格背景和参考线
- 🎮 流程模拟功能
- 🔍 小地图导航功能
- ⌨️ 快捷键支持
- 🔄 自动布局功能
- ✨ 平滑的动画效果

## Flowable 扩展属性说明

### 用户任务扩展属性

在用户任务节点中，我们扩展了以下属性来支持更灵活的任务处理人配置：

1. `assigneeType` (代办人类型)

   - 类型：String
   - 可选值：
     - user: 用户
     - role: 角色
     - group: 用户组
     - position: 岗位
     - expression: 表达式
   - 用途：指定任务处理人的类型

2. `assigneeValue` (代办人值)
   - 类型：String
   - 值说明：
     - 当 assigneeType 为 user/role/group/position 时：填写对应的 ID
     - 当 assigneeType 为 expression 时：填写表达式，如 ${user.id}
   - 用途：指定具体的任务处理人

### 使用示例

```xml
<userTask id="userTask_1" name="审批任务"
    flowable:assigneeType="user"
    flowable:assigneeValue="10001">
</userTask>

<userTask id="userTask_2" name="角色审批"
    flowable:assigneeType="role"
    flowable:assigneeValue="ROLE_ADMIN">
</userTask>

<userTask id="userTask_3" name="动态审批人"
    flowable:assigneeType="expression"
    flowable:assigneeValue="${taskService.getAssignee()}">
</userTask>
```

### Java 后端获取扩展属性

在 Flowable 引擎中获取自定义的 assigneeType 和 assigneeValue 属性，有以下几种方式：

1. 通过 TaskService 获取

```java
@Autowired
private TaskService taskService;

public void handleTask(String taskId) {
    // 获取任务定义
    Task task = taskService.createTaskQuery()
        .taskId(taskId)
        .singleResult();

    // 获取任务定义的扩展属性
    String assigneeType = (String) taskService.getVariable(taskId, "flowable_assigneeType");
    String assigneeValue = (String) taskService.getVariable(taskId, "flowable_assigneeValue");
}
```

2. 通过 RepositoryService 获取

```java
@Autowired
private RepositoryService repositoryService;

public void getTaskConfig(String processDefinitionId, String taskDefinitionKey) {
    // 获取流程定义
    BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinitionId);

    // 获取用户任务节点
    UserTask userTask = (UserTask) bpmnModel.getMainProcess()
        .getFlowElement(taskDefinitionKey);

    // 获取扩展属性
    String assigneeType = userTask.getAttributeValue(
        "http://flowable.org/bpmn", "assigneeType");
    String assigneeValue = userTask.getAttributeValue(
        "http://flowable.org/bpmn", "assigneeValue");
}
```

3. 通过 TaskListener 监听器获取

```java
@Component
public class CustomTaskListener implements TaskListener {

    @Override
    public void notify(DelegateTask delegateTask) {
        // 获取扩展属性
        String assigneeType = delegateTask.getVariable("flowable_assigneeType").toString();
        String assigneeValue = delegateTask.getVariable("flowable_assigneeValue").toString();

        // 根据不同类型处理任务分配
        switch (assigneeType) {
            case "user":
                delegateTask.setAssignee(assigneeValue);
                break;
            case "role":
                // 处理角色分配逻辑
                break;
            case "group":
                delegateTask.addCandidateGroup(assigneeValue);
                break;
            case "position":
                // 处理岗位分配逻辑
                break;
            case "expression":
                // 处理表达式分配逻辑
                break;
        }
    }
}
```

4. 在流程部署时配置监听器

```xml
<userTask id="userTask_1" name="审批任务"
    flowable:assigneeType="user"
    flowable:assigneeValue="10001">
    <extensionElements>
        <flowable:taskListener event="create"
            class="com.example.CustomTaskListener" />
    </extensionElements>
</userTask>
```

### 最佳实践建议

1. 建议在流程部署时就配置好 TaskListener，可以统一处理任务分配逻辑
2. 可以将分配逻辑封装到专门的服务类中，便于维护和复用
3. 对于动态表达式，建议使用 SpEL 表达式或 Flowable 表达式
4. 注意处理异常情况，如找不到对应的用户、角色等
5. 可以结合数据库缓存用户、角色等信息，提高性能

### 注意事项

1. 自定义属性的命名空间必须是 `http://flowable.org/bpmn`
2. 属性值建议做好验证，避免非法值
3. 表达式需要确保在运行时能够正确解析
4. 建议对任务分配结果进行日志记录，便于问题排查

## 技术栈

- Vue 3.x
- TypeScript 5.x
- Element Plus
- BPMN.js
- Vite

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 开发环境运行

```bash
pnpm dev
```

### 生产环境打包

```bash
pnpm build
```

## 项目结构

```
src/
├── views/
│   └── ProcessDesign/           # 流程设计器主目录
│       ├── components/          # 组件目录
│       │   ├── PropertyPanel.vue    # 属性面板
│       │   ├── ToolBar.vue          # 工具栏
│       │   └── ...
│       ├── hooks/               # 钩子函数目录
│       │   ├── useBasicForm.ts      # 基础表单逻辑
│       │   ├── useGatewayConfig.ts  # 网关配置逻辑
│       │   └─�� ...
│       ├── types/               # 类型定义目录
│       │   ├── bpmn.ts             # BPMN相关类型
│       │   ├── flowable.ts         # Flowable相关类型
│       │   └── index.ts            # 通用类型
│       └── config/              # 配置文件目录
│           └── flowable.json       # Flowable配置
└── ...
```

## 使用说明

1. 工具栏功能：

   - 导入/导出：支持 BPMN、XML、SVG 格式
   - 视图控制：放大、缩小、重置视图
   - 编辑操作：撤销、重做、删除
   - 流程模拟：支持流程模拟运行
   - 小地图：快速导航和预览

2. 属性面板：

   - 基础信息：ID、名称、描述
   - 网关配置：默认流转路径
   - 连线配置：条件表达式
   - 服务配置：实现类型、异步执行
   - 事件配置：消息、信号、定时器
   - 监听器配置：执行监听器

3. 快捷键支持：
   - Ctrl + Z：撤销
   - Ctrl + Y：重做
   - Ctrl + -：缩小
   - Ctrl + =：放大
   - Delete：删除

## 注意事项

1. 确保 Node.js 版本 >= 16
2. 推荐使用 pnpm 包管理器
3. 开发时请遵循项目的代码规范
4. 提交代码前请进行代码格式化

## 贡献指南

1. Fork 本仓库
2. 创建特性分支
3. 提交代码
4. 创建 Pull Request

## ✨ 特别鸣谢

- MiyueFE: [MiyueFE](https://gitee.com/MiyueSC)

## 诚挚推荐

强烈推荐贺波老师的《深入Flowable流程引擎：核心原理与高阶实战》，Flowable 创始人 Tijs Rademakers 亲笔作序，该书对系统学习和深入掌握
Flowable
极有帮助，书中涵盖很多大型流程中心平台所涉及的技术架构和场景案例。[推荐购买链接](https://item.jd.com/14804836.html)

![](images/book2.jpg)

![](images/book1.jpg)

## 许可证

[Apache-2.0](LICENSE)