查询条件放到Store

src/stores/Reservation.js

@@ -10,13 +10,15 @@ class Reservation {
     this.root = root;
   }
 
-  fetchReservationList(current, referenceNo, fromDate, thruDate) {
+  fetchReservationList(current) {
+    const fromDate = this.arrivalDateRange.length == 0 ? null : this.arrivalDateRange[0].format('YYYY-MM-DD');
+    const thruDate = this.arrivalDateRange.length == 0 ? null : this.arrivalDateRange[1].format('YYYY-MM-DD');
     this.reservationPage.current = current;
     // 设置为 0，后端会重新计算总数，当跳转第 X 页时可用原来的总数。
     const totalNum = current == 1 ? 0 : this.reservationPage.total;
     const fetchUrl = prepareUrl(HT_HOST + '/service-cusservice/GetPlanSearchList')
       .append('VEI_SN', this.root.authStore.login.travelAgencyId)
-      .append('GroupNo', referenceNo)
+      .append('GroupNo', this.referenceNo)
       .append('DateStart', fromDate)
       .append('DateEnd', thruDate)
       .append('TotalNum', totalNum)
@@ -186,11 +188,19 @@ class Reservation {
     this.selectedConfirmation = confirmation;
   }
 
+  updatePropertyValue(name, value) {
+    runInAction(() => {
+      this[name] = value;
+    });
+  }
+
   guideList = [];
   cityList = [];
 
   selectedReservation = null;
   selectedConfirmation = null;
+  arrivalDateRange = [];
+  referenceNo = '';
 
   reservationList = [];
 

src/views/reservation/Newest.jsx

@@ -1,5 +1,5 @@
 import { NavLink } from "react-router-dom";
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
 import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App, Select } from 'antd';
@@ -87,18 +87,18 @@ function Newest() {
       />
     );
   }
+
+	// const href = useHref();
+  // const isMountedRef = useRef(false);
   const { reservationStore } = useStore();
-  const { reservationList, reservationPage, cityList, guideList } = reservationStore;
+  const { reservationList, reservationPage, referenceNo, arrivalDateRange, cityList, guideList } = reservationStore;
   const [isModalOpen, setIsModalOpen] = useState(false);
-  
-	const arrivalDateFrom = dayjs().startOf("M");
-	const arrivalDateThru = dayjs().endOf("M");
-  const [arrivalDateRange, onDateRangeChange] = 
-    useState([arrivalDateFrom.format('YYYY-MM-DD'), arrivalDateThru.format('YYYY-MM-DD')]);
-  const [referenceNo, onNumberChange] = useState('');
   const [dataLoading, setDataLoading] = useState(false);
   const { notification } = App.useApp();
 
+  const arrivalDateFrom = arrivalDateRange.length == 0 ? null : arrivalDateRange[0];
+  const arrivalDateThru = arrivalDateRange.length == 0 ? null : arrivalDateRange[1];
+
   const guideSelectOptions = guideList.map((data, index) => {
     return {
       value: data.guideId,
@@ -108,7 +108,8 @@ function Newest() {
 
   useEffect(() => {
     onSearchClick();
-  }, []);
+    console.info('Newest...');
+  }, [123]);
 
   const showCityGuideModal = (reservation) => {  
     setDataLoading(true);  
@@ -139,7 +140,7 @@ function Newest() {
   
   const onSearchClick = (current=1) => {
     setDataLoading(true);
-    reservationStore.fetchReservationList(current, referenceNo, arrivalDateRange[0], arrivalDateRange[1])
+    reservationStore.fetchReservationList(current)
       .catch(ex => {
         notification.error({
           message: `Notification`,
@@ -189,7 +190,7 @@ function Newest() {
         <Title level={3}>Newest Reservations</Title>
         <Row gutter={{ md: 24 }}>
           <Col span={6}>
-            <Input placeholder="Reference number" onChange={(e) => {onNumberChange(e.target.value)}} />
+            <Input placeholder="Reference number" value={referenceNo} onChange={(e) => { reservationStore.updatePropertyValue('referenceNo', e.target.value)} } />
           </Col>
           <Col span={18}>
             <Space direction="horizontal">
@@ -198,9 +199,9 @@ function Newest() {
                 allowClear={true}
                 inputReadOnly={true}
                 presets={DATE_PRESETS}
-                defaultValue={[arrivalDateFrom, arrivalDateThru]}
+                value={[arrivalDateFrom, arrivalDateThru]}
                 placeholder={['From', 'Thru']}
-                onChange={(date, dateRange) => { onDateRangeChange(dateRange)}}
+                onChange={(dateRange) => { reservationStore.updatePropertyValue('arrivalDateRange', dateRange)}}
               />
               <Button type='primary' onClick={() => onSearchClick()} loading={dataLoading}>Search</Button>
             </Space>