feat:完成分页调用新接口

src/stores/Reservation.js

@@ -29,19 +29,17 @@ const useReservationStore = create((set, get) => ({
   ],
 
   fetchReservationList: (travelAgencyId, formVal, current=1) => {
-    const fromDate = null //this.arrivalDateRange.length == 0 ? null : this.arrivalDateRange[0].format('YYYY-MM-DD');
-    const thruDate = null //this.arrivalDateRange.length == 0 ? null : this.arrivalDateRange[1].format('YYYY-MM-DD');
-    // this.reservationPage.current = current;
+    const { reservationPage } = get()
     // 设置为 0，后端会重新计算总数，当跳转第 X 页时可用原来的总数。
-    const totalNum = 0//current == 1 ? 0 : this.reservationPage.total;
+    const totalNum = current == 1 ? 0 : reservationPage.total;
     const fetchUrl = prepareUrl(HT_HOST + '/service-cusservice/GetPlanSearchList')
       .append('VEI_SN', travelAgencyId)
       .append('GroupNo', formVal.referenceNo)
-      .append('DateStart', formVal.fromDate)
-      .append('DateEnd', formVal.thruDate)
+      .append('DateStart', formVal.startdate)
+      .append('DateEnd', formVal.enddate)
       .append('NotConfirm', '')//status)
       .append('TotalNum', totalNum)
-      .append('PageSize', 5)//this.reservationPage.size)
+      .append('PageSize', reservationPage.size)
       .append('PageIndex', current)
       .build();
 
@@ -60,12 +58,12 @@ const useReservationStore = create((set, get) => ({
               guide: data.Guide
             }
           })
-
           set((state) => ({
             reservationList: mapReservationList,
             reservationPage: {
               ...
               state.reservationPage,
+              current: current,
               total: (json?.Result??[{RsTotal: 0}])[0].RsTotal
             }
           }))

src/views/reservation/Newest.jsx

@@ -1,22 +1,18 @@
-import { NavLink, useLocation } from "react-router-dom";
-import { useState, useEffect } from 'react';
-import { observer } from "mobx-react";
-import { toJS } from "mobx";
-import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Modal, App, Select } from 'antd';
-import dayjs from "dayjs";
-import { useStore } from '@/stores/StoreContext.js';
-import { isEmpty, objectMapper } from "@/utils/commons";
-import { useTranslation } from 'react-i18next';
-import usePresets from '@/hooks/usePresets';
+import { NavLink, useLocation } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+import { Row, Col, Space, Button, Table, Typography, Modal, App, Select } from 'antd'
+import dayjs from 'dayjs'
+import { isEmpty } from '@/utils/commons'
+import { useTranslation } from 'react-i18next'
 import useAuthStore from '@/stores/Auth'
+import useFormStore from '@/stores/Form'
 import useReservationStore from '@/stores/Reservation'
-import SearchForm from '@/components/SearchForm';
+import SearchForm from '@/components/SearchForm'
 
-const { Title } = Typography;
+const { Title } = Typography
 
 function Newest() {
-  const { t } = useTranslation();
-  const presets = usePresets();
+  const { t } = useTranslation()
   const reservationListColumns = [
     {
       title: t('group:RefNo'),
@@ -66,17 +62,17 @@ function Newest() {
   function guideRender(text, reservation) {
     if (reservation.guide === '') {
       return (
-        <Space size="middle">
-          <Button type="link" onClick={() => showCityGuideModal(reservation)}>{t('Add')}</Button>
+        <Space size='middle'>
+          <Button type='link' onClick={() => showCityGuideModal(reservation)}>{t('Add')}</Button>
         </Space>
       );
     } else {
       return (
-        <Space size="middle">
+        <Space size='middle'>
           <span>{reservation.guide}</span>
-          <Button type="link" onClick={() => showCityGuideModal(reservation)}>{t('Edit')}</Button>
+          <Button type='link' onClick={() => showCityGuideModal(reservation)}>{t('Edit')}</Button>
         </Space>
-      );
+      )
     }
   }
 
@@ -89,8 +85,8 @@ function Newest() {
         }}
         bordered={false}
         allowClear
-        placeholder="Select a guide"
-        optionFilterProp="children"
+        placeholder='Select a guide'
+        optionFilterProp='children'
         defaultValue={(guideSelectOptions.length == 0 || city.tourGuideId == 0) ? null : city.tourGuideId}
         onChange={(guideId) => {
           reservationStore.setupCityGuide(city.cityId, guideId);
@@ -103,26 +99,26 @@ function Newest() {
         }
         options={toJS(guideSelectOptions)}
       />
-    );
+    )
   }
 
-	const location = useLocation();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [dataLoading, setDataLoading] = useState(false);
-  const [guideSelectOptions, setGuideSelectOptions] = useState([]);
-  const { reservationStore } = useStore();
-  const loginUser = useAuthStore((state) => state.loginUser)
+	const location = useLocation()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [dataLoading, setDataLoading] = useState(false)
+  const [guideSelectOptions, setGuideSelectOptions] = useState([])
 
-  const [fetchAllGuideList, fetchReservationList, reservationList] =
-    useReservationStore((state) => [state.fetchAllGuideList, state.fetchReservationList, state.reservationList])
+  const formValues = useFormStore((state) => state.formValues);
+  const loginUser = useAuthStore((state) => state.loginUser)
+  const [fetchAllGuideList, fetchReservationList, reservationList, reservationPage, cityList] =
+    useReservationStore((state) =>
+      [state.fetchAllGuideList, state.fetchReservationList, state.reservationList, state.reservationPage, state.cityList])
 
-  const { reservationPage, cityList } = reservationStore;
   const { notification } = App.useApp();
 
   useEffect (() => {
     if (location.search !== '?back') {
       // 第一页，未确认计划
-      onSearchClick(1, 1);
+      onSearchClick(1, 1)
     }
     fetchAllGuideList(loginUser.travelAgencyId)
       .then((guideList) => {
@@ -131,17 +127,17 @@ function Newest() {
             value: data.guideId,
             label: data.guideName
           }
-        });
-        // setGuideSelectOptions(selectOptions);
-      });
+        })
+        setGuideSelectOptions(selectOptions)
+      })
     return () => {
       // unmount...
     };
