反馈详细页内容显示

src/main.jsx

@@ -42,7 +42,7 @@ const router = createBrowserRouter([
       { path: "reservation/:reservationId/print", element: <ReservationPrint />},
       { path: "reservation/:reservationId/name-card", element: <ReservationNameCard />},
       { path: "feedback", element: <FeedbackIndex />},
-      { path: "feedback/:feedbackId", element: <FeedbackDetail />},
+      { path: "feedback/:GRI_SN", element: <FeedbackDetail />},
     ]
   },
   {

src/stores/Feedback.js

@@ -9,6 +9,11 @@ class Feedback {
 		this.root = root;
 	}
 
+	loading = false;
+	feedbackList = []; //反馈列表
+	feedbackRate = []; //反馈评分
+	feedbackReview = []; //站外好评
+
 	/* 查询地接社的团列表
       地接社sn
       团名
@@ -24,7 +29,7 @@ class Feedback {
 				console.log(json);
 				runInAction(() => {
 					this.feedbackList = json.Result;
-          this.loading = false;
+					this.loading = false;
 				});
 			})
 			.catch(error => {
@@ -33,8 +38,26 @@ class Feedback {
 			});
 	}
 
-	loading = false;
+	/* 查询反馈表信息
-	feedbackList = []; //反馈列表
+      GRI_SN 团SN
+      VEI_SN 供应商SN
+  */
+	getFeedbackDetail(VEI_SN, GRI_SN) {
+		let url = `/service-Cooperate/Cooperate/getFeedbackDetail`;
+		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.feedbackRate = json.Result[0];
+					this.feedbackReview = json.Result1[0];
+				});
+			})
+			.catch(error => {
+				console.log("fetch data failed", error);
+			});
+	}
 }
 
 export default Feedback;

src/views/feedback/Detail.jsx

@@ -1,102 +1,136 @@
 import { useParams, useNavigate } from "react-router-dom";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
 import moment from "moment";
-import { Row, Col, Space, Button, Table, Tag, Typography, DatePicker } from "antd";
+import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Modal, Upload, Input } from "antd";
 import { useStore } from "../../stores/StoreContext.js";
 
