front_library
/
zy-react-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化HiddenInfo、Pdf、PreviewPdf

master
LiuJiaNan 2025-11-08 15:52:06 +08:00
parent 5fd8c36fc2
commit 7b004d00cb
4 changed files with 341 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/HiddenInfo/gwj/index.js
View File

@ -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

2
components/Pdf/index.d.ts vendored
View File

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

24
components/Pdf/index.js
View File

@ -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>

21
components/PreviewPdf/index.js
View File

@ -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}
/>
</>