-  }, []);
+  }, [])
 
   const showCityGuideModal = (reservation) => {
-    setDataLoading(true);
-    setIsModalOpen(true);
+    setDataLoading(true)
+    setIsModalOpen(true)
     reservationStore.editReservation(reservation);
     reservationStore.fetchCityList(reservation.reservationId)
       .catch(ex => {
@@ -150,28 +146,28 @@ function Newest() {
           description: ex.message,
           placement: 'top',
           duration: 4,
-        });
+        })
       })
       .finally(() => {
         setDataLoading(false);
-      });
+      })
   };
   const handleOk = () => {
     reservationStore.updateReservationGuide()
       .finally(() => {
         setIsModalOpen(false);
         setDataLoading(false);
-      });
+      })
   };
   const handleCancel = () => {
     setIsModalOpen(false);
     setDataLoading(false);
-  };
+  }
 
   // 默认重新搜索第一页，所有状态的计划
   const onSearchClick = (current=1, status=null) => {
     setDataLoading(true)
-    fetchReservationList(loginUser.travelAgencyId, current, status)
+    fetchReservationList(loginUser.travelAgencyId, formValues, current)
       .catch(ex => {
         notification.error({
           message: `Notification`,
@@ -191,7 +187,7 @@ function Newest() {
         centered
         open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
       >
-        <Space direction="vertical" style={{ width: '100%' }}>
+        <Space direction='vertical' style={{ width: '100%' }}>
           <Row>
             <Col span={24}>
               <Table
@@ -211,13 +207,13 @@ function Newest() {
                     render: cityGuideRender,
                   }
                 ]}
-                dataSource={toJS(cityList)}
+                dataSource={cityList}
               />
             </Col>
           </Row>
         </Space>
       </Modal>
-      <Space direction="vertical" style={{ width: '100%' }}>
+      <Space direction='vertical' style={{ width: '100%' }}>
         <Title level={3}></Title>
         <SearchForm
           // initialValue={
@@ -235,7 +231,7 @@ function Newest() {
             fetchReservationList(loginUser.travelAgencyId, formVal)
               .catch(ex => {
                 notification.error({
-                  message: `Notification`,
+                  message: 'Notification',
                   description: ex.message,
                   placement: 'top',
                   duration: 4,
@@ -267,7 +263,7 @@ function Newest() {
         </Row>
       </Space>
     </>
-  );
+  )
 }
 
-export default observer(Newest);
+export default Newest