Haina
/
GHHub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加团计划打印页面

Browse Source
release
Jimmy Liow 2 years ago
parent 12274eb3a3
commit fa19a50d9b
4 changed files with 185 additions and 54 deletions
Show Stats Download Patch File Download Diff File

4
src/main.jsx
Unescape Escape View File

@ -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: <Index /> },
{ path: "reservation/newest", element: <ReservationNewest />},
{ path: "reservation/:reservationId", element: <ReservationDetail />}
{ path: "reservation/:reservationId", element: <ReservationDetail />},
{ path: "reservation/:reservationId/print", element: <ReservationPrint />}
]
},
{

34
src/stores/Reservation.js
Unescape Escape View File

@ -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'
},
];
}

63
src/views/reservation/Detail.jsx
Unescape Escape View File

@ -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() {
<Space direction="vertical" style={{ width: '100%' }}>
<Row gutter={{ md: 24 }}>
<Col span={20}>
<Title level={4}>Reference number: 中华游111029-N111025076; Arrival date: 2023-12-15; Guide: Giffigan</Title>
<Title level={4}>Booking Number: 220629-W220420009; Arrival date: 2023-12-15; Guide: Giffigan</Title>
</Col>
<Col span={4}>
<Button type="link" onClick={() => navigate('/reservation/newest')}>Return</Button>
@ -79,7 +59,7 @@ function Detail() {
</Row>
<Row>
<Col span={2}>
<Button type="link" onClick={() => console.info('')}>Print Reservation</Button>
<Button type="link" onClick={() => navigate(`/reservation/${reservationId}/print`)}>Print Reservation</Button>
</Col>
<Col span={2}>
<Button type="link" onClick={() => console.info('')}>Print Feedback</Button>
@ -88,6 +68,11 @@ function Detail() {
<Button type="link" onClick={() => console.info('')}>Print Customer Card</Button>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={5}>Itinerary Overview</Title>
</Col>
</Row>
<Row>
<Col span={24}>
<Table
@ -101,13 +86,13 @@ function Detail() {
<Row>
<Col span={24}>
<List
header={<Title level={5}>Customer List</Title>}
header={<Title level={5}>Customer Names (Full name as it appears on passport)</Title>}
itemLayout="horizontal"
dataSource={customerList}
renderItem={(item, index) => (
<List.Item>
<List.Item.Meta
title={<a href="https://ant.design">{index + 1}. {item.title}</a>}
title={<span>{index + 1}. {item.title}</span>}
description={item.description}
/>
</List.Item>

138
src/views/reservation/Print.jsx
Unescape Escape View File

@ -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 (
<Space direction="vertical" style={{ width: '100%' }}>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={3}>Booking for Mr. Prasanna Venkatesa Nathan(United States) trip</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Booking Number: 220629-W220420009</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Customer Names (Full name as it appears on passport):</Title>
</Col>
</Row>
<Row>
<Col span={24}>
<List
itemLayout="horizontal"
dataSource={customerList}
renderItem={(item, index) => (
<List.Item>
<List.Item.Meta
title={<span>{index + 1}. {item.title}</span>}
description={item.description}
/>
</List.Item>
)}
/>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Hotels and Room:</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Guide Language: English</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Notes:</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Itinerary Overview:</Title>
</Col>
</Row>
<Row>
<Col span={24}>
<Table
pagination={{
hideOnSinglePage: true
}}
dataSource={itineraryList} columns={itineraryListColumns}
/>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Detailed Tour Itinerary</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Packaged Price Includes:</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Packaged Price Excludes:</Title>
</Col>
</Row>
<Row gutter={{ md: 24 }}>
<Col span={24}>
<Title level={4}>Asia Highlights Contact:</Title>
</Col>
</Row>
</Space>
);
}
export default observer(Print);
Write Preview
Loading…
Cancel
Save