perf: 订单>仪表盘-移动订单: 搜索组件

src/charts/MobileDeal.jsx

@@ -1,41 +1,45 @@
-import React, {Component} from 'react';
-import {Table, Button, Space, Radio} from 'antd';
-import {SearchOutlined} from '@ant-design/icons';
-import GroupSelect from '../components/search/GroupSelect';
-import DatePickerCharts from "../components/search/DatePickerCharts";
-import {stores_Context} from "../config";
-import {observer} from "mobx-react";
+import React, { Component } from 'react';
+import { Table, } from 'antd';
+import SearchForm from './../components/search/SearchForm';
+import { stores_Context } from '../config';
+import { observer } from 'mobx-react';
 
 class MobileDeal extends Component {
-    static contextType = stores_Context;
+  static contextType = stores_Context;
 
-    constructor(props) {
-        super(props);
-    }
+  constructor(props) {
+    super(props);
+  }
 
-    render() {
-        const {dashboard_store} = this.context;
-        const mobile_data = dashboard_store.mobile_data;
-        return (
-            <div>
-                <h2>移动成交</h2>
-                <GroupSelect store={mobile_data}/>
-                <Space size="large">
-                    <DatePickerCharts hide_vs={true}/>
-
-                    <Radio.Group value={mobile_data.date_type} onChange={mobile_data.onChange_datetype}>
-                        <Radio value="applyDate">预定日期</Radio>
-                        <Radio value="startDate">出发日期</Radio>
-                    </Radio.Group>
-
-                    <Button type="primary" icon={<SearchOutlined/>} loading={mobile_data.loading} onClick={() => {
-                        mobile_data.asyncFetch();
-                    }}>统计</Button>
-                </Space>
-                <Table dataSource={mobile_data.data} columns={mobile_data.columns} pagination={false} size="small"/>
-            </div>
-        );
-    }
+  render() {
+    const { dashboard_store, date_picker_store } = this.context;
+    const mobile_data = dashboard_store.mobile_data;
+    return (
+      <div>
+        <h2>移动成交</h2>
+        <SearchForm
+          defaultValue={{
+            initialValue: {
+              ...date_picker_store.formValues,
+              ...mobile_data.mobileSearchValues,
+            },
+            shows: ['DateType', 'DepartmentList', 'dates'],
+            fieldProps: {
+              DepartmentList: { show_all: false, mode: 'multiple', col: 24 },
+              WebCode: { show_all: true },
+              dates: { hide_vs: true, col: 12 },
+              DateType: { col: 6, disabledKeys: ['ConfirmDate'] },
+            },
+          }}
+          onSubmit={(_err, obj, form, str) => {
+            dashboard_store.setMobileSearchValues(obj, form);
+            mobile_data.asyncFetch();
+          }}
+        />
+        <Table dataSource={mobile_data.data} columns={mobile_data.columns} pagination={false} size="small" />
+      </div>
+    );
+  }
 }
 
 export default observer(MobileDeal);

src/components/search/DataTypeSelect.jsx

@@ -35,7 +35,7 @@ class DataTypeSelect extends Component {
           {...extProps}
         >
           {dateTypes.map((ele) => (
-            <Select.Option key={ele.key} value={ele.key}>
+            <Select.Option key={ele.key} value={ele.key} disabled={extProps.disabledKeys.includes(ele.key)}>
               {ele.label}
             </Select.Option>
           ))}

src/components/search/SearchForm.jsx

@@ -221,7 +221,7 @@ export default observer((props) => {
         <Row gutter={10} style={{ background: '#f9fafa', margin: '0px 0px 10px 0px', padding: '16px 8px 0 8px', boxShadow: '0px 0px 3px 0px rgba(0,0,0,0.15)' }}>
           {getFields({ sort, initialValue, hides, shows, fieldProps, form })}
           {/* 'textAlign': 'right' */}
-          <Col flex="1 0 120px" style={{ padding: '0px 5px', display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-start' }}>
+          <Col flex="1 0 90px" style={{ padding: '0px 5px', display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-start' }}>
             <Space align="center">
               <Button size={'middle'} type="primary" icon={<SearchOutlined />} htmlType="submit">
                 {confirmText || '统计'}
@@ -312,7 +312,7 @@ function getFields(props) {
         rules={[{ required: true, message: '选择小组' }]}
       >
         <GroupSelect {...fieldProps.DepartmentList} labelInValue={true} />
-      </Form.Item>
+      </Form.Item>, fieldProps?.DepartmentList?.col
     ),
     item(
       'WebCode',
@@ -378,9 +378,9 @@ function getFields(props) {
       'DateType',
       99,
       <Form.Item name={`DateType`} initialValue={at(props, 'initialValue.DateType')[0] || { key: 'applyDate', label: '提交日期' }}>
-        <DateTypeSelect labelInValue={true} />
+        <DateTypeSelect labelInValue={true} disabledKeys={fieldProps?.DateType?.disabledKeys || []} />
       </Form.Item>,
-      3
+      fieldProps?.DateType?.col || 3
     ),
     item(
       'years',
@@ -405,7 +405,7 @@ function getFields(props) {
       <Form.Item>
         <DatePickerCharts isform={true} {...fieldProps.dates} form={form} />
       </Form.Item>,
-      midCol
+      fieldProps?.dates?.col || midCol
     ),
     item(
       'operator',

src/stores/DashboardStore.js

@@ -1,6 +1,7 @@
 import { makeAutoObservable, runInAction } from "mobx";
 import * as config from "../config";
 import { resultDataCb } from '../components/DateGroupRadio/date';
+import { groupsMappedByKey } from './../libs/ht';
 
 class DashboardStore {
 	constructor(rootStore) {
@@ -197,7 +198,17 @@ class DashboardStore {
 		group_handleChange: this.handleChange_group_select.bind(this),
 		onChange_datetype: this.onChange_datetype.bind(this),
 		asyncFetch: this.get_CountYDOrder.bind(this),
+
+    mobileSearchValues: {
+      'DateType': { key: 'applyDate', value: 'applyDate', label: '预定日期'},
+      'DepartmentList': ["1", "2", "28", "7", "8", "9", "11", "12", "20", "21", "18"].map(ele => groupsMappedByKey[ele] ),
+    }
 	};
+
+  setMobileSearchValues(obj, values) {
+    this.mobile_data.date_type = obj.DateType;
+    this.mobile_data.groups = obj.DepartmentList;
+  }
 	//  移动成交 end
 
 	// 汇率变化 begin