zhaohu/zcui

Fork 0

Charles c8b5b759f8 调整结构&待办任务页面

2026-06-16 16:41:27 +08:00

29 KiB

Raw Permalink Blame History

工作流审批中心需求分析文档

版本: v1.0
日期: 2026-06-11
作者: AI 助手

1. 需求概述

1.1 项目背景

为 BladeX/Saber3 企业级微服务平台增加工作流审批中心模块，提供统一的流程任务管理入口，支持用户查看待办事项、已办事项以及个人发起的申请流程。

1.2 需求目标

实现我的待办页面：展示当前用户需要审批的流程任务
实现我的已办页面：展示当前用户已处理的流程记录
实现我的申请页面：展示当前用户发起的所有流程申请
实现我的流程页面：统一视图，汇总展示与用户相关的所有流程（待办、已办、申请）
提供统一的查询、筛选、操作入口

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 业务规则

数据权限：仅展示当前用户作为审批人的待办任务
排序规则：默认按提交时间降序排列（最新的在前）
分页规则：每页默认 10 条，支持分页切换
审批逻辑：
- 点击"审批"后弹出审批确认框（支持填写审批意见）
- 审批通过后流程自动流转至下一审批节点
- 若当前节点为最后节点，流程状态变更为"已完成"
驳回逻辑：
- 点击"驳回"后弹出驳回原因输入框（必填）
- 驳回后流程退回至指定节点（默认退回至上一节点或发起人）
- 驳回后流程状态变更为"已驳回"

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 业务规则

数据权限：仅展示当前用户已审批过的流程记录
排序规则：默认按处理时间降序排列
分页规则：每页默认 10 条
处理结果展示：
- "已同意"使用绿色标签展示
- "已驳回"使用红色标签展示
流转查看：点击"流转"可查看流程当前所处节点和后续审批路径

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 业务规则

数据权限：仅展示当前用户发起的流程申请
排序规则：默认按申请时间降序排列
分页规则：每页默认 10 条
状态展示：
- "待提交"使用灰色标签
- "审批中"使用黄色/橙色标签
- "已完成"使用绿色标签
- "已驳回"使用红色标签
编辑/删除：仅"待提交"状态显示编辑和删除按钮
发起新流程：
- 点击后进入流程选择页面（展示所有可发起的流程类型）
- 选择流程类型后进入对应的申请表单页面
- 填写表单并提交后，流程进入审批流

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 业务规则

卡片交互：
- 鼠标悬停：卡片上浮（translateY(-4px)），边框变色，阴影加深
- 图标悬停：放大 1.1 倍并旋转 5 度
- 点击：打开对应流程的发起表单（当前仅显示提示）
响应式布局：
- 大屏：每行 4-5 个卡片
- 中屏：每行 3 个卡片
- 小屏：每行 2 个卡片
状态展示：
- "启用"使用绿色 success 标签
- "停用"使用灰色 info 标签
数据权限：展示当前用户有权限发起的所有流程类型
流程排序：按 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	否	紧急程度

响应数据：

