todo: 三峡, 酒店

src/App.jsx

@@ -55,6 +55,8 @@ import CooperationIcon from './components/icons/CooperationIcon';
 import OPDashboard from './views/OPDashboard';
 import OPActivity from './views/OPActivity';
 import OPRisk from './views/OPRisk';
+import Cruise from './views/Cruise';
+import Hotel from './views/Hotel';
 
 const App = () => {
   const { Content, Footer, Sider, } = Layout;
@@ -158,6 +160,8 @@ const App = () => {
           key: 62,
           label: <NavLink to="/destination/group/count">目的地接团</NavLink>,
         },
+        { key: 'cruise', label: <NavLink to="/cruise">三峡游船</NavLink> },
+        { key: 'hotel', label: <NavLink to="/hotel">酒店</NavLink> },
       ],
     },
     {
@@ -259,7 +263,9 @@ const App = () => {
                     <Route path="/destination/group/count" element={<DestinationGroupCount />} />
                     <Route path="/agent/:agentId/group/list" element={<AgentGroupList />} />
                     <Route path="/destination/:destinationId/group/list" element={<DestinationGroupList />} />
-                  </Route>
+                    <Route path="/cruise" element={<Cruise />} />
+                    <Route path="/hotel" element={<Hotel />} />
+                    </Route>
                   <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'financial']} />}>
                     <Route path="/credit_card_bill" element={<Credit_card_bill />} />
                     <Route path="/exchange_rate" element={<ExchangeRate />} />

src/components/search/HotelStarSelect.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Select } from 'antd';
+import { observer } from 'mobx-react';
+import { HotelStars as options } from '../../libs/ht';
+
+const HotelStars = (props) => {
+  const { mode, value, onChange, show_all, ...extProps } = props;
+  const _show_all = ['tags', 'multiple'].includes(mode) ? false : show_all;
+  return (
+    <div>
+      <Select
+        mode={mode || null}
+        allowClear
+        style={{ width: '100%' }}
+        placeholder="星级"
+        value={value || undefined}
+        onChange={(value) => {
+          if (typeof onChange === 'function') {
+            onChange(value);
+          }
+        }}
+        labelInValue={false}
+        {...extProps}
+        options={options}
+      >
+        {_show_all ? (
+          <Select.Option key="-1" value="ALL">
+            ALL
+          </Select.Option>
+        ) : (
+          ''
+        )}
+      </Select>
+    </div>
+  );
+};
+/**
+ * 酒店星级
+ */
+export default observer(HotelStars);

src/components/search/SearchForm.jsx

@@ -3,7 +3,7 @@ import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import { DATE_FORMAT, SMALL_DATETIME_FORMAT, stores_Context } from './../../config';
 import { SearchOutlined } from '@ant-design/icons';
-import { Form, Row, Col, Select, Button, Space, DatePicker } from 'antd';
+import { Form, Row, Col, Select, Button, Space, DatePicker, Input } from 'antd';
 import moment from 'moment';
 // import locale from 'antd/es/date-picker/locale/zh_CN';
 import BusinessSelect from './BusinessSelect';
@@ -17,6 +17,7 @@ import SearchInput from './Input';
 import { objectMapper, at, empty, isEmpty } from './../../utils/commons';
 
 import './search.css';
+import HotelStarSelect from './HotelStarSelect';
 
 const EditableContext = createContext();
 const Option = Select.Option;
