GHHub/src/views/reservation/Newest.jsx

import { NavLink } from "react-router-dom";
import { useEffect } from 'react';
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio } 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 { reservationStore } = useStore();
  const { reservationList } = reservationStore;

  useEffect(() => {
    console.info('Newest.useEffect');
  }, []);

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <Title level={3}>Newest Reservations</Title>
      <Row gutter={{ md: 24 }}>
        <Col span={5}>
            <Input placeholder="Reference number" />
        </Col>
        <Col span={6}>
          <Space direction="horizontal">
          Arrival Date
            <DatePicker.RangePicker
              allowClear={true}
              inputReadOnly={true}
              placeholder={['Arrival Date', '']}
            />
          </Space>
        </Col>
        <Col span={8}>
          <Space direction="horizontal">
          快速选择
            <Radio.Group
              options={[
                { label: '未确认', value: '1' },
                { label: '已确认', value: '2' },
                { label: '未录入导游', value: '3' },
                { label: '有变更', value: '4' },
                { label: '已取消', value: '5' },
                { label: '全部', value: '6' },
              ]}
              value={'6'}
              optionType="button"
              buttonStyle="solid"
            />
          </Space>
        </Col>
        <Col span={4}>
          <Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Table columns={reservationListColumns} dataSource={toJS(reservationList)} />
        </Col>
      </Row>
    </Space>
  );
}

export default observer(Newest);