feat: 海外反馈表. 有service Item的版本
Lei OT
2 years ago
parent
acdd26f237
commit
dd201d8b4e
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,197 @@
|
|||||||
|
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, Card } 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, RefNo, CII_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.getCustomerFeedbackDetail(authStore.login.travelAgencyId, GRI_SN, CII_SN);
|
||||||
|
feedbackStore.getFeedbackImages(authStore.login.travelAgencyId, GRI_SN);
|
||||||
|
feedbackStore.getFeedbackInfo(authStore.login.travelAgencyId, GRI_SN).then(v => {
|
||||||
|
form.setFieldsValue({ info_content: v.EEF_Content });
|
||||||
|
});
|
||||||
|
}, [GRI_SN]);
|
||||||
|
|
||||||
|
const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : [];
|
||||||
|
const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : [];
|
||||||
|
const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : [];
|
||||||
|
const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
|
||||||
|
const signatureData = feedbackRate && feedbackRate.signatureData ? feedbackRate.signatureData : "";
|
||||||
|
const PhotoPermission = feedbackRate?.PhotoPermission === 1;
|
||||||
|
const cityName = feedbackRate.cityName;
|
||||||
|
const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";
|
||||||
|
const fileList = toJS(feedbackImages);
|
||||||
|
|
||||||
|
const handleChange = 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 => {
|
||||||
|
return feedbackStore.removeFeedbackImages(info.url);
|
||||||
|
};
|
||||||
|
|
||||||
|
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: "Submit Successful",
|
||||||
|
placement: "top",
|
||||||
|
duration: 4,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Space direction="vertical" style={{ width: "100%" }}>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={20}>
|
||||||
|
|
||||||
|
</Col>
|
||||||
|
<Col span={4}>
|
||||||
|
<Button type="link" onClick={() => navigate("/feedback")}>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={4}></Col>
|
||||||
|
<Col span={18}>
|
||||||
|
<Card type="inner" title={<Title level={4}>Post Survey {RefNo} for {cityName}</Title>}>
|
||||||
|
<Form labelCol={{ span: 5 }}>
|
||||||
|
<Divider orientation="left">How satisfied were you with your tour guide?</Divider>
|
||||||
|
{HWO_Guide.map(ele => (
|
||||||
|
<Form.Item label={ele.Describe} key={ele.id}>
|
||||||
|
<Space>
|
||||||
|
<Rate disabled value={ele.rate} />
|
||||||
|
<span className="ant-rate-text">{desc[ele.rate]}</span>
|
||||||
|
</Space>
|
||||||
|
</Form.Item>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<Divider orientation="left">How about the Driver and Car/Van?</Divider>
|
||||||
|
{HWO_Driver.map(ele => (
|
||||||
|
<Form.Item label={ele.Describe} key={ele.id}>
|
||||||
|
<Space>
|
||||||
|
<Rate disabled value={ele.rate} />
|
||||||
|
<span className="ant-rate-text">{desc[ele.rate]}</span>
|
||||||
|
</Space>
|
||||||
|
</Form.Item>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<Divider orientation="left">General Experience with:</Divider>
|
||||||
|
{HWO_Activity.map(ele => (
|
||||||
|
<Form.Item label={ele.Describe} key={ele.id}>
|
||||||
|
<Space>
|
||||||
|
<Rate disabled value={ele.rate} />
|
||||||
|
<span className="ant-rate-text">{desc[ele.rate]}</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>
|
||||||
|
<Divider orientation="left">Signature:</Divider>
|
||||||
|
<img id="signature-img" alt="customer signature" title="customer signature" src={signatureData} />
|
||||||
|
|
||||||
|
</Form></Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={4}></Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={4}></Col>
|
||||||
|
<Col span={18}>
|
||||||
|
<Card type="inner" title={<Title level={4}>External Reviews</Title>}>
|
||||||
|
<Text>{ECI_Content}</Text>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={4}></Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={4}></Col>
|
||||||
|
<Col span={18}>
|
||||||
|
<Card type="inner" title={<Title level={4}>Feedback from local agent</Title>}>
|
||||||
|
<Form name="feedback_detail_from" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
|
||||||
|
<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}&token=${authStore.login.token}`}
|
||||||
|
fileList={fileList}
|
||||||
|
listType="picture-card"
|
||||||
|
onChange={handleChange}
|
||||||
|
onRemove={handRemove}>
|
||||||
|
<div>
|
||||||
|
<PlusOutlined />
|
||||||
|
<div style={{ marginTop: 8 }}>Upload photos</div>
|
||||||
|
</div>
|
||||||
|
</Upload>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="info_content"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "Please input your messages!",
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Input.TextArea rows={6} placeholder="Any feedback for this group you would like to send to Asia Highlights"></Input.TextArea>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={4}></Col>
|
||||||
|
</Row>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default observer(Detail);
|
||||||
Loading…
Reference in New Issue