perf: 销售>业绩数据. 应用搜索组件

src/components/search/SiteSelect.jsx

@@ -32,7 +32,7 @@ class SiteSelect extends Component {
                     allowClear={_mode != null}
                     {...extProps}
                 >
-                    {_show_all===true ? <Select.Option key="1" value="ALL">所有来源</Select.Option> : ''}
+                    {_show_all===true ? <Select.Option key="ALL" value="ALL">所有来源</Select.Option> : ''}
                     {sites.map(ele => <Select.Option key={ele.key} value={ele.code}>{ele.label}</Select.Option>)}
                 </Select>
             </div>

src/stores/SaleStore.js

@@ -32,6 +32,20 @@ class SaleStore {
   type_data_sub = []; // 类型的子维度数据
   date_title = 'date_title'; // 日期段，只用于显示，防止日期选择控件的变化导致页面刷新
 
+  searchValues = {
+    DateType: { key: 'ConfirmDate', label: '确认日期'},
+    WebCode: { key: 'All', label: '所有来源'},
+    IncludeTickets: { key: '1', label: '含门票'},
+    DepartmentList: [groupsMappedByCode.GH],
+  };
+
+  setSearchValues(obj, values) {
+    this.groups = obj.DepartmentList;
+    this.webcode = obj.WebCode;
+    this.include_tickets = obj.IncludeTickets;
+    this.date_type = obj.DateType;
+  }
+
   salesTrade = {
     groupType: 'dept', loading: false,
     operator: [], dept: [], overview: [],

src/views/Sale.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react';
-import { Row, Col, Button, Tabs, Table, Divider, Radio, Select } from 'antd';
+import { Row, Col, Button, Tabs, Table, Divider, Radio, Select, Spin } from 'antd';
 import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from '@ant-design/icons';
 import { stores_Context } from '../config';
 import { Column, Pie, Treemap } from '@ant-design/charts';
@@ -12,6 +12,7 @@ import * as config from '../config';
 import SiteSelect from '../components/search/SiteSelect';
 import GroupSelect from '../components/search/GroupSelect';
 import { utils, writeFileXLSX } from 'xlsx';
+import SearchForm from './../components/search/SearchForm';
 
 const Sale = () => {
   const { sale_store, date_picker_store } = useContext(stores_Context);
@@ -207,48 +208,28 @@ const Sale = () => {
 
   return (
     <div>
-      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
-        <Col md={24} lg={12} xxl={14}></Col>
-        <Col md={24} lg={12} xxl={10}>
-          <Row>
-            <Col md={24} lg={10} xxl={8}>
-              <GroupSelect store={sale_store} mode={'multiple'} maxTagCount={1} />
-            </Col>
-            <Col md={24} lg={8} xxl={8}>
-              <SiteSelect store={sale_store} show_all={true} />
-            </Col>
-            <Col md={24} lg={6} xxl={8}>
-              <Select style={{ width: '100%' }} placeholder="是否含门票" value={sale_store.include_tickets} onChange={sale_store.handleChange_include_tickets}>
-                <Select.Option key="1" value="1">
-                  含门票
-                </Select.Option>
-                <Select.Option key="0" value="0">
-                  不含门票
-                </Select.Option>
-              </Select>
-            </Col>
-          </Row>
-          <Row>
-            <Col md={24} lg={8} xxl={8}>
-              <DataTypeSelect store={sale_store} />
-            </Col>
-            <Col md={24} lg={12} xxl={12}>
-              <DatePickerCharts />
-            </Col>
-            <Col md={24} lg={4} xxl={4} className="align_right">
-              <Button
-                type="primary"
-                icon={<SearchOutlined />}
-                loading={sale_store.loading}
-                onClick={() => {
-                  // sale_store.get_department_order_ml(date_picker_store);
-                  sale_store.get_department_order_ml_by_type(date_picker_store);
-                }}
-              >
-                统计
-              </Button>
-            </Col>
-          </Row>
+    <Row gutter={16} style={{ margin: '-16px -8px', position: 'relative', top: 0, zIndex: 10 }}>
+      <Col className="gutter-row" span={24}>
+        <SearchForm
+          defaultValue={{
+            initialValue: {
+              ...date_picker_store.formValues,
+              ...sale_store.searchValues,
+            },
+            shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
+            fieldProps: {
+              DepartmentList: { show_all: false, mode: 'multiple' },
+              WebCode: { show_all: true },
+              years: { hide_vs: true },
+            },
+          }}
+          onSubmit={(_err, obj, form, str) => {
+            sale_store.setSearchValues(obj, form);
+            sale_store.get_department_order_ml_by_type(date_picker_store);
+          }}
+        />
+      </Col>
+      </Row>
 
           {/* <Row>
 						<Col md={24} lg={12} xxl={12}>
@@ -284,12 +265,11 @@ const Sale = () => {
 							</Select>
 						</Col>
 					</Row> */}
-        </Col>
-      </Row>
 
       <Row>
         <Col className="gutter-row" md={24}>
-          <Column {...column_config} />
+          <Spin spinning={sale_store.loading_table} >
+          <Column {...column_config} /></Spin>
         </Col>
 
         <Col className="gutter-row" md={24}>