# SpringbootFlowableVuePro_source

**Repository Path**: xiadeqing/SpringbootFlowableVuePro

## Basic Information

- **Project Name**: SpringbootFlowableVuePro_source
- **Description**: Spring Boot + Vue + Flowable 工作流平台
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2026-10-10
- **Last Updated**: 2026-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

<img src="assets/brand/logo.png" width="144" alt="流程节点汇聚为审批勾选" />

# SpringbootFlowableVuePro

**可视化流程编排，让每一次协同审批清晰可追踪。**

基于 Spring Boot、Vue 与 Flowable，覆盖流程设计、动态表单、审批协作与精细授权。

**简体中文** · [English](README.en.md)

[![Spring Boot](https://img.shields.io/badge/Spring_Boot-4.1.1-6DB33F?logo=springboot&logoColor=white)](backend/pom.xml)
[![Flowable](https://img.shields.io/badge/Flowable-8.0.0-2563EB)](backend/pom.xml)
[![Vue](https://img.shields.io/badge/Vue-3.5.43-42B883?logo=vuedotjs&logoColor=white)](frontend/package.json)
[![Java](https://img.shields.io/badge/Java-21-orange)](backend/pom.xml)
[![License](https://img.shields.io/badge/License-Apache_2.0-blue)](LICENSE)

[快速开始](#quickstart) · [功能概览](#features) · [界面展示](#showcase) · [文档](#documentation) · [Gitee 仓库](https://gitee.com/spring2020/SpringbootFlowableVuePro)

</div>

<details>
<summary><strong>📑 目录</strong></summary>

- [项目介绍](#overview)
- [快速开始](#quickstart)
- [功能概览](#features)
- [界面展示](#showcase)
- [技术栈](#stack)
- [文档](#documentation)
- [开发与验证](#development)
- [使用边界](#boundaries)
- [参与贡献](#contributing)
- [许可与支持](#license)

</details>

<a id="overview"></a>
## 👋 项目介绍

从一张表单到一次完整审批：在 BPMN 画布中编排流程，绑定动态表单与节点权限，发起申请后跟踪任务、参与人和处理记录。项目提供请假、费用报销、联合评审演示，方便理解不同协作方式。

**流程与表单按版本发布，审批实例保留发起时的快照；页面、按钮、接口和数据范围统一纳入角色授权。**

![工作流平台界面概览](198f4302c7957d2ee5293481043e26a0.png)

<a id="quickstart"></a>
## 💻 快速开始

准备 **JDK 21+、Node.js 24、MySQL 8**，并设置 `JAVA_HOME`。首次运行会下载 Maven 与 npm 依赖。

```sh
git clone https://gitee.com/spring2020/SpringbootFlowableVuePro.git
cd SpringbootFlowableVuePro
```

### 1. 配置数据库

默认连接 `127.0.0.1:3306/workflow`。创建数据库：

```sql
CREATE DATABASE workflow CHARACTER SET utf8mb4;
```

复制 `backend/config/application-local.example.yml` 为 `backend/config/application-local.yml`，填写数据库账号和密码。实际本机配置已被 Git 忽略，也可使用 `DB_URL`、`DB_USER`、`DB_PASSWORD` 环境变量。

### 2. 启动服务

在项目根目录打开两个终端，分别启动后端和前端。

**Windows / PowerShell**

```powershell
./scripts/start-demo.ps1 backend
```

```powershell
./scripts/start-demo.ps1 frontend
```

<details>
<summary><strong>Linux / macOS</strong></summary>

```sh
sh scripts/start-demo.sh backend
```

```sh
sh scripts/start-demo.sh frontend
```

</details>

### 3. 登录体验

打开 [前端工作台](http://127.0.0.1:5173)，后端地址为 `http://127.0.0.1:8080`。

| 账号 | 用途 | 演示密码 |
| --- | --- | --- |
| `admin` | 管理员，流程与组织配置 | `Demo@2026` |
| `alice`、`bob`、`carol`、`dave` | 申请与协同审批 | `Demo@2026` |

演示账号仅由 `demo/test` profile 初始化。Vite 代理业务 API 与接口文档，认证使用同源 HttpOnly Session Cookie + CSRF。

<details>
<summary><strong>数据库初始化、运行模式与已有数据</strong></summary>

- 默认启用 `demo,mysql`：使用 MySQL，同时初始化演示账号、示例流程和表单；重启保留已有数据。
- 仅启用 `mysql` 可关闭演示初始化；空库首次启动需设置至少 12 位的 `ADMIN_INITIAL_PASSWORD`。
- 本地首次启动自动创建 Flowable 引擎表并执行 Flyway 迁移；部署环境初始化完成后设置 `ENGINE_SCHEMA_UPDATE=false`。
- 启动脚本在 `backend` 目录运行，自动加载本机数据库配置。
- 原 H2 文件位于 `backend/data`，不会自动迁移到 MySQL；临时使用 H2 演示时设置 `SPRING_PROFILES_ACTIVE=demo`。

部署说明见 [部署指南](docs/deployment.md)。

</details>

<a id="features"></a>
## 🔥 功能概览

| 能力 | 项目提供的功能 |
| --- | --- |
| 流程编排 | BPMN 画布、草稿修订、版本发布与停用、表单绑定、节点字段权限 |
| 审批协作 | 并行全员或比例会签、串行会签、或签、候选人认领、加签、转办与委托 |
| 流程处理 | 退回、取回、撤回、重新提交、挂起、恢复、取消与管理员终止 |
| 动态表单 | 21 种组件、三栏设计器、拖拽布局、模板、撤销重做、设备预览、JSON 导入导出 |
| 组织与授权 | 用户、多角色、部门树、岗位、菜单与按钮授权、数据范围、会话撤销 |
| 接口管理 | springdoc-openapi + Swagger UI，自动收录 Controller，文档查看与调试分别授权 |
| 运营与扩展 | 操作审计、站内通知、传阅抄送、到期提醒、回调发件箱、失败作业重试、CRUD 代码 ZIP 生成 |

<details>
<summary><strong>审批协作与流程版本</strong></summary>

会签支持全员、比例或依次审批；多实例或签由首个有效决定取消剩余任务，也支持候选人认领单任务。加签支持前加签、后加签、并行增员及移除尚未办理的新增人员。转办永久移交任务，委托保留 owner，受托人归还后由原办理人提交。

传阅、抄送使用独立阅读记录，默认不阻塞流程；显式等待全员阅毕节点可要求全部读完后继续。

流程信息与设计修改保存为草稿，重新发布产生新版本；已有申请继续使用发起时的快照。流程标识创建后固定且不可重复使用。删除采用逻辑删除，需确认并校验修订号；所有发布版本停止接收新申请，在办审批继续处理，历史记录保留，已删除模型不能重新启用。

</details>

<details>
<summary><strong>表单设计与历史兼容</strong></summary>

组件包括单选、多选、开关、评分、滑块、日期时间、文件、图片、分组标题、静态说明与分隔线。字段可配置标识、选项、默认值、必填和范围；布局支持单双列、宽度、标签位置、对齐和组件大小，并提供请假、报销、采购模板。

预览、申请与审批详情统一使用 form-create 3.3.4 动态渲染，适配现有表单格式与历史快照；附件使用项目鉴权接口。JSON 导入导出采用 `name / fields / settings` 格式并先验证。PC / Pad / H5 预览不提交业务数据，附件在正式申请时上传。

草稿可继续编辑，已发布表单通过“复制为新版本”调整，再绑定到流程；实例保留发布时的表单布局。

</details>

<details>
<summary><strong>精细角色授权与接口自动接入</strong></summary>

角色权限树分别配置页面与操作按钮，覆盖流程设计、接口管理和业务资源管理。菜单支持目录、页面、按钮、路由、排序和显示状态；隐藏影响导航，停用菜单或角色撤销相应权限。前端在路由切换和重新聚焦时刷新授权。

数据范围包括全部、自定义部门、本部门、本部门及下级、仅本人；多个有效角色取并集。内置 USER 默认仅本人，ADMIN 管理全部数据。后端同时校验操作权限与数据范围，授权者不能授予自己没有的权限或扩大接收人的数据范围。

停用账号与重置密码使旧会话失效；删除用户保留历史身份且账号不能复用。内置角色、内置管理员及最后一个有效管理员受保护；关联记录删除前需解除引用，编辑与删除均校验版本。部门改名保留历史名称，审批参与人使用发起时快照。

登录后从 `/api-management` 查看文档，OpenAPI 描述地址为 `/v3/api-docs`。新增 Controller 接口自动进入文档；业务方法的 `@ApiPermission` 声明在启动时自动进入角色授权树，代码生成器也生成该声明。文档查看、在线调试与实际业务调用独立授权，保留 Session 和 CSRF。旧库授权升级采用快照与幂等补齐。

详见 [接口说明](docs/api.md)与 [接口和权限检查报告](docs/audits/2026-10-06-api-rbac-verification.md)。

</details>

<a id="showcase"></a>
## 🎬 界面展示

<details open>
<summary><strong>任务工作台</strong></summary>

![审批任务工作台](task.png)

</details>

<details>
<summary><strong>流程管理与 BPMN 设计器</strong></summary>

![流程模型管理](0cd87fc3feb599a0b95ab141d9b5d6a5.png)
![BPMN 流程设计器](f59af6ae925825c867dfd38db157cbc1.png)

</details>

<details>
<summary><strong>动态表单设计器</strong></summary>

![动态表单设计界面](fcf4581b734ffb21808537d0f7066187.png)

</details>

<details>
<summary><strong>组织与权限配置</strong></summary>

![组织与权限管理](d288ad8f61c095779632f152dfe316cb.png)
</details>

<details>
<summary><strong>审批协作与流程进度</strong></summary>

![个人审批工作台](a928b18ff39d9a1eea6b9a2c2b0c95ed.png)
![转办、委托与加签操作](2301f2fd0f85e21c4027202552f2d9c8.png)
![审批进度与退回操作](f94fb9f93cd08663b46283a60cf8da55.png)

</details>

<a id="stack"></a>
## 🧩 技术栈

以下版本来自项目依赖配置；升级时请重新验证兼容性。

| 组件 | 项目版本 |
| --- | --- |
| Spring Boot / Flowable | 4.1.1 / 8.0.0 |
| springdoc-openapi / Swagger UI | springdoc-openapi starter 3.1.1（含 Swagger UI） |
| Vue / Vite | 3.5.43 / 8.3.1 |
| Element Plus / bpmn-js / form-create | 2.14.7 / 18.30.1 / 3.3.4 |
| Java / Maven Wrapper | 编译目标 Java 21 / 3.9.12 |
| 数据库 | MySQL 8；本地演示支持 H2 |

<a id="documentation"></a>
## 📚 文档

| 文档 | 内容 |
| --- | --- |
| [操作手册](docs/user-guide.md) | 页面操作、表单与授权配置 |
| [审批协作指南](docs/workflow-approval-guide.md) | 会签、或签、加签、转办与委托 |
| [接口说明](docs/api.md) | 接口管理、鉴权与调用约定 |
| [数据库与事务](docs/database.md) | 数据结构与事务设计 |
| [功能对照与边界](docs/feature-matrix.md) | 功能覆盖及适用条件 |
| [部署指南](docs/deployment.md) | 容器与运行配置 |
| [验证记录](docs/verification.md) | MySQL 集成验证与浏览器检查 |
| [接口与权限检查报告](docs/audits/2026-10-06-api-rbac-verification.md) | 接口文档与角色授权覆盖 |
| [设计说明](docs/superpowers/specs/2026-09-30-workflow-platform-design.md) / [实施计划](docs/superpowers/plans/2026-09-30-workflow-platform.md) | 项目设计与实施记录 |
| [品牌资产说明](assets/brand/README.md) | Logo 理念与使用方式 |

<a id="development"></a>
## 🛠️ 开发与验证

在项目根目录运行：

```powershell
./scripts/backend.ps1 -Task test
npm --prefix frontend test -- --run
npm --prefix frontend run audit:permissions
npm --prefix frontend run build
```

也可在 `backend` 目录运行 `./mvnw.cmd test`（Linux/macOS 使用 `./mvnw test`）。新增前端交互应通过权限审计；后端 `ApiDocumentationTest` 检查接口文档覆盖。具体执行结果见 [验证记录](docs/verification.md)。

<a id="boundaries"></a>
## 📌 使用边界

- 退回、取回仅适用于没有并行分支、子流程或自动副作用的线性路径。
- 业务命令通过数据库互斥锁保证顺序，适合单组织中小规模部署；更大规模需要查询投影和更细粒度的锁。
- 外部回调采用至少一次投递，接收方需按事件 ID 去重。

完整约束见 [功能对照与边界](docs/feature-matrix.md)。

<a id="contributing"></a>
## 🤝 参与贡献

欢迎在 [Gitee Issues](https://gitee.com/spring2020/SpringbootFlowableVuePro/issues) 提交问题和建议。报告问题时请提供运行环境、复现步骤和相关日志；提交改动时请说明行为变化与验证结果，并同步更新中英文 README 中受影响的内容。

<a id="license"></a>
## 💙 许可与支持

项目采用 [Apache License 2.0](LICENSE)。如果项目对你有帮助，欢迎在 [Gitee](https://gitee.com/spring2020/SpringbootFlowableVuePro) 点亮 Star，或分享你的使用经验。

<details>
<summary><strong>支持项目维护</strong></summary>

感谢对开源维护的支持。

<img src="%E6%94%B6%E6%AC%BE%E7%A0%81_%E5%BE%AE%E4%BF%A1.png" alt="微信赞赏二维码" width="240" />
<img src="%E6%94%B6%E6%AC%BE%E7%A0%81_%E6%94%AF%E4%BB%98%E5%AE%9D.jpg" alt="支付宝赞赏二维码" width="240" />

</details>