safety-eval-service-frontend/src/pages/Container/QualificationReview/QualReview/index.js

import React, { useState, useEffect } from "react";
import { Button, Form, Select, Table, Tag } from "antd";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { tools } from "@cqsjjb/jjb-common-lib";
import { REVIEW_STATUS_MAP, EXPERT_STATUS_MAP } from "~/enumerate/constant";

// 静态模拟数据
const MOCK_DATA = [
  {
    id: 1,
    orgName: "重庆安评技术研究院有限公司",
    orgType: "本地机构",
    certNo: "API-2026-001",
    businessScope: "化工, 石油加工",
    expertStatus: "pending",
    reviewStatus: "pending",
  },
  {
    id: 2,
    orgName: "北京中安评价中心（重庆分公司）",
    orgType: "异地机构",
    certNo: "API-2026-015",
    businessScope: "矿山, 建筑施工",
    expertStatus: "arranging",
    reviewStatus: "reviewing",
  },
  {
    id: 3,
    orgName: "重庆渝安风险评估中心",
    orgType: "本地机构",
    certNo: "API-2026-008",
    businessScope: "化工",
    expertStatus: "none",
    reviewStatus: "rejected",
  },
];

const { router } = tools;

const QualReview = (props) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSearch = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 500);
  };

  const handleReset = (values) => {
    router.query = {
      ...router.query,
      ...values,
      current: 1,
      pageSize: 10,
    };
    handleSearch();
  };

  useEffect(() => {
    form.setFieldsValue(router.query);
  }, []);

  const columns = [
    {
      title: "序号",
      dataIndex: "id",
      width: 60,
      fixed: "left",
      render: (text, record, index) => index + 1,
    },
    { title: "机构名称", dataIndex: "orgName", width: 220, ellipsis: true },
    { title: "机构类型", dataIndex: "orgType", width: 100 },
    { title: "证书编号", dataIndex: "certNo", width: 140, ellipsis: true },
    { title: "安全评价业务范围", dataIndex: "businessScope", width: 180, ellipsis: true },
    {
      title: "专家核验",
      dataIndex: "expertStatus",
      width: 100,
      render: (status) => {
        const config = EXPERT_STATUS_MAP[status];
        return config ? <Tag color={config.color}>{config.label}</Tag> : '--';
      },
    },
    {
      title: "审核状态",
      dataIndex: "reviewStatus",
      width: 100,
      render: (status) => {
        const config = REVIEW_STATUS_MAP[status];
        return config ? <Tag color={config.color}>{config.label}</Tag> : '--';
      },
    },
    {
      title: "操作",
      width: 140,
      fixed: "right",
      render: (_, record) => (
        <TableAction>
          <Button type="link" size="small" onClick={() => props.history.push(`FilingDetail?id=${record.id}`)}>
            查看
          </Button>
          {record.reviewStatus === "pending" && (
            <Button type="link" size="small" onClick={() => props.history.push(`QualReviewForm?id=${record.id}`)}>
              审核
            </Button>
          )}
        </TableAction>
      ),
    },
  ];

  return (
    <PageLayout title="资质备案审核">
      <SearchForm
        style={{ marginBottom: 24 }}
        form={form}
        loading={loading}
        formLine={[
          <Form.Item key="orgName" name="orgName">
            <ControlWrapper.Input label="机构名称" placeholder="请输入" allowClear />
          </Form.Item>,
          <Form.Item key="orgType" name="orgType">
            <ControlWrapper.Select
              label="机构类型"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value="本地机构">本地机构</Select.Option>
              <Select.Option value="异地机构">异地机构</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
          <Form.Item key="businessScope" name="businessScope">
            <ControlWrapper.Select
              label="安全评价业务范围"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value="石油加工">石油加工</Select.Option>
              <Select.Option value="化工">化工</Select.Option>
              <Select.Option value="矿山">矿山</Select.Option>
              <Select.Option value="建筑施工">建筑施工</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
          <Form.Item key="needExpertCheck" name="needExpertCheck">
            <ControlWrapper.Select
              label="是否专家核验"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value="yes">是</Select.Option>
              <Select.Option value="no">否</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
          <Form.Item key="reviewStatus" name="reviewStatus">
            <ControlWrapper.Select
              label="审核状态"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value="pending">待审核</Select.Option>
              <Select.Option value="reviewing">审核中</Select.Option>
              <Select.Option value="rejected">打回</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
        ]}
        onReset={handleReset}
        onFinish={(values) => {
          router.query = {
            ...router.query,
            ...values,
            current: 1,
            pageSize: 10,
          };
          handleSearch();
        }}
      />

      <Table
        rowKey="id"
        columns={columns}
        dataSource={MOCK_DATA}
        scroll={{ y: props.scrollY }}
        loading={loading}
        pagination={{
          total: MOCK_DATA.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
          current: router.query.current,
          pageSize: router.query.pageSize,
          onChange: (page, pageSize) => {
            router.query = {
              ...router.query,
              current: page,
              pageSize,
            };
            handleSearch();
          },
        }}
      />
    </PageLayout>
  );
};

export default AntdTableFuncControl(QualReview);