解决invoice的图片显示问题

src/views/invoice/Detail.jsx

@@ -5,17 +5,17 @@ import { PlusOutlined } from "@ant-design/icons";
 import { isNotEmpty } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
-import { fetchInvoiceDetail, postEditInvoiceDetail, postAddInvoice } from '@/stores/Invoice';
-import { removeFeedbackImages } from '@/stores/Feedback';
-import BackBtn from '@/components/BackBtn';
+import { fetchInvoiceDetail, postEditInvoiceDetail, postAddInvoice } from "@/stores/Invoice";
+import { removeFeedbackImages } from "@/stores/Feedback";
+import BackBtn from "@/components/BackBtn";
 import { usingStorage } from "@/hooks/usingStorage";
 
-const { Title,Text } = Typography;
+const { Title, Text } = Typography;
 
 function Detail() {
 	const navigate = useNavigate();
 	const { GMDSN, GSN } = useParams();
-  const {userId, travelAgencyId, loginToken} = usingStorage();
+	const { userId, travelAgencyId, loginToken } = usingStorage();
 	const [form] = Form.useForm();
 	const [dataLoading, setDataLoading] = useState(false);
 	const [edited, setEdited] = useState(true); //表单是否允许编辑
@@ -24,13 +24,13 @@ function Detail() {
 
 	const [invoicePicList, setInvoicePicList] = useState([]);
 
-  const [invoiceZDDetail, setInvoiceZDDetail] = useState([]);
-  const [invoiceCurrencyList, setInvoiceCurrencyList] = useState([]);
-  const [invoiceProductList, setInvoiceProductList] = useState([]);
-  const [invoiceGroupInfo, setInvoiceGroupInfo] = useState({});
+	const [invoiceZDDetail, setInvoiceZDDetail] = useState([]);
+	const [invoiceCurrencyList, setInvoiceCurrencyList] = useState([]);
+	const [invoiceProductList, setInvoiceProductList] = useState([]);
+	const [invoiceGroupInfo, setInvoiceGroupInfo] = useState({});
 
-  const [invoiceFormData, setInvoiceFormData] = useState({});
-  const [invoicekImages, setInvoicekImages] = useState([]);
+	const [invoiceFormData, setInvoiceFormData] = useState({});
+	const [invoicekImages, setInvoicekImages] = useState([]);
 
 	useEffect(() => {
 		console.info("Detail.useEffect: " + GMDSN + "/" + GSN);
@@ -40,12 +40,12 @@ function Detail() {
 	function defaultShow() {
 		setDataLoading(true);
 
-			fetchInvoiceDetail(travelAgencyId, GMDSN, GSN)
+		fetchInvoiceDetail(travelAgencyId, GMDSN, GSN)
 			.then(json => {
-        setInvoiceZDDetail(json.invoiceZDDetail);
-        setInvoiceGroupInfo(json.invoiceGroupInfo);
-        setInvoiceProductList(json.invoiceProductList);
-        setInvoiceCurrencyList(json.invoiceCurrencyList);
+				setInvoiceZDDetail(json.invoiceZDDetail);
+				setInvoiceGroupInfo(json.invoiceGroupInfo);
+				setInvoiceProductList(json.invoiceProductList);
+				setInvoiceCurrencyList(json.invoiceCurrencyList);
 
 				let ZDDetail = json.invoiceZDDetail;
 				if (isNotEmpty(ZDDetail)) {
@@ -53,8 +53,8 @@ function Detail() {
 					const formData = ZDDetail.map((data, index) => {
 						if (data.GMD_Dealed == false && arrLen == index + 1) {
 							//只有最后一条账单未审核通过才显示
-              const _formData = { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "", info_gmdsn: data.GMD_SN };
-              setInvoiceFormData(_formData);
+							const _formData = { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "", info_gmdsn: data.GMD_SN };
+							setInvoiceFormData(_formData);
 							return _formData;
 						}
 					});
@@ -79,7 +79,7 @@ function Detail() {
 							});
 						}
 						if (data.GMD_Dealed == false && arrLen == index + 1) {
-              setInvoicekImages(picList);
+							setInvoicekImages(picList);
 						}
 						return picList;
 					});
@@ -99,7 +99,7 @@ function Detail() {
 			});
 	}
 
-	const fileList = (invoicekImages);
+	const fileList = invoicekImages;
 	//图片列表
 	let arrimg = [];
 	if (isNotEmpty(fileList)) {
@@ -120,8 +120,8 @@ function Detail() {
 		if (fieldVaule) {
 			postEditInvoiceDetail(userId, fieldVaule.info_gmdsn, fieldVaule.info_Currency, fieldVaule.info_money, fieldVaule.info_date, fieldVaule.info_images, "").then(data => {
 				// console.log(data);
-					let param = { info_money: fieldVaule.info_money, info_Currency: fieldVaule.info_Currency, info_date: fieldVaule.info_date };
-          setInvoiceFormData(param);
+				let param = { info_money: fieldVaule.info_money, info_Currency: fieldVaule.info_Currency, info_date: fieldVaule.info_date };
+				setInvoiceFormData(param);
 				if (data.errcode == 0) {
 					setEdited(true);
 					notification.success({
@@ -144,7 +144,7 @@ function Detail() {
 			}
 			return file;
 		});
-    setInvoicekImages(newFileList);
+		setInvoicekImages(newFileList);
 	};
 
 	const handRemove = info => {
@@ -167,7 +167,7 @@ function Detail() {
 	}
 
 	function addInvoice() {
-			postAddInvoice(userId, travelAgencyId, GSN, "", 0, "", "[]", "")
+		postAddInvoice(userId, travelAgencyId, GSN, "", 0, "", "[]", "")
 			.then(data => {})
 			.finally(() => {
 				defaultShow();
@@ -193,20 +193,20 @@ function Detail() {
 		}
 	}
 
-  const invoiceStatus = (FKState) => {
+	const invoiceStatus = FKState => {
 		switch (FKState - 1) {
-      case 1:
-        return 'Submitted';
-      case 2:
-        return 'Travel Advisor';
-      case 3:
-        return 'Finance Dept';
-      case 4:
-        return 'Paid';
-      default:
-        return '';
-    }
-  };
+			case 1:
+				return "Submitted";
+			case 2:
+				return "Travel Advisor";
+			case 3:
+				return "Finance Dept";
+			case 4:
+				return "Paid";
+			default:
+				return "";
+		}
+	};
 
 	//循环生成多次报账信息
 	function bindSubmitForm() {
@@ -218,7 +218,7 @@ function Detail() {
 						<Row key={data.GMD_SN} gutter={16}>
 							<Col span={4}></Col>
 							<Col span={16}>
-								<Card type="inner" title={"Invoice " + ++index}>
+								<Card type="inner" title={"Invoice " + (index + 1)}>
 									<Row gutter={16}>
 										<Col span={12}>
 											<Descriptions column={1}>
@@ -232,13 +232,15 @@ function Detail() {
 											<Image.PreviewGroup>
 												{invoicePicList[index] &&
 													invoicePicList[index].map(item => {
-														return <Image key={item.uid} width={90} src={item.url} />;
+														if (item.url) {
+															return <Image key={item.uid} width={90} src={item.url} />;
+														}
 													})}
 											</Image.PreviewGroup>
 										</Col>
 									</Row>
 								</Card>
-								{addButton(index++ == invoiceZDDetail.length)}
+								{addButton(index + 1 == invoiceZDDetail.length)}
 							</Col>
 							<Col span={4}></Col>
 						</Row>
@@ -251,7 +253,7 @@ function Detail() {
 							<Col span={16}>
 								<Card
 									type="inner"
-									title={"Invoice " + ++index}
+									title={"Invoice " + (index + 1)}
 									extra={
 										<Button type="link" onClick={() => setEdited(false)}>
 											Edit
@@ -283,21 +285,25 @@ function Detail() {
 													]}>
 													<Select placeholder="Select Currency type" onChange={onCurrencyChange} options={bindCurrency()}></Select>
 												</Form.Item>
-												<Form.Item name="info_date" label="Due Month"
+												<Form.Item
+													name="info_date"
+													label="Due Month"
 													rules={[
 														{
-															required:true,
-															message:"please select Due Month!",
+															required: true,
+															message: "please select Due Month!",
 														},
-													]}
-												>
+													]}>
 													<DatePicker picker="month" />
 												</Form.Item>
-												<Text type="secondary">Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the travel advisor. </Text>
+												<Text type="secondary">
+													Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the
+													travel advisor.{" "}
+												</Text>
 												<Form.Item name="info_gmdsn" hidden={true}>
 													<input />
 												</Form.Item>
-												<br/>
+												<br />
 												<Form.Item>
 													<Button type="primary" htmlType="submit">
 														Submit
@@ -314,8 +320,7 @@ function Detail() {
 														listType="picture-card"
 														onChange={handleChange}
 														onRemove={handRemove}
-														accept=".jpg,.png,.peg,.bmp"
-														>
+														accept=".jpg,.png,.peg,.bmp">
 														<div>
 															<PlusOutlined />
 															<div style={{ marginTop: 8 }}>Upload Invoice</div>
@@ -352,7 +357,7 @@ function Detail() {
 						<Title level={4}>Reference Number: {invoiceGroupInfo.VGroupInfo}</Title>
 					</Col>
 					<Col span={4}>
-            <BackBtn />
+						<BackBtn />
 					</Col>
 				</Row>
 				<Title level={5}></Title>
@@ -362,4 +367,4 @@ function Detail() {
 	);
 }
 
-export default (Detail);
+export default Detail;