# Bpmn-Project

**Repository Path**: rainsuper/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**: 49
- **Forks**: 19
- **Created**: 2024-12-10
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: process-engine

**Tags**: None

## README

# BPMN 流程引擎项目

基于 Vue3 和 Flowable 的完整 BPMN 流程引擎解决方案，包含功能强大的流程设计器前端和稳健的后端服务。

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

## 项目概述

本项目是一个综合性的 BPMN 流程引擎解决方案，由两个主要组件构成：

1. **前端**：基于 Vue3 的 BPMN 流程设计器，具有丰富的功能用于创建和编辑 BPMN 图表
2. **后端**：基于 Spring Boot 实现 Flowable 工作流引擎的服务，用于流程执行和管理

## 核心功能

### 前端 (Vue3 + TypeScript + BPMN.js)
- 🎨 可定制的主题和样式
- 🌐 UI 和验证的中文本地化
- 🔧 完整的工具栏功能：
  - 导入/导出 BPMN 文件
  - 缩放、撤销/重做操作
  - 流程模拟器
  - 小地图导航
  - 键盘快捷键
- 📝 高级属性面板用于任务配置
- 🎯 Flowable 引擎集成扩展属性：
  - `assigneeType`：用户、角色、用户组、岗位、表达式
  - `assigneeValue`：ID 或 SpEL 表达式
- 🎮 流程模拟能力
- ⌨️ 键盘快捷键支持
- ✨ 平滑动画和网格背景

### 后端 (Spring Boot + Flowable)
- **工作流引擎**：Flowable 7.0.1 用于流程执行
- **核心管理功能**：
  - 流程模型管理（创建、编辑、删除、查询）
  - 流程定义管理（部署、激活/挂起）
  - 流程实例管理（启动、终止、查询）
- **数据库**：MySQL 8.x 配合 MyBatis-Plus
- **安全认证**：Sa-Token
- **接口文档**：Knife4j OpenAPI 3 接口文档

## 技术栈

### 前端
- Vue 3.x
- TypeScript 5.x
- Element Plus
- BPMN.js
- Vite
- Node.js >= 16
- pnpm 包管理器

### 后端
- Spring Boot 3.1.5
- Flowable 7.0.1
- MyBatis-Plus 3.5.9
- MySQL 8.x
- Sa-Token 1.39.0
- Knife4j 4.4.0 (OpenAPI 3)

## 项目结构

```
bpmn-project/
├── backend/                    # Spring Boot 后端服务
│   ├── bpmn-project-api/       # API 接口模块
│   ├── bpmn-project-biz/       # 业务逻辑模块
│   ├── bpmn-project-common/    # 公共工具模块
│   └── bpmn-project-thirdpart-demo/ # 第三方集成演示
└── frontend/                   # Vue3 流程设计器
    ├── src/
    │   ├── views/process/      # 流程设计和管理
    │   ├── components/ProcessDesign/ # 核心 BPMN 编辑器组件
    │   ├── api/flow/           # 流程相关 API 定义
    │   └── types/              # TypeScript 类型声明
    └── ...
```

## 快速开始

### 后端设置

1. **环境要求**：
   - JDK 17+
   - Maven 3.6+
   - MySQL 8.x

2. **安装步骤**：
   ```bash
   # 克隆项目
   # 创建数据库并导入 SQL 脚本
   # 更新 application.yml 中的数据库连接
   ```

3. **运行**：
   ```bash
   mvn clean package -DskipTests
   java -jar bpmn-project-biz/target/bpmn-project-biz.jar
   ```

4. **接口文档**：
   启动后访问 http://localhost:8080/doc.html

### 前端设置

1. **环境要求**：
   - Node.js >= 16
   - pnpm 包管理器

2. **安装依赖**：
   ```bash
   pnpm install
   ```

3. **开发环境**：
   ```bash
   pnpm dev
   ```

4. **生产构建**：
   ```bash
   pnpm build
   ```

## Flowable 扩展属性

项目通过自定义属性扩展了 Flowable，以实现灵活的任务分配：

- `assigneeType`：指定处理人类型（用户、角色、用户组、岗位、表达式）
- `assigneeValue`：处理人 ID 或 SpEL 表达式

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

## 开发规范

### 后端
1. 遵循阿里巴巴 Java 开发规范
2. 所有 API 响应使用 ResponseResult 包装
3. 使用 ServiceException 处理业务异常
4. 所有实体继承 BaseEntity 获取公共字段

### 前端
1. 使用 TypeScript 确保类型安全
2. 遵循 Vue3 Composition API 模式
3. 使用 ESLint/Prettier 保持代码风格一致
4. 编写完整的类型定义

## 推荐阅读

我们强烈推荐贺波老师的《深入Flowable流程引擎：核心原理与高阶实战》。该书由 Flowable 创始人 Tijs Rademakers 作序推荐，全面覆盖了 Flowable 引擎内部原理和企业级实现模式。

[购买链接](https://item.jd.com/14804836.html)

## 许可证

[Apache-2.0](LICENSE)