审批页

审批页按照字段、操作的属性差异，可划分为「操作栏、基本信息、审批内容、审批操作」4个区块，并通过「锚点」进行各区域的快速定位。

区块的划分更多针对的是字段、操作的范围，而非展现的样式，目的是便于用户快速找到自己需要的界面元素。

基本信息

描述该条流程的基本信息需要放在内容最上方，包括但不限于如下字段，其中「必须」列勾选的字段必须展示：

字段	描述	必须
流程名称	该条流程的名称标题，可能是系统根据一定格式拼接或用户手动录入	✓
编码	该条流程的编码，展示给用户主要是方便问题的排查和唯一值确定，可选
当前状态	展示该条流程当前所处的流程状态，如「进行中、已结束」等，未发起的流程不需要展示	✓
发起人	当前流程发起人姓名及账号，账号一般为LDAP编码？	✓
发起人部门	当前流程发起人所在公司及部门	✓
发起时间	发起时间应为当前流程发起人提交流程的时间
流程负责人	流程负责人是指当前流程的管理员，可以对流程的相关问题进行解答，这里并非指的业务主人

审批内容

审批内容主要展示需要审核的业务信息，不同业务场景的审批内容在信息格式、信息量、信息层级等方面存在较大差异，因此不做细节性要求，但是需要满足「直截了当、层次分明、化繁为简」的设计原则，并关注以下问题：

布局方式

根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载审批内容。

区隔方式

根据各个信息之间的相关性，判断各个信息区块间的亲密度。通常情况下，相关性强的内容尽量靠近，相关性弱的内容尽量拉开层次。

• 分割线：将相关内容分开
• 卡片：放置一个内容主题，可能是单据明细、费用明细等
• 页签：审批内容信息最顶层的组织方式，如按阶段组织、按类型组织、按意图组织，通常情况下不建议使用，建议仅在大数据量场景中使用

内容组件

不同业务场景有着不同的信息类型和复杂度，需要选择「描述列表、内嵌卡片、折叠面板」等方式进行信息的呈现。

组件名称	图例
描述列表
内嵌卡片
折叠面板

审批操作

审批操作区域是审批页中最核心、交互最多的区块。根据 雅各布定律 对于一致性的要求，本文在KOA系统的审批页交互基础上确定了本区块的内容。

本区块要求至少包含「流程处理、流程图」2 部分内容，通过Tab页签切换显示，默认开启「流程处理」。

1. 流程处理

当前节点处理人根据实际情况进行通过、转办、驳回等操作，以保证流程继续运转。同时为了辅助审批决策，可以增加管理办法、流程负责人、流程说明、审批记录等信息，下表仅描述必须展示的内容。

流程负责人

展示可对当前流程进行解答和问题解决的负责人，值得注意的是这里并不是指的流程主人，除非流程负责人与流程主人为同一人。

审批记录

展示当前节点之前的所有操作记录（包含审批、沟通、转办等），需要展示的字段必须包括操作时间、节点名称、操作人、操作、处理意见。

审批操作

当前节点处理人根据实际情况对当前流程进行处理，必须包括「审批操作、处理意见、附件、提交按钮」4部分内容，通知紧急程度、抄送选项、当前处理人、已经处理人、@相关人等其他内容可根据需要补充。

• 审批操作——使用Radio单选框组件进行选择，允许不同技术栈在组件样式上存在差异，但是需要遵循主题色规范；
• 处理意见——使用Textarea多行输入框组件进行录入，允许用户拖拽调整输入框高度；
• 附件——允许处理人上传需要补充的文件，必须支持多文件上传和删除，建议支持附件拖动排序和附件重命名；
• 提交按钮——位于处理意见右侧，需要保证按钮的尺寸与处理意见多行输入框的初始高度保持一致；
• @相关人（非必须）——允许节点处理人将处理意见同步通知指定人，相关人以「@相关人姓名」格式体现在「处理意见」中，在处理人提交后，以待办通知方式告知相关人。建议VIP流程添加此功能。

下表列出了各角色在不同状态下常用的审批操作按钮（按表中顺序从左至右排列），暂不允许增加其他审批操作：

角色	审批人	审批人	审批人	被沟通人
所处状态	当前审批中	当前审批中(会签)	当前沟通中	沟通中
通过	✓
同意		✓
不同意		✓
转办	✓	〇
沟通	✓	〇	✓	✓
回复沟通				✓
取消沟通			✓
加签	〇
驳回	✓	〇

图例：“✓”为必须操作，“〇”为可选操作，空格为无需在此情况下提供该操作

2. 流程图

展示当前流程全貌，帮助用户将一个复杂的流程系统分解成多个子系统和模块，并展示它们之间的关系和交互。

3. 流程状态（非必须）

当前流程的进程状态，包含流程处理状态概览及明细：

• 概览——包含总人次、未查看、已查看、未提交、已提交、总催办次数
• 明细——包含节点名称、操作人、接收时间、操作时间、操作状态、操作

4. 流程表格（非必须）

对全流程的节点设置及流转方式进行呈现，包含：节点、节点名称、默认处理人、流转方式、流向、节点状态。

5. 流程日志（非必须）

显示各个节点负责人的处理情况，包括开始时间、操作时间、节点名称、操作人、操作、下一环节通知方式、耗时、意见。

操作栏

操作栏固定在页面顶部，方便用户进行快速操作，各系统需要遵循如下要求进行设计和开发。

根据角色权限的不同，操作栏的按钮有所差异，下表列出了各角色在流程的不同状态下常用的操作按钮（按表中顺序从左至右排列），其他按钮可根据实际需要进行补充：

角色	发起人	发起人	发起人	审批人	审批人	审批人	审批人	被沟通人	被沟通人	被传阅人	被抄送人
所处状态	草稿	后续审批中	结束	当前审批中	当前沟通中	后续审批中	结束	沟通中	已结束沟通
提交	✓
暂存	✓			〇	〇			〇
撤回		✓				✓
传阅		✓	✓	✓	✓	✓	✓	✓	✓	✓	✓
催办		〇				〇
废弃		〇
打印		〇	〇	〇	〇	〇	〇	〇	〇	〇	〇
刷新	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇
退出	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇	〇

图例：“✓”为必须操作，“〇”为可选操作，空格为无需在此情况下提供该操作，此处的「提交」仅指发起人提交流程的操作

快速审批锚点

为了方便审批页各区块的快速定位跳转，避免因页面过长导致的操作困难，要求各系统在审批页中增加“快速审批”锚点，锚点要求固定放置在审批页主体内容区域的左侧，点击锚点区域可快速滚动到 审批操作 区块，为审批人提供便利。

页面跳转

审批页在完成提交、审批处理等操作后，需要以轻提示（message 或模态对话框）的方式告知用户操作结果，并在告知用户结果不少于 2 秒后跳转至合适的列表页或关闭当前页面。