中后台「表格 + 查询」通用化设计实践

wuwenzen@outlook.com (wuwj) — Tue, 28 Apr 2020 00:00:00 +0000

中后台系统有一个经典页面模样：

上面一块查询条件，下面一张表格，再加一个分页条。

做过几套之后你会发现：字段变了、接口变了、样式改改，本质都差不多。与其每个项目都重写，不如抽象出一套可复用的「查询 + 表格」方案。

这篇文章记录我在中后台项目里总结的一套通用设计思路。

1. 标准「列表页」长什么样？

通常一个「标准列表页」包含：

查询区（Search Form）
- 输入框、下拉、日期区间、状态选择等
- 「查询」、「重置」按钮
操作区（Toolbar）
- 新增、批量操作、导出等
结果表格（Table）
- 列信息、操作列
- 勾选、多选
分页条（Pagination）
- 当前页、总数、页大小

可以抽象成一个数据结构：

interface ListPageConfig {
  searchItems: SearchItem[];
  columns: Column[];
  actions: ActionItem[]; // 顶部操作
  rowActions: ActionItem[]; // 行内操作
}

换句话说：绝大部分差异都可以通过配置表达出来。

2. 查询表单的配置化设计

先从搜索区开始。

2.1 基本配置格式

我习惯用一个数组描述查询项：

const searchItems = [
  {
    prop: 'keyword',
    label: '关键词',
    type: 'input',
    placeholder: '请输入订单号/姓名',
  },
  {
    prop: 'status',
    label: '状态',
    type: 'select',
    options: [
      { label: '全部', value: '' },
      { label: '待处理', value: 'PENDING' },
      { label: '已完成', value: 'DONE' },
    ],
  },
  {
    prop: 'dateRange',
    label: '创建日期',
    type: 'daterange',
  },
];

再写一个通用的 <SearchForm /> 组件去渲染它：

表格组件 on Saiga

中后台「表格 + 查询」通用化设计实践

1. 标准「列表页」长什么样？

2. 查询表单的配置化设计

2.1 基本配置格式