From fa19a50d9bbcee244b3524850544d93d8a252c91 Mon Sep 17 00:00:00 2001 From: Jimmy Liow <18777396951@163.com> Date: Wed, 19 Apr 2023 11:54:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9B=A2=E8=AE=A1=E5=88=92?= =?UTF-8?q?=E6=89=93=E5=8D=B0=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.jsx | 4 +- src/stores/Reservation.js | 34 ++++---- src/views/reservation/Detail.jsx | 63 ++++++-------- src/views/reservation/Print.jsx | 138 +++++++++++++++++++++++++++++++ 4 files changed, 185 insertions(+), 54 deletions(-) create mode 100644 src/views/reservation/Print.jsx diff --git a/src/main.jsx b/src/main.jsx index e6a42ff..b609443 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -15,6 +15,7 @@ import Index from "@/views/index"; import ErrorPage from "@/views/error-page"; import ReservationNewest from "@/views/reservation/Newest"; import ReservationDetail from "@/views/reservation/Detail"; +import ReservationPrint from "@/views/reservation/Print"; configure({ useProxies: "ifavailable", @@ -33,7 +34,8 @@ const router = createBrowserRouter([ children: [ { index: true, element: }, { path: "reservation/newest", element: }, - { path: "reservation/:reservationId", element: } + { path: "reservation/:reservationId", element: }, + { path: "reservation/:reservationId/print", element: } ] }, { diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js index 6af4d2d..533aae6 100644 --- a/src/stores/Reservation.js +++ b/src/stores/Reservation.js @@ -62,44 +62,50 @@ class Reservation { customerList = [ { title: 'Crane / Gemma Chelse', - description: '性别:男 生日:2002-07-02 国籍:英国 护照号:559489179 护照有效期:2029-03-11', + description: 'Gender: Male Nationality: United States Passport: 655844449 Expiration Date: 2030-09-07 Birth Date: 1979-12-23', }, { title: 'McCracken / Ryan Lee', - description: '性别:男 生日:1964-11-21 国籍:英国 护照号:126793728 护照有效期:2031-08-03', + description: 'Gender: Female Nationality: United States Passport: 655844450 Expiration Date: 2030-09-07 Birth Date: 1983-05-17', }, { title: 'Ramlakhan / Darryl', - description: '性别:男 生日:1983-04-16 国籍:特立尼达和多巴哥 护照号:TB591985 护照有效期:2027-11-12', + description: 'Gender: Female Nationality: United States Passport: 661810034 Expiration Date: 2026-03-16 Birth Date: 2006-07-12', }, { title: 'Ramlakhan / Reanne', - description: '性别:女 生日:1983-12-16 国籍:特立尼达和', + description: 'Gender: Male Nationality: United States Passport: 593422145 Expiration Date: 2023-04-25 Birth Date: 2012-03-26', }, { title: 'Alexander Daich', - description: '性别:男 国籍:以色列', + description: 'Gender: Male Nationality: United States Passport: 593422145 Expiration Date: 2023-04-25 Birth Date: 2012-03-26s', }, ]; itineraryList = [ { key: '1', - name: '2', - age: '二', - address: '5月2日', + day: 'Tue 05-Jul-2022', + placeTransport: 'Bangkok to Chiang Mai, PG217 Dep 12:15 - Arr 13:35 (Economy class)', + todayActivities: 'Hotel to airport Transfer (Bangkok), Airport to Hotel Transfer (Chiang Mai), Street Food Tour in Chiang Mai (Morning or Afternoon)', + accommodation: 'The Rim Resort **** (Dahla Junior Suite)', + meals: 'B,D' }, { key: '2', - name: '2', - age: '三', - address: '5月3日', + day: 'Wed 06-Jul-2022', + placeTransport: 'Chiang Mai', + todayActivities: 'Elephant Jungle Sanctuary Half Day Tour (Private transfer and Join in activity), Chiang Mai City Lifestyle Experiece and Mountain Doi Suthep Half Day Tour with a rickshaw ride', + accommodation: 'The Rim Resort **** (Dahla Junior Suite)', + meals: 'B' }, { key: '3', - name: '3', - age: '新德里（New Delhi）', - address: '新德里苏尔亚酒店The Surya New Delhi', + day: 'Thu 07-Jul-2022', + placeTransport: 'Chiang Mai to Phuket , VZ414 Dep 10:40 - Arr 12:50 (Economy class)', + todayActivities: 'Hotel to airport Transfer (Chiang Mai), Airport to Hotel Transfer (Phuket )', + accommodation: 'Pamookkoo Resort **** (Family room)', + meals: 'B' }, ]; } diff --git a/src/views/reservation/Detail.jsx b/src/views/reservation/Detail.jsx index e667811..4df116f 100644 --- a/src/views/reservation/Detail.jsx +++ b/src/views/reservation/Detail.jsx @@ -11,49 +11,29 @@ const { TextArea } = Input; const itineraryListColumns = [ { - title: '天数', - dataIndex: 'name', - key: 'name', + title: 'Day', + dataIndex: 'day', + key: 'day', }, { - title: '星期', - dataIndex: 'age', - key: 'age', + title: 'Place & Transport', + dataIndex: 'placeTransport', + key: 'placeTransport', }, { - title: '日期', - dataIndex: 'address', - key: 'address', + title: 'Today’s Activities', + dataIndex: 'todayActivities', + key: 'todayActivities', }, { - title: '始发城市', - dataIndex: 'address', - key: 'address', + title: 'Accommodation', + dataIndex: 'accommodation', + key: 'accommodation', }, { - 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: 'Meals', + dataIndex: 'meals', + key: 'meals', }, ]; @@ -71,7 +51,7 @@ function Detail() { - Reference number: 中华游111029-N111025076; Arrival date: 2023-12-15; Guide: Giffigan + Booking Number: 220629-W220420009; Arrival date: 2023-12-15; Guide: Giffigan @@ -79,7 +59,7 @@ function Detail() { - + @@ -88,6 +68,11 @@ function Detail() { + + + Itinerary Overview + + Customer List} + header={Customer Names (Full name as it appears on passport)} itemLayout="horizontal" dataSource={customerList} renderItem={(item, index) => ( {index + 1}. {item.title}} + title={{index + 1}. {item.title}} description={item.description} /> diff --git a/src/views/reservation/Print.jsx b/src/views/reservation/Print.jsx new file mode 100644 index 0000000..90a791e --- /dev/null +++ b/src/views/reservation/Print.jsx @@ -0,0 +1,138 @@ +import { useParams, useNavigate } from "react-router-dom"; +import { useEffect } from 'react'; +import { observer } from "mobx-react"; +import { toJS } from "mobx"; +import moment from "moment"; +import { Row, Col, Space, Button, Table, Input, Typography, List } from 'antd'; +import { useStore } from '../../stores/StoreContext.js'; + +const { Title } = Typography; +const { TextArea } = Input; + +const itineraryListColumns = [ + { + title: 'Day', + dataIndex: 'day', + key: 'day', + }, + { + title: 'Place & Transport', + dataIndex: 'placeTransport', + key: 'placeTransport', + }, + { + title: 'Today’s Activities', + dataIndex: 'todayActivities', + key: 'todayActivities', + }, + { + title: 'Accommodation', + dataIndex: 'accommodation', + key: 'accommodation', + }, + { + title: 'Meals', + dataIndex: 'meals', + key: 'meals', + }, +]; + +function Print() { + const navigate = useNavigate(); + const { reservationId } = useParams(); + const { reservationStore } = useStore(); + const { itineraryList, customerList } = reservationStore; + + useEffect(() => { + console.info('Detail.useEffect: ' + reservationId); + }, [reservationId]); + + return ( + + + + Booking for Mr. Prasanna Venkatesa Nathan(United States) trip + + + + + Booking Number: 220629-W220420009 + + + + + Customer Names (Full name as it appears on passport): + + + + + ( + + {index + 1}. {item.title}} + description={item.description} + /> + + )} + /> + + + + + Hotels and Room: + + + + + Guide Language: English + + + + + Notes: + + + + + Itinerary Overview: + + + + +
+ + + + + Detailed Tour Itinerary + + + + + Packaged Price Includes: + + + + + Packaged Price Excludes: + + + + + Asia Highlights Contact: + + + + + ); +} + +export default observer(Print); \ No newline at end of file