safety-eval-service-frontend/src/pages/Container/Supervision/BasicInfo/EvaluatorInfo/index.js

import { Button, Descriptions, Form, Modal, Table, Tag, Tooltip } from "antd";
import { useEffect, useState } from "react";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import Search from "zy-react-library/components/Search";
import TableList from "zy-react-library/components/Table";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import { getEvaluatorDetail, queryEvaluatorPage } from "~/mock/regulator/basicInfo";

const YES_NO_OPTIONS = [
  { label: "是", value: 1 },
  { label: "否", value: 0 },
];

const STATUS_OPTIONS = [
  { label: "正常", value: "normal" },
  { label: "异常", value: "abnormal" },
];

const CERT_STATUS_COLOR = {
  normal: "success",
  expiring: "warning",
  expired: "error",
};

function EvaluatorInfoPage() {
  const [searchForm] = Form.useForm();
  const [viewOpen, setViewOpen] = useState(false);
  const [detail, setDetail] = useState(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [certPreview, setCertPreview] = useState(null);

  const { tableProps, getData } = useTable(queryEvaluatorPage, { form: searchForm });

  useEffect(() => {
    getData();
  }, []);

  const openDetail = async (id) => {
    setViewOpen(true);
    setDetailLoading(true);
    const res = await getEvaluatorDetail(id);
    setDetail(res?.data || null);
    setDetailLoading(false);
  };

  const closeDetail = () => {
    setViewOpen(false);
    setDetail(null);
    setCertPreview(null);
  };

  return (
    <PageLayout
      title={
        <div>
          <span>评价师信息管理</span>
          <div className="pageLayout-extra">
            监管端查看辖区内评价师备案及资质状态（当前为 Mock 数据）。
          </div>
        </div>
      }
    >
      <Search
        form={searchForm}
        options={[
          { name: "evaluatorName", label: "评价师名称", placeholder: "关键字搜索" },
          { name: "orgName", label: "机构名称", placeholder: "关键字搜索" },
          {
            name: "employmentStatus",
            label: "是否在职",
            render: FORM_ITEM_RENDER_ENUM.SELECT,
            options: YES_NO_OPTIONS,
          },
          {
            name: "registerEngineerFlag",
            label: "是否注册安全工程师",
            render: FORM_ITEM_RENDER_ENUM.SELECT,
            options: YES_NO_OPTIONS,
          },
          {
            name: "status",
            label: "状态",
            render: FORM_ITEM_RENDER_ENUM.SELECT,
            options: STATUS_OPTIONS,
          },
        ]}
        onFinish={getData}
      />
      <TableList
        {...tableProps}
        columns={[
          { title: "机构名称", dataIndex: "orgName", ellipsis: true },
          { title: "评价师名称", dataIndex: "evaluatorName", width: 120 },
          {
            title: "是否注册安全工程师",
            dataIndex: "registerEngineerLabel",
            width: 160,
          },
          { title: "资格证书", dataIndex: "certificatesSummary", ellipsis: true },
          {
            title: "状态",
            width: 90,
            render: (_, record) => {
              const tag = (
                <Tag color={record.status === "normal" ? "success" : "error"}>
                  {record.statusLabel}
                </Tag>
              );
              return record.statusTip ? <Tooltip title={record.statusTip}>{tag}</Tooltip> : tag;
            },
          },
          {
            title: "操作",
            width: 80,
            render: (_, record) => (
              <Button type="link" onClick={() => openDetail(record.id)}>查看</Button>
            ),
          },
        ]}
      />

      <Modal
        open={viewOpen}
        destroyOnHidden
        title="评价师详细信息"
        width={900}
        loading={detailLoading}
        cancelText="关闭"
        okButtonProps={{ style: { display: "none" } }}
        onCancel={closeDetail}
      >
        {detail && (
          <>
            <Descriptions title="个人信息" bordered column={2} size="small" style={{ marginBottom: 16 }}>
              <Descriptions.Item label="姓名">{detail.name}</Descriptions.Item>
              <Descriptions.Item label="性别">{detail.gender}</Descriptions.Item>
              <Descriptions.Item label="出生日期">{detail.birthDate}</Descriptions.Item>
              <Descriptions.Item label="身份证号">{detail.idCard}</Descriptions.Item>
              <Descriptions.Item label="学历">{detail.education}</Descriptions.Item>
              <Descriptions.Item label="毕业院校">{detail.graduateSchool}</Descriptions.Item>
              <Descriptions.Item label="专业">{detail.major}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="机构信息" bordered column={2} size="small" style={{ marginBottom: 16 }}>
              <Descriptions.Item label="所在机构">{detail.orgName}</Descriptions.Item>
              <Descriptions.Item label="部门">{detail.deptName}</Descriptions.Item>
              <Descriptions.Item label="岗位">{detail.positionName}</Descriptions.Item>
              <Descriptions.Item label="账号">{detail.account}</Descriptions.Item>
            </Descriptions>
            <div style={{ marginBottom: 8, fontWeight: 600 }}>资质证照</div>
            <Table
              size="small"
              bordered
              rowKey="id"
              pagination={false}
              dataSource={detail.certificates || []}
              columns={[
                { title: "证书名称", dataIndex: "certName" },
                { title: "证书编号", dataIndex: "certNo" },
                { title: "发证日期", dataIndex: "issueDate", width: 110 },
                { title: "有效期至", dataIndex: "expireDate", width: 110 },
                {
                  title: "状态",
                  width: 90,
                  render: (_, record) => {
                    const tag = (
                      <Tag color={CERT_STATUS_COLOR[record.status] || "default"}>
                        {record.statusLabel}
                      </Tag>
                    );
                    return record.statusTip ? <Tooltip title={record.statusTip}>{tag}</Tooltip> : tag;
                  },
                },
                {
                  title: "操作",
                  width: 90,
                  render: (_, record) => (
                    <Button type="link" size="small" onClick={() => setCertPreview(record)}>
                      查看证书
                    </Button>
                  ),
                },
              ]}
            />
          </>
        )}
      </Modal>

      <Modal
        open={!!certPreview}
        destroyOnHidden
        title="证书预览"
        width={520}
        cancelText="关闭"
        okButtonProps={{ style: { display: "none" } }}
        onCancel={() => setCertPreview(null)}
      >
        {certPreview && (
          <Descriptions bordered column={1} size="small">
            <Descriptions.Item label="证书名称">{certPreview.certName}</Descriptions.Item>
            <Descriptions.Item label="证书编号">{certPreview.certNo}</Descriptions.Item>
            <Descriptions.Item label="发证日期">{certPreview.issueDate}</Descriptions.Item>
            <Descriptions.Item label="有效期至">{certPreview.expireDate}</Descriptions.Item>
            <Descriptions.Item label="状态">{certPreview.statusLabel}</Descriptions.Item>
          </Descriptions>
        )}
      </Modal>
    </PageLayout>
  );
}

export default EvaluatorInfoPage;