2.失败任务弹窗
一、整体布局结构
弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 筛选表单区 → 批量操作按钮组 → 数据表格列表区 → 分页控件区 → 弹窗底部操作按钮;无页面全局顶部导航、侧边菜单栏、页面底部信息区。
分组规则:业务模块垂直分隔,筛选条件单行横向排布、表格独立容器承载数据。
二、分区域元素拆解
(一)弹窗顶部标题栏
- 静态标题文本:失败任务
- 右上角图标按钮组
- 全屏/还原图标按钮
- 关闭弹窗图标按钮(×)
(二)弹窗筛选表单区(单行横向排布筛选控件)
- 单行文本输入框:查询项(占位:输入查询项)
- 下拉选择控件:查询类型(占位:请选择)
- 单行文本输入框:失败原因(占位:输入失败原因)
- 单行文本输入框:提交单位(占位:输入提交单位)
- 日期区间选择组件:失败时间(开始时间输入框、分隔符「-」、结束时间输入框)
- 日期区间选择组件:提交时间(开始时间输入框、分隔符「-」、结束时间输入框)
- 操作按钮(表单右侧)
- 主查询按钮:查询
- 次重置按钮:重置
(三)批量操作按钮组(筛选区下方左侧)
- 批量主按钮:批量重提
- 批量主按钮:批量停止
(四)数据表格列表区
- 表头全选复选框(表格最左侧)
- 表头列:序号、查询项、查询系统、失败原因、失败时间、查询名称、提交人、提交单位、提交时间、操作
- 数据行(共3条)
- 每行首列单行复选框
- 单元格展示内容:查询号码、系统名称、失败报错文本、数字标识、查询名称、账号、单位、时间文本
- 行内文字操作按钮:重新提交、停止查询
(五)分页控件(表格右下角)
- 数据总量文本:共3条
- 每页条数下拉选择框:10条/页
- 翻页控件:上一页箭头、页码数字按钮1、下一页箭头
- 页码跳转输入框、前往文字按钮
(六)弹窗底部操作按钮
居中次按钮:关闭
(七)无交互元素
页面半透明重复水印文本
三、元素类型分类汇总清单
1. 表单类输入控件
单行文本输入框
查询项、失败原因、提交单位、失败时间开始/结束、提交时间开始/结束、分页页码跳转输入框
选择类控件
- 下拉选择控件:查询类型下拉、分页每页条数下拉
- 复选框控件:表头全选复选框、每行数据单选复选框
缺失表单元素
无单选按钮组、多行文本域、文件上传控件、图片上传控件、单选标签切换组
2. 按钮类元素
弹窗控制图标按钮
弹窗全屏按钮、弹窗关闭×按钮
筛选操作按钮
查询(主按钮)、重置(次按钮)
批量操作按钮
批量重提、批量停止
表格行操作按钮
重新提交、停止查询(每行文字按钮)
分页按钮
上一页、下一页、前往
弹窗底部按钮
关闭(次按钮)
3. 表格/列表类组件
完整数据表格:表头10列、3条业务数据行、行复选框、表头全选复选框;全套分页控件(总量统计、每页条数下拉、翻页箭头、页码跳转)
4. 静态文本展示元素
弹窗标题「失败任务」、输入框占位文案、表格单元格业务文本、分页总量说明文字、水印背景文本
5. 缺失组件说明
无顶部导航、侧边树形菜单、页面标签、统计卡片、图片预览、新增/编辑/删除全局按钮、附件上传区域、页面底部状态栏信息区