修改计划预览文档

src/stores/Reservation.js

@@ -71,9 +71,6 @@ class Reservation {
             this.reservationDetail = {
               referenceNumber: json.PlanDetail[0].GRI_Name, tourGuide: json.PlanDetail[0].Guide, arrivalDate: json.PlanDetail[0].eoi_getdate
             };
-            this.meetAndGreet = {
-              customerNames: json.JJPInfo[0].CustomerName, referenceNumber: json.JJPInfo[0].GroupName, pax: json.JJPInfo[0].Str_PersonNum
-            };
             this.customerNames = json.CusAndRequest[0].GCI_CustomerList;
             this.confirmationList = json.PlanChange.map((data, index) => {
               return {
@@ -212,10 +209,6 @@ class Reservation {
     referenceNumber: '', arrivalDate: '', tourGuide: ''
   };
 
-  meetAndGreet = {
-    referenceNumber: '', customerNames: '', pax: ''
-  }
-
   reservationPage = {
     current: 1,
     size: 10,

src/views/App.jsx

@@ -34,8 +34,16 @@ function App() {
 	useEffect(() => {
 		// Check location
 		console.info("location.pathname: " + location.pathname);
+    console.info(location.pathname.split('/'));
 	}, [location]);
 
+  const splitPath = location.pathname.split('/');
+  let defaultPath = 'reservation';
+
+  if (splitPath.length > 1) {
+    defaultPath = splitPath[1];
+  }
+
 	const {
 		token: { colorBgContainer },
 	} = theme.useToken();
@@ -60,12 +68,12 @@ function App() {
 								<Menu
 									theme="dark"
 									mode="horizontal"
-									selectedKeys={[href]}
+									selectedKeys={[defaultPath]}
 									items={[
-										{ key: "/reservation/newest", label: <Link to="/reservation/newest">Reservation</Link> },
-										{ key: "/feedback", label: <Link to="/feedback">Feedback</Link> },
-										{ key: "/invoice", label: <Link to="/invoice">Invoice</Link> },
-										{ key: "/notice", label: <Link to="/notice">Notice</Link> },
+										{ key: "reservation", label: <Link to="/reservation/newest">Reservation</Link> },
+										{ key: "feedback", label: <Link to="/feedback">Feedback</Link> },
+										{ key: "invoice", label: <Link to="/invoice">Invoice</Link> },
+										{ key: "notice", label: <Link to="/notice">Notice</Link> },
 									]}
 								/>
 							</Col>

src/views/reservation/Detail.jsx

@@ -2,7 +2,8 @@ import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
-import { Row, Col, Space, Button, Table, Input, Typography, Modal, App } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, Modal, Watermark, App } from 'antd';
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
@@ -76,6 +77,7 @@ function Detail() {
   const [dataLoading, setDataLoading] = useState(false);
   const { itineraryList, customerNames, reservationDetail } = reservationStore;
   const confirmationList = reservationStore.confirmationList;
+	const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }, { uri: "https://www.chinahighlights.com/public/NameCard.doc" }];
 
   const showConfirmModal = (confirm) => { 
     setIsModalOpen(true);
@@ -138,15 +140,25 @@ function Detail() {
       <Button type="link" onClick={() => navigate('/reservation/newest')}>Back</Button>
         </Col>
       </Row>
-      <Row>
+      {/* <Row>
         <Col span={2}>
       <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/print`)}>Booking information</Button>
         </Col>
         <Col span={2}>
       <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/name-card`)}>Name Card</Button>
         </Col>
-      </Row>
+      </Row> */}
       <Row gutter={{ md: 24 }}>
+        <Col span={24}>
+          <Watermark content={["Global Highlights", "Discovery Your Way!"]}>
+            <DocViewer 
+              documents={docs} 
+              pluginRenderers={DocViewerRenderers} 
+              style={{ height: 600 }} />
+          </Watermark>
+        </Col>
+      </Row>
+      {/* <Row gutter={{ md: 24 }}>
         <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
       <Title level={5}>Itinerary Overview</Title>
         <Table 
@@ -164,7 +176,7 @@ function Detail() {
           <TextArea rows={4} value={customerNames} readOnly maxLength={6} />
           </Space>
         </Col>
-      </Row>
+      </Row> */}
       <Row>
         <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
           <Title level={5}>Confirmation</Title>

src/views/reservation/NameCard.jsx

@@ -7,7 +7,6 @@ const { Title } = Typography;
 
 function NameCard() {
   const { reservationStore } = useStore();
-  const { meetAndGreet } = reservationStore;
 	const docs = [{ uri: "https://www.chinahighlights.com/public/NameCard.doc" }];
 
   return (

src/views/reservation/Newest.jsx

@@ -4,6 +4,8 @@ import { observer } from "mobx-react";
 import { toJS } from "mobx";
 import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App, Select } from 'antd';
 import { useStore } from '@/stores/StoreContext.js';
+import { DATE_PRESETS } from "@/config";
+import dayjs from "dayjs";
 
 const { Title } = Typography;
 
@@ -87,6 +89,9 @@ function Newest() {
   const { reservationStore } = useStore();
   const { reservationList, reservationPage, cityList, guideList } = reservationStore;
   const [isModalOpen, setIsModalOpen] = useState(false);
+  
+	const arrivalDateFrom = dayjs().startOf("M");
+	const arrivalDateThru = dayjs().endOf("M");
   const [arrivalDateRange, onDateRangeChange] = useState([]);
   const [referenceNo, onNumberChange] = useState('');
   const [dataLoading, setDataLoading] = useState(false);
@@ -186,6 +191,8 @@ function Newest() {
               <DatePicker.RangePicker
                 allowClear={true}
                 inputReadOnly={true}
+                presets={DATE_PRESETS}
+                value={[arrivalDateFrom, arrivalDateThru]}
                 placeholder={['From', 'Thru']}
                 onChange={(date, dateRange) => { onDateRangeChange(dateRange)}}
               />

src/views/reservation/Print.jsx

@@ -9,7 +9,7 @@ import { useStore } from "../../stores/StoreContext.js";
 function Print() {
 	const navigate = useNavigate();
 	const { reservationId } = useParams();
-	const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }];
+	const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }, { uri: "https://www.chinahighlights.com/public/NameCard.doc" }];
 
 	useEffect(() => {
 		console.info("Detail.useEffect: " + reservationId);
@@ -18,13 +18,6 @@ function Print() {
 	return (
 		<Watermark content={["Global Highlights", "Discovery Your Way!"]}>
 			<DocViewer 
-        config={{
-          header: {
-            disableHeader: true,
-            disableFileName: false,
-            retainURLParams: false,
-          },
-        }}
         documents={docs} 
         pluginRenderers={DocViewerRenderers} 
         style={{ height: 750 }} />