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

import React from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import style from './index.less';
import {
  DatePicker,
  Select,
  Button,
  Checkbox,
  Row,
  Col,
  Dropdown,
  Menu,
  TreeSelect,
  Tooltip,
  Modal,
  Input,
  message,
} from 'antd';
const { Option } = Select;
const { TextArea } = Input;
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import { HomeOutlined } from '@ant-design/icons';
moment.locale('zh-cn');

export class TopBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fclasslist: [],
      rootTreeData: [], //根节点异步树
      treeLoadedKeys: [],
      treeExpandedKeys: [],
      requestData: {
        fclass: '0',
        root: undefined,
        level: '2',
        fisvitual: '0',
        hidedept: '0',
      },
      open: false,
      confirmLoading: false,
      description: '',
    };
  }

  /**
   * 表单值改变
   * @param {*} payload
   */
  handleFormChange(payload) {
    let requestData = { ...this.state.requestData, ...payload };
    this.setState({ requestData });
  }

  onChange = (e) => {
    this.setState({ description: e.target.value });
  };

  /**
   * 弹窗确认
   */
  handleOk = () => {
    const { description, requestData } = this.state;
    if (description.length == 0) {
      return message.error('请填写描述信息');
    }
    this.setState({ confirmLoading: true });
    let api =
      '/api/bs/hrmorganization/orgchart/versionRecord?fclass=' +
      requestData.fclass +
      '&description=' +
      description;
    fetch(api)
      .then((res) => res.json())
      .then((data) => {
        if (data.api_status) {
          this.setState({
            open: false,
            confirmLoading: false,
          });
          message.success('版本记录成功,请重新刷新页面', 2, 3);
        } else {
          message.error('版本记录失败,请联系相关人员处理数据', 2, 3);
        }
      });
  };

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

  handleExportButtonClick() {
    this.props.onExport('png');
  }

  /**
   * 根节点树数据
   * @param {} parentId
   * @returns
   */
  getNodeTreeNode = (url, merge = true) => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        if (data.api_status) {
          let arr = [];
          if (merge) {
            arr = [...this.state.rootTreeData, ...data.companyTree];
          } else {
            arr = [...data.companyTree];
          }
          arr.map((item, index) => {
            item.icon = <HomeOutlined />;
          });
          this.setState({
            rootTreeData: arr,
          });
        }
      });
  };

  /**
   * 根节点树异步加载
   * @param {} parentId
   * @returns
   */
  onRootLoadData = (treeNode) =>
    new Promise((resolve) => {
      const { id } = treeNode;
      setTimeout(() => {
        const { fclass } = this.state.requestData;
        let api =
          '/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
          id +
          '&fclass=' +
          fclass;
        this.getNodeTreeNode(api);
        resolve(undefined);
      }, 500);
    });

  onRootChange = (value) => {
    let requestData = { ...this.state.requestData, root: value };
    this.setState({ requestData });
  };

  onTreeExpand = (expandedKeys) => {
    this.setState({
      treeExpandedKeys: expandedKeys,
    });
  };

  componentDidMount() {
    this.getSeatchCondition(this.props.url);
  }

  getSeatchCondition = (url) => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        data.companyTree.map((item, index) => {
          item.icon = <HomeOutlined />;
        });
        this.setState({
          fclasslist: data.fclasslist,
          rootTreeData: data.companyTree,
        });
      });
  };

  menu = (
    <Menu
      onClick={this.handleExportMenuClick.bind(this)}
      items={[
        {
          label: '导出图片',
          key: '1',
        },
        // {
        //   label: '导出PDF',
        //   key: '2',
        // },
      ]}
    />
  );

  render() {
    const { disabled, type } = this.props;
    const { rootTreeData, open, confirmLoading, treeExpandedKeys } = this.state;

    return (
      <div className={style.topbarWrapper}>
        <Row>
          <Col span={6}>
            维度：
            <Select
              defaultValue="0"
              style={{ width: 140 }}
              value={this.state.requestData.fclass}
              onChange={(value) => {
                const requestData = {
                  fclass: value,
                  root: undefined,
                  level: '2',
                  fisvitual: '0',
                  hidedept: '0',
                };
                this.handleFormChange(requestData);
                this.setState({
                  rootTreeData: [],
                });
                this.getNodeTreeNode(
                  `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`,
                  false,
                );
                this.props.changeFclass(requestData);
              }}
            >
              {this.state.fclasslist.map((item) => (
                <Option key={item.key} value={item.id}>
                  {item.companyname}
                </Option>
              ))}
            </Select>
          </Col>
          <Col span={6}>
            根节点：
            <TreeSelect
              treeDataSimpleMode
              allowClear
              style={{ width: '75%' }}
              value={this.state.requestData.root}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择根节点"
              onChange={this.onRootChange}
              loadData={this.onRootLoadData}
              treeData={rootTreeData}
              treeIcon
            />
          </Col>
          <Col span={6}>
            <Checkbox
              style={{ marginTop: '5px', marginLeft: 100 }}
              checked={this.state.requestData.hidedept == '1'}
              onChange={(e) =>
                this.handleFormChange({
                  hidedept: e.target.checked ? '1' : '0',
                })
              }
            >
              隐藏部门
            </Checkbox>
            <Tooltip
              title="提示:开启后将只显示分部组织架构！！！"
              color="#0082fb"
              placement="rightTop"
            >
              <QuestionCircleOutlined
                style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
              />
            </Tooltip>
          </Col>
          <Col span={6}>
            部门层级：
            <Select
              defaultValue="3"
              style={{ width: 140 }}
              value={this.state.requestData.level}
              onChange={(value) => this.handleFormChange({ level: value })}
            >
              <Option value="1">全部</Option>
              <Option value="2">一级</Option>
              <Option value="3">二级</Option>
              <Option value="4">三级</Option>
            </Select>
          </Col>
        </Row>
        <Row style={{ marginTop: '15px' }}>
          <Col span={6}>
            <Checkbox
              style={{ marginTop: '5px' }}
              checked={this.state.requestData.fisvitual == '1'}
              onChange={(e) =>
                this.handleFormChange({
                  fisvitual: e.target.checked ? '1' : '0',
                })
              }
            >
              显示虚拟组织
            </Checkbox>
            <Tooltip
              title="提示:若启用虚拟组织，需要在分部自定义表增加字段(名称 fblx) 字段类型 下拉框(0实体 1虚拟) 部门自定义表同上(字段名称 bmlx)。"
              color="#0082fb"
              placement="rightTop"
            >
              <QuestionCircleOutlined
                style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
              />
            </Tooltip>
          </Col>
          <Col span={16}>
            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              disabled={disabled}
              onClick={() => {
                this.setState({ open: true });
              }}
            >
              版本记录
            </Button>

            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              onClick={() => {
                this.props.onSearch(this.state.requestData);
              }}
            >
              查询
            </Button>
            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              onClick={() => {
                window.open('#/dragtree', 'blank');
              }}
            >
              组织调整
            </Button>
            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              onClick={() => {
                window.open('#/statistics', 'blank');
              }}
            >
              人数统计
            </Button>
            <Dropdown overlay={this.menu}>
              <Button type="primary">导出</Button>
            </Dropdown>
          </Col>
        </Row>
        <Modal
          title="版本记录"
          cancelText="取消"
          okText="确定"
          open={open}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={() => this.setState({ open: false })}
        >
          <p style={{ color: 'red' }}>
            提示:版本记录耗时较长，请谨慎操作（仅记录当前维度的数据版本）
          </p>
          <p>主题:</p>
          <TextArea
            showCount
            maxLength={10}
            style={{ height: 120, resize: 'none' }}
            onChange={this.onChange}
            placeholder="please enter"
          />
        </Modal>
      </div>
    );
  }
}