Ant Design

npx create-react-app my-app --template typescript
yarn add antd
yarn add axios

 <Table columns={columns} dataSource={data.list} rowKey="id" pagination={false} />

render: (value) => {
    return (<>{value?.map((sysRole: any) => <Tag color="blue" key={sysRole.name}>{sysRole.name}</Tag>)}
    </>)
}

import { Space, Table, Button, Form, Input, Pagination, message, Modal, Popconfirm, Tag, Tree } from 'antd';
import type { TreeProps } from 'antd/es/tree';
import React, { useEffect, useState } from 'react';
import { pxRequest } from '../service/userService'
import './Role.css'

const Role: React.FC = () => {
  const [data, setData] = useState<API.PageInfo>({})
  const getList = (values: any) => {
    pxRequest("sys/role/list", values).then(res => {
      if (res.data.success) {
        setData(res.data.object)
      } else {
        message.info(res.data.message)
      }
    }).catch(err => {
      console.log(err)
    })
  }
  useEffect(() => {
    getList({})
  }, [])
  // 获取权限列表
  const [authList, setAuthList] = useState([])
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
  useEffect(() => {
    getRoleList()
  }, [])
  const getRoleList = () => {
    pxRequest("sys/auth/list", {}).then(res => {
      if (res.data.success) {
        setAuthList(res.data.object)
      } else {
        message.info(res.data.message)
      }
    }).catch(err => {
      console.log(err)
    })
  }

  //搜索用的form
  const [form] = Form.useForm();
  const onChange = (pageNum: number, pageSize: number) => {
    let queryForm = { ...form.getFieldsValue() }
    queryForm.pageNum = pageNum
    queryForm.pageSize = pageSize
    getList(queryForm)
  }

  const onFinish = (values: any) => {
    getList(values)
  };

  // 新增及编辑
  const [addForm] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isAdd, setIsAdd] = useState(false);

  const handleOk = () => {
    let api = isAdd ? "sys/role/add" : "sys/role/edit"
    addForm.validateFields().then((res) => {
      pxRequest(api, addForm.getFieldsValue()).then(res => {
        if (res.data.success) {
          setIsModalOpen(false);
          getList({})
          message.info(res.data.message)
        } else {
          message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
      })
    }).catch((err) => {
      console.log(err)
    })
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const showAdd = () => {
    setIsAdd(true)
    addForm.resetFields()
    setCheckedKeys([])
    setIsModalOpen(true);
  }
  //编辑
  const showEdit = (record: any) => {
    setIsAdd(false)
    addForm.resetFields()
    addForm.setFieldsValue(record)
    setCheckedKeys([])
    if (record.sysAuthList !== undefined) {
      let keys = []
      for (let sysAuth of record.sysAuthList) {
        keys.push(sysAuth.id)
      }
      setCheckedKeys(keys)
    }
    setIsModalOpen(true);
  }

  //权限信息
  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
  };

  // @ts-ignore 
  const onCheck: TreeProps['onCheck'] = (checkedKeys: React.Key[], info) => {
    setCheckedKeys(checkedKeys);
    addForm.setFieldValue("sysAuthList", info.checkedNodes);
  };

  //删除角色
  const showDel = (id: any) => {
    console.log(id)
    pxRequest("sys/role/delete/" + id, {}).then(res => {
      if (res.data.success) {
        message.info(res.data.message)
        getList({})
      } else {
        message.error(res.data.message)
      }
    }).catch(err => {
      console.log(err)
    })
  }

  const columns = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '角色备注',
      dataIndex: 'mark',
      key: 'mark',
    },
    {
      title: "权限",
      dataIndex: "sysAuthList",
      key: "sysAuthList",
      render: (value: any) => {
        if (value !== undefined) {
          return (<>{value.map((sysRole: any) => <Tag color="blue" key={sysRole.name}>{sysRole.name}</Tag>)}
          </>)
        }
      }

    },
    {
      title: '新增人员',
      dataIndex: 'createId',
      key: 'createId',
    },
    {
      title: '新增时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '修改人员',
      dataIndex: 'modifyId',
      key: 'modifyId',
    },
    {
      title: '修改时间',
      dataIndex: 'modifyTime',
      key: 'modifyTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button type="link" onClick={() => { showEdit(record) }}>编辑</Button>
          <Popconfirm title={`确定删除 ${record.name} 么？`} onConfirm={() => showDel(record.id)} placement="topRight">
            <Button type='link'>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (<div className='userTable'>
    <Form className='search' form={form} name="horizontal_login" layout="inline" onFinish={onFinish} >
      <Form.Item
        name="sysAuthList"
        label="权限"
        rules={[{ required: false, message: '权限' }]}
        hidden={true}
      >
        <Input placeholder="权限" />
      </Form.Item>
      <Form.Item
        name="name"
        label="角色名称"
        rules={[{ required: false, message: '角色名称' }]}
      >
        <Input placeholder="角色名称" />
      </Form.Item>

      <Form.Item shouldUpdate>
        {() => (
          <Button type="primary" htmlType="submit"  > 查询 </Button>
        )}
      </Form.Item>
      <Form.Item shouldUpdate>
        {() => (
          <Button type="primary" onClick={showAdd}  > 新增 </Button>
        )}
      </Form.Item>
    </Form>
    <Modal
      title={isAdd ? "新增" : "编辑"}
      open={isModalOpen}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Form className='addUser' form={addForm} autoComplete="off" initialValues={{
        status: "0"
      }}
        labelCol={
          { span: 5 }
        }
        wrapperCol={
          { span: 19 }
        }
      > <Form.Item
        name="id"
        rules={[{ required: !isAdd, message: 'id' }]}
        hidden
      >
          <Input />
        </Form.Item>
        <Form.Item
          name="name"
          label="角色名称"
          rules={[{ required: true, message: '角色名称' }]}
        >
          <Input placeholder="角色名称" allowClear={true} />
        </Form.Item>
        <Form.Item
          name="mark"
          label="角色备注"
          rules={[{ required: false, message: '角色备注' }]}
        >
          <Input
            placeholder="角色备注" allowClear={true} />
        </Form.Item>
        <Form.Item
          name="sysAuthList"
          label="拥有权限"
        >
          <Tree
            checkable
            onSelect={onSelect}
            onCheck={onCheck}
            treeData={authList}
            checkedKeys={checkedKeys}
            fieldNames={{ title: "name", key: "id", children: "pSysAuth" }}
            defaultExpandAll={true}
          />
        </Form.Item>
      </Form>
    </Modal>
    <Table columns={columns} dataSource={data.list} rowKey="id" pagination={false} />
    <Pagination onChange={onChange} showTotal={(total) => `共${total}条`} current={data.pageNum} total={data.total} showSizeChanger={true} />
  </div>)
};

