org-chart-frant/src/components/topBar/index.jsx

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';


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"
            }
        }
    }

    handleFormChange(payload) {
        let requestData = {...this.state.requestData, ...payload}
        this.setState({requestData})
    }

    handleExportMenuClick(e) {
        this.props.onExport(e.key == '1' ? "png" : "pdf")
    }

    handleExportButtonClick() {
        this.props.onExport("png")
    }

    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',
                },
            ]}
        />
    );

    render() {
        return (
            <div className={style.topbarWrapper}>
                <Row>

                    <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 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}>
                        <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>
        )
    }
}