开发团计划分配导游界面

src/stores/Reservation.js

@@ -46,18 +46,7 @@ class Reservation {
     });
   }
 
-  reservationList = [
+  reservationList = [];
-    {
-      key: '1',
-      id: '1',
-      referenceNumber: '-',
-      arrivalDate: '-',
-      pax: '-',
-      status: '-',
-      reservationDate: '-',
-      guide: '-',
-    }
-  ];
 
   customerList = [
     {

src/views/reservation/Detail.jsx

@@ -79,7 +79,7 @@ function Detail() {
           pagination={{
             hideOnSinglePage: true
           }}
-          dataSource={itineraryList} columns={itineraryListColumns} 
+          dataSource={toJS(itineraryList)} columns={itineraryListColumns} 
         />
         </Col>
       </Row>
@@ -88,7 +88,7 @@ function Detail() {
           <List
             header={<Title level={5}>Customer Names (Full name as it appears on passport)</Title>}
             itemLayout="horizontal"
-            dataSource={customerList}
+            dataSource={toJS(customerList)}
             renderItem={(item, index) => (
               <List.Item>
                 <List.Item.Meta

src/views/reservation/Newest.jsx

@@ -1,12 +1,13 @@
 import { NavLink } from "react-router-dom";
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
-import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal } from 'antd';
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
 
+function Newest() {
   const reservationListColumns = [
     {
       title: 'Reference number',
@@ -37,20 +38,131 @@ const reservationListColumns = [
     {
       title: 'Guide',
       key: 'Guide',
-    dataIndex: 'guide'
+      dataIndex: 'guide',
+      render: guideRender
     },
   ];
   
-function Newest() {
+  function guideRender(text, record) {
-
+    if (record.key === '3') {
+      return (
+        <Space size="middle">
+          <Button type="link" onClick={() => showModal()}>Fill in</Button>
+        </Space>
+      );
+    } else {
+      return (
+        <Space size="middle">
+          <span>{record.guide}</span>
+          <Button type="link" onClick={() => showModal()}>Modify</Button>
+        </Space>
+      );
+    }
+  }
   const { reservationStore } = useStore();
   const { reservationList } = reservationStore;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
 
   useEffect(() => {
     console.info('Newest.useEffect');
   }, []);
 
   return (
+    <>
+      <Modal
+        title="团导游安排预览"
+        centered
+        open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+      >
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Row>
+            <Col span={24}>
+              <Table
+                bordered
+                pagination={{
+                  hideOnSinglePage: true
+                }}
+                columns={[
+                  {
+                    title: 'City',
+                    dataIndex: 'city',
+                    key: 'city'
+                  },
+                  {
+                    title: 'Guide',
+                    dataIndex: 'guide',
+                    key: 'guide'
+                  }
+                ]}
+                dataSource={[
+                  {
+                    city: 'Guilin',
+                    guide: 'Giffigan'
+                  }
+                ]}
+              />
+            </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%' }}>
         <Title level={3}>Newest Reservations</Title>
         <Row gutter={{ md: 24 }}>
@@ -74,6 +186,8 @@ function Newest() {
         <Row>
           <Col span={24}>
             <Table
+              title={() => 'Reservations without the tour guide information will be highlighted in red if the arrival date is within 3 days.'}
+              bordered
               pagination={{
                 position: ['bottomCenter'],
                 current: 1,
@@ -85,6 +199,7 @@ function Newest() {
           </Col>
         </Row>
       </Space>
+    </>
   );
 }
 

src/views/reservation/Print.jsx

@@ -3,11 +3,10 @@ import { useEffect } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
 import moment from "moment";
-import { Row, Col, Space, Button, Table, Input, Typography, List } from 'antd';
+import { Row, Col, Space, Table, Typography, List, Watermark } from 'antd';
 import { useStore } from '../../stores/StoreContext.js';
 
 const { Title } = Typography;
-const { TextArea } = Input;
 
 const itineraryListColumns = [
   {
@@ -48,6 +47,7 @@ function Print() {
   }, [reservationId]);
 
   return (
+    <Watermark content={['Global Highlights', 'Discovery Your Way!']}>
     <Space direction="vertical" style={{ width: '100%' }}>
       <Row gutter={{ md: 24 }}>
         <Col span={24}>
@@ -68,11 +68,11 @@ function Print() {
         <Col span={24}>
           <List
             itemLayout="horizontal"
-            dataSource={customerList}
+            dataSource={toJS(customerList)}
             renderItem={(item, index) => (
               <List.Item>
                 <List.Item.Meta
-                  title={<span>{index + 1}. {item.title}</span>}
+                  title={<span>{item.title}</span>}
                   description={item.description}
                 />
               </List.Item>
@@ -106,7 +106,7 @@ function Print() {
             pagination={{
               hideOnSinglePage: true
             }}
-            dataSource={itineraryList} columns={itineraryListColumns}
+            dataSource={toJS(itineraryList)} columns={itineraryListColumns}
           />
         </Col>
       </Row>      
@@ -130,8 +130,8 @@ function Print() {
           <Title level={4}>Asia Highlights Contact:</Title>
         </Col>
       </Row>
-
     </Space>
+    </Watermark>
   );
 }