From 7af2107493fb4df42e40c2cd545f6588685654e7 Mon Sep 17 00:00:00 2001
From: Chengliang <1546584672@qq.com>
Date: Tue, 6 Sep 2022 13:46:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=97=A5=E6=9C=9F=E5=9B=BD?=
 =?UTF-8?q?=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/topBar/index.jsx | 253 +++++++++++++++++++-------------
 1 file changed, 152 insertions(+), 101 deletions(-)

diff --git a/src/components/topBar/index.jsx b/src/components/topBar/index.jsx
index f0dcdb2..c43acb9 100644
--- a/src/components/topBar/index.jsx
+++ b/src/components/topBar/index.jsx
@@ -1,118 +1,169 @@
-import React from 'react'
-import style from './index.less'
-import { DatePicker, Select, Button, Checkbox, Row, Col, Dropdown, Menu, } from 'antd'
+import React from 'react';
+import style from './index.less';
+import {
+  DatePicker,
+  Select,
+  Button,
+  Checkbox,
+  Row,
+  Col,
+  Dropdown,
+  Menu,
+} from 'antd';
 const { Option } = Select;
 import moment from 'moment';
-
+import 'moment/locale/zh-cn';
+import locale from 'antd/lib/date-picker/locale/zh_CN';
+moment.locale('zh-cn');
 
 export class TopBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fclasslist: [],
+      companylist: [],
+      requestData: {
+        date: moment(new Date()).format('YYYY-MM-DD'),
+        fclass: '0',
+        root: '0',
+        level: '3',
+        fisvitual: '0',
+      },
+    };
+  }
 
-    constructor(props) {
-        super(props)
-        this.state = {
-            fclasslist: [],
-            companylist: [],
-            requestData: {
-                date: moment(new Date()).format("YYYY-MM-DD"),
-                fclass: "0",
-                root: "0",
-                level: "3",
-                fisvitual: "0"
-            }
-        }
-    }
+  handleFormChange(payload) {
+    let requestData = { ...this.state.requestData, ...payload };
+    this.setState({ requestData });
+  }
 
-    handleFormChange(payload) {
-        let requestData = {...this.state.requestData, ...payload}
-        this.setState({requestData})
-    }
+  handleExportMenuClick(e) {
+    this.props.onExport(e.key == '1' ? 'png' : 'pdf');
+  }
 
-    handleExportMenuClick(e) {
-        this.props.onExport(e.key == '1' ? "png" : "pdf")
-    }
+  handleExportButtonClick() {
+    this.props.onExport('png');
+  }
 
-    handleExportButtonClick() {
-        this.props.onExport("png")
-    }
+  componentDidMount() {
+    fetch(this.props.url)
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          fclasslist: data.fclasslist,
+          companylist: data.companylist,
+        });
+      });
+  }
 
-    componentDidMount() {
-        fetch(this.props.url).then(res => res.json()).then(data => {
-            this.setState({
-                fclasslist: data.fclasslist,
-                companylist: data.companylist
-            })
-        })
-    }
+  menu = (
+    <Menu
+      onClick={this.handleExportMenuClick.bind(this)}
+      items={[
+        {
+          label: '导出图片',
+          key: '1',
+        },
+        {
+          label: '导出PDF',
+          key: '2',
+        },
+      ]}
+    />
+  );
 
