feat
parent
c05a311bd6
commit
c3a5f1f75f
|
|
@ -0,0 +1,163 @@
|
|||
import { Button, Modal, Space, message } from "antd";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
/** 原型 .reg-modal-section */
|
||||
const ModalSection = ({ title, desc, children }) => (
|
||||
<div className="redb-modal-section">
|
||||
<h4>{title}</h4>
|
||||
{desc ? <p>{desc}</p> : null}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
/** 原型 tableHtml：字段表 / 数据表；kv=字段-内容两列表 */
|
||||
const ProtoTable = ({ headers, rows, kv = false }) => (
|
||||
<div className={`redb-data-table${kv ? " redb-data-table-kv" : ""}`}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{headers.map((h) => (
|
||||
<th key={h}>{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, idx) => (
|
||||
<tr key={idx}>
|
||||
{row.map((cell, cIdx) => (
|
||||
<td key={cIdx}>{cell}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
const getFileExtLabel = (name = "") => {
|
||||
const ext = String(name).split(".").pop();
|
||||
return ext && ext !== name ? ext.toUpperCase() : "PDF";
|
||||
};
|
||||
|
||||
/** 解析存储的 JSON 文件列表字符串，返回数组 */
|
||||
const parseFileList = (jsonStr) => {
|
||||
if (!jsonStr) return [];
|
||||
try {
|
||||
const arr = JSON.parse(jsonStr);
|
||||
return Array.isArray(arr) ? arr : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
/** 单文件本地下载 */
|
||||
const downloadFileByUrl = async (fileUrl, fileName) => {
|
||||
const response = await fetch(fileUrl, {
|
||||
headers: { token: sessionStorage.getItem("token") || "" },
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const blob = await response.blob();
|
||||
const blobUrl = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = blobUrl;
|
||||
link.download = fileName || "报告文件";
|
||||
link.style.display = "none";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(blobUrl);
|
||||
};
|
||||
|
||||
/**
|
||||
* 抽检报告详情弹窗：直接用抽检接口返回的行数据展示，不调详情接口
|
||||
*/
|
||||
const SpotCheckDetailModal = ({ open, record, onCancel }) => {
|
||||
const detailData = record || {};
|
||||
|
||||
const handleFileDownload = (fileUrl, fileName) => {
|
||||
if (!fileUrl) {
|
||||
message.warning("文件地址不存在");
|
||||
return;
|
||||
}
|
||||
const hide = message.loading("正在下载...", 0);
|
||||
downloadFileByUrl(fileUrl, fileName)
|
||||
.then(() => message.success("下载已开始"))
|
||||
.catch(() => message.error("下载失败，请稍后重试"))
|
||||
.finally(() => hide());
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`查看安全评价报告 - ${detailData.reportNo || ""}`}
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
width={980}
|
||||
destroyOnClose
|
||||
className="redb-modal"
|
||||
footer={
|
||||
<Space>
|
||||
<Button onClick={onCancel}>关闭</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<ModalSection
|
||||
title="报告基本信息"
|
||||
desc="展示评价机构上传的正式安全评价报告信息。"
|
||||
>
|
||||
<ProtoTable
|
||||
kv
|
||||
headers={["字段", "内容"]}
|
||||
rows={[
|
||||
["报告编号", detailData.reportNo || "-"],
|
||||
["报告名称", detailData.reportName || "-"],
|
||||
["评价机构", detailData.orgName || "-"],
|
||||
|
||||
["评价类型", detailData.evalTypeName || "-"],
|
||||
["所属行业", detailData.industryName || "-"],
|
||||
[
|
||||
"签发日期",
|
||||
detailData.issueDate
|
||||
? dayjs(detailData.issueDate).format("YYYY-MM-DD")
|
||||
: "-",
|
||||
],
|
||||
[
|
||||
"报送时间",
|
||||
detailData.archiveTime
|
||||
? dayjs(detailData.archiveTime).format("YYYY-MM-DD HH:mm")
|
||||
: "-",
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</ModalSection>
|
||||
<ModalSection title="报告文件" desc="支持在线查看和下载正式报告。">
|
||||
<ProtoTable
|
||||
headers={["文件名称", "文件类型", "版本"]}
|
||||
rows={[
|
||||
[
|
||||
<span
|
||||
style={{ color: "#1677ff", cursor: "pointer" }}
|
||||
onClick={() =>
|
||||
handleFileDownload(
|
||||
detailData.fileUrl,
|
||||
detailData.fileName ||
|
||||
detailData.reportName ||
|
||||
"正式安全评价报告.pdf",
|
||||
)
|
||||
}
|
||||
>
|
||||
{detailData.fileName ||
|
||||
detailData.reportName ||
|
||||
"正式安全评价报告.pdf"}
|
||||
</span>,
|
||||
getFileExtLabel(detailData.fileName),
|
||||
"V1.0",
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</ModalSection>
|
||||
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpotCheckDetailModal;
|
||||
|
|
@ -24,6 +24,7 @@ import { NS_REGULATOR_EVAL_REPORT, NS_ORG_INFO } from "~/enumerate/namespace";
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { tools } from "@cqsjjb/jjb-common-lib";
|
||||
import { renderDocxBlob, fillDocxTemplate } from "~/utils/fillDocxTemplate";
|
||||
import SpotCheckDetailModal from "./components/SpotCheckDetailModal";
|
||||
import dayjs from "dayjs";
|
||||
import "./index.less";
|
||||
|
||||
|
|
@ -266,6 +267,8 @@ const EvalReportDatabase = (props) => {
|
|||
const [orgOptions, setOrgOptions] = useState([]);
|
||||
const [spotCheckForm] = Form.useForm();
|
||||
const [viewChecklistLoading, setViewChecklistLoading] = useState(false);
|
||||
const [spotDetailVisible, setSpotDetailVisible] = useState(false);
|
||||
const [spotDetailData, setSpotDetailData] = useState(null);
|
||||
|
||||
const {
|
||||
regulatorEvalReportPageLoading,
|
||||
|
|
@ -506,6 +509,12 @@ const EvalReportDatabase = (props) => {
|
|||
}
|
||||
};
|
||||
|
||||
/** 抽检报告详情：直接用行数据展示，不调接口 */
|
||||
const handleViewSpotDetail = (record) => {
|
||||
setSpotDetailData(record);
|
||||
setSpotDetailVisible(true);
|
||||
};
|
||||
|
||||
const handleDownloadOne = async (record) => {
|
||||
let fileUrl = record.fileUrl;
|
||||
let fileName = record.fileName || record.reportName || "报告文件";
|
||||
|
|
@ -1573,7 +1582,7 @@ const EvalReportDatabase = (props) => {
|
|||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
onClick={() => handleViewDetail(record)}
|
||||
onClick={() => handleViewSpotDetail(record)}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
|
|
@ -1587,6 +1596,11 @@ const EvalReportDatabase = (props) => {
|
|||
</>
|
||||
)}
|
||||
</Modal>
|
||||
<SpotCheckDetailModal
|
||||
open={spotDetailVisible}
|
||||
record={spotDetailData}
|
||||
onCancel={() => setSpotDetailVisible(false)}
|
||||
/>
|
||||
</PageLayout>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue