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

import React, { useEffect, useState } from 'react';
import { Table, Form, Select, Button, Tag, message } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { getApprovePage } from './services';
import type { ColumnsType } from 'antd/es/table';


interface SupplierEntryReviewRecord {
  id: string;
  accessWorkName: string;    // 准入工作
  deptId: string;            // 准入部门ID
  accessTypeText: string;    // 准入方式
  reviewStatusText: string;  // 流程状态
  categoryName: string;      // 品类名称
  startTime: string;         // 申请时间
  endTime: string;
  createTime: string;        // 创建时间
  updateTime: string;        // 更新时间
  [key: string]: any;        // 允许有其它字段
}

const statusColorMap: Record<string, string> = {
  '未开始': 'default',
  '进行中': 'processing',
  '已完成': 'success',
};

const methodOptions = [
  { label: '全部', value: '' },
  { label: '线上准入', value: '线上准入' },
  { label: '线下准入', value: '线下准入' },
];

const statusOptions = [
  { label: '全部', value: '' },
  { label: '未开始', value: '未开始' },
  { label: '进行中', value: '进行中' },
  { label: '已完成', value: '已完成' },
];

const deptOptions = [
  { label: '全部', value: '' },
  { label: '采购部', value: 'DEPT001' },
  { label: '业务部', value: 'DEPT002' },
];

const columns:ColumnsType<SupplierEntryReviewRecord> = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 48,
    align: 'center',
    render: (_: any, __: any, idx: number) => idx + 1,
  },
  {
    title: '准入工作',
    dataIndex: 'accessWorkName',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '准入部门',
    dataIndex: 'deptId',
    align: 'center',
    render: (deptId: string) => deptId === 'DEPT001' ? '采购部' : deptId === 'DEPT002' ? '业务部' : deptId,
  },
  {
    title: '准入方式',
    dataIndex: 'accessTypeText',
    align: 'center',
  },
  {
    title: '准入品类',
    dataIndex: 'categoryName',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    align: 'center',
  },
  {
    title: '结束时间',
    dataIndex: 'endTime',
    align: 'center',
  },
  {
    title: '流程状态',
    dataIndex: 'reviewStatusText',
    align: 'center',
    render: (text: string) => <Tag color={statusColorMap[text] || 'default'}>{text}</Tag>,
  },
];

const SupplierEntryReview: React.FC = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState<any[]>([]);
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
  const [loading, setLoading] = useState(false);

  // 查询数据
  const fetchData = async (params = {}) => {
    setLoading(true);
    try {
      const res = await getApprovePage({
        pageNo: pagination.current,
        pageSize: pagination.pageSize,
        ...form.getFieldsValue(),
        ...params,
      });
      if (res.code === 200) {
        setData(res.data.records);
        setPagination({
          ...pagination,
          current: res.data.current,
          total: res.data.total,
          pageSize: res.data.size,
        });
      } else {
        setData([]);
        setPagination({ ...pagination, total: 0 });
      }
    } catch (err) {
      message.error('获取数据失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData({ pageNo: 1 });
    // eslint-disable-next-line
  }, []);

  // 表格分页切换
  const handleTableChange = (pag: any) => {
    setPagination({
      ...pagination,
      current: pag.current,
      pageSize: pag.pageSize,
    });
    fetchData({
      pageNo: pag.current,
      pageSize: pag.pageSize,
    });
  };

  // 搜索
  const handleSearch = () => {
    setPagination({ ...pagination, current: 1 });
    fetchData({ pageNo: 1 });
  };

  // 重置
  const handleReset = () => {
    form.resetFields();
    setPagination({ ...pagination, current: 1 });
    fetchData({ pageNo: 1 });
  };

  return (
    <div>
      <Form
        form={form}
        layout="inline"
        style={{ marginBottom: 16 }}
        onFinish={handleSearch}
      >
        <Form.Item name="accessTypeText" label="准入方式">
          <Select options={methodOptions} allowClear style={{ width: 120 }} />
        </Form.Item>
        <Form.Item name="deptId" label="准入部门">
          <Select options={deptOptions} allowClear style={{ width: 120 }} />
        </Form.Item>
        <Form.Item name="reviewStatusText" label="流程状态">
          <Select options={statusOptions} allowClear style={{ width: 120 }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />} style={{ marginRight: 8 }}>
            查询
          </Button>
          <Button onClick={handleReset} icon={<ReloadOutlined />}>
            重置
          </Button>
        </Form.Item>
      </Form>

      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        loading={loading}
        pagination={{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        onChange={handleTableChange}
        bordered
      />
    </div>
  );
};

export default SupplierEntryReview;