GHHub/src/views/feedback/Detail.jsx

import { useParams, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { observer } from "mobx-react";
import { toJS, runInAction } from "mobx";
import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App } from "antd";
import { useStore } from "../../stores/StoreContext.js";
import { PlusOutlined } from "@ant-design/icons";
const { Title, Text, Paragraph } = Typography;
import * as config from "@/config";

function Detail() {
	const navigate = useNavigate();
	const { GRI_SN } = useParams();
	const { feedbackStore, authStore } = useStore();
	const { feedbackRate, feedbackReview, feedbackImages, feedbackInfo } = feedbackStore;
	const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
	const { notification } = App.useApp();
	const [form] = Form.useForm();

	useEffect(() => {
		console.info("Detail.useEffect: " + GRI_SN);
		feedbackStore.getFeedbackDetail(authStore.login.travelAgencyId, GRI_SN);
		feedbackStore.getFeedbackImages(authStore.login.travelAgencyId, GRI_SN);
		feedbackStore.getFeedbackInfo(authStore.login.travelAgencyId, GRI_SN).then(v => {
			form.setFieldsValue({ info_content: vvvv.EEF_Content });
		});
	}, [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;
	const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";
	const fileList = toJS(feedbackImages);

	const handleChange = info => {
		console.log(info);
		let newFileList = [...info.fileList];
		newFileList = newFileList.map(file => {
			if (file.response && file.response.result) {
				file.url = file.response.result.file_url;
			}
			return file;
		});
		runInAction(() => {
			feedbackStore.feedbackImages = newFileList;
		});
	};

	const handRemove = info => {
		console.log(info);
		feedbackStore.removeFeedbackImages(info.url);
		return true;
	};

	const onFinish = values => {
		console.log("Success:", values);
		if (values) {
			feedbackStore.postFeedbackInfo(feedbackInfo.EEF_VEI_SN, feedbackInfo.EEF_GRI_SN, feedbackInfo.EEF_EOI_SN, values.info_content).then(() => {
				notification.success({
					message: `Notification`,
					description: "提交成功",
					placement: "top",
					duration: 4,
				});
			});
		}
	};

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Row gutter={16}>
				<Col span={20}>
					<Title level={4}>Post Survey - Albee221228017</Title>
				</Col>
				<Col span={4}>
					<Button type="link" onClick={() => navigate("/feedback")}>
						Back
					</Button>
				</Col>
			</Row>
			<Row gutter={16}>
				<Col span={4}></Col>
				<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}>
					<Text>{ECI_Content}</Text>
				</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 name="feedback_detail_from" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
						<Divider orientation="left">上传照片</Divider>
						<Form.Item>
							<Upload
								name="ghhfile"
								accept="image/*"
								multiple={true}
								action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${authStore.login.travelAgencyId}`}
								fileList={fileList}
								listType="picture-card"
								onChange={handleChange}
								onRemove={handRemove}>
								<div>
									<PlusOutlined />
									<div style={{ marginTop: 8 }}>Click to Upload</div>
								</div>
							</Upload>
						</Form.Item>
						<Divider orientation="left">地接社反馈信息</Divider>
						<Form.Item
							name="info_content"
							rules={[
								{
									required: true,
									message: "Please input your messages!",
								},
							]}>
							<Input.TextArea rows={6}></Input.TextArea>
						</Form.Item>
						<Form.Item>
							<Button type="primary" htmlType="submit">
								Submit
							</Button>
						</Form.Item>
					</Form>
				</Col>
				<Col span={4}></Col>
			</Row>
		</Space>
	);
}

export default observer(Detail);