优化HiddenInfo、Pdf、PreviewPdf

components/HiddenInfo/gwj/index.js

@@ -1,16 +1,17 @@
 import { request } from "@cqsjjb/jjb-common-lib/http";
-import { Descriptions, Divider, Spin } from "antd";
+import { Button, Descriptions, Divider, Spin } from "antd";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
+import { HIDDEN_SOURCE_ENUM, HIDDEN_STATE_ENUM } from "../../../enum/hidden/gwj";
+import { UPLOAD_FILE_TYPE_ENUM } from "../../../enum/uploadFile/gwj";
+import useDownloadFile from "../../../hooks/useDownloadFile";
+import useGetFile from "../../../hooks/useGetFile";
+import useGetUrlQuery from "../../../hooks/useGetUrlQuery";
+import { getFileName, getFileSuffix, getLabelName } from "../../../utils";
 import HeaderBack from "../../HeaderBack";
 import VideoIcon from "../../Icon/VideoIcon";
 import PreviewImg from "../../PreviewImg";
 import PreviewPdf from "../../PreviewPdf";
-import { UPLOAD_FILE_TYPE_ENUM } from "../../../enum/uploadFile/gwj";
-import useGetFile from "../../../hooks/useGetFile";
-import { getLabelName, getFileName } from "../../../utils";
-import { HIDDEN_SOURCE_ENUM, HIDDEN_STATE_ENUM } from "../../../enum/hidden/gwj";
-import useGetUrlQuery from "../../../hooks/useGetUrlQuery";
 
 /**
  * 隐患查看组件（港务局版本）
@@ -43,6 +44,7 @@ function HiddenInfo(props) {
   const [loading, setLoading] = useState(true);
   const { getFile } = useGetFile();
   const query = useGetUrlQuery();
+  const { loading: downloadFileLoading, downloadFile } = useDownloadFile();
 
   const getData = async () => {
     request(`/hidden/hidden/${id || query[idKey]}`, "get").then((res) => {
@@ -74,7 +76,7 @@ function HiddenInfo(props) {
   return (
     <div>
       {isShowHeaderBack && <HeaderBack title="查看" />}
-      <Spin spinning={loading}>
+      <Spin spinning={loading || downloadFileLoading}>
         <div style={{ padding: 20 }}>
           <Divider orientation="left">隐患信息</Divider>
           <Descriptions
@@ -195,7 +197,14 @@ function HiddenInfo(props) {
                         ...(item.state === 3
                           ? [
                               { label: "处置方案", children: item.disposalPlan },
-                            { label: "处置方案附件", children: <PreviewPdf name={getFileName(item.disposalFile)} url={item.disposalFile} /> },
+                              {
+                                label: "处置方案附件",
+                                children: (
+                                  getFileSuffix(item.disposalFile) === "pdf"
+                                    ? <PreviewPdf name={getFileName(item.disposalFile)} url={item.disposalFile} />
+                                    : <Button type="primary" size="small" onClick={() => downloadFile(item.disposalFile)}>预览</Button>
+                                ),
+                              },
                             ]
                           : []),
                         {
@@ -241,7 +250,14 @@ function HiddenInfo(props) {
                         ...(item.state === 3
                           ? [
                               { label: "处置方案", children: item.disposalPlan },
-                            { label: "处置方案附件", children: <PreviewPdf name={getFileName(item.disposalFile)} url={item.disposalFile} /> },
+                              {
+                                label: "处置方案附件",
+                                children: (
+                                  getFileSuffix(item.disposalFile) === "pdf"
+                                    ? <PreviewPdf name={getFileName(item.disposalFile)} url={item.disposalFile} />
+                                    : <Button type="primary" size="small" onClick={() => downloadFile(item.disposalFile)}>预览</Button>
+                                ),
+                              },
                               { label: "是否更换整改负责人", children: item.rectifyUserCO && Object.keys(item.rectifyUserCO).length > 0 ? "是" : "否" },
                               ...(
                                 item.rectifyUserCO && Object.keys(item.rectifyUserCO).length > 0

components/Pdf/index.d.ts

@@ -3,6 +3,8 @@ import type { CSSProperties, FC } from "react";
 export interface PdfProps {
   /** pdf 文件地址 */
   file: string;
+  /** pdf 文件名 */
+  name?: string;
   /** 是否显示弹窗 */
   visible?: boolean;
   /** 关闭弹窗的方法 */

components/Pdf/index.js

@@ -1,6 +1,7 @@
-import { Button, message, Modal, Spin } from "antd";
+import { message, Modal, Spin } from "antd";
 import { useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
+import useDownloadFile from "../../hooks/useDownloadFile";
 import { getFileUrl } from "../../utils/index";
 
 /**
@@ -11,6 +12,7 @@ function Pdf(props) {
     visible = false,
     onCancel,
     file,
+    name,
     inline = false,
     style = {},
   } = props;
@@ -70,6 +72,21 @@ function Pdf(props) {
     return renderPdfContent();
   }
 
+  const { loading: downloadFileLoading, downloadFile } = useDownloadFile();
+
+  const onDownloadFile = () => {
+    Modal.confirm({
+      title: "提示",
+      content: "确定要下载此文件吗？",
+      onOk: () => {
+        downloadFile({
+          url: fileUrl,
+          name,
+        });
+      },
+    });
+  };
+
   // 默认弹窗模式
   return (
     <Modal
@@ -77,7 +94,10 @@ function Pdf(props) {
       width={pdfWidth + 100}
       title="PDF预览"
       onCancel={onCancel}
-      footer={<Button onClick={onCancel}>关闭</Button>}
+      cancelText="关闭"
+      okText="下载"
+      onOk={onDownloadFile}
+      loading={downloadFileLoading}
     >
       {renderPdfContent()}
     </Modal>

components/PreviewPdf/index.js

@@ -15,16 +15,19 @@ const PreviewPdf = (props) => {
   } = props;
 
   const [visible, setVisible] = useState(false);
-  const [src, setSrc] = useState("");
+  const [currentSrc, setCurrentSrc] = useState("");
+  const [currentName, setCurrentName] = useState("");
 
-  const previewPdf = (src) => {
+  const previewPdf = (src, name) => {
     setVisible(true);
-    setSrc(src);
+    setCurrentSrc(src);
+    setCurrentName(name);
   };
 
   const onCancel = () => {
     setVisible(false);
-    setSrc("");
+    setCurrentSrc("");
+    setCurrentName("");
   };
 
   // 单个文件预览模式
@@ -33,13 +36,14 @@ const PreviewPdf = (props) => {
       <>
         <Space>
           <span>{name}</span>
-          <Button type="primary" size="small" onClick={() => previewPdf(url)}>
+          <Button type="primary" size="small" onClick={() => previewPdf(url, name)}>
             预览
           </Button>
         </Space>
         <Pdf
           visible={visible}
-          file={src}
+          file={currentSrc}
+          name={currentName}
           onCancel={onCancel}
         />
       </>
@@ -57,7 +61,7 @@ const PreviewPdf = (props) => {
               <Button
                 type="primary"
                 size="small"
-                onClick={() => previewPdf(item.filePath || item[urlKey])}
+                onClick={() => previewPdf(item.filePath || item[urlKey], item.name || item.fileName || item[nameKey])}
               >
                 预览
               </Button>
@@ -66,7 +70,8 @@ const PreviewPdf = (props) => {
         ))}
         <Pdf
           visible={visible}
-          file={src}
+          file={currentSrc}
+          name={currentName}
           onCancel={onCancel}
         />
       </>