Merge branch 'main' of github.com:hainatravel/GHHub
YCC
2 years ago
commit
4ed34d79c4
File diff suppressed because it is too large
Load Diff
@ -1,100 +1,205 @@
|
|||||||
import { NavLink } from "react-router-dom";
|
import { NavLink } from "react-router-dom";
|
||||||
import { useEffect } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import { toJS } from "mobx";
|
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';
|
import { useStore } from '@/stores/StoreContext.js';
|
||||||
|
|
||||||
const { Title } = Typography;
|
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() {
|
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 { reservationStore } = useStore();
|
||||||
const { reservationList } = reservationStore;
|
const { reservationList } = reservationStore;
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
|
||||||
|
const showModal = () => {
|
||||||
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
|
const handleOk = () => {
|
||||||
|
setIsModalOpen(false);
|
||||||
|
};
|
||||||
|
const handleCancel = () => {
|
||||||
|
setIsModalOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.info('Newest.useEffect');
|
console.info('Newest.useEffect');
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Space direction="vertical" style={{ width: '100%' }}>
|
<>
|
||||||
<Title level={3}>Newest Reservations</Title>
|
<Modal
|
||||||
<Row gutter={{ md: 24 }}>
|
title="团导游安排预览"
|
||||||
<Col span={5}>
|
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" />
|
<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={['Arrival Date', '']}
|
placeholder={['From', 'Thru']}
|
||||||
/>
|
/>
|
||||||
</Space>
|
</Space>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={8}>
|
<Col span={14}>
|
||||||
<Space direction="horizontal">
|
<Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
|
||||||
快速选择
|
</Col>
|
||||||
<Radio.Group
|
</Row>
|
||||||
options={[
|
<Row>
|
||||||
{ label: '未确认', value: '1' },
|
<Col span={24}>
|
||||||
{ label: '已确认', value: '2' },
|
<Table
|
||||||
{ label: '未录入导游', value: '3' },
|
title={() => 'Reservations without the tour guide information will be highlighted in red if the arrival date is within 3 days.'}
|
||||||
{ label: '有变更', value: '4' },
|
bordered
|
||||||
{ label: '已取消', value: '5' },
|
pagination={{
|
||||||
{ label: '全部', value: '6' },
|
position: ['bottomCenter'],
|
||||||
]}
|
current: 1,
|
||||||
value={'6'}
|
pageSize: 10,
|
||||||
optionType="button"
|
total: 200
|
||||||
buttonStyle="solid"
|
}}
|
||||||
|
columns={reservationListColumns} dataSource={toJS(reservationList)}
|
||||||
/>
|
/>
|
||||||
</Space>
|
</Col>
|
||||||
</Col>
|
</Row>
|
||||||
<Col span={4}>
|
</Space>
|
||||||
<Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
|
</>
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col span={24}>
|
|
||||||
<Table columns={reservationListColumns} dataSource={toJS(reservationList)} />
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Space>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue