开发团计划分配导游界面

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,90 +1,205 @@
 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;
 
-const reservationListColumns = [
-  {
-    title: 'Reference number',
-    dataIndex: 'referenceNumber',
-    key: 'Reference number',
-    render: (text, record) => <NavLink to={`/reservation/${record.id}`}>{text}</NavLink>,
-  },
-  {
-    title: 'Arrival date',
-    dataIndex: 'arrivalDate',
-    key: 'Arrival date',
-  },
-  {
-    title: 'Pax',
-    key: 'Pax',
-    dataIndex: 'pax'
-  },
-  {
-    title: 'Status',
-    key: 'Status',
-    dataIndex: 'status'
-  },
-  {
-    title: 'Reservation date',
-    key: 'Reservation date',
-    dataIndex: 'reservationDate'
-  },
-  {
-    title: 'Guide',
-    key: 'Guide',
-    dataIndex: 'guide'
-  },
-];
-
 function Newest() {
-
+  const reservationListColumns = [
+    {
+      title: 'Reference number',
+      dataIndex: 'referenceNumber',
+      key: 'Reference number',
+      render: (text, record) => <NavLink to={`/reservation/${record.id}`}>{text}</NavLink>,
+    },
+    {
+      title: 'Arrival date',
+      dataIndex: 'arrivalDate',
+      key: 'Arrival date',
+    },
+    {
+      title: 'Pax',
+      key: 'Pax',
+      dataIndex: 'pax'
+    },
+    {
+      title: 'Status',
+      key: 'Status',
+      dataIndex: 'status'
+    },
+    {
+      title: 'Reservation date',
+      key: 'Reservation date',
+      dataIndex: 'reservationDate'
+    },
+    {
+      title: 'Guide',
+      key: 'Guide',
+      dataIndex: 'guide',
+      render: guideRender
+    },
+  ];
+  
+  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 (
-    <Space direction="vertical" style={{ width: '100%' }}>
+    <>
-      <Title level={3}>Newest Reservations</Title>
+      <Modal
-      <Row gutter={{ md: 24 }}>
+        title="团导游安排预览"
-        <Col span={4}>
+        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 }}>
+          <Col span={4}>
             <Input placeholder="Reference number" />
-        </Col>
+          </Col>
-        <Col span={6}>
+          <Col span={6}>
-          <Space direction="horizontal">
+            <Space direction="horizontal">
-          Arrival Date
+              Arrival Date
-            <DatePicker.RangePicker
+              <DatePicker.RangePicker
-              allowClear={true}
+                allowClear={true}
-              inputReadOnly={true}
+                inputReadOnly={true}
-              placeholder={['From', 'Thru']}
+                placeholder={['From', 'Thru']}
+              />
+            </Space>
+          </Col>
+          <Col span={14}>
+            <Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
+          </Col>
+        </Row>
+        <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,
+                pageSize: 10,
+                total: 200
+              }}
+              columns={reservationListColumns} dataSource={toJS(reservationList)}
             />
-          </Space>
+          </Col>
-        </Col>
+        </Row>
-        <Col span={14}>
+      </Space>
-          <Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
+    </>
-        </Col>
-      </Row>
-      <Row>
-        <Col span={24}>
-          <Table 
-            pagination={{
-              position: ['bottomCenter'],
-              current: 1,
-              pageSize: 10,
-              total: 200
-            }}
-            columns={reservationListColumns} dataSource={toJS(reservationList)} 
-          />
-        </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>
   );
 }