zhaohu/zcui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0701提交本本，包含整体所有子页面

Browse Source
This commit is contained in:
Charles
2026-07-01 16:11:39 +08:00
parent 709098e515
commit 5ce8c50db9
12153 changed files with 1691968 additions and 7371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
saber3/docs/工作流审批中心/开发设计-工作流审批中心.md
+407
View File
@@ -0,0 +1,407 @@
# 工作流审批中心开发设计文档
**版本**: v1.0
**日期**: 2026-06-11
**作者**: AI 助手
---
## 1. 项目概述
### 1.1 项目背景
为 BladeX/Saber3 企业级微服务平台增加工作流审批中心模块，提供统一的流程任务管理入口。模块包含四个子页面：我的待办、我的已办、我的申请、我的流程（统一视图）。
### 1.2 技术栈
- **前端框架**: Vue 3 + Element Plus + Avue CRUD
- **构建工具**: Vite
- **语言**: JavaScript（无 TypeScript）
- **包管理**: pnpm
- **样式**: SCSS + Element Plus 主题变量
### 1.3 参考原型
原型项目位于 `prototype/` 目录（已从 `src/frontend` 移出），包含三个参考页面：
- `MyTodo.vue` — 我的待办
- `MyDone.vue` — 我的已办
- `MyApplication.vue` — 我的申请
---
## 2. 模块结构
### 2.1 文件目录
```
src/
├── api/
│ └── workflow/
│ └── index.js # API 接口层（mock 数据）
├── views/
│ └── workflow/
│ ├── todo.vue # 我的待办
│ ├── done.vue # 我的已办
│ ├── my.vue # 我的申请
│ └── process.vue # 我的流程（统一视图）
├── components/ # 复用全局组件
└── router/ # 动态路由由后端菜单 JSON 生成
docs/
├── 需求分析-工作流审批中心.md # 需求文档
├── 开发设计-工作流审批中心.md # 本文档
└── sql/
└── workflow-menu-init.sql # 菜单初始化 SQL
```
### 2.2 菜单结构
```
业务流程 (parent_id=0, id=10001)
├── 我的待办 (parent_id=10001, id=10002) → /workflow/todo
├── 我的已办 (parent_id=10001, id=10003) → /workflow/done
├── 我的申请 (parent_id=10001, id=10004) → /workflow/my
└── 我的流程 (parent_id=10001, id=10005) → /workflow/process
```
---
## 3. 页面设计
### 3.1 我的待办 (todo.vue)
**风格**: Options API + `<avue-crud>`
**核心功能**:
- 列表展示待审批任务
- 筛选：流程类型、紧急程度
- 操作：审批（统一弹窗）、查看
- 右上角 Badge 显示待处理数量
**关键设计决策**:
- 审批/驳回合并为**统一弹窗**，使用单选按钮选择"同意/驳回"
- 原型：两个独立弹窗
- 本实现：合并为一个弹窗，减少用户操作步骤
- 紧急程度列使用自定义 slot + `el-tag` 展示，带颜色区分
- 操作列仅保留"审批"和"查看"，移除独立的"驳回"按钮
- **右上角 Badge 计数从列表接口返回的 `total` 字段获取，不再单独调用 `getTodoCount` 接口**
**弹窗交互**:
```
审批处理弹窗
├── 流程名称（只读）
├── 申请人（只读）
├── 处理结果（单选：同意/驳回）*必填
├── 审批意见/驳回原因（文本域）
│ └── 驳回时必须填写
└── 按钮：取消、确定
```
### 3.2 我的已办 (done.vue)
**核心功能**:
- 列表展示已处理记录
- 筛选：流程类型、处理结果
- 操作：查看、流转
- 右上角 Badge 显示已处理数量
**关键设计决策**:
- "流转"按钮打开**流转时间线弹窗**，使用 `el-timeline` 组件
- 原型：简单的 message 提示
- 本实现：完整的时间线弹窗，展示每一步的审批详情
- 处理结果使用自定义 slot + `el-tag` 展示（已同意=绿色，已驳回=红色）
- **右上角 Badge 计数从列表接口返回的 `total` 字段获取**
**流转弹窗设计**:
```
流程流转详情弹窗
├── 流程名称（标题下方）
└── el-timeline
├── el-timeline-item (type=primary)
│ └── el-card
│ ├── 步骤名称 + 结果标签
│ ├── 处理人 + 时间
│ └── 备注（如有）
├── el-timeline-item (type=success)
│ └── ...
└── ...
```
### 3.3 我的申请 (my.vue)
**核心功能**:
- 列表展示个人发起的申请
- **无搜索条件区域**（searchShow: false）
- 操作：查看、编辑（仅待提交）、删除（仅待提交）
- 发起新流程按钮 + 流程选择弹窗
**关键设计决策**:
- 搜索条件隐藏，保持页面简洁
- 新增"待提交"状态（灰色标签）
- 编辑/删除按钮**条件渲染**：仅当 `status === '待提交'` 时显示
- 删除操作使用 `this.$confirm` 二次确认
**状态标签映射**:
| 状态 | Element Tag type | effect |
|------|-----------------|--------|
| 待提交 | info | plain |
| 审批中 | warning | light |
| 已完成 | success | light |
| 已驳回 | danger | light |
### 3.4 我的流程 (process.vue)
**核心功能**:
- 流程发起中心，展示所有可发起的流程类型
- CSS Grid 卡片网格布局
- 每个卡片包含：彩色图标、流程名称、分类、状态标签
- 点击卡片发起对应流程
**关键设计决策**:
- 使用 CSS Grid (`grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))`) 实现自适应卡片布局
- 卡片顶部使用 CSS 伪元素 `::before` 实现彩色渐变横线
- 图标使用 Element Plus Icons，背景色与横线颜色一致
- 悬停效果：卡片上浮 + 阴影 + 图标放大旋转
- 数据使用静态 mock 数组，后续可替换为 API 接口
**页面布局**:
```
┌────────────────────────────────────────┐
│ 我的流程 共 5 个流程 │
├────────────────────────────────────────┤
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │图标│ │图标│ │图标│ │图标│ │
│ │名称│ │名称│ │名称│ │名称│ │
│ │分类│ │分类│ │分类│ │分类│ │
│ │启用│ │启用│ │启用│ │启用│ │
│ └────┘ └────┘ └────┘ └────┘ │
│ ┌────┐ │
│ │图标│ │
│ │名称│ │
│ │分类│ │
│ │启用│ │
│ └────┘ │
└────────────────────────────────────────┘
```
---
## 4. API 设计
### 4.1 接口清单
| 函数名 | 参数 | 返回值 | 说明 |
|--------|------|--------|------|
| `getTodoList` | current, size, params | Promise<{records, total}> | 待办列表 |
| `getDoneList` | current, size, params | Promise<{records, total}> | 已办列表 |
| `getMyList` | current, size, params | Promise<{records, total}> | 申请列表 |
| `getProcessList` | current, size, params | Promise<{records, total}> | 统一流程列表 |
| `getProcessStats` | - | Promise<{todoCount, doneCount, myCount, pendingCount, draftCount, rejectedCount}> | 统计数据 |
| `getTodoCount` | - | Promise<number> | **待办数量（已弃用，前端不再使用）** |
| `approve` | data | Promise | 审批通过 |
| `reject` | data | Promise | 审批驳回 |
| `getDetail` | id | Promise<record> | 流程详情 |
### 4.2 Mock 数据说明
当前使用 `Promise.resolve(mockData)` 方式模拟 API 响应，便于后续替换为真实接口。
**数据量**:
- 待办：6 条
- 已办：7 条（含流转步骤 trackSteps）
- 申请：6 条（含 2 条待提交）
**trackSteps 结构**:
```javascript
{
stepName: '部门经理审批',
handler: '李主管',
time: '2026-05-10 16:45:00',
result: '已同意',
resultType: 'success',
type: 'success',
remark: '符合部门需求，同意采购'
}
```
---
## 5. 状态管理
### 5.1 组件内部状态
各页面使用 Vue Options API 的 `data()` 管理状态，无需 Vuex/Pinia。
### 5.2 数据流
```
API (mock)
↓
组件 onLoad()
↓
data.records ← 列表数据
page.total ← 总条数
stats ← 统计数据
↓
<avue-crud> 渲染
↓
用户操作 → API 调用 → 刷新列表
```
---
## 6. 样式设计
### 6.1 通用样式
所有页面共享以下通用样式（已提取到各组件的 `<style scoped>`）：
```scss
.workflow-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 10px;
}
.workflow-title {
margin: 0;
font-size: 18px;
font-weight: 500;
}
```
### 6.2 统计卡片样式 (process.vue)
```scss
.stat-card {
display: flex;
align-items: center;
cursor: pointer;
transition: transform 0.2s;
&:hover { transform: translateY(-2px); }
}
.stat-icon {
width: 48px; height: 48px;
border-radius: 8px;
display: flex;
align-items: center; justify-content: center;
margin-right: 12px;
}
// 各卡片颜色...
```
### 6.3 流转弹窗样式 (done.vue)
```scss
.transfer-process-name {
font-size: 16px; font-weight: 500;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #e4e7ed;
}
.step-header { display: flex; justify-content: space-between; }
.step-remark {
padding: 8px; background: #f5f7fa;
border-radius: 4px; margin-top: 6px;
}
```
---
## 7. 与原型差异说明
### 7.1 技术栈差异
| 维度 | 原型 | 本实现 |
|------|------|--------|
| API 风格 | Composition API (`<script setup>`) | Options API |
| 表格组件 | 原生 `el-table` | Avue `<avue-crud>` |
| 样式方案 | 原生 Element Plus | Avue 主题 + 自定义 SCSS |
| 图标 | Element Plus Icons | Element Plus Icons |
### 7.2 功能差异
| 功能 | 原型 | 本实现 | 说明 |
|------|------|--------|------|
| 审批弹窗 | 两个独立弹窗（审批/驳回） | 统一弹窗 + 单选 | 简化操作 |
| 流转查看 | message 提示 | el-timeline 弹窗 | 更直观 |
| 紧急程度 | 有列但数据字段不同 | 自定义 slot + tag | 保持 Saber3 风格 |
| 我的申请搜索 | 无 | 无 | 一致 |
| 编辑/删除 | 有（条件显示） | 有（条件显示） | 一致 |
| 我的流程 | 流程卡片网格（发起中心） | 流程卡片网格（发起中心） | 一致 |
### 7.3 设计决策理由
1. **统一审批弹窗**：减少弹窗数量，用户在一个弹窗内完成同意/驳回选择，操作路径更短
2. **流转时间线**：将原型的 message 提示升级为可视化时间线，审批历史一目了然
3. **Avue CRUD**：复用 Saber3 现有组件体系，保持项目风格一致性
4. **我的流程页面**：流程发起中心，使用卡片网格展示所有可发起的流程，点击即可发起
5. **待提交状态**：支持草稿功能，用户可以先创建流程暂不提交
---
## 8. 构建与部署
### 8.1 本地开发
```bash
pnpm run dev # 启动开发服务器，端口 2888
```
### 8.2 生产构建
```bash
pnpm run build # 开发构建（esbuild）
pnpm run build:prod # 生产构建（terser，去除 console）
```
### 8.3 菜单初始化
执行 `docs/sql/workflow-menu-init.sql` 在数据库中创建菜单和权限。
---
## 9. 待办事项（TODO）
### 9.1 前端待办
- [ ] 接入真实 API 接口（替换 mock 数据）
- [ ] 流程详情页面（查看按钮跳转）
- [ ] 流程发起表单页面（选择流程类型后进入）
- [ ] 编辑功能（待提交状态的表单编辑）
- [ ] 审批意见附件上传
- [ ] 流程图可视化展示
### 9.2 后端待办
- [ ] 设计并创建流程实例表（blade_flow_instance）
- [ ] 设计并创建审批记录表（blade_flow_approval）
- [ ] 集成 Flowable/Activiti 工作流引擎
- [ ] 实现流程定义管理接口
- [ ] 实现审批/驳回/转办等业务接口
- [ ] 实现消息通知（待办提醒）
---
## 10. 附录
### 10.1 Git 提交记录
```
:sparkles: feat(workflow): 新增工作流审批中心模块
- 我的待办、我的已办、我的申请、我的流程四个页面
- 统一审批弹窗、流转时间线、统计卡片等交互
- mock 数据 + API 接口层
```
### 10.2 参考文档
- [Element Plus 官方文档](https://element-plus.org/)
- [Avue 官方文档](https://avuejs.com/)
- [Vue 3 官方文档](https://vuejs.org/)
- [BladeX 官方文档](https://bladex.cn/)
---
**文档结束**
saber3/docs/工作流审批中心/需求分析-工作流审批中心.md
+634
View File
@@ -0,0 +1,634 @@
# 工作流审批中心需求分析文档
**版本**: v1.0
**日期**: 2026-06-11
**作者**: AI 助手
---
## 1. 需求概述
### 1.1 项目背景
为 BladeX/Saber3 企业级微服务平台增加工作流审批中心模块，提供统一的流程任务管理入口，支持用户查看待办事项、已办事项以及个人发起的申请流程。
### 1.2 需求目标
1. 实现**我的待办**页面：展示当前用户需要审批的流程任务
2. 实现**我的已办**页面：展示当前用户已处理的流程记录
3. 实现**我的申请**页面：展示当前用户发起的所有流程申请
4. 实现**我的流程**页面：统一视图，汇总展示与用户相关的所有流程（待办、已办、申请）
5. 提供统一的查询、筛选、操作入口
### 1.3 适用范围
- 企业内部所有需要审批的业务流程
- 包括但不限于：招采计划、招标申请、合同审批、付款申请、商品录入等
---
## 2. 功能需求
### 2.1 模块总览
| 模块 | 页面标题 | 核心功能 | 数据来源 |
|------|---------|---------|---------|
| 我的待办 | 我的待办 | 展示待审批任务，提供审批/驳回/查看操作 | 当前用户为审批人的待处理流程 |
| 我的已办 | 我的已办 | 展示已处理记录，提供查看/流转操作 | 当前用户已审批的流程记录 |
| 我的申请 | 我的申请 | 展示个人发起的申请，提供查看/发起新流程/编辑/删除 | 当前用户发起的所有流程 |
| 我的流程 | 我的流程 | 统一视图，汇总展示所有相关流程，提供统计卡片和统一查询 | 待办+已办+申请的合并去重数据 |
---
### 2.2 我的待办（My Todo）
#### 2.2.1 页面布局
```
┌─────────────────────────────────────────────────────────────────┐
│ 我的待办 待处理 6 项 │
├─────────────────────────────────────────────────────────────────┤
│ 流程类型 [全部 ▼] 紧急程度 [全部 ▼] [查询] [重置] │
├─────────────────────────────────────────────────────────────────┤
│ 流程名称 │ 流程类型 │ 申请人 │ 申请部门 │ 提交时间 │ 当前节点 │ 操作 │
├──────────┼──────────┼────────┼──────────┼──────────┼──────────┼──────┤
│ ... │ ... │ ... │ ... │ ... │ ... │审批 │
│ │ │ │ │ │ │驳回 │
│ │ │ │ │ │ │查看 │
└─────────────────────────────────────────────────────────────────┘
```
#### 2.2.2 页面元素
| 元素 | 类型 | 说明 |
|------|------|------|
| 页面标题 | 文本 | "我的待办" |
| 待处理计数 | Badge | 右上角显示待处理数量，红色背景 |
| 流程类型筛选 | 下拉选择 | 可选值：全部、年度招采计划申请、预招标申请、非经营性商品录入、合同审批流程、付款申请流程等 |
| 紧急程度筛选 | 下拉选择 | 可选值：全部、普通、紧急、特急 |
| 查询按钮 | 按钮 | 蓝色主按钮，触发列表查询 |
| 重置按钮 | 按钮 | 灰色次按钮，清空筛选条件 |
| 数据表格 | 表格 | 展示待办列表 |
#### 2.2.3 表格字段定义
| 字段名 | 数据类型 | 说明 | 示例 |
|--------|---------|------|------|
| 流程名称 | String | 流程实例标题，可包含业务编号 | 年度招采计划-2026年IT设备采购 |
| 流程类型 | String | 流程定义名称 | 年度招采计划申请 |
| 申请人 | String | 流程发起人姓名 | 张明 |
| 申请部门 | String | 发起人所属部门 | 信息技术部 |
| 提交时间 | DateTime | 流程发起时间 | 2026-05-26 09:15:00 |
| 当前节点 | String | 当前审批环节名称 | 部门经理审批 |
| 操作 | Action | 审批、驳回、查看按钮组 | - |
#### 2.2.4 操作说明
| 操作 | 按钮样式 | 功能描述 |
|------|---------|---------|
| 审批 | 蓝色文字链接 | 打开审批弹窗/页面，同意该流程进入下一节点 |
| 驳回 | 橙色文字链接 | 打开驳回弹窗，填写驳回原因后退回上一节点或发起人 |
| 查看 | 灰色文字链接 | 打开流程详情页，查看流程信息和审批历史 |
#### 2.2.5 业务规则
1. **数据权限**：仅展示当前用户作为审批人的待办任务
2. **排序规则**：默认按提交时间降序排列（最新的在前）
3. **分页规则**：每页默认 10 条，支持分页切换
4. **审批逻辑**：
- 点击"审批"后弹出审批确认框（支持填写审批意见）
- 审批通过后流程自动流转至下一审批节点
- 若当前节点为最后节点，流程状态变更为"已完成"
5. **驳回逻辑**：
- 点击"驳回"后弹出驳回原因输入框（必填）
- 驳回后流程退回至指定节点（默认退回至上一节点或发起人）
- 驳回后流程状态变更为"已驳回"
---
### 2.3 我的已办（My Done）
#### 2.3.1 页面布局
```
┌─────────────────────────────────────────────────────────────────────────┐
│ 我的已办 已处理 7 项 │
├─────────────────────────────────────────────────────────────────────────┤
│ 流程类型 [全部 ▼] 处理结果 [全部 ▼] [查询] [重置] │
├─────────────────────────────────────────────────────────────────────────┤
│ 流程名称 │ 流程类型 │ 申请人 │ 申请部门 │ 提交时间 │ 处理时间 │ 处理结果 │ 操作 │
├──────────┼──────────┼────────┼──────────┼──────────┼──────────┼──────────┼──────┤
│ ... │ ... │ ... │ ... │ ... │ ... │已同意 │查看 │
│ │ │ │ │ │ │ │流转 │
└─────────────────────────────────────────────────────────────────────────┘
```
#### 2.3.2 页面元素
| 元素 | 类型 | 说明 |
|------|------|------|
| 页面标题 | 文本 | "我的已办" |
| 已处理计数 | Badge | 右上角显示已处理数量，绿色背景 |
| 流程类型筛选 | 下拉选择 | 同"我的待办" |
| 处理结果筛选 | 下拉选择 | 可选值：全部、已同意、已驳回 |
| 查询按钮 | 按钮 | 蓝色主按钮 |
| 重置按钮 | 按钮 | 灰色次按钮 |
| 数据表格 | 表格 | 展示已办列表 |
#### 2.3.3 表格字段定义
| 字段名 | 数据类型 | 说明 | 示例 |
|--------|---------|------|------|
| 流程名称 | String | 流程实例标题 | 非经营性商品-办公电脑采购 |
| 流程类型 | String | 流程定义名称 | 非经营性商品录入 |
| 申请人 | String | 流程发起人姓名 | 张明 |
| 申请部门 | String | 发起人所属部门 | 信息技术部 |
| 提交时间 | DateTime | 流程发起时间 | 2026-05-10 14:20:00 |
| 处理时间 | DateTime | 当前用户的审批时间 | 2026-05-11 09:30:00 |
| 处理结果 | Tag | 审批结果标签 | 已同意（绿色）/ 已驳回（红色） |
| 操作 | Action | 查看、流转按钮组 | - |
#### 2.3.4 操作说明
| 操作 | 按钮样式 | 功能描述 |
|------|---------|---------|
| 查看 | 蓝色文字链接 | 打开流程详情页，查看完整流程信息和审批历史 |
| 流转 | 灰色文字链接 | 查看流程当前流转状态和后续审批节点 |
#### 2.3.5 业务规则
1. **数据权限**：仅展示当前用户已审批过的流程记录
2. **排序规则**：默认按处理时间降序排列
3. **分页规则**：每页默认 10 条
4. **处理结果展示**：
- "已同意"使用绿色标签展示
- "已驳回"使用红色标签展示
5. **流转查看**：点击"流转"可查看流程当前所处节点和后续审批路径
---
### 2.4 我的申请（My Applications）
#### 2.4.1 页面布局
```
┌─────────────────────────────────────────────────────────────────┐
│ 我的申请 [发起新流程] │
├─────────────────────────────────────────────────────────────────┤
│ （无搜索条件区域） │
├─────────────────────────────────────────────────────────────────┤
│ 流程名称 │ 流程类型 │ 状态 │ 申请人 │ 申请时间 │ 当前节点 │ 操作 │
├──────────┼──────────┼──────┼────────┼──────────┼──────────┼──────┤
│ 年度招采 │ 年度招采 │审批中│ 管理员 │2026-05-15│部门经理 │ 查看 │
│ 计划-IT │ 计划申请 │ │ │ 10:30:00 │ 审批 │ │
├──────────┼──────────┼──────┼────────┼──────────┼──────────┼──────┤
│ 非经营性 │ 非经营性 │已完成│ 管理员 │2026-05-10│ 已完成 │ 查看 │
│ 商品-电脑│ 商品录入 │ │ │ 14:20:00 │ │ │
└─────────────────────────────────────────────────────────────────┘
```
#### 2.4.2 页面元素
| 元素 | 类型 | 说明 |
|------|------|------|
| 页面标题 | 文本 | "我的申请" |
| 发起新流程按钮 | 按钮 | 蓝色主按钮，跳转到流程发起页面 |
| 搜索条件 | 无 | 我的申请页面不展示搜索条件区域 |
| 数据表格 | 表格 | 展示申请列表 |
#### 2.4.3 表格字段定义
| 字段名 | 数据类型 | 说明 | 示例 |
|--------|---------|------|------|
| 流程名称 | String | 流程实例标题 | 年度招采计划-2026年IT设备采购 |
| 流程类型 | String | 流程定义名称 | 年度招采计划申请 |
| 状态 | Tag | 流程当前状态 | 审批中（黄色）/ 已完成（绿色） |
| 申请人 | String | 流程发起人姓名 | 管理员 |
| 申请时间 | DateTime | 流程发起时间 | 2026-05-15 10:30:00 |
| 当前节点 | String | 当前审批环节名称 | 部门经理审批 / 已完成 |
| 操作 | Action | 查看按钮 | - |
#### 2.4.4 操作说明
| 操作 | 按钮样式 | 功能描述 |
|------|---------|---------|
| 发起新流程 | 蓝色按钮 | 跳转到流程选择/发起页面，开始新的流程申请 |
| 查看 | 蓝色文字链接 | 打开流程详情页，查看申请详情和审批进度 |
#### 2.4.5 业务规则
1. **数据权限**：仅展示当前用户发起的流程申请
2. **排序规则**：默认按申请时间降序排列
3. **分页规则**：每页默认 10 条
4. **状态展示**：
- "待提交"使用灰色标签
- "审批中"使用黄色/橙色标签
- "已完成"使用绿色标签
- "已驳回"使用红色标签
5. **编辑/删除**：仅"待提交"状态显示编辑和删除按钮
6. **发起新流程**：
- 点击后进入流程选择页面（展示所有可发起的流程类型）
- 选择流程类型后进入对应的申请表单页面
- 填写表单并提交后，流程进入审批流
---
### 2.5 我的流程（My Process - 流程发起中心）
#### 2.5.1 页面布局
```
┌─────────────────────────────────────────────────────────────────────────┐
│ 我的流程 共 5 个流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐│
│ │ [绿色图标] │ │ [蓝色图标] │ │ [橙色图标] │ │ [灰色图标] ││
│ │ │ │ │ │ │ │ ││
│ │ 非经营性商品 │ │ 年度招采计划 │ │ 预招标申请 │ │ 采购需求发起 ││
│ │ 商品管理 │ │ 招标管理 │ │ 招标管理 │ │ 订单管理 ││
│ │ [启用] │ │ [启用] │ │ [启用] │ │ [启用] ││
│ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘│
│ ┌──────────────┐ │
│ │ [红色图标] │ │
│ │ │ │
│ │ 询比价流程 │ │
│ │ 询比价管理 │ │
│ │ [启用] │ │
│ └──────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
```
#### 2.5.2 页面元素
| 元素 | 类型 | 说明 |
|------|------|------|
| 页面标题 | 文本 | "我的流程" |
| 流程计数 | Tag | 右上角显示流程总数，灰色背景 |
| 流程卡片网格 | Grid | CSS Grid 布局，每行自适应 4-5 个卡片 |
| 流程卡片 | Card | 单个流程的展示卡片 |
#### 2.5.3 卡片内容定义
| 字段名 | 数据类型 | 说明 | 示例 |
|--------|---------|------|------|
| 图标 | Icon | 圆角矩形彩色图标 | Document / OfficeBuilding / ShoppingCart |
| 图标颜色 | String | 图标背景色（CSS 色值） | #67c23a（绿色）、#409eff（蓝色） |
| 顶部横线 | CSS | 卡片顶部彩色渐变横线 | 与图标同色 |
| 流程名称 | String | 流程定义名称 | 非经营性商品录入 |
| 流程分类 | String | 所属业务分类 | 非经营性商品管理 |
| 状态 | Tag | 流程启用状态 | 启用（绿色）/ 停用（灰色） |
| 版本 | String | 流程版本号 | 1.0 |
| 流程编码 | String | 流程唯一编码 | WF2024052001 |
#### 2.5.4 操作说明
| 操作 | 触发方式 | 功能描述 |
|------|---------|---------|
| 发起流程 | 点击卡片 | 打开对应流程的发起表单弹窗/页面 |
#### 2.5.5 业务规则
1. **卡片交互**：
- 鼠标悬停：卡片上浮（translateY(-4px)），边框变色，阴影加深
- 图标悬停：放大 1.1 倍并旋转 5 度
- 点击：打开对应流程的发起表单（当前仅显示提示）
2. **响应式布局**：
- 大屏：每行 4-5 个卡片
- 中屏：每行 3 个卡片
- 小屏：每行 2 个卡片
3. **状态展示**：
- "启用"使用绿色 success 标签
- "停用"使用灰色 info 标签
4. **数据权限**：展示当前用户有权限发起的所有流程类型
5. **流程排序**：按 sort 字段或默认顺序排列
---
## 3. 数据模型
### 3.1 流程实例（Flow Instance）
| 字段名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| id | Long | 是 | 流程实例ID |
| processKey | String | 是 | 流程定义Key |
| processName | String | 是 | 流程名称（如：年度招采计划-2026年IT设备采购） |
| processType | String | 是 | 流程类型（如：年度招采计划申请） |
| applicantId | Long | 是 | 申请人ID |
| applicantName | String | 是 | 申请人姓名 |
| applicantDept | String | 是 | 申请部门 |
| submitTime | DateTime | 是 | 提交时间 |
| status | String | 是 | 流程状态：审批中、已完成、已驳回 |
| currentNode | String | 是 | 当前节点名称 |
| currentAssignee | Long | 否 | 当前审批人ID |
| currentAssigneeName | String | 否 | 当前审批人姓名 |
| emergencyLevel | String | 否 | 紧急程度：普通、紧急、特急 |
| formData | JSON | 否 | 表单数据 |
| createTime | DateTime | 是 | 创建时间 |
| updateTime | DateTime | 是 | 更新时间 |
### 3.2 审批记录（Approval Record）
| 字段名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| id | Long | 是 | 记录ID |
| instanceId | Long | 是 | 流程实例ID |
| taskId | String | 是 | 任务ID |
| nodeName | String | 是 | 审批节点名称 |
| approverId | Long | 是 | 审批人ID |
| approverName | String | 是 | 审批人姓名 |
| action | String | 是 | 操作类型：同意、驳回、转办 |
| comment | String | 否 | 审批意见 |
| handleTime | DateTime | 是 | 处理时间 |
| createTime | DateTime | 是 | 创建时间 |
### 3.3 流转步骤（Track Step）
| 字段名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| stepName | String | 是 | 步骤名称（如：提交申请、部门经理审批） |
| handler | String | 是 | 处理人姓名 |
| time | DateTime | 是 | 处理时间 |
| result | String | 是 | 处理结果（已提交、已同意、已驳回） |
| resultType | String | 是 | 标签类型（primary/success/danger） |
| type | String | 是 | 时间线节点类型（primary/success/danger） |
| remark | String | 否 | 审批备注/意见 |
### 3.4 流程定义（Process Definition）
| 字段名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| id | Long | 是 | 定义ID |
| processKey | String | 是 | 流程Key |
| processName | String | 是 | 流程名称 |
| category | String | 否 | 流程分类 |
| version | Int | 是 | 版本号 |
| status | String | 是 | 状态：启用、停用 |
| formConfig | JSON | 否 | 表单配置 |
| createTime | DateTime | 是 | 创建时间 |
---
## 4. 接口需求
### 4.1 接口清单
| 序号 | 接口地址 | 请求方式 | 功能说明 |
|------|---------|---------|---------|
| 1 | /api/workflow/todo/list | GET | 查询我的待办列表 |
| 2 | /api/workflow/done/list | GET | 查询我的已办列表 |
| 3 | /api/workflow/my/list | GET | 查询我的申请列表 |
| 4 | /api/workflow/todo/count | GET | 查询待办数量 |
| 5 | /api/workflow/done/count | GET | 查询已办数量 |
| 6 | /api/workflow/approve | POST | 审批通过 |
| 7 | /api/workflow/reject | POST | 审批驳回 |
| 8 | /api/workflow/detail/{id} | GET | 查询流程详情 |
| 9 | /api/workflow/process/types | GET | 查询流程类型列表 |
| 10 | /api/workflow/start | POST | 发起新流程 |
| 11 | /api/workflow/process/list | GET | 查询我的流程统一列表 |
| 12 | /api/workflow/process/stats | GET | 查询流程统计数据 |
### 4.2 关键接口详细说明
#### 4.2.1 查询我的待办列表
```
GET /api/workflow/todo/list
```
**请求参数**：
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| current | Int | 否 | 当前页码，默认1 |
| size | Int | 否 | 每页条数，默认10 |
| processType | String | 否 | 流程类型 |
| emergencyLevel | String | 否 | 紧急程度 |
**响应数据**：
```json
{
"code": 200,
"data": {
"records": [
{
"id": 1,
"processName": "年度招采计划-2026年IT设备采购",
"processType": "年度招采计划申请",
"applicantName": "张明",
"applicantDept": "信息技术部",
"submitTime": "2026-05-26 09:15:00",
"currentNode": "部门经理审批",
"emergencyLevel": "普通"
}
],
"total": 6,
"current": 1,
"size": 10
}
}
```
#### 4.2.2 审批通过
```
POST /api/workflow/approve
```
**请求参数**：
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| instanceId | Long | 是 | 流程实例ID |
| taskId | String | 是 | 任务ID |
| comment | String | 否 | 审批意见 |
#### 4.2.3 审批驳回
```
POST /api/workflow/reject
```
**请求参数**：
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| instanceId | Long | 是 | 流程实例ID |
| taskId | String | 是 | 任务ID |
| comment | String | 是 | 驳回原因 |
| rejectTo | String | 否 | 驳回目标：prev（上一节点）/ start（发起人） |
---
## 5. 页面交互设计
### 5.1 交互流程图
```
┌─────────────────────────────────────────────────────────────┐
│ 工作流审批中心 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 我的待办 │ │ 我的已办 │ │ 我的申请 │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 筛选/查询 │ │ 筛选/查询 │ │ 发起新流程 │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 审批/驳回 │ │ 查看/流转 │ │ 填写表单 │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 审批弹窗 │ │ 流程详情页 │ │ 提交申请 │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
### 5.2 关键交互说明
#### 5.2.1 审批操作
1. 用户点击"审批"按钮
2. 弹出审批确认弹窗，包含：
- 流程基本信息展示（名称、类型、申请人）
- 审批意见输入框（可选填）
- "确认"和"取消"按钮
3. 用户填写意见后点击"确认"
4. 系统调用审批接口
5. 审批成功后：
- 关闭弹窗
- 刷新列表
- 显示成功提示（"审批成功"）
- 待办数量自动减1
#### 5.2.2 驳回操作
1. 用户点击"驳回"按钮
2. 弹出驳回原因输入弹窗，包含：
- 流程基本信息展示
- 驳回原因输入框（必填）
- 驳回目标选择（上一节点/发起人）
- "确认"和"取消"按钮
3. 用户填写原因后点击"确认"
4. 系统调用驳回接口
5. 驳回成功后：
- 关闭弹窗
- 刷新列表
- 显示成功提示（"驳回成功"）
- 待办数量自动减1
#### 5.2.3 查看详情
1. 用户点击"查看"按钮
2. 打开流程详情页面/抽屉，展示：
- 流程基本信息（名称、类型、状态、申请人等）
- 表单数据（流程发起时填写的表单内容）
- 审批历史（时间线形式展示各节点的审批记录）
- 当前节点信息
#### 5.2.4 发起新流程
1. 用户点击"发起新流程"按钮
2. 打开流程选择页面/弹窗，展示所有可发起的流程类型
3. 用户选择流程类型后，进入对应的申请表单页面
4. 用户填写表单并提交
5. 提交成功后返回列表页，新申请出现在列表顶部
---
## 6. 非功能性需求
### 6.1 性能需求
| 指标 | 要求 |
|------|------|
| 页面加载时间 | ≤ 2 秒 |
| 列表查询响应时间 | ≤ 1 秒 |
| 审批操作响应时间 | ≤ 500ms |
| 分页切换响应时间 | ≤ 500ms |
### 6.2 兼容性需求
- 支持 Chrome、Firefox、Edge 等主流浏览器最新版本
- 支持 IE11（如需兼容）
### 6.3 安全需求
- 所有接口需进行身份认证（Token验证）
- 用户只能查看和处理自己权限范围内的流程
- 审批和驳回操作需记录操作日志
### 6.4 可用性需求
- 操作按钮需有明确的视觉反馈（hover效果、点击效果）
- 重要操作（审批、驳回）需有二次确认
- 操作成功后需有 toast 提示
- 列表为空时需展示空状态提示
---
## 7. 与现有系统集成
### 7.1 前端集成
基于 Saber3 项目现有架构：
1. **路由配置**：在 `src/router/views/` 或动态路由中添加工作流审批中心路由
2. **页面文件**：
- `src/views/workflow/todo.vue` — 我的待办
- `src/views/workflow/done.vue` — 我的已办
- `src/views/workflow/my.vue` — 我的申请
3. **API 文件**：`src/api/workflow/index.js`
4. **Option 文件**：`src/option/workflow/todo.js`、`done.js`、`my.js`
5. **使用 Avue CRUD 组件**：列表页使用 `<avue-crud>` 组件实现
### 7.2 后端集成
- 对接现有工作流引擎（如 Flowable/Activiti）
- 复用现有用户、部门、权限体系
- 遵循 BladeX 微服务接口规范
---
## 8. 附录
### 8.1 流程类型枚举
| 流程类型 | 说明 |
|---------|------|
| 年度招采计划申请 | 年度采购计划编制与审批 |
| 预招标申请 | 招标前期准备申请 |
| 非经营性商品录入 | 非经营类商品信息录入审批 |
| 合同审批流程 | 采购合同审批 |
| 付款申请流程 | 付款申请审批 |
### 8.2 状态枚举
| 状态 | 说明 | 标签颜色 |
|------|------|---------|
| 待提交 | 流程已创建但未提交 | 灰色 |
| 审批中 | 流程正在审批过程中 | 黄色/橙色 |
| 已完成 | 流程已审批完成 | 绿色 |
| 已驳回 | 流程被驳回 | 红色 |
| 待审批 | 待办任务视角的状态 | 黄色/橙色 |
| 已同意 | 已办任务-审批通过 | 绿色 |
| 已拒绝 | 已办任务-审批拒绝 | 红色 |
### 8.3 处理结果枚举
| 结果 | 说明 | 标签颜色 |
|------|------|---------|
| 已同意 | 审批通过 | 绿色 |
| 已驳回 | 审批未通过 | 红色 |
---
**文档结束**