3.10 工程代码同步master

src/utils/PdfModal/PdfModal.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Button } from 'antd';
+import PDF from 'react-pdf-js';
+import ProCard from '@ant-design/pro-card';
+import FileDown from '@/utils/Download';
+import { checkFileExist } from './service';
+/**
+ * Pdf Modal弹窗公共组件
+ * 2021.8.25 zhoujianlong 根据定标结果通知书的弹出窗口改造初始版本，增加备注
+ */
+interface PdfModalProps {
+  fileId: string; //文档中心id
+  downLoadFileName: string; //下载后的文件名称
+  modalVisible: boolean; //Modal 弹出还是关闭
+  onCancel: () => void; //关闭Modal方法
+}
+
+const PdfModal: React.FC<PdfModalProps> = (props) => {
+  const { fileId, downLoadFileName, modalVisible, onCancel } = props;
+  const [page, setPage] = useState<number>(1); //页码
+  const [pages, setPages] = useState<number>(0); //总页数
+  const [fileExist, setFileExist] = useState<string>('0'); //0：未验证，1：验证后有，2：验证后没有
+
+  useEffect(() => {
+    //判断文件是否存在
+    checkFileExist(fileId).then((res) => {
+      if (res !== undefined && res.length > 0) {
+        setFileExist('1');
+      } else {
+        setFileExist('2');
+      }
+    });
+  }, [fileId]);
+
+  //文档总页码
+  const onDocumentComplete = (pages: any) => {
+    setPage(1);
+    setPages(pages);
+  };
+
+  //上一页
+  const handlePrevious = () => {
+    setPage(page - 1);
+  };
+
+  //下一页
+  const handleNext = () => {
+    setPage(page + 1);
+  };
+
+  //下载链接
+  const downLoadFile = (fileId: string) => {
+    const returnUrl = '/api/core-service-ebtp-updownload/v1/attachment/download/bid/' + fileId;
+    return returnUrl;
+  };
+
+  const modalHeight = (window.innerHeight * 96) / 100;
+
+  return (
+    <Modal
+      destroyOnClose
+      visible={modalVisible}
+      title="预览"
+      onCancel={() => onCancel()}
+      width={'80%'}
+      centered
+      style={{ maxHeight: modalHeight }}
+      bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto' }}
+      footer={[
+        <>
+          <Button key="close" onClick={() => onCancel()}>
+            关闭
+          </Button>
+          {fileExist == '1' ? (
+            <>
+              <Button disabled={page === pages} key="nextBtn" onClick={() => handleNext()}>
+                {' '}
+                下一页
+              </Button>
+              <Button disabled={page === 1} key="preBtn" onClick={() => handlePrevious()}>
+                {' '}
+                上一页
+              </Button>
+              <FileDown
+                key="downLoadFile"
+                type="pdf"
+                apiUrl={downLoadFile(fileId)}
+                style={{ float: 'left' }}
+                fileName={downLoadFileName}
+                btnName="下载"
+                method="GET"
+                form={null}
+              />
+            </>
+          ) : null}
+        </>,
+      ]}
+    >
+      <ProCard layout="center" direction="column" ghost>
+        {fileExist == '0' ? (
+          <div />
+        ) : fileExist == '1' ? (
+          <>
+            <PDF
+              file={downLoadFile(fileId)}
+              scale={1.6}
+              onDocumentComplete={onDocumentComplete}
+              page={page}
+            />
+          </>
+        ) : (
+          <span>对不起，您所查看的文件不存在，请与系统管理员联系！</span>
+        )}
+      </ProCard>
+    </Modal>
+  );
+};
+
+export default PdfModal;

src/utils/PdfModal/service.ts

@@ -0,0 +1,8 @@
+import request from "@/utils/request";
+
+//检验文档中心是否存在该文档
+export async function checkFileExist(fileId?:any) {
+    return request('/api/core-service-ebtp-updownload/v1/attachment/find/bid/'+fileId,{
+        method:'GET' ,
+    })
+}