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

  handleFormChange(payload) {
    let requestData = { ...this.state.requestData, ...payload };
    this.setState({ requestData });
  }
  //日期可选择未来
  // disabledDate (current)  {
  //   // return current && current >moment().subtract(1, "days");
  // return current && current > moment().endOf("day");
  // }

  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() {
    const { disabled } = this.props;

    return (
      <div className={style.topbarWrapper}>
        <Row>
          <Col span={6}>
            数据日期：
            <DatePicker
              placeholder="请选择日期"
              style={{ width: 130 }}
              locale={locale}
              allowClear={false}
              // disabledDate={this.disabledDate}
              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>

          <Col span={6}>
            维度：
            <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={6}>
            根节点：
            <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={6}>
            显示层级：
            <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>
        </Row>
        <Row style={{ marginTop: '15px' }}>
          <Col span={6}>
            <Checkbox
              style={{ marginTop: '5px' }}
              onChange={(e) =>
                this.handleFormChange({
                  fisvitual: e.target.checked ? '1' : '0',
                })
              }
            >
              显示虚拟组织
            </Checkbox>
          </Col>
          <Col span={6}>
            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              disabled={disabled}
              onClick={() => {
                this.props.onSynchronous(this.state.requestData);
              }}
            >
              同步数据
            </Button>
            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              onClick={() => {
                this.props.onSearch(this.state.requestData);
              }}
            >
              查询
            </Button>
            <Dropdown overlay={this.menu}>
              <Button>导出</Button>
            </Dropdown>
          </Col>
        </Row>
      </div>
    );
  }
}