dashboard/src/views/Hotel.jsx

import React, { useContext } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import { Row, Col, Table, Space, Typography } from 'antd';
import SearchForm from './../components/search/SearchForm';
import { VSTag, TableExportBtn } from './../components/Data';
const { Text } = Typography;

export default observer((props) => {
  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
  const { customerServicesStore, date_picker_store, HotelCruiseStore } = useContext(stores_Context);
  const { loading, dataSource } = HotelCruiseStore.hotel;

  const { formValues, siderBroken } = searchFormStore;

  const tableSorter = (a, b, colName) => (a[colName] - b[colName]);

  const tableProps = {
    size: 'small',
    bordered: true,
    pagination: false,
    columns: [
      { title: '目的地', dataIndex: 'CityName', key: 'CityName' },
      {
        title: '总间夜',
        dataIndex: 'TotalNum',
        key: 'TotalNum',
        sorter: (a, b) => tableSorter(a, b, 'TotalNum'),
        render: (v, r) => (
          <>
            <Space direction={'vertical'}>
              <Text strong>
                {v}
                {r.CPTotalNum ? <Text type="secondary"> VS {r.CPTotalNum}</Text> : null}
              </Text>
              {r.CPTotalNum && <VSTag diffPercent={r.TotalNumPercent} />}
            </Space>
          </>
        ),
      },
      {
        title: '主推',
        dataIndex: 'RecomendNum',
        key: 'RecomendNum',
        sorter: (a, b) => tableSorter(a, b, 'RecomendNum'),
        render: (v, r) => (
          <>
            <Space direction={'vertical'}>
              <Text strong>
                {v}
                {r.CPRecomendNum ? <Text type="secondary"> VS {r.CPRecomendNum}</Text> : null}
              </Text>
              {r.CPRecomendNum && <VSTag diffPercent={r.RecomendNumPercent} />}
            </Space>
          </>
        ),
      },
      {
        title: '使用比例',
        dataIndex: 'RecommendRate_100',
        key: 'RecommendRate_100',
        render: (v, r) => (
          <>
            <Space direction={'vertical'}>
              <Text strong>
                {v}
                {r.RecommendRateDelta !== undefined && <Text type="secondary"> VS {r.CPRecommendRate_100}</Text>}
              </Text>
              {r.RecommendRateDelta !== undefined && <VSTag diffPercent={r.RecommendRateDelta} />}
            </Space>
          </>
        ),
      },
    ],
  };

  return (
    <>
      <Row gutter={16} className={siderBroken ? '' : 'sticky-top'}>
        <Col md={24} lg={24} xxl={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...date_picker_store.formValues,
                ...HotelCruiseStore.searchValues,
              },
              // 'countryArea', 'DateType', 'dates',
              shows: ['DepartmentList', 'countryArea', 'orderStatus', 'hotelBookType', 'hotelRecommandRate', 'hotelStar', 'DateType', 'dates'],
              sort: { DateType: 101, dates: 102 },
              fieldProps: {
                DepartmentList: { show_all: true, mode: 'multiple' },
                countryArea: { show_all: true },
                orderStatus: { show_all: true },
                hotelBookType: { show_all: true },
                hotelRecommandRate: { show_all: true },
                // years: { hide_vs: false },
                DateType: { disabledKeys: ['applyDate'] },
              },
            }}
            onSubmit={(_err, obj, form) => {
              HotelCruiseStore.setSearchValues(obj, form);
              HotelCruiseStore.getHotelData(obj);
            }}
          />
        </Col>
      </Row>
      <section>
        <Table {...tableProps} bordered {...{ loading, dataSource }} rowKey={(record) => record.CityName} />
      </section>
    </>
  );
});