From fee2a327f8b39e6ad06791348f7bc6b6ed83f514 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Fri, 3 Nov 2023 10:59:24 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=B8=82=E5=9C=BA>=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE.=20=E5=BA=94=E7=94=A8=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search/SearchForm.jsx |  16 +-
 src/stores/OrdersStore.js            |  14 +
 src/views/Orders.jsx                 | 366 +++++++++++----------------
 3 files changed, 170 insertions(+), 226 deletions(-)

diff --git a/src/components/search/SearchForm.jsx b/src/components/search/SearchForm.jsx
index 092f774..57521db 100644
--- a/src/components/search/SearchForm.jsx
+++ b/src/components/search/SearchForm.jsx
@@ -198,10 +198,10 @@ export default observer((props) => {
     // layout="inline"
     <Form form={form} name="advanced_search" className="orders-search-form" onFinish={onFinish} onValuesChange={onValuesChange}>
       <EditableContext.Provider value={form}>
-        <Row gutter={10} style={{ background: '#f9fafa', margin: '0px 0px 10px 0px', padding: '16px 8px', boxShadow: '0px 0px 3px 0px rgba(0,0,0,0.15)' }}>
+        <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' }}>
+          <Col flex="1 0 120px" 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 || '统计'}
@@ -224,18 +224,20 @@ function getFields(props) {
   const layoutProps = {
     gutter: { xs: 8, sm: 8, lg: 16 },
     lg: { span: 4 },
+    md: { span: 8 },
     sm: { span: 12 },
     xs: { span: 24 },
   };
   const item = (name, sort = 0, render, col) => {
     const customCol = col || 4;
+    const mdCol = customCol * 2;
     return {
       'key': '',
       sort,
       name,
       render,
       'hide': false,
-      'col': { lg: { span: customCol } },
+      'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol}, flex: mdCol < 8 ? "1 0" : "" },
     };
   };
   let baseChildren = [];
@@ -282,7 +284,7 @@ function getFields(props) {
           </Option>
         </Select>
       </Form.Item>,
-      2
+      3
     ),
     //
     item(
@@ -291,7 +293,7 @@ function getFields(props) {
       <Form.Item name={`DateType`} initialValue={at(props, 'initialValue.DateType')[0] || { key: 'applyDate', label: '提交日期' }}>
         <DateTypeSelect labelInValue={true} />
       </Form.Item>,
-      2
+      3
     ),
     item(
       'years',
@@ -300,7 +302,7 @@ function getFields(props) {
         {/* <DatePicker picker="year" placeholder='年份' /> */}
         <YearPickerCharts {...fieldProps.years} />
       </Form.Item>,
-      2
+      3
     ),
     item(
       'months',
@@ -308,7 +310,7 @@ function getFields(props) {
       <Form.Item>
         <DatePicker picker="month" placeholder="月份" />
       </Form.Item>,
-      2
+      3
     ),
     item(
       'dates',
diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js
index ba07033..ee8cb5c 100644
--- a/src/stores/OrdersStore.js
+++ b/src/stores/OrdersStore.js
@@ -73,6 +73,20 @@ class OrdersStore {
 		this.include_tickets = value;
 	};
 
+  searchValues = {
+    DateType: { key: 'applyDate', 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;
+  }
+
 	// 切换标签页
 	onChange_Tabs_sub(ordertype, ordertype_sub, active_key) {
 		this.active_tab_key_sub = active_key;
diff --git a/src/views/Orders.jsx b/src/views/Orders.jsx
index 917a8d5..aee44ed 100644
--- a/src/views/Orders.jsx
+++ b/src/views/Orders.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Button, Tabs, Table, Divider, Select, Radio } from "antd";
+import { Row, Col, Button, Tabs, Table, Divider, Select, Radio, Spin } from "antd";
 import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons";
 import { stores_Context } from "../config";
 import { Line, Pie } from "@ant-design/charts";
@@ -13,6 +13,8 @@ import { NavLink } from "react-router-dom";
 import * as comm from "../utils/commons";
 import { utils, writeFileXLSX } from "xlsx";
 import DateGroupRadio from '../components/DateGroupRadio';
+import SearchForm from './../components/search/SearchForm';
+
 class Orders extends Component {
 	static contextType = stores_Context;
 
@@ -219,7 +221,7 @@ class Orders extends Component {
 	}
 
 	render() {
-		const { orders_store } = this.context;
+		const { orders_store, date_picker_store } = this.context;
 		const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : [];
 		const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
     const avg_line_y = Math.round(orders_store.avgLine1);
@@ -310,55 +312,42 @@ class Orders extends Component {
 			],
 		};
 
+    const tableProps = {
+      dataSource: table_data.dataSource,
+      columns: table_data.columns,
+      size: 'small',
+      pagination: false,
+      scroll: { x: '100%' },
+      loading: orders_store.loading,
+    };
+
 		return (
-			<div>
-				<Row gutter={{ sm: 16, lg: 32 }}>
-					<Col md={24} lg={12} xxl={14}></Col>
-					<Col md={24} lg={12} xxl={10}>
-						<Row>
-							<Col md={24} lg={8} xxl={8}>
-								<GroupSelect store={orders_store} />
-							</Col>
-							<Col md={24} lg={8} xxl={8}>
-								<SiteSelect store={orders_store} show_all={true} />
-							</Col>
-							<Col md={24} lg={8} xxl={8}>
-								<Select style={{ width: "100%" }} placeholder="是否含门票" value={orders_store.include_tickets} onChange={orders_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={orders_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={orders_store.loading}
-									onClick={() => {
-										orders_store.getOrderCount();
-										orders_store.onChange_Tabs(orders_store.active_tab_key);
-									}}>
-									统计
-								</Button>
-							</Col>
-						</Row>
-					</Col>
-				</Row>
-				<Row gutter={[16, { sm: 16, lg: 32 }]} >
-          <Col span={24} style={{textAlign: 'right'}}>
+      <div>
+        <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,
+                  ...orders_store.searchValues,
+                },
+                shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
+                fieldProps: {
+                  DepartmentList: { show_all: false },
+                  WebCode: { show_all: true },
+                  years: { hide_vs: true },
+                },
+              }}
+              onSubmit={(_err, obj, form, str) => {
+                orders_store.setSearchValues(obj, form);
+                orders_store.getOrderCount();
+                orders_store.onChange_Tabs(orders_store.active_tab_key);
+              }}
+            />
+          </Col>
+          <Col span={24} style={{ textAlign: 'right' }}>
             <DateGroupRadio
-              visible={data_source.length!==0}
+              visible={data_source.length !== 0}
               dataRaw={orders_store.orderCountDataRaw}
               onChange={orders_store.onChangeDateGroup}
               value={orders_store.lineChartXGroup}
@@ -366,177 +355,116 @@ class Orders extends Component {
               fieldMapper={orders_store.orderCountDataFieldMapper}
             />
           </Col>
-					<Col span={24}>
-						<Line {...config} />
-					</Col>
+        </Row>
 
-					<Col span={24}>
-						<Tabs activeKey={orders_store.active_tab_key} onChange={active_key => orders_store.onChange_Tabs(active_key)}>
-							<Tabs.TabPane
-								tab={
-									<span>
-										<ContainerOutlined />
-										来源类型
-									</span>
-								}
-								key="Form">
-								<Table id="table_to_xlsx_form" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
-								<Divider orientation="right" plain>
-									<a
-										onClick={() => {
-											const wb = utils.table_to_book(document.getElementById("table_to_xlsx_form").getElementsByTagName("table")[0]);
-											writeFileXLSX(wb, "来源类型.xlsx");
-										}}>
-										导出excel
-									</a>
-								</Divider>
-							</Tabs.TabPane>
-							<Tabs.TabPane
-								tab={
-									<span>
-										<CarryOutOutlined />
-										产品类型
-									</span>
-								}
-								key="Product">
-								<Table id="table_to_xlsx_product" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
-								<Divider orientation="right" plain>
-									<a
-										onClick={() => {
-											const wb = utils.table_to_book(document.getElementById("table_to_xlsx_product").getElementsByTagName("table")[0]);
-											writeFileXLSX(wb, "产品类型.xlsx");
-										}}>
-										导出excel
-									</a>
-								</Divider>
-							</Tabs.TabPane>
-							<Tabs.TabPane
-								tab={
-									<span>
-										<SmileOutlined />
-										国籍
-									</span>
-								}
-								key="Country">
-								<Table id="table_to_xlsx_country" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
-								<Divider orientation="right" plain>
-									<a
-										onClick={() => {
-											const wb = utils.table_to_book(document.getElementById("table_to_xlsx_country").getElementsByTagName("table")[0]);
-											writeFileXLSX(wb, "国籍.xlsx");
-										}}>
-										导出excel
-									</a>
-								</Divider>
-							</Tabs.TabPane>
-							<Tabs.TabPane
-								tab={
-									<span>
-										<TagsOutlined />
-										线路
-									</span>
-								}
-								key="line">
-								<Table id="table_to_xlsx_line" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
-								<Divider orientation="right" plain>
-									<a
-										onClick={() => {
-											const wb = utils.table_to_book(document.getElementById("table_to_xlsx_line").getElementsByTagName("table")[0]);
-											writeFileXLSX(wb, "线路.xlsx");
-										}}>
-										导出excel
-									</a>
-								</Divider>
-							</Tabs.TabPane>
-							<Tabs.TabPane
-								tab={
-									<span>
-										<GlobalOutlined />
-										目的地
-									</span>
-								}
-								key="city">
-								<Table id="table_to_xlsx_city" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
-								<Divider orientation="right" plain>
-									<a
-										onClick={() => {
-											const wb = utils.table_to_book(document.getElementById("table_to_xlsx_city").getElementsByTagName("table")[0]);
-											writeFileXLSX(wb, "目的地.xlsx");
-										}}>
-										导出excel
-									</a>
-								</Divider>
-							</Tabs.TabPane>
-							<Tabs.TabPane
-								tab={
-									<span>
-										<BlockOutlined />
-										页面类型
-									</span>
-								}
-								key="LineClass">
-								<Table id="table_to_xlsx_LineClass" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
-								<Divider orientation="right" plain>
-									<a
-										onClick={() => {
-											const wb = utils.table_to_book(document.getElementById("table_to_xlsx_LineClass").getElementsByTagName("table")[0]);
-											writeFileXLSX(wb, "页面类型.xlsx");
-										}}>
-										导出excel
-									</a>
-								</Divider>
-							</Tabs.TabPane>
-							<Tabs.TabPane
-								tab={
-									<span>
-										<FullscreenOutlined />
-										客群类别
-									</span>
-								}
-								key="GuestGroupType">
-								<Table id="table_to_xlsx_GuestGroupType" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
-								<Divider orientation="right" plain>
-									<a
-										onClick={() => {
-											const wb = utils.table_to_book(document.getElementById("table_to_xlsx_GuestGroupType").getElementsByTagName("table")[0]);
-											writeFileXLSX(wb, "客群类别.xlsx");
-										}}>
-										导出excel
-									</a>
-								</Divider>
-							</Tabs.TabPane>
-							<Tabs.TabPane
-								tab={
-									<span>
-										<DingtalkOutlined />
-										出行动机
-									</span>
-								}
-								key="TravelMotivation">
-								<Table id="table_to_xlsx_TravelMotivation" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
-								<Divider orientation="right" plain>
-									<a
-										onClick={() => {
-											const wb = utils.table_to_book(document.getElementById("table_to_xlsx_TravelMotivation").getElementsByTagName("table")[0]);
-											writeFileXLSX(wb, "出行动机.xlsx");
-										}}>
-										导出excel
-									</a>
-								</Divider>
-							</Tabs.TabPane>
-						</Tabs>
-						<Row>
-							<Col sm={24} lg={12}>
-								<Pie {...pie_config} data={pie_data} />
-							</Col>
-							<Col sm={24} lg={12}>
-								<Pie {...pie_config} data={pie_data2} />
-							</Col>
-						</Row>
-					</Col>
-				</Row>
-			</div>
-		);
+        <Row gutter={[16, { sm: 16, lg: 32 }]}>
+          <Col span={24}>
+            <Spin spinning={orders_store.loading}>
+              <Line {...config} />
+            </Spin>
+          </Col>
+
+          <Col span={24}>
+            <Tabs
+              activeKey={orders_store.active_tab_key}
+              onChange={(active_key) => orders_store.onChange_Tabs(active_key)}
+              items={[
+                {
+                  key: 'Form',
+                  label: (
+                    <span>
+                      <ContainerOutlined />
+                      来源类型
+                    </span>
+                  ),
+                },
+                {
+                  key: 'Country',
+                  label: (
+                    <span>
+                      <SmileOutlined />
+                      国籍
+                    </span>
+                  ),
+                },
+                {
+                  key: 'line',
+                  label: (
+                    <span>
+                      <TagsOutlined />
+                      线路
+                    </span>
+                  ),
+                },
+                {
+                  key: 'city',
+                  label: (
+                    <span>
+                      <GlobalOutlined />
+                      目的地
+                    </span>
+                  ),
+                },
+                {
+                  key: 'LineClass',
+                  label: (
+                    <span>
+                      <BlockOutlined />
+                      页面类型
+                    </span>
+                  ),
+                },
+                {
+                  key: 'GuestGroupType',
+                  label: (
+                    <span>
+                      <FullscreenOutlined />
+                      客群类别
+                    </span>
+                  ),
+                },
+                {
+                  key: 'TravelMotivation',
+                  label: (
+                    <span>
+                      <DingtalkOutlined />
+                      出行动机
+                    </span>
+                  ),
+                },
+              ].map((ele) => {
+                return {
+                  ...ele,
+                  children: (
+                    <>
+                      <Table id={`table_to_xlsx_${ele.key}`} {...tableProps} />
+                      <Divider orientation="right" plain>
+                        <a
+                          onClick={() => {
+                            const wb = utils.table_to_book(document.getElementById(`table_to_xlsx_${ele.key}`).getElementsByTagName('table')[0]);
+                            writeFileXLSX(wb, `${ele.key}.xlsx`);
+                          }}
+                        >
+                          导出excel
+                        </a>
+                      </Divider>
+                    </>
+                  ),
+                };
+              })}
+            />
+            <Row>
+              <Col sm={24} lg={12}>
+                <Pie {...pie_config} data={pie_data} />
+              </Col>
+              <Col sm={24} lg={12}>
+                <Pie {...pie_config} data={pie_data2} />
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </div>
+    );
 	}
 }