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

import React, { useState, useEffect } from "react";
import { Button, Form, Select, Space, Table, Tag, Modal, Input, DatePicker } from "antd";
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 { PUBLICITY_STATUS_MAP } from "~/enumerate/constant";

const { TextArea } = Input;

const MOCK_DATA = [
  {
    id: 1,
    orgName: "重庆安评技术研究院有限公司",
    orgType: "本地机构",
    certNo: "API-2026-001",
    businessScope: "化工, 石油加工",
    reviewDept: "市应急管理局",
    reviewTime: "2026-06-20",
    status: "pending",
  },
  {
    id: 2,
    orgName: "重庆恒安安全评价有限公司",
    orgType: "本地机构",
    certNo: "API-2025-032",
    businessScope: "化工",
    reviewDept: "市应急管理局",
    reviewTime: "2026-05-15",
    status: "published",
  },
  {
    id: 3,
    orgName: "北京中安评价中心（重庆分公司）",
    orgType: "异地机构",
    certNo: "API-2026-015",
    businessScope: "矿山, 建筑施工",
    reviewDept: "市应急管理局",
    reviewTime: "2026-06-18",
    status: "pending",
  },
];

const { router } = tools;

const QualPublicity = (props) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [publicityVisible, setPublicityVisible] = useState(false);
  const [publicityTarget, setPublicityTarget] = useState(null);
  const [publicityDept, setPublicityDept] = useState(undefined);
  const [publicityContent, setPublicityContent] = useState("");
  const [publicityStartDate, setPublicityStartDate] = useState(null);
  const [publicityEndDate, setPublicityEndDate] = useState(null);

  const openPublicity = (record) => {
    setPublicityTarget(record);
    setPublicityDept(undefined);
    setPublicityContent(
      "依据《安全评价机构管理规定》等相关法规，经审核，该机构符合安全评价机构资质条件，现予以公示，接受社会监督。"
    );
    setPublicityStartDate(null);
    setPublicityEndDate(null);
    setPublicityVisible(true);
  };

  const handlePublicitySubmit = () => {
    console.log("公示提交:", {
      target: publicityTarget,
      dept: publicityDept,
      content: publicityContent,
      startDate: publicityStartDate,
      endDate: publicityEndDate,
    });
    setPublicityVisible(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: "reviewDept", width: 120, ellipsis: true },
    { title: "审核通过时间", dataIndex: "reviewTime", width: 120 },
    {
      title: "公示状态",
      dataIndex: "status",
      width: 100,
      render: (status) => {
        const config = PUBLICITY_STATUS_MAP[status];
        return config ? <Tag color={config.color}>{config.label}</Tag> : status;
      },
    },
    {
      title: "操作",
      width: 180,
      fixed: "right",
      render: (_, record) => (
        <Space>
          <Button type="link" size="small" onClick={() => props.history.push(`FilingDetail?id=${record.id}`)}>
            查看
          </Button>
          {record.status === "pending" && (
            <Button type="link" size="small" onClick={() => openPublicity(record)}>
              公示
            </Button>
          )}
          <Button type="link" size="small">
            公示信息
          </Button>
        </Space>
      ),
    },
  ];

  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="status" name="status">
            <ControlWrapper.Select
              label="公示状态"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value="pending">待公示</Select.Option>
              <Select.Option value="published">已公示</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();
          },
        }}
      />

      <Modal
        title="备案公示"
        open={publicityVisible}
        onCancel={() => setPublicityVisible(false)}
        width={560}
        footer={
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
            <Button onClick={() => setPublicityVisible(false)}>取消</Button>
            <Button type="primary" onClick={handlePublicitySubmit}>提交公示</Button>
          </div>
        }
      >
        <div style={{ display: "grid", gap: "0.8rem" }}>
          <div>
            <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>公示信息</div>
          </div>
          <div>
            <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>机构名称</div>
            <div style={{ fontSize: "0.88rem", fontWeight: 500 }}>{publicityTarget?.orgName || "—"}</div>
          </div>
          <div>
            <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>公示部门</div>
            <Select
              style={{ width: "100%" }}
              placeholder="请选择"
              value={publicityDept}
              onChange={setPublicityDept}
            >
              <Select.Option value="city">市应急管理局</Select.Option>
              <Select.Option value="district">县区应急管理局</Select.Option>
            </Select>
          </div>
          <div>
            <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>公示内容</div>
            <TextArea
              rows={4}
              placeholder="请输入公示内容..."
              value={publicityContent}
              onChange={(e) => setPublicityContent(e.target.value)}
            />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
            <div>
              <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>公示开始时间</div>
              <DatePicker
                style={{ width: "100%" }}
                placeholder="请选择"
                value={publicityStartDate}
                onChange={setPublicityStartDate}
              />
            </div>
            <div>
              <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>公示结束时间</div>
              <DatePicker
                style={{ width: "100%" }}
                placeholder="请选择"
                value={publicityEndDate}
                onChange={setPublicityEndDate}
              />
            </div>
          </div>
        </div>
      </Modal>
    </PageLayout>
  );
};

export default AntdTableFuncControl(QualPublicity);