safety-eval-service-frontend/src/pages/Container/EnterpriseInfo/PersonnelInfo/StaffViewModal.js

import { Button, Descriptions, Modal, Table, Upload } from "antd";
import { useEffect, useRef, useState } from "react";
import FilePreviewModal, { FilePreviewContent } from "~/components/FilePreviewModal";
import { resolvePreviewSrc } from "~/components/CertPreviewImg";
import { fetchStaffCertDetail, fetchStaffCertListByPersonnelId } from "~/api/staffCertificate";
import { fetchOrgPersonnelDetail } from "~/api/qualFiling/personnelHelper";

const GENDER_MAP = { 1: "男", 2: "女" };
const REGISTER_ENGINEER_MAP = { 1: "是", 2: "否" };

export default function StaffViewModal({
  open,
  currentId,
  requestDetails = fetchOrgPersonnelDetail,
  requestCertList = fetchStaffCertListByPersonnelId,
  requestCertDetails = fetchStaffCertDetail,
  onCancel,
}) {
  const [info, setInfo] = useState({});
  const [certificates, setCertificates] = useState([]);
  const [detailLoading, setDetailLoading] = useState(false);
  const [attachmentPreview, setAttachmentPreview] = useState(null);
  const [certPreview, setCertPreview] = useState(null);
  const [certPreviewLoading, setCertPreviewLoading] = useState(false);
  const [certPreviewInfo, setCertPreviewInfo] = useState(null);
  const requestDetailsRef = useRef(requestDetails);
  const requestCertListRef = useRef(requestCertList);
  const requestCertDetailsRef = useRef(requestCertDetails);
  requestDetailsRef.current = requestDetails;
  requestCertListRef.current = requestCertList;
  requestCertDetailsRef.current = requestCertDetails;

  useEffect(() => {
    if (!open || !currentId) {
      setInfo({});
      setCertificates([]);
      return;
    }
    let cancelled = false;
    setDetailLoading(true);

    const loadCertList = requestCertListRef.current;
    Promise.all([
      Promise.resolve(requestDetailsRef.current({ id: currentId })).catch((err) => {
        console.warn("[StaffViewModal] load detail failed:", err);
        return { data: {} };
      }),
      typeof loadCertList === "function"
        ? Promise.resolve(loadCertList(currentId)).catch((err) => {
          console.warn("[StaffViewModal] load certificates failed:", err);
          return [];
        })
        : Promise.resolve([]),
    ]).then(([detailRes, certList]) => {
      if (!cancelled) {
        setInfo(detailRes?.data || {});
        setCertificates(Array.isArray(certList) ? certList : []);
      }
    }).finally(() => {
      if (!cancelled) {
        setDetailLoading(false);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [open, currentId]);

  const openCertPreview = async (record) => {
    setCertPreview(record);
    setCertPreviewInfo(null);
    if (typeof requestCertDetailsRef.current !== "function") {
      setCertPreviewInfo(record);
      return;
    }
    setCertPreviewLoading(true);
    try {
      const res = await requestCertDetailsRef.current({ id: record.id });
      setCertPreviewInfo(res?.data || record);
    } catch (err) {
      console.warn("[StaffViewModal] load cert detail failed:", err);
      setCertPreviewInfo(record);
    } finally {
      setCertPreviewLoading(false);
    }
  };


  const proofMaterialUrl= info.proofMaterialUrl? JSON.parse(info.proofMaterialUrl) : [];
 
  const certPreviewFiles = certPreviewInfo?.certImgs?.length
    ? certPreviewInfo.certImgs
    : certPreviewInfo?.certImgFiles || [];
  const certPreviewUrl = resolvePreviewSrc(certPreviewFiles[0]);
  const certPreviewName = certPreviewFiles[0]?.fileName || certPreviewFiles[0]?.name || certPreviewInfo?.certName;

  return (
    <>
      <Modal
        open={open}
        destroyOnHidden
        title="查看"
        width={900}
        loading={detailLoading}
        cancelText="关闭"
        okButtonProps={{ style: { display: "none" } }}
        onCancel={onCancel}
      >
        <Descriptions bordered column={2} labelStyle={{ width: 120 }}>
          <Descriptions.Item label="姓名">{info.userName}</Descriptions.Item>
          <Descriptions.Item label="性别">{GENDER_MAP[info.genderCode]}</Descriptions.Item>
          <Descriptions.Item label="出生日期">{info.birthDate}</Descriptions.Item>
          <Descriptions.Item label="账号">{info.account}</Descriptions.Item>
          <Descriptions.Item label="部门">{info.deptName}</Descriptions.Item>
          <Descriptions.Item label="岗位">{info.postName}</Descriptions.Item>
          <Descriptions.Item label="人员类型">{info.personType || "基础人员"}</Descriptions.Item>
          <Descriptions.Item label="资质范围">{info.qualScope || "-"}</Descriptions.Item>
          <Descriptions.Item label="职业等级">{info.professionalLevelName || "-"}</Descriptions.Item>
          <Descriptions.Item label="证书编号">{info.evaluatorCertNo || "-"}</Descriptions.Item>
          <Descriptions.Item label="学历类型">{info.educationTypeName || "-"}</Descriptions.Item>
          <Descriptions.Item label="学历层次">{info.educationLevelName || "-"}</Descriptions.Item>
          <Descriptions.Item label="职称">{info.titleName || "-"}</Descriptions.Item>
          <Descriptions.Item label="是否注册安全工程师">
            {REGISTER_ENGINEER_MAP[info.registerEngineerFlag] ?? "-"}
          </Descriptions.Item>
          <Descriptions.Item label="身份证号">{info.idCardNo}</Descriptions.Item>
         
          <Descriptions.Item label="现住地址" span={2}>{info.currentAddress}</Descriptions.Item>
          <Descriptions.Item label="办公地址" span={2}>{info.officeAddress}</Descriptions.Item>
          <Descriptions.Item label="毕业院校">{info.graduateSchool}</Descriptions.Item>
          <Descriptions.Item label="专业">{info.major}</Descriptions.Item>
          <Descriptions.Item label="出版学术专著、专利、获奖、发表学术论文等" span={2}>
            {info.publications || "-"}
          </Descriptions.Item>
          <Descriptions.Item label="自我申报的专业能力及认定方式" span={2}>
            {info.abilityDeclaration || "-"}
          </Descriptions.Item>
          <Descriptions.Item label="主要学习工作经历" span={2}>
            {info.workExperience || "-"}
          </Descriptions.Item>
          <Descriptions.Item label="申报专业能力证明材料" span={2}>
            {proofMaterialUrl.length ? proofMaterialUrl.map((item) => (
              <div key={item.id}>
                <a href={item.url} target="_blank" rel="noopener noreferrer">
                  {item.fileName || item.name || item.url}
                </a>
              </div>
            )) : "-"
}
          </Descriptions.Item>
        </Descriptions>

        <div style={{ marginTop: 16, marginBottom: 8, fontWeight: 600 }}>证照信息</div>
        <Table
          size="small"
          bordered
          rowKey="id"
          pagination={false}
          dataSource={certificates}
          locale={{ emptyText: "暂无证照信息" }}
          columns={[
            { title: "证照名称", dataIndex: "certName" },
            { title: "证书编号", dataIndex: "certNo" },
            { title: "证书类别", dataIndex: "certCategory" },
            { title: "发证机关", dataIndex: "issueOrg" },
            { title: "有效开始日期", dataIndex: "validStartDate", width: 120 },
            { title: "有效结束日期", dataIndex: "validEndDate", width: 120 },
            {
              title: "操作",
              width: 90,
              render: (_, record) => (
                <Button type="link" size="small" onClick={() => openCertPreview(record)}>查看证书</Button>
              ),
            },
          ]}
        />
      </Modal>

      <FilePreviewModal
        open={!!attachmentPreview}
        title="附件预览"
        fileName={attachmentPreview?.fileName}
        url={attachmentPreview?.url}
        onCancel={() => setAttachmentPreview(null)}
      />

      <Modal
        open={!!certPreview}
        destroyOnHidden
        title="证书预览"
        width={720}
        loading={certPreviewLoading}
        cancelText="关闭"
        okText={certPreviewUrl ? "新窗口打开" : "关闭"}
        okButtonProps={{ style: certPreviewUrl ? undefined : { display: "none" } }}
        onCancel={() => {
          setCertPreview(null);
          setCertPreviewInfo(null);
        }}
        onOk={() => {
          if (certPreviewUrl) {
            window.open(certPreviewUrl, "_blank");
          }
          setCertPreview(null);
          setCertPreviewInfo(null);
        }}
      >
        {certPreviewInfo && (
          <div>
            <Descriptions bordered column={1} size="small" style={{ marginBottom: 12 }}>
              <Descriptions.Item label="证照名称">{certPreviewInfo.certName}</Descriptions.Item>
              <Descriptions.Item label="证书编号">{certPreviewInfo.certNo}</Descriptions.Item>
              <Descriptions.Item label="证书类别">{certPreviewInfo.certCategory || "-"}</Descriptions.Item>
              <Descriptions.Item label="发证机关">{certPreviewInfo.issueOrg || "-"}</Descriptions.Item>
              <Descriptions.Item label="有效开始日期">{certPreviewInfo.validStartDate || "-"}</Descriptions.Item>
              <Descriptions.Item label="有效结束日期">{certPreviewInfo.validEndDate || "-"}</Descriptions.Item>
            </Descriptions>
            <FilePreviewContent url={certPreviewUrl} fileName={certPreviewName} />
          </div>
        )}
      </Modal>
    </>
  );
}