前言

承接上一篇博客

Ant Design Pro 新增一个表格页面（一）


继续对index.tsx进行修改

请求相关修改

复制过来的index.tsx文件中的请求都是rule的增删查改，将其修改为前文已经写好的接口请求。

import { rule, addRule, updateRule, removeRule } from '@/services/ant-design-pro/api';
import { members, addMember, updateMember, removeMember } from '@/services/ant-design-pro/api';

需要注意的是接口请求需要一些修改，例如修改用户接口：

/** 修改用户 PUT /index.php/api/member/update */
export async function updateMember(params: object, data: object, options?: { [key: string]: any }) {
  return request<API.MemberListItem>('/index.php/api/member/update', {
    method: 'PUT',
    params: {...params},
    data: {...data},
    ...(options || {}),
  });
}

这里我给修改用户的这个请求添加了参数params和data。params是查询参数，附加在url后，data则是post到服务器的数据。options暂时不清楚怎么使用。

例如修改某个用户的用户名以及备注：index.tsx中这样调用：

const handleUpdate = async (fields: FormValueType) => {
  const hide = message.loading('正在配置');
  try {
    await updateMember(
      { id: fields.id },
      {
        name: fields.name,
        remark: fields.remark,
      },
    );
    hide();
    message.success('配置成功');
    return true;
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};

跟踪handleUpdate的调用，可以发现它是在UpdateForm提交事件的回调中被调用，同时参数fields被填充为updateForm提交的数据。

添加用户及删除用户接口也是类似的修改，省略这个过程。

API数据规范修改

原文件中的 API.RuleListItem[] 修改为前文写好的 API.MemberListItem[]

列配置修改

一般列配置

找到列配置代码：

const columns: ProColumns<API.MemberListItem>[] = []

配置一个最简单的列，只需要设置好title和dataIndex即可，dataIndex指定从接口中获取哪项数据。

const columns: ProColumns<API.MemberListItem>[] = [
	{
	     title: '用户名',
	     dataIndex: 'username',
	   },
]

根据业务的需要，展现各个数据。

复杂列配置

举个简单的应用场景例子：

• 后端返回的时间戳以秒为单位，而设置valueType为dateTime默认转换的是以毫秒为单位的时间戳，导致无法使用valueType自动转换。个人简单的处理方案：

{
      title: "时间"
      dataIndex: 'time',
      renderText: (text: number) => {
        return text * 1000;
      },
	valueType: "dateTime",	
}

值得一提的是：先执行renderText，将时间戳 * 1000，valueType会对这个返回值进行转换

更复杂的、自定义的列配置请参考官方文档API：

ProTable的Columns列配置

结语

至此，基本能搭建一个用于展示所有用户的列表页面，但是其实还有许多地方是值得深入研究的

• useState的使用：React的最新特性hooks
• Modal浮层/Drawer抽屉的展现与隐藏控制
• 实现自定义一个操作去请求接口