dashboard/src/views/Cruise.jsx

import React, { Children, useContext, useState } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import moment from 'moment';
import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider, Button, Switch } 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, HotelCruiseStore, date_picker_store } = useContext(stores_Context);
  const { loading, dataSource } = HotelCruiseStore.cruise;

  const { formValues, siderBroken } = searchFormStore;

  const tableSorter = (a, b, colName) => (a[colName] - b[colName]);
  const tableProps = {
    size: 'small',
    bordered: true, pagination: false,
    columns: [
      { title: '产品', dataIndex: 'ProductName', key: 'ProductName' },
      {
        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>}
              </Text>
              {r.CPTotalNum && <VSTag diffPercent={r.TotalNumPercent} />}
            </Space>
          </>
        ),
      },
      { title: '人数', dataIndex: 'TotalPersonNum', key: 'TotalPersonNum',
        sorter: (a, b) => tableSorter(a, b, 'TotalPersonNum'),
        render: (v, r) => (
          <>
            <Space direction={'vertical'}>
              <Text strong>
                {v}
                {r.CPTotalPersonNum && <Text type="secondary"> VS {r.CPTotalPersonNum}</Text>}
              </Text>
              {r.CPTotalNum && <VSTag diffPercent={r.TotalPersonNumPercent} />}
            </Space>
          </>
        ),},
      { title: '总利润', dataIndex: 'TotalProfit', key: 'TotalProfit',
        sorter: (a, b) => tableSorter(a, b, 'TotalProfit'),
        render: (v, r) => (
          <>
            <Space direction={'vertical'}>
              <Text strong>
                {v}
                {r.CPTotalProfit && <Text type="secondary"> VS {r.CPTotalProfit}</Text>}
              </Text>
              {r.CPTotalNum && <VSTag diffPercent={r.TotalProfitPercent} />}
            </Space>
          </>
        ), },
      // { title: '单订船', dataIndex: '', key: '' },
      // { title: '订单含行程', dataIndex: '', key: '' },
      // { title: '国籍', dataIndex: '', key: '' },
    ],
  };

  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',
              shows: [
                'DepartmentList',  'orderStatus', 'dates', 'keyword', 'cruiseDirection', 'agency',
                // 'cruiseBookType', 'country', 'roomsRange', 'personRange'
              ],
              sort: { keyword: 101, agency: 103, cruiseDirection: 102, country: 104 },
              fieldProps: {
                keyword: { placeholder: '产品名', col: 4 },
                DepartmentList: { show_all: true, mode: 'multiple' },
                orderStatus: { show_all: true },
                cruiseDirection: { show_all: true },
                // years: { hide_vs: false },
              },
            }}
            onSubmit={(_err, obj, form) => {
              HotelCruiseStore.setSearchValues(obj, form);
              HotelCruiseStore.getCruiseData(obj);
            }}
          />
        </Col>
      </Row>
      <section>
        <Table {...tableProps} {...{loading, dataSource}} rowKey={(record) => record.ProductName}  />
      </section>
    </>
  );
});