增加分页查询功能

src/stores/Reservation.js

@@ -10,16 +10,15 @@ class Reservation {
     this.root = root;
   }
 
-  fetchReservationList(referenceNo, fromDate, thruDate) {
+  fetchReservationList(current, referenceNo, fromDate, thruDate) {
+    this.reservationPage.current = current;
     const fetchUrl = prepareUrl(HT_HOST + '/service-tourdesign/GetPlanSearchList')
       .append('VEI_SN', this.root.authStore.login.travelAgencyId)
       .append('GroupNo', referenceNo)
       .append('DateStart', fromDate)
       .append('DateEnd', thruDate)
-    .append('ReTotal', 0)
-    .append('PageSize', 0)
-    .append('PageNum', 0)
-    .append('PageIndex', 1)
+      .append('PageNum', this.reservationPage.size)
+      .append('PageIndex', this.reservationPage.current)
       .build();
 
     return fetchJSON(fetchUrl)
@@ -38,6 +37,7 @@ class Reservation {
                 guide: data.Guide,
               }
             });
+            this.reservationPage.total = json.Result[0].RsTotal;
           } else {
             throw new Error(json.errmsg + ': ' + json.errcode);
           }
@@ -57,7 +57,7 @@ class Reservation {
           if (json.errcode == 0) {
             this.itineraryList = json.VendorTour.map((data, index) => {
               return {
-                key: data.GRD_GRI_SN,
+                key: data.GRD_SN,
                 day: data.GRD_OrderDate,
                 placeTransport: data.GRD_Traffic,
                 todayActivities: data.GRD_LandscapeWL,
@@ -89,6 +89,12 @@ class Reservation {
     referenceNumber: '', customerNames: '', pax: ''
   }
 
+  reservationPage = {
+    current: 1,
+    size: 10,
+    total: 0
+  }
+
   itineraryList = [
   ];
 

src/views/reservation/Detail.jsx

@@ -2,9 +2,8 @@ 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, App } from 'antd';
-import { useStore } from '../../stores/StoreContext.js';
+import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
 const { TextArea } = Input;
@@ -82,9 +81,7 @@ function Detail() {
       <Row>
         <Col span={24}>
         <Table 
-          pagination={{
-            hideOnSinglePage: true
-          }}
+          pagination={false}
           dataSource={toJS(itineraryList)} columns={itineraryListColumns} 
         />
         </Col>

src/views/reservation/NameCard.jsx

@@ -1,51 +1,13 @@
-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, Table, Typography, List, Watermark } from 'antd';
-import { useStore } from '../../stores/StoreContext.js';
+import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
 
-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 NameCard() {
-  const navigate = useNavigate();
-  const { reservationId } = useParams();
   const { reservationStore } = useStore();
   const { meetAndGreet } = reservationStore;
 
-  useEffect(() => {
-    console.info('Detail.useEffect: ' + reservationId);
-  }, [reservationId]);
-
   return (
     <Watermark content={['Global Highlights', 'Discovery Your Way!']}>
     <Space direction="vertical" style={{ width: '100%' }}>

src/views/reservation/Newest.jsx

@@ -60,7 +60,7 @@ function Newest() {
     }
   }
   const { reservationStore } = useStore();
-  const { reservationList } = reservationStore;
+  const { reservationList, reservationPage } = reservationStore;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedDateRange, onDateRangeChange] = useState([]);
   const [referenceNo, onNumberChange] = useState('');
@@ -77,9 +77,9 @@ function Newest() {
     setIsModalOpen(false);
   };
   
-  const onSearchClick = () => {    
+  const onSearchClick = (current) => {    
     setTableLoading(true);
-    reservationStore.fetchReservationList(referenceNo, selectedDateRange[0], selectedDateRange[1])
+    reservationStore.fetchReservationList(current, referenceNo, selectedDateRange[0], selectedDateRange[1])
       .catch(ex => {
         notification.error({
           message: `Notification`,
@@ -196,7 +196,7 @@ function Newest() {
             </Space>
           </Col>
           <Col span={14}>
-            <Button type='primary' onClick={() => onSearchClick()}>Search</Button>
+            <Button type='primary' onClick={() => onSearchClick(1)}>Search</Button>
           </Col>
         </Row>
         <Row>
@@ -207,10 +207,12 @@ function Newest() {
               loading={tableLoading}
               pagination={{
                 position: ['bottomCenter'],
-                current: 1,
-                pageSize: 10,
-                total: 200
+                current: reservationPage.current,
+                pageSize: reservationPage.size,
+                total: reservationPage.total,
+                simple: true
               }}
+              onChange={(pagination, filters, sorter, extra) => {onSearchClick(pagination.current);}}
               columns={reservationListColumns} dataSource={toJS(reservationList)}
             />
           </Col>