使用文本显示客人名字列表

src/stores/Reservation.js

@@ -17,6 +17,7 @@ class Reservation {
       .append('GroupNo', referenceNo)
       .append('DateStart', fromDate)
       .append('DateEnd', thruDate)
+      .append('RsTotal', this.reservationPage.total)
       .append('PageNum', this.reservationPage.size)
       .append('PageIndex', this.reservationPage.current)
       .build();
@@ -47,9 +48,9 @@ class Reservation {
 
   fetchReservation(reservationId) {
     const fetchUrl = prepareUrl(HT_HOST + '/service-tourdesign/GetPlanInfo')
-    .append('VEI_SN', this.root.authStore.login.travelAgencyId)
-    .append('GRI_SN', reservationId)
-    .build();
+      .append('VEI_SN', this.root.authStore.login.travelAgencyId)
+      .append('GRI_SN', reservationId)
+      .build();
 
     return fetchJSON(fetchUrl)
       .then(json => {
@@ -98,28 +99,6 @@ class Reservation {
   itineraryList = [
   ];
   
-  customerList = [];
-  //   {
-  //     title: 'Crane / Gemma Chelse',
-  //     description: 'Gender: Male  Nationality: United States  Passport: 655844449  Expiration Date: 2030-09-07  Birth Date: 1979-12-23',
-  //   },
-  //   {
-  //     title: 'McCracken / Ryan Lee',
-  //     description: 'Gender: Female  Nationality: United States  Passport: 655844450  Expiration Date: 2030-09-07  Birth Date: 1983-05-17',
-  //   },
-  //   {
-  //     title: 'Ramlakhan / Darryl',
-  //     description: 'Gender: Female  Nationality: United States  Passport: 661810034  Expiration Date: 2026-03-16  Birth Date: 2006-07-12',
-  //   },
-  //   {
-  //     title: 'Ramlakhan / Reanne',
-  //     description: 'Gender: Male  Nationality: United States  Passport: 593422145  Expiration Date: 2023-04-25  Birth Date: 2012-03-26',
-  //   },
-  //   {
-  //     title: 'Alexander Daich',
-  //     description: 'Gender: Male  Nationality: United States  Passport: 593422145  Expiration Date: 2023-04-25  Birth Date: 2012-03-26s',
-  //   },
-  // ];
   customerNames = '';
 }
 

src/views/reservation/Detail.jsx

@@ -74,33 +74,21 @@ function Detail() {
         </Col>
       </Row>
       <Row gutter={{ md: 24 }}>
-        <Col span={24}>
+        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
       <Title level={5}>Itinerary Overview</Title>
-        </Col>
-      </Row>
-      <Row>
-        <Col span={24}>
         <Table 
+        bordered
           pagination={false}
           dataSource={toJS(itineraryList)} columns={itineraryListColumns} 
         />
+        </Space>
         </Col>
       </Row>
       <Row>
-        <Col span={24}>
-          <List
-            header={<><Title level={5}>Customer Names (Full name as it appears on passport)</Title><span>{customerNames}</span></>}
-            itemLayout="horizontal"
-            dataSource={toJS(customerList)}
-            renderItem={(item, index) => (
-              <List.Item>
-                <List.Item.Meta
-                  title={<span>{index + 1}. {item.title}</span>}
-                  description={item.description}
-                />
-              </List.Item>
-            )}
-          />
+        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
+          <Title level={5}>Customer Names (Full name as it appears on passport)</Title>          
+          <TextArea rows={4} value={customerNames} readOnly maxLength={6} />
+          </Space>
         </Col>
       </Row>
       <Row>

src/views/reservation/Newest.jsx

@@ -62,9 +62,9 @@ function Newest() {
   const { reservationStore } = useStore();
   const { reservationList, reservationPage } = reservationStore;
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedDateRange, onDateRangeChange] = useState([]);
+  const [arrivalDateRange, onDateRangeChange] = useState([]);
   const [referenceNo, onNumberChange] = useState('');
-  const [tableLoading, setTableLoading] = useState(false);
+  const [dataLoading, setDataLoading] = useState(false);
   const { notification } = App.useApp();
 
   const showModal = () => {
@@ -77,9 +77,9 @@ function Newest() {
     setIsModalOpen(false);
   };
   
-  const onSearchClick = (current) => {    
-    setTableLoading(true);
-    reservationStore.fetchReservationList(current, referenceNo, selectedDateRange[0], selectedDateRange[1])
+  const onSearchClick = (current=1) => {    
+    setDataLoading(true);
+    reservationStore.fetchReservationList(current, referenceNo, arrivalDateRange[0], arrivalDateRange[1])
       .catch(ex => {
         notification.error({
           message: `Notification`,
@@ -89,7 +89,7 @@ function Newest() {
         });
       })
       .finally(() => {
-        setTableLoading(false);
+        setDataLoading(false);
       });
   }
 
@@ -196,7 +196,7 @@ function Newest() {
             </Space>
           </Col>
           <Col span={14}>
-            <Button type='primary' onClick={() => onSearchClick(1)}>Search</Button>
+            <Button type='primary' onClick={() => onSearchClick()} loading={dataLoading}>Search</Button>
           </Col>
         </Row>
         <Row>
@@ -204,7 +204,7 @@ function Newest() {
             <Table
               title={() => 'Reservations without the tour guide information will be highlighted in red if the arrival date is within 3 days.'}
               bordered
-              loading={tableLoading}
+              loading={dataLoading}
               pagination={{
                 position: ['bottomCenter'],
                 current: reservationPage.current,