120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
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;
|