2.失败任务弹窗

text
2026年7月17日1 min read108 words

Updated 2026年7月17日

一、整体布局结构

弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 筛选表单区 → 批量操作按钮组 → 数据表格列表区 → 分页控件区 → 弹窗底部操作按钮;无页面全局顶部导航、侧边菜单栏、页面底部信息区。
分组规则:业务模块垂直分隔,筛选条件单行横向排布、表格独立容器承载数据。

二、分区域元素拆解

(一)弹窗顶部标题栏

  1. 静态标题文本:失败任务
  2. 右上角图标按钮组
    • 全屏/还原图标按钮
    • 关闭弹窗图标按钮(×)

(二)弹窗筛选表单区(单行横向排布筛选控件)

  1. 单行文本输入框:查询项(占位:输入查询项)
  2. 下拉选择控件:查询类型(占位:请选择)
  3. 单行文本输入框:失败原因(占位:输入失败原因)
  4. 单行文本输入框:提交单位(占位:输入提交单位)
  5. 日期区间选择组件:失败时间(开始时间输入框、分隔符「-」、结束时间输入框)
  6. 日期区间选择组件:提交时间(开始时间输入框、分隔符「-」、结束时间输入框)
  7. 操作按钮(表单右侧)
    • 主查询按钮:查询
    • 次重置按钮:重置

(三)批量操作按钮组(筛选区下方左侧)

  1. 批量主按钮:批量重提
  2. 批量主按钮:批量停止

(四)数据表格列表区

  1. 表头全选复选框(表格最左侧)
  2. 表头列:序号、查询项、查询系统、失败原因、失败时间、查询名称、提交人、提交单位、提交时间、操作
  3. 数据行(共3条)
    • 每行首列单行复选框
    • 单元格展示内容:查询号码、系统名称、失败报错文本、数字标识、查询名称、账号、单位、时间文本
    • 行内文字操作按钮:重新提交、停止查询

(五)分页控件(表格右下角)

  1. 数据总量文本:共3条
  2. 每页条数下拉选择框:10条/页
  3. 翻页控件:上一页箭头、页码数字按钮1、下一页箭头
  4. 页码跳转输入框、前往文字按钮

(六)弹窗底部操作按钮

居中次按钮:关闭

(七)无交互元素

页面半透明重复水印文本

三、元素类型分类汇总清单

1. 表单类输入控件

单行文本输入框

查询项、失败原因、提交单位、失败时间开始/结束、提交时间开始/结束、分页页码跳转输入框

选择类控件

  1. 下拉选择控件:查询类型下拉、分页每页条数下拉
  2. 复选框控件:表头全选复选框、每行数据单选复选框

缺失表单元素

无单选按钮组、多行文本域、文件上传控件、图片上传控件、单选标签切换组

2. 按钮类元素

弹窗控制图标按钮

弹窗全屏按钮、弹窗关闭×按钮

筛选操作按钮

查询(主按钮)、重置(次按钮)

批量操作按钮

批量重提、批量停止

表格行操作按钮

重新提交、停止查询(每行文字按钮)

分页按钮

上一页、下一页、前往

弹窗底部按钮

关闭(次按钮)

3. 表格/列表类组件

完整数据表格:表头10列、3条业务数据行、行复选框、表头全选复选框;全套分页控件(总量统计、每页条数下拉、翻页箭头、页码跳转)

4. 静态文本展示元素

弹窗标题「失败任务」、输入框占位文案、表格单元格业务文本、分页总量说明文字、水印背景文本

5. 缺失组件说明

无顶部导航、侧边树形菜单、页面标签、统计卡片、图片预览、新增/编辑/删除全局按钮、附件上传区域、页面底部状态栏信息区