feat

src/pages/Container/Supervision/EvalReportDatabase/components/SpotCheckDetailModal.jsx

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

src/pages/Container/Supervision/EvalReportDatabase/index.js

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