safety-eval-service-frontend/src/components/StaffViewModal/index.js

import { Button, Descriptions, Image, Modal, Table } from "antd";
import { useEffect, useRef, useState } from "react";
import { fetchOrgPersonnelDetail } from "~/utils/qualFiling/personnelHelper";
import {
  REGISTER_ENGINEER_CATEGORY_MAP,
  ABILITY_SOURCE_MAP,
  TITLE_LEVEL_MAP,
  QUALIFICATION_INDUSTRY_OPTIONS_MAP,
} from "~/enumerate/enterpriseOptions";
import {
  CERT_LEVEL_LABEL_BY_TYPE,
  CAPABILITY_MAP,
  PROFESSIONAL_MAJOR_MAP,
} from "~/enumerate/constant";

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

const parseFileList = (raw) => {
  if (!raw) return [];
  if (Array.isArray(raw)) return raw;
  try {
    const parsed = JSON.parse(raw);
    return Array.isArray(parsed) ? parsed : [];
  } catch {
    return [];
  }
};

export default function StaffViewModal({
  open,
  currentId,
  requestDetails = fetchOrgPersonnelDetail,
  onCancel,
}) {
  const [info, setInfo] = useState({});
  const [detailLoading, setDetailLoading] = useState(false);
  const requestDetailsRef = useRef(requestDetails);
  requestDetailsRef.current = requestDetails;

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

    Promise.resolve(requestDetailsRef.current({ id: currentId }))
      .catch((err) => {
        console.warn("[StaffViewModal] load detail failed:", err);
        return { data: {} };
      })
      .then((detailRes) => {
        if (!cancelled) {
          setInfo(detailRes?.data || {});
        }
      })
      .finally(() => {
        if (!cancelled) {
          setDetailLoading(false);
        }
      });
    return () => {
      cancelled = true;
    };
  }, [open, currentId]);

  const proofMaterialFiles = parseFileList(info.proofMaterialUrl);

  const titleInfo = Array.isArray(info.titleCodeArr)
    ? info.titleCodeArr.map((item) => ({
        titleName: TITLE_LEVEL_MAP[item.titleCode] || item.titleCode || "-",
        industryName:
          item.industryName,
        proveUrlList: parseFileList(item.proveUrl),
      }))
    : [];

  const regCert = info.registeredSafetyEngineerCert;
  const regCertLevelMap = CERT_LEVEL_LABEL_BY_TYPE.registered_safety_engineer;
  const regCertFiles = parseFileList(regCert?.certAttachmentUrl);
  const regPractisingFiles = parseFileList(regCert?.practisingCertUrl);

  const evaluatorCert = info.evaluatorCert;
  const evaluatorFlag = info.evaluatorFlag || (evaluatorCert ? 1 : 2);
  const evalCertLevelMap = CERT_LEVEL_LABEL_BY_TYPE.evaluator;
  const evalCertFiles = parseFileList(evaluatorCert?.certAttachmentUrl);

  const capabilityList = Array.isArray(info.capabilityAssessment)
    ? info.capabilityAssessment.map((item) => ({
        industryCode: item.industryCode,
        capabilityName:
          CAPABILITY_MAP[item.professionalCapabilityCode] ||
          item.professionalCapabilityCode ||
          "-",
        sourceName:
          ABILITY_SOURCE_MAP[item.professionalCapabilitySourceCode] ||
          item.professionalCapabilitySourceCode ||
          "-",
      }))
    : [];

  const renderFileList = (files) => {
    if (!files?.length) return "-";
    return files.map((item) => {
      const isImage = /\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i.test(
        item.url,
      );
      return (
        <div key={item.uid || item.url}>
          {isImage ? (
            <Image
              src={item.url}
              style={{ maxWidth: 150, cursor: "pointer" }}
              preview={{ mask: item.fileName || item.name || "预览" }}
            />
          ) : (
            <Button type="link" onClick={() => window.open(item.url)}>
              {item.fileName || item.name || item.url}
            </Button>
          )}
        </div>
      );
    });
  };

  return (
    <Modal
      open={open}
      destroyOnHidden
      title="查看"
      width={900}
      loading={detailLoading}
      cancelText="关闭"
      okButtonProps={{ style: { display: "none" } }}
      onCancel={onCancel}
    >
      <div style={{ marginBottom: 8, fontWeight: 600 }}>基础信息</div>
      <Descriptions bordered column={2} labelStyle={{ width: 120 }} size="small">
        <Descriptions.Item label="姓名">{info.userName}</Descriptions.Item>
        <Descriptions.Item label="性别">
          {GENDER_MAP[info.genderCode]}
        </Descriptions.Item>
        <Descriptions.Item label="本行业工作年限">
          {info.workDateAge}
        </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.idCardNo}
        </Descriptions.Item>
        <Descriptions.Item label="现住地址">
          {info.currentAddress}
        </Descriptions.Item>
        <Descriptions.Item label="办公地址">
          {info.officeAddress}
        </Descriptions.Item>
        <Descriptions.Item label="是否技术负责人">
          {info.technicalDirectorFlag === true
            ? "是"
            : info.technicalDirectorFlag === false
              ? "否"
              : "-"}
        </Descriptions.Item>
        <Descriptions.Item label="是否过程控制负责人">
          {info.processControlLeaderFlag === true
            ? "是"
            : info.processControlLeaderFlag === false
              ? "否"
              : "-"}
        </Descriptions.Item>
        <Descriptions.Item label="主要学习工作经历" span={2}>
          {info.workExperience || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="出版学术专著专利获奖论文等" span={2}>
          {info.publications || "-"}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ marginTop: 16, marginBottom: 8, fontWeight: 600 }}>
        专业能力信息
      </div>
      <Table
        size="small"
        bordered
        pagination={false}
        rowKey={(_, idx) => idx}
        dataSource={capabilityList}
        locale={{ emptyText: "暂无专业能力信息" }}
        columns={[
          {
            title: "行业",
            dataIndex: "industryCode",
            width: 220,
            ellipsis: true,
            render: (code) =>
              QUALIFICATION_INDUSTRY_OPTIONS_MAP[code] || code || "-",
          },
          {
            title: "专业能力",
            dataIndex: "capabilityName",
            width: 80,
            ellipsis: true,
          },
          { title: "来源", dataIndex: "sourceName", width: 280 },
        ]}
      />

      <div style={{ marginTop: 16, marginBottom: 8, fontWeight: 600 }}>
        学历信息
      </div>
      <Descriptions bordered column={2} labelStyle={{ width: 120 }} size="small">
        <Descriptions.Item label="学历类型">
          {info.educationTypeName || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="毕业院校">
          {info.graduateSchool}
        </Descriptions.Item>
        <Descriptions.Item label="学历层次">
          {info.educationLevelName || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="基础学科专业">
          {info.basicDisciplineMajorName || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="学历证明材料" span={2}>
          {renderFileList(proofMaterialFiles)}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ marginTop: 16, marginBottom: 8, fontWeight: 600 }}>
        注安信息
      </div>
      <Descriptions bordered column={2} labelStyle={{ width: 120 }} size="small">
        <Descriptions.Item label="是否注册安全工程师">
          {REGISTER_ENGINEER_MAP[info.registerEngineerFlag] ?? "-"}
        </Descriptions.Item>
        <Descriptions.Item label="注安专业类别">
          {REGISTER_ENGINEER_CATEGORY_MAP[regCert?.certCategoryCode] || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="注安等级">
          {regCertLevelMap[regCert?.certLevel] || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="证书编号">
          {regCert?.certNo || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="执业证书编号">
          {regCert?.practisingCertCode || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="注安证书" span={2}>
          {renderFileList(regCertFiles)}
        </Descriptions.Item>
        <Descriptions.Item label="注安执业证书" span={2}>
          {renderFileList(regPractisingFiles)}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ marginTop: 16, marginBottom: 8, fontWeight: 600 }}>
        评价师信息
      </div>
      <Descriptions bordered column={2} labelStyle={{ width: 120 }} size="small">
        <Descriptions.Item label="是否评价师">
          {EVALUATOR_MAP[evaluatorFlag] ?? "-"}
        </Descriptions.Item>
        <Descriptions.Item label="评价师等级">
          {evalCertLevelMap[evaluatorCert?.certLevel] || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="证书编号">
          {evaluatorCert?.certNo || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="评价师证书" span={2}>
          {renderFileList(evalCertFiles)}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ marginTop: 16, marginBottom: 8, fontWeight: 600 }}>
        职称信息
      </div>
      <Table
        size="small"
        bordered
        pagination={false}
        rowKey={(_, idx) => idx}
        dataSource={titleInfo}
        columns={[
          { title: "职称", dataIndex: "titleName", width: 120 },
          { title: "系列/专业", dataIndex: "industryName", width: 150 },
          {
            title: "证明材料",
            dataIndex: "proveUrlList",
            render: renderFileList,
          },
        ]}
      />
    </Modal>
  );
}