盘古低代码审批页
PC审批页按照字段、操作的属性差异，可划分为「操作栏、基本信息、审批内容、审批操作」4个区块，并通过「锚点」进行核心区域的快速定位。
区块的划分更多针对的是字段、操作的范围，而非展现的样式，目的是便于用户快速找到自己需要的界面元素。
基本信息
流程名称、状态、发起人等与审批业务内容无关的基本信息建议放在内容区域最上方，包括但不限于如下字段，其中「必须」列勾选的字段必须展示：
| 字段 | 描述 | 必须 |
|---|---|---|
| 流程名称 | 该条流程的名称标题，可能是系统根据一定格式拼接或用户手动录入 | ✓ |
| 编码 | 该条流程的编码，展示给用户主要是方便问题的排查和唯一值确定，可选 | |
| 当前状态 | 展示该条流程当前所处的流程状态，如「进行中、已结束」等，未发起的流程不需要展示 | ✓ |
| 发起人 | 当前流程发起人姓名及账号，账号一般为LDAP编码？ | ✓ |
| 发起人部门 | 当前流程发起人所在公司及部门 | ✓ |
| 发起时间 | 发起时间应为当前流程发起人提交流程的时间 | |
| 流程负责人 | 流程负责人是指当前流程的管理员，可以对流程的相关问题进行解答，这里并非指的业务主人 |
审批内容
审批内容主要展示需要审核的业务信息，不同业务场景的审批内容在信息格式、信息量、信息层级等方面存在较大差异，因此不做细节性要求，但是需要满足「直截了当、层次分明、化繁为简」的设计原则，并关注以下问题：
布局方式
根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载审批内容。
区隔方式
根据各个信息之间的相关性，判断各个信息区块间的亲密度。通常情况下，相关性强的内容尽量靠近，相关性弱的内容尽量拉开层次。
- 分割线：将相关内容分开
- 卡片：放置一个内容主题，可能是单据明细、费用明细等
- 页签：审批内容信息最顶层的组织方式，如按阶段组织、按类型组织、按意图组织，通常情况下不建议使用，建议仅在大数据量场景中使用
内容组件
不同业务场景有着不同的信息类型和复杂度，需要选择「描述列表、内嵌卡片、折叠面板」等方式进行信息的呈现。
| 组件名称 | 图例 |
|---|---|
| 描述列表 |  |
| 内嵌卡片 |  |
| 折叠面板 |  |
审批操作
审批操作区域是审批页中最核心、交互最多的区块。根据 雅各布定律 对于一致性的要求，本文在KOA系统的审批页交互基础上确定了本区块的内容。
本区块要求至少包含「流程处理、流程图」2 部分内容，通过Tab页签切换显示，默认开启「流程处理」。
1. 流程处理
当前节点处理人根据实际情况进行通过、转办、驳回等操作，以保证流程继续运转。同时为了辅助审批决策，可以增加管理办法、流程负责人、流程说明、审批记录等信息，下表仅描述必须展示的内容。
a) 审批记录
展示当前节点之前的所有操作记录（包含审批、沟通、转办等），需要展示的字段至少需要包括「操作时间、节点名称、操作人、操作、处理意见」。
b) 以发起人身份操作
催办、撤回、废弃是流程发起人独有的操作，为了规避发起人同样也是当前审批人时，多重操作角色可能导致的决策失误，发起人的操作需要通过单独的按钮触发，在对话框中进行操作。
c) 审批操作
当前节点处理人根据实际情况对当前流程进行处理，必须包括「审批操作、处理意见、附件、提交按钮」4部分内容，通知紧急程度、抄送选项、当前处理人、已经处理人、@相关人等其他内容可根据需要补充。
- 审批操作——使用 Radio 单选框组件进行选择，允许不同技术栈在组件样式上存在差异，但是需要遵循主题色规范；
- 处理意见——使用 Textarea 多行输入框组件进行录入，允许用户拖拽调整输入框高度或根据录入内容自适应高度；
- 附件——允许处理人上传需要补充的文件，必须支持多文件上传和删除，建议支持附件拖动排序和附件重命名；
- 提交按钮——位于审批操作区右侧，需要保证按钮在视觉上的高权重；
- @相关人（非必须）——允许节点处理人将处理意见同步通知指定人，相关人以「@相关人姓名」格式体现在「处理意见」中，在处理人提交后，以待办通知方式告知相关人。建议VIP流程添加此功能。
下表列出了各角色在不同状态下常用的审批操作按钮（按表中顺序从左至右排列），暂不允许增加其他审批操作：
| 角色 | 审批状态 | 审批状态 | 沟通状态 | 沟通状态 |
|---|---|---|---|---|
| 所处状态 | 当前审批中 | 当前会签中 | 沟通发起人 | 被沟通人 |
| 通过 | ✓ | |||
| 同意 | ✓ | |||
| 回复沟通 | ✓ | |||
| 转办 | ✓ | 〇 | ||
| 沟通 | ✓ | 〇 | ✓ | ✓ |
| 取消沟通 | ✓ | |||
| 不同意 | ✓ | |||
| 驳回 | ✓ | 〇 | ||
| 不通过 | 〇 | |||
| 加签 | 〇 |
图例：“✓”为必须操作，“〇”为可选操作，空格为无需在此情况下提供该操作
2. 流程图
展示当前流程全貌，帮助用户将一个复杂的流程系统分解成多个子系统和模块，并展示它们之间的关系和交互。流程图需支持支持流程仿真能力，预测当前情况下的后续流转路径。
3. 流程状态（非必须）
当前流程的进程状态，包含流程处理状态概览及明细：
- 概览——包含总人次、未查看、已查看、未提交、已提交、总催办次数
- 明细——包含节点名称、操作人、接收时间、操作时间、操作状态、操作
4. 流程表格（非必须）
对全流程的节点设置及流转方式进行呈现，包含：节点、节点名称、默认处理人、流转方式、流向、节点状态。
5. 流程日志（非必须）
显示各个节点负责人的处理情况，包括开始时间、操作时间、节点名称、操作人、操作、下一环节通知方式、耗时、意见。
6. 传阅记录（非必须）
展示当前流程的传阅情况，方便了解流程的全部相关人，包括传阅时间、传阅发起人、传阅对象等。
操作栏
操作栏建议固定在页面顶部，方便用户进行快速操作，各系统需要遵循如下要求进行设计和开发。
根据角色权限的不同，操作栏的按钮有所差异，下表列出了各角色在流程的不同状态下常用的操作按钮（按表中顺序从左至右排列），其他按钮可根据实际需要进行补充：
| 角色 | 发起人 | 发起人 | 发起人 | 审批人 | 审批人 | 审批人 | 审批人 | 被沟通人 | 被沟通人 | 被传阅人 | 被抄送人 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 所处状态 | 草稿 | 后续审批中 | 结束 | 当前审批中 | 当前沟通中 | 后续审批中 | 结束 | 沟通中 | 已结束沟通 | ||
| 提交 | ✓ | ||||||||||
| 暂存 | ✓ | 〇 | 〇 | 〇 | |||||||
| 撤回 | ✓ | ✓ | |||||||||
| 传阅 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| 催办 | 〇 | 〇 | |||||||||
| 废弃 | 〇 | ||||||||||
| 打印 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | |
| 刷新 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| 退出 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
图例：“✓”为必须操作，“〇”为可选操作，空格为无需在此情况下提供该操作，此处的「提交」仅指发起人提交流程的操作
快速审批锚点
为了方便审批页各区块的快速定位跳转，避免因页面过长导致的操作困难，要求各系统在审批页中增加“快速审批”锚点，锚点要求固定放置在审批页主体内容区域的左侧，点击锚点区域可快速滚动到 审批操作 区块，为审批人提供便利。
