shihezi-admin/src/pages/Management/List/index.tsx

import React, {Fragment, useRef, useState} from "react";
import { useIntl, FormattedMessage, useAccess, history } from '@umijs/max';
import {getCmsJobList} from "@/services/Management/list";
import { Dropdown, FormInstance, Space, Button, message, Modal } from 'antd';
import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined } from '@ant-design/icons';
import EditManageRow from './edit'
function ManagementList() {
  const access = useAccess();

  const formTableRef = useRef<FormInstance>();
  const actionRef = useRef<ActionType>();

  const [currentRow, setCurrentRow] = useState<API.Management.Manage>()
  const [modalVisible, setModalVisible] = useState<boolean>(false)

  const columns: ProColumns<API.Management.Manage>[] = [
    {
      title: '任务编号',
      dataIndex: 'jobId',
      valueType: 'text',
      hideInSearch: true,
    },
  ]
  return (
    <Fragment>
      <div style={{ width: '100%', float: 'right' }}>
        <ProTable<API.Management.Manage>
          // params 是需要自带的参数
          // 这个参数优先级更高，会覆盖查询表单的参数
          actionRef={actionRef}
          formRef={formTableRef}
          columns={columns}
          request={(params) =>
            getCmsJobList({ ...params } as API.Management.ListParams).then((res) => {
              const result = {
                data: res.rows,
                total: res.total,
                success: true,
              };
              return result;
            })
          }
          toolBarRender={() => [
            <Button
              type="primary"
              key="add"
              hidden={!access.hasPerms('manage:list:add')}
              onClick={async () => {
                setCurrentRow(undefined);
                setModalVisible(true);
              }}
            >
              <PlusOutlined /> 新建
            </Button>,
          ]}
        />
      </div>
      <EditManageRow
        open={modalVisible}
        onSubmit={(values) => {
          console.log(values)
          return Promise.resolve()
        }}
        onCancel={() => {
          setModalVisible(false);
          setCurrentRow(undefined);
        }}
      ></EditManageRow>
    </Fragment>
  )
}
export default ManagementList