From 09444a114e26875635c34c41a9abb0cf7c6ccc91 Mon Sep 17 00:00:00 2001
From: Jimmy Liow <18777396951@163.com>
Date: Fri, 28 Apr 2023 15:04:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AE=A1=E5=88=92=E5=9F=8E?=
 =?UTF-8?q?=E5=B8=82=E8=AF=BB=E5=8F=96=E5=92=8C=E5=88=86=E9=85=8D=E5=AF=BC?=
 =?UTF-8?q?=E6=B8=B8=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/Reservation.js        |  4 +-
 src/views/reservation/Newest.jsx | 97 ++++++++++++++------------------
 2 files changed, 45 insertions(+), 56 deletions(-)

diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js
index d6a69de..6270a9b 100644
--- a/src/stores/Reservation.js
+++ b/src/stores/Reservation.js
@@ -12,12 +12,14 @@ class Reservation {
 
   fetchReservationList(current, referenceNo, fromDate, thruDate) {
     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('DateStart', fromDate)
       .append('DateEnd', thruDate)
-      .append('TotalNum', 0)
+      .append('TotalNum', totalNum)
       .append('PageSize', this.reservationPage.size)
       .append('PageIndex', this.reservationPage.current)
       .build();
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index c827ea5..f8d6950 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -2,7 +2,7 @@ import { NavLink } from "react-router-dom";
 import { useState } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
-import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App, Select } from 'antd';
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
@@ -13,7 +13,7 @@ function Newest() {
       title: 'Reference number',
       dataIndex: 'referenceNumber',
       key: 'Reference number',
-      render: (text, record) => <NavLink to={`/reservation/${record.id}`}>{text}</NavLink>,
+      render: (text, record) => <NavLink to={`/reservation/${record.referenceId}`}>{text}</NavLink>,
     },
     {
       title: 'Arrival date',
@@ -59,6 +59,42 @@ function Newest() {
       );
     }
   }
+
+  function cityGuideRender(text, city) {
+    return (
+      <Select
+      showSearch
+      style={{
+        width: 280,
+      }}
+      placeholder="Select a guide"
+      optionFilterProp="children"
+      onChange={(value) => {
+        console.log(`selected ${value}`);
+      }}
+      onSearch={(value) => {
+        console.log('search:', value);
+      }}
+      filterOption={(input, option) =>
+        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+      }
+      options={[
+        {
+          value: 'jack',
+          label: 'Jack',
+        },
+        {
+          value: 'lucy',
+          label: 'Lucy',
+        },
+        {
+          value: 'tom',
+          label: 'Tom',
+        },
+      ]}
+      />
+    );
+  }
   const { reservationStore } = useStore();
   const { reservationList, reservationPage, cityList } = reservationStore;
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -67,9 +103,8 @@ function Newest() {
   const [dataLoading, setDataLoading] = useState(false);
   const { notification } = App.useApp();
 
-  const showModal = (reservation) => {
-    console.info(reservation);
-    
+  const showModal = (reservation) => {    
+    setIsModalOpen(true);
     reservationStore.fetchCityList(reservation.referenceId)
       .catch(ex => {
         notification.error({
@@ -82,7 +117,6 @@ function Newest() {
       .finally(() => {
         setDataLoading(false);
       });
-    setIsModalOpen(true);
   };
   const handleOk = () => {
     setIsModalOpen(false);
@@ -128,61 +162,14 @@ function Newest() {
                   {
                     title: 'Tour Guide',
                     dataIndex: 'tourGuide',
-                    key: 'tourGuide'
+                    key: 'tourGuide',
+                    render: cityGuideRender,
                   }
                 ]}
                 dataSource={toJS(cityList)}
               />
             </Col>
           </Row>
-          <Row gutter={{ md: 24 }}>
-            <Col span={24}>
-              <Title level={5}>Guide</Title>
-            </Col>
-          </Row>
-          
-        <Row gutter={{ md: 24 }}>
-          <Col span={16}>
-            <Input placeholder="Guide" />
-          </Col>
-          <Col span={8}>
-            <Button type='primary' onClick={() => {}}>Search</Button>
-          </Col>
-        </Row>
-          <Row gutter={{ md: 24 }}>
-            <Col span={24}>
-              <Radio.Group options={[
-                {
-                  label: 'Jim',
-                  value: '1',
-                },
-                {
-                  label: 'Giffigan',
-                  value: '2',
-                },
-                {
-                  label: 'Herry',
-                  value: '3',
-                },
-                {
-                  label: 'Giffigan',
-                  value: '4',
-                },
-                {
-                  label: 'Herry',
-                  value: '5',
-                },
-                {
-                  label: 'Giffigan',
-                  value: '6',
-                },
-                {
-                  label: 'Herry',
-                  value: '7',
-                },
-              ]} />
-            </Col>
-          </Row>
         </Space>
       </Modal>
       <Space direction="vertical" style={{ width: '100%' }}>