weaver_trunk_cli/pc4public/portal/wea-menu/MenuVertical.js

import { Menu } from 'antd';

const SubMenu = Menu.SubMenu;
const ItemMenu = Menu.Item;
import cloneDeep from 'lodash/cloneDeep';

class WeaMenuVertical extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mode: props.mode || 'vertical',
      datas: props.datas || [],
      inlineWidth: props.inlineWidth || 197,
      verticalWidth: props.verticalWidth || 61,
      fontSize: props.fontSize,
      selectedKey: props.defaultSelectedKey || '', // 包含SubMenu，只做单选
      defaultSelectedKey: props.defaultSelectedKey || '', // 包含SubMenu，只做单选
      canClick: true,
      translatepage: props.translatepage || '',
    };
    this.changeheight = this.changeheight.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    // console.log("nextProps:",nextProps);
    if (
      JSON.stringify(this.props.datas) !== JSON.stringify(nextProps.datas) ||
      (this.props.defaultSelectedKey !== nextProps.defaultSelectedKey && this.state.defaultSelectedKey !== nextProps.defaultSelectedKey)
    ) {
      let key =
        nextProps.defaultSelectedKey && nextProps.defaultSelectedKey.indexOf('verTop_') === 0
          ? nextProps.defaultSelectedKey.substring(7)
          : nextProps.defaultSelectedKey;
      this.setState({
        datas: nextProps.datas || [],
        defaultSelectedKey: nextProps.defaultSelectedKey || '',
        selectedKey: key || '',
      });
    }
  }
  changeheight() {
    let asdh = $('#menuScrollWrapper').height();
    $('.wea-menu-vertical .ant-menu-vertical .ant-menu-submenu>.ant-menu-sub').css({ maxHeight: asdh, overflow: 'auto' });
  }
  render() {
    const { mode, datas } = this.state;
    const { selectedKey } = this.state;
    let that = this;
    return (
      <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@zj2muk`}
        openAnimation={() => {}}
        inlineIndent={14}
        mode={mode}
        selectedKeys={[selectedKey]}
        // onOpen={(e)=>{that.changeOpen(e.openKeys)}}
        // onClose={(e)=>{that.changeOpen(e.openKeys)}}
        onClick={(e) => {
          that.changeSelectedKey(e.key, that.getDataByKey(e.key, datas), 0);
        }}
      >
        {this.renderMenuItem(datas, 1)}
      </Menu>
    );
  }

  onModeChange() {
    const { mode } = this.state;
    if (typeof this.props.onModeChange == 'function') {
      this.props.onModeChange(mode);
    }
  }
  changeSelectedKey(key, data, type) {
    if (window.event && window.event.shiftKey) {
      window.open(data.fullrouteurl || data.url, '_blank');
      return;
    }

    if (data && data.target != 'mainFrame') {
      window.open(data.fullrouteurl || data.url, data.target);
      return;
    }
    const { canClick } = this.state;
    const { clickBlock } = this.props;
    const that = this;
    // let d = new Date();
    // console.log(canClick,d.getTime());
    if (canClick) {
      if (key && key.indexOf('verTop_') === 0) {
        key = key.substring(7);
      }
      this.setState({
        canClick: false,
        selectedKey: key,
      });
      if (typeof this.props.onSelect == 'function') {
        this.props.onSelect(key, data, type);
      }
      setTimeout(() => {
        that.setState({ canClick: true });
      }, clickBlock || 300);
    }
  }
  getDataByKey(key, datas) {
    let that = this;
    let obj = '';
    for (let i = 0; i < datas.length && obj == ''; i++) {
      if (datas[i].id == key) {
        obj = cloneDeep(datas[i]);
      }
      if (obj == '' && datas[i].child && datas[i].child.length > 0) {
        obj = that.getDataByKey(key, datas[i].child);
      }
    }
    return obj;
  }
  renderMenuItem(datas, level) {
    const selectedClassName = 'wea-menu-selected';
    let that = this;
    const { selectedKey } = this.state;
    let datasArr = new Array();
    for (let i = 0; i < datas.length; i++) {
      const data = datas[i];
      const isSubMenu = data.child && data.child.length > 0;
      const isSelected = selectedKey == data.id || `verTop_${selectedKey}` == data.id;
      if (data.isVerticalHide !== 'true') {
        if (isSubMenu) {
          datasArr.push(
            <SubMenu ecId={`${this && this.props && this.props.ecId || ''}_SubMenu@ky9qs6@${data.id}`}
              selectedClassName={(isSelected ? selectedClassName : '') + (level == 1 ? ' wea-menu-submenu-title' : '')}
              onMouseEnter={this.changeheight}
              key={data.id}
              ifFixed={true}
              onTitleClick={(e) => {
                that.changeSelectedKey(e.key, data, 0);
              }}
              title={that.renderTitle(data, level)}
            >
              {that.renderMenuItem(data.child, level + 1)}
            </SubMenu>,
          );
          if (level == 2 && i == 0 && !data.isVerticalHide) {
            datasArr.push(<Menu.Divider ecId={`${this && this.props && this.props.ecId || ''}_Menu.Divider@yulrrd@${data.id}`} />);
          }
        } else {
          datasArr.push(
            <ItemMenu ecId={`${this && this.props && this.props.ecId || ''}_ItemMenu@7slee2@${data.id}`} className={isSelected ? selectedClassName : ''} onMouseEnter={this.changeheight} key={data.id}>
              {that.renderTitle(data, level)}
            </ItemMenu>,
          );
        }
      }
    }
    return datasArr;
  }
  renderTitle(data, level) {
    const { fontSize, translatepage } = this.state;
    const needImg = level == 1;
    const img =
      data.iconType == '2' && data.iconImgSrc ? (
        <img data-id={data.numId} src={data.iconImgSrc} alt="" style={{ width: '18px', height: '18px', verticalAlign: '-4px' }} />
      ) : data.icon ? (
        <i data-id={data.numId} style={{ fontSize: '18px', verticalAlign: 'middle', margin: 'auto' }} className={`wevicon ${data.icon}`} />
      ) : (
        <i data-id={data.numId} style={{ fontSize: '18px', verticalAlign: 'middle', margin: 'auto' }} className={`wevicon wevicon-menu-default wevicon-menu-${data.levelid}`} />
      );
    if (level > 1) {
      return (
        <span data-id={data.numId} className={`wea-menu-title wea-f${fontSize}`} style={{ paddingRight: '20px', verticalAlign: 'middle' }}>
          {translatepage == '1' ? (data.fname ? data.fname : data.name) : data.name}
        </span>
      );
    }
    return needImg ? img : '';
  }
}

export default WeaMenuVertical;