完成图片显示、上传、预览

src/stores/Feedback.js

@@ -11,6 +11,7 @@ class Feedback {
 
 	loading = false;
 	feedbackList = []; //反馈列表
+	feedbackImages = []; //图片列表
 	feedbackRate = []; //反馈评分
 	feedbackReview = []; //站外好评
 
@@ -50,8 +51,58 @@ class Feedback {
 			.then(json => {
 				console.log(json);
 				runInAction(() => {
-					this.feedbackRate = json.Result[0];
-					this.feedbackReview = json.Result1[0];
+					this.feedbackRate = json.Result;
+					this.feedbackReview = json.Result1;
+				});
+			})
+			.catch(error => {
+				console.log("fetch data failed", error);
+			});
+	}
+
+	//获取供应商提交的图片
+	getFeedbackImages(VEI_SN, GRI_SN) {
+		let url = `/service-fileServer/ListFile`;
+		url += `?GRI_SN=${GRI_SN}&VEI_SN=${VEI_SN}`;
+		fetch(config.HT_HOST + url)
+			.then(response => response.json())
+			.then(json => {
+				console.log(json);
+				runInAction(() => {
+					this.feedbackImages = json.result.map((data, index) => {
+						return {
+							uid: -index, //用负数，防止添加删除的时候错误
+							name: data.file_name,
+							status: "done",
+							url: data.file_url,
+						};
+					});
+				});
+			})
+			.catch(error => {
+				console.log("fetch data failed", error);
+			});
+	}
+
+	//提交供应商反馈信息
+	postFeedbackInfo(VEI_SN, GRI_SN, EOI_SN, info_content) {
+		let url = `/service-fileServer/FeedbackInfo`;
+		let formData = new FormData();
+		formData.append("VEI_SN", VEI_SN);
+		formData.append("GRI_SN", GRI_SN);
+		formData.append("EOI_SN", EOI_SN);
+		formData.append("FeedbackInfo", info_content);
+		fetch(config.HT_HOST + url, {
+			method: "POST",
+			body: formData,
+			headers: new Headers({
+				"Content-Type": "application/x-www-form-urlencoded",
+			}),
+		})
+			.then(response => response.json())
+			.then(json => {
+				console.log(json);
+				runInAction(() => {
 				});
 			})
 			.catch(error => {

src/views/feedback/Detail.jsx

@@ -1,7 +1,7 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { toJS } from "mobx";
+import { toJS, runInAction } from "mobx";
 import moment from "moment";
 import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Modal, Upload, Input } from "antd";
 import { useStore } from "../../stores/StoreContext.js";
@@ -13,13 +13,14 @@ function Detail() {
 	const navigate = useNavigate();
 	const { GRI_SN } = useParams();
 	const { feedbackStore, authStore } = useStore();
-	const { feedbackRate, feedbackReview } = feedbackStore;
+	const { feedbackRate, feedbackReview, feedbackImages } = feedbackStore;
 	const [value, setValue] = useState(3);
 	const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
 
 	useEffect(() => {
 		console.info("Detail.useEffect: " + GRI_SN);
 		feedbackStore.getFeedbackDetail(authStore.login.travelAgencyId, GRI_SN);
+		feedbackStore.getFeedbackImages(authStore.login.travelAgencyId, GRI_SN);
 	}, [GRI_SN]);
 
 	const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : 0;
@@ -30,49 +31,25 @@ function Detail() {
 	const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
 	const PhotoPermission = feedbackRate && feedbackRate.PhotoPermission && feedbackRate.PhotoPermission == "YES" ? true : false;
 	const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";
-
-	const [fileList, setFileList] = useState([
-		{
-			uid: "-1",
-			name: "image.png",
-			status: "done",
-			url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-		},
-		{
-			uid: "-2",
-			name: "image.png",
-			status: "done",
-			url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-		},
-		{
-			uid: "-3",
-			name: "image.png",
-			status: "done",
-			url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-		},
-		{
-			uid: "-4",
-			name: "image.png",
-			status: "done",
-			url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-		},
-	]);
+	const fileList = toJS(feedbackImages);
 
 	const handleChange = info => {
 		console.log(info);
-		// ({ fileList: newFileList }) => setFileList(newFileList)
 		let newFileList = [...info.fileList];
 		newFileList = newFileList.map(file => {
-			if (file.response) {
-				file.url = file.response;
+			if (file.response && file.response.result) {
+				file.url = file.response.result.file_url;
 			}
 			return file;
 		});
-		setFileList(newFileList);
+		runInAction(() => {
+			feedbackStore.feedbackImages = newFileList;
+		});
 	};
 
 	const handRemove = info => {
 		console.log(info);
+		feedbackStore.removeFeedbackImages(info.url);
 		return true;
 	};
 
@@ -171,7 +148,7 @@ function Detail() {
 			<Row gutter={16}>
 				<Col span={4}></Col>
 				<Col span={18}>
-					<Form labelCol={{ span: 5 }}>
+					<Form name="feedback_detail_from" labelCol={{ span: 5 }}>
 						<Divider orientation="left">上传照片</Divider>
 						<Form.Item>
 							<Upload
@@ -191,11 +168,17 @@ function Detail() {
 						</Form.Item>
 
 						<Divider orientation="left">地接社反馈信息</Divider>
-						<Form.Item>
-							<Input.TextArea rows={6}></Input.TextArea>
+						<Form.Item
+							rules={[
+								{
+									required: true,
+                  message: 'Please input your messages!',
+								},
+							]}>
+							<Input.TextArea name="info_content" rows={6}></Input.TextArea>
 						</Form.Item>
 						<Form.Item>
-							<Button type="primary" onClick={() => console.info("submit")}>
+							<Button type="primary" onClick={() =>feedbackStore.postFeedbackInfo()}>
 								Submit
 							</Button>
 						</Form.Item>