开发团计划分配导游界面
Jimmy Liow
2 years ago
parent
fa19a50d9b
commit
3e1dcb6624
@ -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>
|
||||
<Row gutter={{ md: 24 }}>
|
||||
<Col span={4}>
|
||||
<>
|
||||
<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 }}>
|
||||
<Col span={4}>
|
||||
<Input placeholder="Reference number" />
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Space direction="horizontal">
|
||||
Arrival Date
|
||||
<DatePicker.RangePicker
|
||||
allowClear={true}
|
||||
inputReadOnly={true}
|
||||
placeholder={['From', 'Thru']}
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Space direction="horizontal">
|
||||
Arrival Date
|
||||
<DatePicker.RangePicker
|
||||
allowClear={true}
|
||||
inputReadOnly={true}
|
||||
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 span={14}>
|
||||
<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>
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue