zcloud_gbs_qualifications-react/src/components/ViewQualificationDetailsModal/index.js

import { Button, Descriptions, Modal, Space, message } from "antd";
import PreviewImg from "zy-react-library/components/PreviewImg";
import PreviewPdf from "zy-react-library/components/PreviewPdf";
import { getFileName, getFileSuffix, getFileUrl } from "zy-react-library/utils";

const ViewQualificationDetailsModal = (props) => {
  const handleDownload = async (file) => {
    const baseUrl = getFileUrl();
    const fileUrl = file.url || (file.filePath ? `${baseUrl}${file.filePath}` : "");
    const fileName = file.fileName || file.name || getFileName(file.filePath || fileUrl);

    if (!fileUrl) {
      message.error("文件地址不存在");
      return;
    }

    try {
      const response = await fetch(fileUrl);
      const blob = await response.blob();
      const link = document.createElement("a");
      const blobUrl = window.URL.createObjectURL(blob);

      link.href = blobUrl;
      link.download = fileName;
      link.style.display = "none";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(blobUrl);
    }
    catch {
      message.error("下载失败");
    }
  };

  const previewFile = () => {
    const files = props.data.files || [];
    const imgFiles = [];
    const pdfFiles = [];
    const compressedFiles = [];

    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const suffix = getFileSuffix(file.fileName || file.name || "").toLowerCase();

      if (suffix === "pdf") {
        pdfFiles.push(file);
      }
      else if (suffix === "zip" || suffix === "rar") {
        compressedFiles.push(file);
      }
      else {
        imgFiles.push(file);
      }
    }

    const compressedFileNodes = compressedFiles.length > 0 && (
      <div style={{ marginTop: imgFiles.length > 0 || pdfFiles.length > 0 ? 20 : 0 }}>
        <Space direction="vertical" size="middle">
          {compressedFiles.map(file => (
            <Space key={file.id || file.filePath || file.url || file.fileName || file.name}>
              <span>{file.fileName || file.name || getFileName(file.filePath || file.url || "")}</span>
              <Button type="primary" size="small" onClick={() => handleDownload(file)}>
                下载
              </Button>
            </Space>
          ))}
        </Space>
      </div>
    );

    if (imgFiles.length > 0 && pdfFiles.length > 0) {
      return (
        <>
          <div><PreviewImg files={imgFiles} /></div>
          <div style={{ marginTop: 20 }}><PreviewPdf files={pdfFiles} urlKey="url" /></div>
          {compressedFileNodes}
        </>
      );
    }
    if (imgFiles.length > 0) {
      return (
        <>
          <PreviewImg files={imgFiles} />
          {compressedFileNodes}
        </>
      );
    }
    if (pdfFiles.length > 0) {
      return (
        <>
          <PreviewPdf files={pdfFiles} />
          {compressedFileNodes}
        </>
      );
    }
    if (compressedFiles.length > 0) {
      return compressedFileNodes;
    }
  };

  return (
    <Modal
      title={`${props.data.dataName}资质`}
      width={800}
      open
      maskClosable={false}
      onCancel={props.onCancel}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>取消</Button>,
      ]}
    >
      <Descriptions
        bordered
        column={1}
        styles={{ label: { width: 200 } }}
        items={[
          { label: "资质", children: previewFile() },
          ...(props.data.isValidity === 0
            ? [{ label: "有效期开始时间", children: props.data.qualificationsTermStart }, { label: "有效期结束时间", children: props.data.qualificationsTermEnd }]
            : []),
        ]}
      />
    </Modal>
  );
};

export default ViewQualificationDetailsModal;