处理分页逻辑

src/stores/Reservation.js

@@ -17,7 +17,7 @@ class Reservation {
       .append('GroupNo', referenceNo)
       .append('DateStart', fromDate)
       .append('DateEnd', thruDate)
-      .append('TotalNum', this.reservationPage.total)
+      .append('TotalNum', 0)
       .append('PageSize', this.reservationPage.size)
       .append('PageIndex', this.reservationPage.current)
       .build();
@@ -29,13 +29,13 @@ class Reservation {
             this.reservationList = json.Result.map((data, index) => {
               return {
                 key: data.vas_gri_sn,
-                id: data.vas_gri_sn,
+                referenceId: data.vas_gri_sn,
                 referenceNumber: data.GriName,
                 arrivalDate: data.GetGDate,
                 pax: data.PersonNum,
                 status: data.GState,
                 reservationDate: data.GetGDate,
-                guide: data.Guide,
+                guide: data.Guide
               }
             });
             this.reservationPage.total = json.Result[0].RsTotal;
@@ -80,6 +80,34 @@ class Reservation {
       });
   }
 
+  fetchCityList(reservationId) {
+    const fetchUrl = prepareUrl(HT_HOST + '/service-cusservice/PTGetCityGuide')
+      .append('VEI_SN', this.root.authStore.login.travelAgencyId)
+      .append('GRI_SN', reservationId)
+      .append('LGC', 1)
+      .build();
+
+    return fetchJSON(fetchUrl)
+      .then(json => {
+        runInAction(() => {
+          if (json.errcode == 0) {
+            this.cityList = json.Result.map((data, index) => {
+              return {
+                key: data.CII_SN,
+                cityName: data.CityName,
+                tourGuideId: data.TGI_SN,
+                tourGuide: data.GuideName,
+              }
+            });
+          } else {
+            throw new Error(json.errmsg + ': ' + json.errcode);
+          }
+        });
+      });
+  }
+
+  cityList = [];
+
   reservationList = [];
 
   reservationDetail = {

src/views/reservation/Newest.jsx

@@ -43,31 +43,45 @@ function Newest() {
     },
   ];
   
-  function guideRender(text, record) {
+  function guideRender(text, reservation) {
-    if (record.guide === '') {
+    if (reservation.guide === '') {
       return (
         <Space size="middle">
-          <Button type="link" onClick={() => showModal()}>Fill in</Button>
+          <Button type="link" onClick={() => showModal(reservation)}>Fill in</Button>
         </Space>
       );
     } else {
       return (
         <Space size="middle">
-          <span>{record.guide}</span>
+          <span>{reservation.guide}</span>
-          <Button type="link" onClick={() => showModal()}>Modify</Button>
+          <Button type="link" onClick={() => showModal(reservation)}>Modify</Button>
         </Space>
       );
     }
   }
   const { reservationStore } = useStore();
-  const { reservationList, reservationPage } = reservationStore;
+  const { reservationList, reservationPage, cityList } = reservationStore;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [arrivalDateRange, onDateRangeChange] = useState([]);
   const [referenceNo, onNumberChange] = useState('');
   const [dataLoading, setDataLoading] = useState(false);
   const { notification } = App.useApp();
 
-  const showModal = () => {
+  const showModal = (reservation) => {
+    console.info(reservation);
+    
+    reservationStore.fetchCityList(reservation.referenceId)
+      .catch(ex => {
+        notification.error({
+          message: `Notification`,
+          description: ex.message,
+          placement: 'top',
+          duration: 4,
+        });
+      })
+      .finally(() => {
+        setDataLoading(false);
+      });
     setIsModalOpen(true);
   };
   const handleOk = () => {
@@ -104,27 +118,20 @@ function Newest() {
             <Col span={24}>
               <Table
                 bordered
-                pagination={{
+                pagination={false}
-                  hideOnSinglePage: true
-                }}
                 columns={[
                   {
                     title: 'City',
-                    dataIndex: 'city',
+                    dataIndex: 'cityName',
-                    key: 'city'
+                    key: 'cityName'
                   },
                   {
                     title: 'Tour Guide',
-                    dataIndex: 'guide',
+                    dataIndex: 'tourGuide',
-                    key: 'guide'
+                    key: 'tourGuide'
-                  }
-                ]}
-                dataSource={[
-                  {
-                    city: 'Guilin',
-                    guide: 'Giffigan'
                   }
                 ]}
+                dataSource={toJS(cityList)}
               />
             </Col>
           </Row>