完成计划城市读取和分配导游界面

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();

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%' }}>