自定义hooks快速写一个列表界面usePageList

如何快速的写一个列表界面？

• 归纳功能：搜索，表格，分页，删除，表格列表项操作

• 分点实现：搜索组件+表格组件+分页组件

  1.1 搜索组件

• 组件目录： components/NormalSearch

• 输入： definition/searchItems，配置每一个搜索组件的信息

export const metric = [
  {
    display: 'select',
    placeholder: '全部类型',
    name: 'metricType',
    options: metricTypes.options,
  },
  {
    display: 'timePicker',
    width: 340,
    label: '最新修改时间：',
    name: 'updateTimeStart,updateTimeEnd',
  },
  {
    display: 'input',
    placeholder: '搜索指标名称/创建人',
    name: 'metricName',
  },
];

• 实现：时间输入框，搜索框，input输入框，下拉框、单选框、复选框、 分段器等形态，以及重置和查询功能
• 输出：搜索参数，类型为Record<string, string>, 在主业务只关注这些搜索参数值

{
	"metricType":0,
	"updateTimeStart":"2022-02-27 00:00:00",
	"updateTimeEnd":"2022-03-28 23:59:59",
	"metricName":"分析"
}

1.2 列表数据交互

使用customHooks中的usePageList统一处理
实现功能： 列表数据获取、搜索列表，分页，排序，删除

• colums传参: definition/columns

{
    title: '事件中文名',  // 表头名字
	dataIndex: 'eventName',  // 索引key
	ellipsis: true,			// 是否显示省略号
	width: 200,				// 固定宽度
	sorter: {				// 是否排序，multiple是排序的优先值
		multiple: 1,
	},
}

• hooks传参：

listFnStr： 'source.getDomains' 从services中解析出列表获取函数
addParams： 初始化调用的时候，自定义参数
deleteFnStr：删除列表项的函数
pageSize： 分页参数

• 返回值：

pagination：分页参数
changeSearchParams：搜索值发生改动，搜索操作
tableData： 表格数据
handleTableChange： 排序传值
onNormalDelete: 删除函数
loading： 加载状态

完整的功能使用：