{
  "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

5.2.2 驳回操作

用户点击"驳回"按钮
弹出驳回原因输入弹窗，包含：
- 流程基本信息展示
- 驳回原因输入框（必填）
- 驳回目标选择（上一节点/发起人）
- "确认"和"取消"按钮
用户填写原因后点击"确认"
系统调用驳回接口
驳回成功后：
- 关闭弹窗
- 刷新列表
- 显示成功提示（"驳回成功"）
- 待办数量自动减1

5.2.3 查看详情

用户点击"查看"按钮
打开流程详情页面/抽屉，展示：
- 流程基本信息（名称、类型、状态、申请人等）
- 表单数据（流程发起时填写的表单内容）
- 审批历史（时间线形式展示各节点的审批记录）
- 当前节点信息

5.2.4 发起新流程

用户点击"发起新流程"按钮
打开流程选择页面/弹窗，展示所有可发起的流程类型
用户选择流程类型后，进入对应的申请表单页面
用户填写表单并提交
提交成功后返回列表页，新申请出现在列表顶部

6. 非功能性需求

6.1 性能需求

指标	要求
页面加载时间	≤ 2 秒
列表查询响应时间	≤ 1 秒
审批操作响应时间	≤ 500ms
分页切换响应时间	≤ 500ms

6.2 兼容性需求

支持 Chrome、Firefox、Edge 等主流浏览器最新版本
支持 IE11（如需兼容）

6.3 安全需求

所有接口需进行身份认证（Token验证）
用户只能查看和处理自己权限范围内的流程
审批和驳回操作需记录操作日志

6.4 可用性需求

操作按钮需有明确的视觉反馈（hover效果、点击效果）
重要操作（审批、驳回）需有二次确认
操作成功后需有 toast 提示
列表为空时需展示空状态提示

7. 与现有系统集成

7.1 前端集成

基于 Saber3 项目现有架构：

路由配置：在 src/router/views/ 或动态路由中添加工作流审批中心路由
页面文件：
- src/views/workflow/todo.vue — 我的待办
- src/views/workflow/done.vue — 我的已办
- src/views/workflow/my.vue — 我的申请
API 文件：src/api/workflow/index.js
Option 文件：src/option/workflow/todo.js、done.js、my.js
使用 Avue CRUD 组件：列表页使用 <avue-crud> 组件实现

7.2 后端集成

对接现有工作流引擎（如 Flowable/Activiti）
复用现有用户、部门、权限体系
遵循 BladeX 微服务接口规范

8. 附录

8.1 流程类型枚举

流程类型	说明
年度招采计划申请	年度采购计划编制与审批
预招标申请	招标前期准备申请
非经营性商品录入	非经营类商品信息录入审批
合同审批流程	采购合同审批
付款申请流程	付款申请审批

8.2 状态枚举

状态	说明	标签颜色
待提交	流程已创建但未提交	灰色
审批中	流程正在审批过程中	黄色/橙色
已完成	流程已审批完成	绿色
已驳回	流程被驳回	红色
待审批	待办任务视角的状态	黄色/橙色
已同意	已办任务-审批通过	绿色
已拒绝	已办任务-审批拒绝	红色

8.3 处理结果枚举

结果	说明	标签颜色
已同意	审批通过	绿色
已驳回	审批未通过	红色

文档结束

29 KiB Raw Permalink Blame History Unescape Escape

工作流审批中心需求分析文档

1. 需求概述

1.1 项目背景

1.2 需求目标

1.3 适用范围

2. 功能需求

2.1 模块总览

2.2 我的待办（My Todo）

2.2.1 页面布局

2.2.2 页面元素

2.2.3 表格字段定义

2.2.4 操作说明

2.2.5 业务规则

2.3 我的已办（My Done）

2.3.1 页面布局

2.3.2 页面元素

2.3.3 表格字段定义

2.3.4 操作说明

2.3.5 业务规则

2.4 我的申请（My Applications）

2.4.1 页面布局

2.4.2 页面元素

2.4.3 表格字段定义

2.4.4 操作说明

2.4.5 业务规则

2.5 我的流程（My Process - 流程发起中心）

2.5.1 页面布局

2.5.2 页面元素

2.5.3 卡片内容定义

2.5.4 操作说明

2.5.5 业务规则

3. 数据模型

3.1 流程实例（Flow Instance）

3.2 审批记录（Approval Record）

3.3 流转步骤（Track Step）

3.4 流程定义（Process Definition）

4. 接口需求

4.1 接口清单

4.2 关键接口详细说明

4.2.1 查询我的待办列表

4.2.2 审批通过

4.2.3 审批驳回

5. 页面交互设计

5.1 交互流程图

5.2 关键交互说明

5.2.1 审批操作

5.2.2 驳回操作

5.2.3 查看详情

5.2.4 发起新流程

6. 非功能性需求

6.1 性能需求

6.2 兼容性需求

6.3 安全需求

6.4 可用性需求

7. 与现有系统集成

7.1 前端集成

7.2 后端集成

8. 附录

8.1 流程类型枚举

8.2 状态枚举

8.3 处理结果枚举

29 KiB

Raw Permalink Blame History