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

import React, { useState, useEffect } from 'react';
import { Form, Select, Button, Table, Space, Modal, message } from 'antd';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
//查看弹窗
import ViewModal from './components/ViewModal';
//查看评审结果 弹窗
import ResultModal from './components/ResultModal';
//发起准入 弹窗
import CreateModal from './components/CreateModal';
import CategorySelector from '@/components/CategorySelector';
//接口
import { getPage, startApprove } from './services'
//统一列表分页
import tableProps from '@/utils/tableProps'

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 values = form.getFieldsValue();
    getList(values, 1, 10);
  };
  // 重置
  const handleReset = () => {
    form.resetFields()
    const values = form.getFieldsValue();
    getList(values, 1, 10);
  };

  const handleApproval = (id: string) => {
    Modal.confirm({
      title: '是否确认发起审批？',
      onOk: async () => {
        const res = await startApprove({ id });
        if (res.code === 200) {
          message.success('发起审批成功');
          const values = form.getFieldsValue();
          getList(values, 1, 10);
        }
      },
    });
  };
  //列表头部数据
  const columns: ColumnsType<Data> = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 80,
      render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
    },
    { title: '准入工作', ellipsis: true, width: 120, dataIndex: 'accessWorkName' },
    { title: '准入单位', ellipsis: true, width: 120, dataIndex: 'deptId' },
    { title: '准入部门', ellipsis: true, width: 120, dataIndex: 'deptId' },
    { title: '准入方式', ellipsis: true, width: 120, dataIndex: 'accessTypeText' },
    { title: '申请时间', ellipsis: true, width: 180, dataIndex: 'createTime' },
    { title: '状态', dataIndex: 'reviewStatusText', width: 80, },
    {
      title: '操作',
      width: 200,
      fixed: 'right',
      render: (_: any, record: any) => (
        <Space>
          <a onClick={() => openModal('view', record)}>查看</a>
          {((record.reviewStatus === '3' && record.accessType === 'online') && !record.approveStatusText) && (
            <a onClick={() => handleApproval(record.id)}>
              发起审批
            </a>
          )}
          {(record.reviewStatus === '3' && record.accessType === 'online') && (
            <>
              <a onClick={() => openModal('result', record)}>评审结果</a>
            </>
          )}

        </Space>
      ),
    },
  ];

  return (
    <>
      <div className="common-container">
        <div className="filter-action-row">
          <Form layout="inline" form={form} className="filter-form" onFinish={getList}>
            <Form.Item name="accessType" label="准入方式">
              <Select style={{ width: 150 }} placeholder="请选择准入方式" allowClear >
                <Option value="online">线上准入</Option>
                <Option value="offline">线下准入</Option>
                <Option value="scattered">零星采购/应急采购/个人供应商</Option>
              </Select>
            </Form.Item>
            <Form.Item name="deptId" label="准入单位">
              <Select style={{ width: 150 }} placeholder="请选择" allowClear>
              </Select>
            </Form.Item>
            <Form.Item name="categoryId" label="准入品类">
              <CategorySelector multiple={false} style={{ width: 150 }} />
            </Form.Item>
            <Form.Item name="approveStatus" label="状态">
              <Select style={{ width: 150 }} placeholder="请选择状态" allowClear>
                <Option value="0">未开始</Option>
                <Option value="1">进行中</Option>
                <Option value="2">结果汇总中</Option>
                <Option value="3">已完成</Option>
              </Select>
            </Form.Item>

            <Form.Item>
              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} >
                搜索
              </Button>
            </Form.Item>
            <Form.Item>
              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
            </Form.Item>

            <Form.Item style={{ marginLeft: 'auto' }}>
              <Button className="buttonFunctionBlock" type="primary" onClick={() => openModal('create')} >
                发起准入
              </Button>
            </Form.Item>
          </Form>

        </div>
        <Table
          rowKey="key"
          dataSource={data}
          columns={columns}
          loading={loading}
          pagination={{...tableProps.pagination, total: pagination.total }}
          onChange={(pagination) => {
            const values = form.getFieldsValue();
            getList(values, pagination.current!, pagination.pageSize!)
          }}
          style={{ flex: 1, minHeight: 0 }}
          scroll={{ y: 'calc(100vh - 350px)' }}
        />
      </div>
      {/* 弹窗区 */}
      <ViewModal visible={modalInfo.type === 'view' && 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;