export default Role;

<Tree
    checkable
    onSelect={onSelect}
    onCheck={onCheck}
    treeData={authList}
    checkedKeys={checkedKeys}
    fieldNames={{ title: "name", key: "id", children: "pSysAuth" }}
    defaultExpandAll={true}
/>

// 获取权限列表
const [authList, setAuthList] = useState([])
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
const onCheck: TreeProps['onCheck'] = (checkedKeys: React.Key[], info) => {
    setCheckedKeys(checkedKeys);
    addForm.setFieldValue("sysAuthList", info.checkedNodes);
};
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
  };

const handleOk = () => {
    let api = isAdd ? "sys/role/add" : "sys/role/edit"
    addForm.validateFields().then((res) => {
      pxRequest(api, addForm.getFieldsValue()).then(res => {
        if (res.data.success) {
          setIsModalOpen(false);
          getList({})
          message.info(res.data.message)
        } else {
          message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
      })
    }).catch((err) => {
      console.log(err)
    })
  };

import axios from 'axios'

axios.interceptors.request.use(
    (config) => {
        // @ts-ignore 
        config.headers.Authorization = localStorage.getItem("token")
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

declare namespace API {
    interface IUser {
        id: number,
        userId: string,
        userName: string,
        password: string,
        status: string,
        createId: string,
        createTims: Date,
        modifyId: string,
        modifyTime: Date
    }
    interface TableParams {
        pagination?: TablePaginationConfig;
        sortField?: string;
        sortOrder?: string;
        filters?: Record<string, FilterValue>;
    }
    interface PageInfo {
        total?: number,
        pageSize?: number,
        pageNum?: number,
        list?: any[]
    }
}