yongxu-web/src/pages/RoleManagement/index.tsx

import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Form, Input, Space, Table } from 'antd';
import { PlusCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import moment from 'moment';

interface DataType {
  name: string;
  record_id: string;
}

const RoleManagement: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [searchData] = useState({});
  const pagination = useState({});
  const [dataList] = useState([]);
  const onFinish = () => {};
  const onReset = () => {};
  const onAdd = () => {};
  const tableChange = (page: any) => {
    setLoading(true);
    const params = {
      q: 'page',
      current: page.current,
      pageSize: page.pageSize,
      ...searchData,
    };
    console.log(params);
    //   请求接口
  };
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      key: 'index',
      render: (_: any, row: any, index: number) => index + 1,
    },
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
      width: 250,
    },
    {
      title: '排序值',
      dataIndex: 'sequence',
      key: 'sequence',
      width: 250,
    },
    {
      title: '创建者',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (v) => v && <span>{moment(v).format('YYYY-MM-DD HH:mm')}</span>,
    },
    {
      title: '备注',
      dataIndex: 'memo',
      key: 'memo',
      width: 250,
    },
  ];
  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => {
      return <span> 共 {total}条 </span>;
    },
    ...pagination,
  };
  return (
    <PageContainer>
      <div>
        <Card>
          <Form form={form} layout="inline" onFinish={onFinish}>
            <Form.Item name="name" label="角色名称">
              <Input placeholder="请输入角色名称" />
            </Form.Item>
            <Form.Item style={{ marginBottom: '10px' }}>
              <Space>
                <Button type="primary" htmlType="submit">
                  <SearchOutlined />
                  查询
                </Button>
                <Button htmlType="button" onClick={onReset}>
                  <ReloadOutlined />
                  重置
                </Button>
              </Space>
            </Form.Item>
          </Form>
          <Button htmlType="button" type="primary" style={{ margin: '20px 0' }} onClick={onAdd}>
            <PlusCircleOutlined />
            新增角色
          </Button>
          <Table
            columns={columns}
            dataSource={dataList}
            rowKey={(record) => record.record_id}
            pagination={paginationProps}
            loading={loading}
            onChange={tableChange}
          />
        </Card>
      </div>
    </PageContainer>
  );
};
export default RoleManagement;