635 lines
29 KiB
Markdown
635 lines
29 KiB
Markdown
# 工作流审批中心需求分析文档
|
||
|
||
**版本**: 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 处理结果枚举
|
||
|
||
| 结果 | 说明 | 标签颜色 |
|
||
|------|------|---------|
|
||
| 已同意 | 审批通过 | 绿色 |
|
||
| 已驳回 | 审批未通过 | 红色 |
|
||
|
||
---
|
||
|
||
**文档结束**
|