增加错误提醒；增加登陆用户信息

src/stores/Auth.js

@@ -7,7 +7,11 @@ class Auth {
     this.root = root;
   }
 
-  loginUser = 'LiaoYijun(IT)';
+  login = {
+    userId: 1,
+    username: 'LiaoYijun(IT)',
+    travelAgencyId: 628
+  }
 }
 
 export default Auth;

src/stores/Reservation.js

@@ -1,5 +1,5 @@
 import { makeAutoObservable, runInAction } from "mobx";
-import * as req from '@/utils/request';
+import { fetchJSON } from '@/utils/request';
 import { HT_HOST } from "@/config";
 import { prepareUrl } from '@/utils/commons';
 
@@ -11,9 +11,8 @@ class Reservation {
   }
 
   fetchReservation(referenceNo, fromDate, thruDate) {
-    
     const fetchUrl = prepareUrl(HT_HOST + '/service-tourdesign/GetPlanSearchList')
-    .append('VEISn', 628)
+    .append('VEISn', this.root.authStore.login.travelAgencyId)
     .append('GroupNo', referenceNo)
     .append('DateStart', fromDate)
     .append('DataEnd', thruDate)
@@ -22,70 +21,28 @@ class Reservation {
     .append('PageNum', 0)
     .append('PageIndex', 1)
     .build();
-    req.fetchJSON(fetchUrl)
+
-    .then(json => {
+    return fetchJSON(fetchUrl)
-      runInAction(() => {
+      .then(json => {
-        this.reservationList = json.data.map((data, index) => {
+        runInAction(() => {
-          return {
+          if (json.errcode == 0) {
-            key: data.vas_gri_sn,
+            this.reservationList = json.Result.map((data, index) => {
-            id: data.vas_gri_sn,
+              return {
-            referenceNumber: data.GriName,
+                key: data.vas_gri_sn,
-            arrivalDate: data.GetGDate,
+                id: data.vas_gri_sn,
-            pax: data.PersonNum,
+                referenceNumber: data.GriName,
-            status: data.GState,
+                arrivalDate: data.GetGDate,
-            reservationDate: data.GetGDate,
+                pax: data.PersonNum,
-            guide: data.Guide,
+                status: data.GState,
+                reservationDate: data.GetGDate,
+                guide: data.Guide,
+              }
+            });
+          } else {
+            throw new Error(json.errmsg + ': ' + json.errcode);
           }
         });
       });
-    })
-    .then(() => {
-    });
-
-    // runInAction(() => {
-    //   this.reservationList = [
-    //     {
-    //       key: '1',
-    //       id: '1',
-    //       referenceNumber: '111029-N111025076',
-    //       arrivalDate: '2023-04-08',
-    //       pax: '5AD 1CH',
-    //       status: 'Confirm',
-    //       reservationDate: '2023-04-08 19:31',
-    //       guide: 'Bill',
-    //     },
-    //     {
-    //       key: '2',
-    //       id: '3',
-    //       referenceNumber: '111029-N111025076',
-    //       arrivalDate: '2023-04-08',
-    //       pax: '5AD 1CH',
-    //       status: 'Confirm',
-    //       reservationDate: '2023-04-08 19:31',
-    //       guide: 'Jim',
-    //     },
-    //     {
-    //       key: '3',
-    //       id: '3',
-    //       referenceNumber: '111029-N111025076',
-    //       arrivalDate: '2023-05-08',
-    //       pax: '3AD',
-    //       status: 'Confirm',
-    //       reservationDate: '2023-01-08 19:31',
-    //       guide: 'Giffigan',
-    //     },
-    //     {
-    //       key: '3',
-    //       id: '3',
-    //       referenceNumber: '111029-N111025076',
-    //       arrivalDate: '2023-05-08',
-    //       pax: '3AD',
-    //       status: 'Confirm',
-    //       reservationDate: '2023-01-08 19:31',
-    //       guide: 'Laurie Notaro',
-    //     },
-    //   ];
-    // });
   }
 
   reservationList = [];

src/views/App.jsx

@@ -1,7 +1,7 @@
 import { Outlet, Link, useHref, useLocation } from "react-router-dom";
 import { useEffect } from 'react';
 import { observer } from "mobx-react";
-import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col } from 'antd';
+import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, App as AntApp } from 'antd';
 import {
   DownOutlined
 } from '@ant-design/icons';
@@ -64,6 +64,7 @@ function App() {
         algorithm: theme.defaultAlgorithm,
       }}
     >
+      <AntApp>
       <Layout
         style={{
           minHeight: "100vh",
@@ -88,7 +89,7 @@ function App() {
               >
                 <a onClick={(e) => e.preventDefault()}>
                   <Space>
-                    {authStore.loginUser}
+                    {authStore.login.username}
                     <DownOutlined />
                   </Space>
                 </a>
@@ -108,6 +109,7 @@ function App() {
         <Footer>
         </Footer>
       </Layout>
+      </AntApp>
     </ConfigProvider>
   );
 }

src/views/reservation/Newest.jsx

@@ -2,7 +2,7 @@ import { NavLink } 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, DatePicker, Radio, Modal } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App } from 'antd';
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
@@ -64,6 +64,8 @@ function Newest() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedDateRange, onDateRangeChange] = useState([]);
   const [referenceNo, onNumberChange] = useState('');
+  const [tableLoading, setTableLoading] = useState(false);
+  const { notification } = App.useApp();
 
   const showModal = () => {
     setIsModalOpen(true);
@@ -80,9 +82,19 @@ function Newest() {
   }, []);
 
   const onSearchClick = () => {    
-    console.info(selectedDateRange);
+    setTableLoading(true);
-    console.info(referenceNo);
+    reservationStore.fetchReservation(referenceNo, selectedDateRange[0], selectedDateRange[1])
-    reservationStore.fetchReservation(referenceNo, selectedDateRange[0], selectedDateRange[1]);
+      .catch(ex => {
+        notification.error({
+          message: `Notification`,
+          description: ex.message,
+          placement: 'top',
+          duration: 4,
+        });
+      })
+      .finally(() => {
+        setTableLoading(false);
+      });
   }
 
   return (
@@ -196,6 +208,7 @@ function Newest() {
             <Table
               title={() => 'Reservations without the tour guide information will be highlighted in red if the arrival date is within 3 days.'}
               bordered
+              loading={tableLoading}
               pagination={{
                 position: ['bottomCenter'],
                 current: 1,