新增查看护照图片页面

src/components/ImageUploader.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Upload, List } from "antd";
+import { Upload, List, Modal } from "antd";
 import { UploadOutlined } from "@ant-design/icons";
 import { Image } from "antd";
 import { fetchJSON } from "@/utils/request";
@@ -108,18 +108,30 @@ const ImageUploader = props => {
 	}, [key]);
 
 	// 处理删除操作
-	const handleDelete = async file => {
+	const handleDelete = file => {
-		const success = await deleteImage(file.encrypt_key);
+		Modal.confirm({
-		if (success) {
+			title: '确认删除',
-			const newImages = fileList.filter(item => item.encrypt_key !== file.encrypt_key);
+			content: '确定要删除这张图片吗？',
-			if (props.onChange) {
+			okText: '确认',
-				props.onChange(newImages);
+			cancelText: '取消',
-			}
+			onOk: async () => {
-			setFileList(newImages);
+				const success = await deleteImage(file.encrypt_key);
-			console.log("删除成功");
+				if (success) {
-		} else {
+					const newImages = fileList.filter(item => item.encrypt_key !== file.encrypt_key);
-			console.error("删除失败");
+					if (props.onChange) {
-		}
+						props.onChange(newImages);
+					}
+					setFileList(newImages);
+					console.log("删除成功");
+				} else {
+					console.error("删除失败");
+				}
+			},
+			onCancel: () => {
+				// 用户点击取消，重新设置fileList以刷新Upload组件
+				setFileList([...fileList]);
+			},
+		});
 	};
 
 	// 处理上传操作

src/main.jsx

@@ -45,6 +45,7 @@ import { isNotEmpty } from '@/utils/commons'
 import ProductsManage from '@/views/products/Manage';
 import ProductsDetail from '@/views/products/Detail';
 import ProductsAudit from '@/views/products/Audit';
+import ImageViewer from '@/views/ImageViewer';
 import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA,PERM_TRAIN_TICKET, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_PUT } from '@/config'
 
 import './i18n'
@@ -102,6 +103,7 @@ const initRouter = async () => {
       children: [
         { path: '/login', element: <Login /> },
         { path: '/logout', element: <Logout /> },
+        { path: '/image-viewer/:GRI_SN/:GRI_No', element: <ImageViewer /> },
       ]
     }
   ])

src/views/ImageViewer.jsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Button, Card, Typography, Space, Alert } from 'antd';
+import { useParams } from 'react-router-dom';
+import ImageUploader from '@/components/ImageUploader';
+
+const { Title, Text } = Typography;
+
+const ImageViewer = () => {
+  const { GRI_SN, GRI_No } = useParams();
+  const [ossKey, setOssKey] = useState('');
+  const [showUploader, setShowUploader] = useState(false);
+
+  useEffect(() => {
+    if (GRI_SN && GRI_No) {
+      const key = `ghh/${GRI_SN}-${GRI_No}/passport_image`;
+      setOssKey(key);
+      setShowUploader(true);
+    }
+  }, [GRI_SN, GRI_No]);
+
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <Title level={2}>{GRI_SN}-{GRI_No}</Title>
+      
+      {showUploader && (
+          <ImageUploader osskey={ossKey} />
+      )}
+
+      {!showUploader && (
+          <Text>无法从URL中提取订单信息</Text>
+      )}
+    </div>
+  );
+};
+
+export default ImageViewer;