fe_supplier_frontend/src/pages/supplier/admission/admissionManagement/index.tsx

import React, { useState, useEffect } from 'react';
import { Form, Select, Button, Table, Space } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
//查看弹窗
import ViewModal from './components/ViewModal';
//发起审批 弹窗
import ApproveModal from './components/ApproveModal';
//审批记录 弹窗
import RecordModal from './components/RecordModal';
//查看评审结果 弹窗
import ResultModal from './components/ResultModal';
//发起准入 弹窗
import CreateModal from './components/CreateModal';

import { getPage } from './services'

const { Option } = Select;

interface Data {
  id: string;
  deptId: string;
  accessTypeText: string;
  createTime: string;
  approveStatus: string;
}

const AccessManagement: React.FC = () => {
  // 查询
  const [form] = Form.useForm();
  //列表渲染数据
  const [data, setData] = useState([]);
  // 发起准入、查看、发起审批、审批记录、查看评审结果 显示哪个组件状态
  const [modalInfo, setModalInfo] = useState<{ type: string; visible: boolean; record?: any }>({ type: '', visible: false, });
  //列表分页
  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
  //列表加载
  const [loading, setLoading] = useState(false);
  // 列表方法
  const getList = async (values: any = {},pageNo: number = 1, pageSize: number = 10) => {
    setLoading(true);
    try {
      const { code, data } = await getPage({ ...values, pageNo, pageSize });
      if (code === 200) {
        setData(data.records);
        setPagination({ current: pageNo, pageSize, total: data.total });
      }
    } finally {
      setLoading(false);
    }
  };
  //初始化
  useEffect(() => {
    const values = form.getFieldsValue();
    getList(values, 1, 10);
  }, []);
  //开启弹窗
  const openModal = (type: string, record?: any) => {
    setModalInfo({ type, visible: true, record });
  };
  //关闭弹窗
  const closeModal = () => {
    setModalInfo({ type: '', visible: false });
  };
  //列表头部数据
  const columns: ColumnsType<Data> = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (_: any, __: any, index: number) => index + 1,
    },
    { title: '准入工作', dataIndex: 'accessWorkName' },
    { title: '准入单位', dataIndex: 'deptId' },
    { title: '准入部门', dataIndex: 'deptId' },
    { title: '准入方式', dataIndex: 'accessTypeText' },
    { title: '申请时间', dataIndex: 'createTime' },
    { title: '状态', dataIndex: 'approveStatus' },
    {
      title: '操作',
      render: (_: any, record: any) => (
        <Space>
          <a onClick={() => openModal('view', record)}>查看</a>
          <a onClick={() => openModal('approve', record)}>发起审批</a>
          <a onClick={() => openModal('record', record)}>审批记录</a>
          <a onClick={() => openModal('result', record)}>查看评审结果</a>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Form layout="inline" form={form} onFinish={getList}>
        <Form.Item name="accessType" label="准入方式">
          <Select style={{ width: 150 }} placeholder="请选择">
            <Option value="线上">线上</Option>
            <Option value="线下">线下</Option>
          </Select>
        </Form.Item>
        <Form.Item name="deptId" label="准入单位">
          <Select style={{ width: 150 }} placeholder="请选择">
            <Option value="单位A">单位A</Option>
            <Option value="单位B">单位B</Option>
          </Select>
        </Form.Item>
        <Form.Item name="categoryId" label="准入品类">
          <Select style={{ width: 150 }} placeholder="请选择">
            <Option value="品类1">品类1</Option>
            <Option value="品类2">品类2</Option>
          </Select>
        </Form.Item>
        <Form.Item name="approveStatus" label="状态">
          <Select style={{ width: 150 }} placeholder="请选择">
            <Option value="草稿">草稿</Option>
            <Option value="已提交">已提交</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">查询</Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={() => form.resetFields()}>重置</Button>
        </Form.Item>
      </Form>
      <div style={{ marginTop: 16, marginBottom: 16 }}>
        <Button type="primary" onClick={() => openModal('create')}>发起准入</Button>
      </div>
      <Table
        rowKey="key"
        dataSource={data}
        columns={columns}
        loading={loading}
        pagination={pagination}
        onChange={(pagination) => {
          const values = form.getFieldsValue();
          getList(values, pagination.current!, pagination.pageSize!)
        }}
      />
      {/* 弹窗区 */}
      <ViewModal visible={modalInfo.type === 'view' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
      <ApproveModal visible={modalInfo.type === 'approve' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
      <RecordModal visible={modalInfo.type === 'record' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
      <ResultModal visible={modalInfo.type === 'result' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
      <CreateModal visible={modalInfo.type === 'create' && modalInfo.visible} onCancel={closeModal} />
    </>
  );
};

export default AccessManagement;