Antd标准表格模板

import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { SorterResult } from 'antd/es/table/interface';
import { useRef, useState } from 'react';
import { Button, Divider, message, Modal, Spin } from 'antd';
import { FormattedMessage } from 'umi';
import CreateForm from './CreateForm';

const CommandTemplate: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [sorter, setSorter] = useState<string>('');
  const [processing, setProcessing] = useState<boolean>(false);
  const [createFormVisible, setCreateFormVisible] = useState<boolean>(false);

  const handleRemove = async (id: number, actionRef: any) => {
    setProcessing(true);
    try {
      const response: any = { status: 200 };
      if (response && (response.status == 'ok' || response.status == 200)) {
        if (actionRef.current) {
          actionRef.current.reload();
        }
        setProcessing(false);
        message.success('删除成功', 2);
      } else {
        setProcessing(false);
        message.error(response.data.message);
      }
    } catch (error) {
      setProcessing(false);
      message.error('删除失败');
    }
  };

  const columns: ProColumns<any>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      hideInForm: true,
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '名称',
      dataIndex: 'name',
      sorter: true,
    },
    {
      title: '版本',
      dataIndex: 'tversion_id',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a onClick={() => {}}>详情</a>
          <Divider type="vertical" />
          <a onClick={() => {}}>
            <FormattedMessage id="ops.update" />
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              Modal.confirm({
                title: '您是否确认删除',
                cancelText: '取消',
                okText: '确定',
                onOk() {
                  handleRemove(record.id, actionRef);
                },
              });
            }}
          >
            <FormattedMessage id="ops.delete" />
          </a>
        </>
      ),
    },
  ];

  return (
    <Spin spinning={processing} tip="数据处理中，请稍后...">
      <ProTable
        columns={columns}
        actionRef={actionRef}
        // 暂存的模拟测试数据
        dataSource={[
          { id: 1, name: 'John', tversion_id: 'Zdkt-1001' },
          { id: 2, name: 'Tom', tversion_id: 'Zdkt-1002' },
        ]}
        // request={() => }
        // 渲染右上角功能键
        toolBarRender={(action, { selectedRows }) => [
          <>
            <Button
              type="primary"
              onClick={() => {
                setCreateFormVisible(true);
              }}
            >
              <FormattedMessage id="ops.create" />
            </Button>
          </>,
        ]}
        // 行双击事件展示详情
        onRow={(record) => {
          return {
            onDoubleClick: (event) => {},
          };
        }}
        // 控制sorter排序方式
        onChange={(_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<any>;
          if (sorterResult.field) {
            if (sorterResult.field.toString().indexOf(',')) {
              setSorter(
                `${sorterResult.field.toString().replace(',', '__')}_${sorterResult.order}`,
              );
            } else {
              setSorter(`${sorterResult.field}_${sorterResult.order}`);
            }
          }
        }}
        params={{
          sorter,
        }}
      ></ProTable>
      {createFormVisible ? (
        <CreateForm
          values={'数据传过去了'}
          createFormVisible={createFormVisible}
          onCancel={() => {
            setCreateFormVisible(false);
          }}
        />
      ) : null}
    </Spin>
  );
};

export default CommandTemplate;