-    menu = (
-        <Menu
-            onClick={this.handleExportMenuClick.bind(this)}
-            items={[
-                {
-                    label: '导出图片',
-                    key: '1',
-                },
-                {
-                    label: '导出PDF',
-                    key: '2',
-                },
-            ]}
-        />
-    );
+  render() {
+    return (
+      <div className={style.topbarWrapper}>
+        <Row>
+          <Col span={5}>
+            数据日期：
+            <DatePicker
+              placeholder="请选择日期"
+              style={{ width: 120 }}
+              locale={locale}
+              defaultValue={moment(new Date())}
+              value={
+                this.state.requestData.date && this.state.requestData.date != ''
+                  ? moment(this.state.requestData.date)
+                  : ''
+              }
+              onChange={(value) =>
+                this.handleFormChange({
+                  date: value && value != '' ? value.format('YYYY-MM-DD') : '',
+                })
+              }
+            />
+          </Col>
 
-    render() {
-        return (
-            <div className={style.topbarWrapper}>
-                <Row>
+          <Col span={5}>
+            维度：
+            <Select
+              defaultValue="0"
+              style={{ width: 120 }}
+              value={this.state.requestData.fclass}
+              onChange={(value) => this.handleFormChange({ fclass: value })}
+            >
+              {this.state.fclasslist.map((item) => (
+                <Option value={item.id}>{item.companyname}</Option>
+              ))}
+            </Select>
+          </Col>
 
-                    <Col span={5}>
-                        数据日期：<DatePicker placeholder="请选择日期" style={{ width: 120 }} defaultValue={moment(new Date())} value={this.state.requestData.date && this.state.requestData.data != "" ? moment(this.state.requestData.date) : ""} onChange={(value) => this.handleFormChange({date: value && value != "" ? value.format("YYYY-MM-DD") : ""})} />
-                    </Col>
+          <Col span={5}>
+            根节点：
+            <Select
+              showSearch
+              filterOption={(input, option) =>
+                (option?.children).includes(input)
+              }
+              defaultValue="0"
+              style={{ width: 120 }}
+              value={this.state.requestData.root}
+              onChange={(value) => this.handleFormChange({ root: value })}
+            >
+              {this.state.companylist.map((item) => (
+                <Option value={item.id}>{item.fname}</Option>
+              ))}
+            </Select>
+          </Col>
 
+          <Col span={5}>
+            显示层级：
+            <Select
+              defaultValue="3"
+              style={{ width: 120 }}
+              value={this.state.requestData.level}
+              onChange={(value) => this.handleFormChange({ level: value })}
+            >
+              <Option value="1">一级</Option>
+              <Option value="2">二级</Option>
+              <Option value="3">三级</Option>
+            </Select>
+          </Col>
 
-                    <Col span={5}>
-                        维度：<Select defaultValue="0" style={{ width: 120 }} value={this.state.requestData.fclass} onChange={(value) => this.handleFormChange({fclass: value})}>
-                            {
-                                this.state.fclasslist.map(item => (<Option value={item.id}>{item.companyname}</Option>))
-                            }
-                        </Select>
-                    </Col>
-
-                    <Col span={5}>
-                        根节点：<Select 
-                        showSearch 
-                        filterOption={(input, option) => (option?.children ).includes(input)}
-                        defaultValue="0" style={{ width: 120 }} value={this.state.requestData.root} onChange={(value) => this.handleFormChange({root: value})}>
-                            {
-                                this.state.companylist.map(item => (<Option value={item.id}>{item.fname}</Option>))
-                            }
-                        </Select>
-                    </Col>
-
-                    <Col span={5}>
-                        显示层级：<Select defaultValue="3" style={{ width: 120 }} value={this.state.requestData.level} onChange={(value) => this.handleFormChange({level: value})}>
-                            <Option value="1">一级</Option>
-                            <Option value="2">二级</Option>
-                            <Option value="3">三级</Option>
-                        </Select>
-                    </Col>
-
-                    {/* <Col span={4}>
+          {/* <Col span={4}>
                         <Checkbox style={{ marginTop: "5px" }} onChange={(e) => this.handleFormChange({fisvitual: e.target.checked ? "1": "0"})}>显示虚拟组织</Checkbox>
                     </Col> */}
 
-                    <Col span={4}>
-                        <Button type="primary" style={{ marginRight: "10px" }} onClick={() => {this.props.onSearch(this.state.requestData)}}>查询</Button>
-                        <Dropdown overlay={this.menu}>
-                            <Button onClick={this.handleExportButtonClick.bind(this)}>
-                                导出
-                            </Button>
-                        </Dropdown>
-                    </Col>
-
-                </Row>
-
-            </div>
-        )
-    }
-}
\ No newline at end of file
+          <Col span={4}>
+            <Button
+              type="primary"
+              style={{ marginRight: '10px' }}
+              onClick={() => {
+                this.props.onSearch(this.state.requestData);
+              }}
+            >
+              查询
+            </Button>
+            <Dropdown overlay={this.menu}>
+              <Button onClick={this.handleExportButtonClick.bind(this)}>
+                导出
+              </Button>
+            </Dropdown>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}