Spring WebFlux + React搭建后台管理系统（5）: antd pro v5 ProTable使用

本篇配合antdpro的 ProTable实现简单的CRUD操作：

更改了ProTable获取数据
改写UpdateForm内容，实现新增用户
更改用户信息
删除用户信息
修改删除需要admin权限处理

效果图

在这里插入图片描述

1. 设置自己的tableItem

跟据自己的数据编写Table使用的tableItem类：

export interface UserDetails {
  key: number;
  username: string;
  avatar: string;
  createBy: string;
  createTime: Date;
  email: string;
  frozen: number;
  id: number;
  lastUpdateBy: string;
  lastUpdateTime: Date;
  mobile: string;
  password: string;
  roles: Array<string>;
}

2. 编写columns

hideInForm，type="form"时不显示，使用新增的使用用到
renderText：通过函数设置样式
valueEnum：用来设置枚举分类
option时，render的第二个元素为row内容

const columns: ProColumns<UserDetails>[] = [
  {
    title: '头像',
    dataIndex: 'avatar',
    hideInForm: true,
    valueType: 'avatar',
  },
  {
    title: '用户名',
    dataIndex: 'username',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    valueType: 'textarea',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '权限',
    dataIndex: 'roles',
    renderText: (roles: Array<string>) => (
      <>
        {
          roles.map(role=>(
            <Tag color="green">
              {role}
            </Tag>
          ))
        }
      </>
    ),
  },
  {
    title: '是否停用',
    dataIndex: 'frozen',
    hideInForm: true,
    valueEnum: {
      0: { text: '正常', status: 'Success' },
      1: { text: '停用', status: 'Error' },
    },
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    hideInForm: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    sorter: true,
    valueType: 'dateTime',
    hideInForm: true,
  },
  {
    title: '最近修改人',
    dataIndex: 'lastUpdateBy',
    hideInForm: true,
  },
  {
    title: '创建时间',
    dataIndex: 'lastUpdateTime',
    sorter: true,
    valueType: 'dateTime',
    hideInForm: true,
  },
  {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    render: (_, record) => (
      <>
        <a
          onClick={() => {
            handleUpdateModalVisible(true);
            setStepFormValues(record);
          }}
        >
          修改
        </a>
      </>
    ),
  },
];

3. 处理api逻辑

访问需要携带token，这里两个坑：

访问的时候需要先发送option请求，我自己写的filter需要放行option类请求
header里token赋值'Authorization': Bearer ${localStorage.getItem('token')}这样写，token后面会多出)}，不知道为什么，只能弄好token，然后'Authorization': token,这样写

配合后端编写的api配置crud的服务：

export async function findAll() {
  const token = `Bearer ${localStorage.getItem('token')}`;
  return request('http://localhost:8080/api/user/all', {
    method: 'get',
    headers:{
      Accept: 'application/json',
      'Authorization': token,
    }
  })
    .then((response) => {
      const data = response.data.map((v:UserDetails) => {
        return {...v, key:v.id};
      });
      return {data};
    }).catch((error) => {
      console.log(error);
    });
}