-const { Title } = Typography;
+const { Title, Text, Paragraph } = Typography;
-
-const dataSource = [
-	{
-		key: "1",
-		name: "2",
-		age: "二",
-		address: "5月2日",
-	},
-	{
-		key: "2",
-		name: "胡彦祖",
-		age: 42,
-		address: "西湖区湖底公园1号",
-	},
-];
-
-const columns = [
-	{
-		title: "天数",
-		dataIndex: "name",
-		key: "name",
-	},
-	{
-		title: "星期",
-		dataIndex: "age",
-		key: "age",
-	},
-	{
-		title: "日期",
-		dataIndex: "address",
-		key: "address",
-	},
-	{
-		title: "始发城市",
-		dataIndex: "address",
-		key: "address",
-	},
-	{
-		title: "抵达城市",
-		dataIndex: "address",
-		key: "address",
-	},
-	{
-		title: "交通",
-		dataIndex: "address",
-		key: "address",
-	},
-	{
-		title: "酒店",
-		dataIndex: "address",
-		key: "address",
-	},
-	{
-		title: "餐饮 [午、晚]",
-		dataIndex: "address",
-		key: "address",
-	},
-	{
-		title: "景点及旅游服务安排",
-		dataIndex: "address",
-		key: "address",
-	},
-];
 
 function Detail() {
 	const navigate = useNavigate();
-	const { reservationId } = useParams();
+	const { GRI_SN } = useParams();
-	const { reservationStore } = useStore();
+	const { feedbackStore } = useStore();
-	const { reservationList } = reservationStore;
+	const { feedbackRate, feedbackReview } = feedbackStore;
+	const [value, setValue] = useState(3);
+	const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
 
 	useEffect(() => {
-		console.info("Detail.useEffect: " + reservationId);
+		console.info("Detail.useEffect: " + GRI_SN);
-	}, [reservationId]);
+		feedbackStore.getFeedbackDetail(30008, GRI_SN);
+	}, [GRI_SN]);
+
+	const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : 0;
+	const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : 0;
+	const HWO_Car = feedbackRate && feedbackRate.HWO_Car ? feedbackRate.HWO_Car : 0;
+	const HWO_Hotel = feedbackRate && feedbackRate.HWO_Hotel ? feedbackRate.HWO_Hotel : 0;
+	const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : 0;
+	const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
+	const PhotoPermission = feedbackRate && feedbackRate.PhotoPermission && feedbackRate.PhotoPermission == "YES" ? true : false;
 
 	return (
 		<Space direction="vertical" style={{ width: "100%" }}>
-			<Row gutter={{ md: 24 }}>
+			<Row gutter={16}>
 				<Col span={20}>
-					<Title level={4}>Reservation Detail 中华游111029-N111025076</Title>
+					<Title level={4}>Post Survey - Albee221228017</Title>
 				</Col>
 				<Col span={4}>
 					<Button type="link" onClick={() => navigate("/feedback")}>
-						Return
+						Back
 					</Button>
 				</Col>
 			</Row>
-			<Row>
+			<Row gutter={16}>
-				<Col span={24}>
+				<Col span={4}></Col>
-					<Table dataSource={dataSource} columns={columns} />
+				<Col span={18}>
+					<Form labelCol={{ span: 5 }}>
+						<Divider orientation="left">How satisfied were you with your general experience?</Divider>
+						<Form.Item label="Tour Guide Service">
+							<Space>
+								<Rate disabled value={HWO_Guide} />
+								<span className="ant-rate-text">{desc[HWO_Guide]}</span>
+							</Space>
+						</Form.Item>
+
+						<Form.Item label="Driver's Attitude">
+							<Space>
+								<Rate disabled value={HWO_Driver} />
+								<span className="ant-rate-text">{desc[HWO_Driver]}</span>
+							</Space>
+						</Form.Item>
+
+						<Form.Item label="Comfort of the Car/Van">
+							<Space>
+								<Rate disabled value={HWO_Car} />
+								<span className="ant-rate-text">{desc[HWO_Car]}</span>
+							</Space>
+						</Form.Item>
+
+						<Form.Item label="Hotel">
+							<Space>
+								<Rate disabled value={HWO_Hotel} />
+								<span className="ant-rate-text">{desc[HWO_Hotel]}</span>
+							</Space>
+						</Form.Item>
+						<Form.Item label="Activities' Arrangements">
+							<Space>
+								<Rate disabled value={HWO_Activity} />
+								<span className="ant-rate-text">{desc[HWO_Activity]}</span>
+							</Space>
+						</Form.Item>
+						<Divider orientation="left">Would you like to give us permission to use the photos taken by the tour guide(s) during your trip which contain your portrait?</Divider>
+						<Paragraph>
+							{PhotoPermission ? (
+								<>
+									<Radio checked>Yes</Radio>
+									<Radio disabled={true}>No</Radio>
+								</>
+							) : (
+								<>
+									<Radio disabled={true}>Yes</Radio>
+									<Radio checked>No</Radio>
+								</>
+							)}
+						</Paragraph>
+						<Divider orientation="left">Other thoughts you want to share with us:</Divider>
+						<Text>{OtherThoughts}</Text>
+					</Form>
+				</Col>
+				<Col span={4}></Col>
+			</Row>
+			<Row gutter={16}>
+				<Col span={20}>
+					<Title level={4}>地接社的反馈</Title>
+				</Col>
+				<Col span={4}></Col>
+			</Row>
+
+			<Row gutter={16}>
+				<Col span={4}></Col>
+				<Col span={18}>
+					<Form labelCol={{ span: 5 }}>
+						<Divider orientation="left">地接社反馈</Divider>
+						<Form.Item>
+							<Input.TextArea></Input.TextArea>
+						</Form.Item>
+						<Divider orientation="left">上传照片</Divider>
+						<Form.Item label="Tour Guide Service">
+							<Space>
+								<Rate disabled value={HWO_Guide} />
+								<span className="ant-rate-text">{desc[HWO_Guide]}</span>
+							</Space>
+						</Form.Item>
+
+						<Form.Item label="Driver's Attitude">
+							<Space>
+								<Rate disabled value={HWO_Driver} />
+								<span className="ant-rate-text">{desc[HWO_Driver]}</span>
+							</Space>
+						</Form.Item>
+					</Form>
 				</Col>
+				<Col span={4}></Col>
 			</Row>
 		</Space>
 	);

src/views/feedback/Index.jsx

@@ -5,6 +5,7 @@ import { toJS } from "mobx";
 import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio } from "antd";
 import { useStore } from "@/stores/StoreContext.js";
 import * as config from "@/config";
+import * as comm from "@/utils/commons";
 import dayjs from "dayjs";
 
 const { Title } = Typography;
@@ -17,6 +18,7 @@ const feedbackListColumns = [
 	{
 		title: "离团日期",
 		dataIndex: "EOI_Date",
+		render: (text, record) => text,
 	},
 	{
 		title: "城市",
@@ -69,7 +71,7 @@ function Index() {
 					/>
 				</Col>
 				<Col md={24} lg={4} xxl={4}>
-					<Button type="primary" loading={feedbackStore.loading} onClick={() => feedbackStore.searchFeedbackList(32531, referenceNo, selectedDateRange[0], selectedDateRange[1] + " 23:59")}>
+					<Button type="primary" loading={feedbackStore.loading} onClick={() => feedbackStore.searchFeedbackList(30008, referenceNo, selectedDateRange[0], selectedDateRange[1] + " 23:59")}>
 						搜索
 					</Button>
 				</Col>