@@ -263,6 +264,14 @@ function getFields(props) {
   };
   let baseChildren = [];
   baseChildren = [
+		item(
+			"keyword", // 关键词搜索 {...fieldComProps.keyword}
+			99,
+			<Form.Item name="keyword" {...fieldProps.keyword}>
+				<Input allowClear {...fieldProps.keyword} />
+			</Form.Item>,
+			fieldProps?.keyword?.col || 6
+		),
     item(
       'agency',
       99,
@@ -456,6 +465,73 @@ function getFields(props) {
         <SearchInput autoGet url="/service-Analyse2/GetGlobalDestinationInfo" map={{ 'c_id': 'key', 'cn_name': 'label' }} resultkey={'result'} placeholder="输入搜索城市: 中/英名字" />
       </Form.Item>
     ),
+    item(
+      'cruiseType',
+      99,
+      <Form.Item name={`cruiseType`} initialValue={at(props, 'initialValue.cruiseType')[0] || (fieldProps?.cruiseType?.show_all ? { key: 'all', label: '所有行程' } : undefined)}>
+        <Select style={{ width: '100%' }} placeholder="所有行程" labelInValue>
+          {fieldProps?.cruiseType?.show_all && (
+            <Option key="all" value="">
+              所有
+            </Option>
+          )}
+          <Option key="upstream" value="upstream">
+            上水
+          </Option>
+          <Option key="downstream" value="downstream">
+            下水
+          </Option>
+          <Option key="long" value="long">
+            长线
+          </Option>
+        </Select>
+      </Form.Item>,
+      3
+    ),
+    item(
+      'bookType',
+      99,
+      <Form.Item name={`bookType`} initialValue={at(props, 'initialValue.bookType')[0] || (fieldProps?.bookType?.show_all ? { key: 'all', label: '预定类型' } : undefined)}>
+        <Select style={{ width: '100%' }} placeholder="预定类型" labelInValue allowClear>
+          {fieldProps?.bookType?.show_all && (
+            <Option key="all" value="">
+              所有
+            </Option>
+          )}
+          <Option key="proxy" value="proxy">
+            代订
+          </Option>
+          <Option key="direct" value="direct">
+            自订
+          </Option>
+        </Select>
+      </Form.Item>,
+      3
+    ),
+    item(
+      'recommandRate',
+      99,
+      <Form.Item name={`recommandRate`} initialValue={at(props, 'initialValue.recommandRate')[0] || (fieldProps?.recommandRate?.show_all ? { key: 'all', label: '推荐' } : undefined)}>
+        <Select style={{ width: '100%' }} placeholder="推荐" labelInValue allowClear>
+          {fieldProps?.recommandRate?.show_all && (
+            <Option key="all" value="">
+              所有
+            </Option>
+          )}
+          <Option key="proxy" value="proxy">
+            主推
+          </Option>
+        </Select>
+      </Form.Item>,
+      3
+    ),
+    item(
+      'hotelStar',
+      99,
+      <Form.Item name={`hotelStar`} initialValue={at(props, 'initialValue.hotelStar')[0] || undefined}>
+        <HotelStarSelect {...fieldProps.hotelStar} labelInValue={true} />
+      </Form.Item>
+    ),
   ];
   baseChildren = baseChildren
     .map((x) => {

src/libs/ht.js

@@ -178,6 +178,22 @@ export const KPISubjects = [
   // { key: 'sum_person_num', value: 'sum_person_num', label: '人数' },
 ];
 
+export const HotelStars = [
+  { key: '5', value: '5', label: '5星' },
+  { key: '4', value: '4', label: '4星' },
+  { key: '3', value: '3', label: '3星' },
+  { key: '2', value: '2', label: '2星' },
+  { key: 'intl', value: 'intl', label: '国际社' },
+  { key: 'internal', value: 'internal', label: '国内社' },
+  { key: 'other', value: 'other', label: '其它' },
+  { key: 'f5', value: 'f5', label: '准5星' },
+  { key: 'f4', value: 'f4', label: '准4星' },
+  { key: 'inn', value: 'inn', label: '客栈' },
+  { key: 'apartment', value: 'apartment', label: '公寓' },
+  { key: 'siheyuan', value: 'siheyuan', label: '四合院酒店' },
+  { key: 'luxury5', value: 'luxury5', label: '豪华五星' },
+];
+
 /**
  * 计算指标值的分段区间
  * @param {number} value

src/stores/CustomerServices.js

@@ -459,6 +459,7 @@ class CustomerServices {
 
     searchValues = {
       DateType: { key: 'startDate', label: '走团日期'},
+      countryArea: { key: 'china', label: '国内' },
     };
 
     setSearchValues(obj, values) {

src/views/Cruise.jsx

@@ -0,0 +1,59 @@
+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';
+
+export default observer((props) => {
+  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
+  const { customerServicesStore, date_picker_store } = useContext(stores_Context);
+
+  const { formValues, siderBroken } = searchFormStore;
+
+  const tableProps = {
+    size: 'small',
+    columns: [
+      { title: '产品', dataIndex: 'op', key: 'op' },
+      { title: '房间数', dataIndex: 'action', key: 'action' },
+      { title: '人数', dataIndex: 'action', key: 'action' },
+      { title: '总利润', dataIndex: 'action', key: 'action' },
+      { title: '单订船', dataIndex: 'action', key: 'action' },
+      { title: '订单含行程', dataIndex: 'action', key: 'action' },
+      { title: '国籍', dataIndex: 'action', key: 'action' },
+    ],
+  };
+
+  return (
+    <>
+      <Row gutter={16} className={siderBroken ? '' : 'sticky-top'}>
+        <Col md={24} lg={24} xxl={24}>
+          <SearchForm
+            defaultValue={{
+              initialValue: {
+                ...date_picker_store.formValues,
+                ...customerServicesStore.searchValues,
+              },
+              // 'countryArea',
+              shows: ['DepartmentList',  'orderStatus', 'years', 'keyword', 'agency', 'cruiseType'],
+              sort: { keyword: 101, cruiseType: 102, agency: 103 },
+              fieldProps: {
+                keyword: { placeholder: '产品名', col: 4 },
+                DepartmentList: { show_all: true, mode: 'multiple' },
+                orderStatus: { show_all: true },
+                // years: { hide_vs: false },
+              },
+            }}
+            onSubmit={(_err, obj, form) => {
+              customerServicesStore.setSearchValues(obj, form);
+              // customerServicesStore.fetchDestinationGroupCount();
+            }}
+          />
+        </Col>
+      </Row>
+      <section>
+        <Table {...tableProps} bordered />
+      </section>
+    </>
+  );
+});

src/views/Hotel.jsx

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+import { stores_Context } from '../config';
+import { Row, Col, Table } from 'antd';
+import SearchForm from './../components/search/SearchForm';
+
+export default observer((props) => {
+  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
+  const { customerServicesStore, date_picker_store } = useContext(stores_Context);
+
+  const { formValues, siderBroken } = searchFormStore;
+
+  const tableProps = {
+    size: 'small',
+    columns: [
+      { title: '目的地', dataIndex: 'op', key: 'op' },
+      { title: '总间夜', dataIndex: 'action', key: 'action' },
+      { title: '主推', dataIndex: 'action', key: 'action' },
+      { title: '使用比例', dataIndex: 'action', key: 'action' },
+    ],
+  };
+
+  return (
+    <>
+      <Row gutter={16} className={siderBroken ? '' : 'sticky-top'}>
+        <Col md={24} lg={24} xxl={24}>
+          <SearchForm
+            defaultValue={{
+              initialValue: {
+                ...date_picker_store.formValues,
+                ...customerServicesStore.searchValues,
+              },
+              // 'countryArea', 'DateType', 'dates',
+              shows: ['DepartmentList', 'countryArea', 'orderStatus', 'bookType', 'recommandRate','hotelStar','DateType', 'dates',],
+              sort: { DateType: 101, dates: 102 },
+              fieldProps: {
+                DepartmentList: { show_all: true, mode: 'multiple' },
+                orderStatus: { show_all: true },
+                // years: { hide_vs: false },
+                DateType: { disabledKeys: ['applyDate'] },
+              },
+            }}
+            onSubmit={(_err, obj, form) => {
+              customerServicesStore.setSearchValues(obj, form);
+              // customerServicesStore.fetchDestinationGroupCount();
+            }}
+          />
+        </Col>
+      </Row>
+      <section>
+        <Table {...tableProps} bordered />
+      </section>
+    </>
+  );
+});