xlyErp / xlyUmi

import React, { Component } from 'react';
import { DownSquareOutlined } from '@ant-design/icons';
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { Tabs, Dropdown, Menu, Button } from 'antd-v4';
import MenuPanel from '@/routes/menuPanel/menuPanel';
import * as commonUtils from '@/utils/utils';
import * as commonFunc from '@/components/Common/commonFunc';/* 通用单据方法 */
import styles from './index.less';

class TabComponent extends Component {
  constructor(props) {
    super(props);
    this.header = null;
    this.tabs = null;
    this.tabsHeader = null;
    this.tabsContent = null;
    this.menusUl = null;
    this.hideMenu = () => {
      this.menusUl.style.display = 'none';
    };
    this.showMenu = () => {
      this.menusUl.style.display = 'block';
    };
  }

  componentDidMount() {
    [this.header] = document.getElementsByClassName('ant-layout-header');
    this.tabs = document.getElementById('navTabWrap');/* 便签区域加监听 */
    this.tabsHeader = this.tabs && this.tabs.getElementsByClassName('ant-tabs-nav')[0];
    this.tabsContent = this.tabs && this.tabs.getElementsByClassName('ant-tabs-content-holder')[0];
    this.menusUl = document.getElementById('menuDisplay');/* 右键菜单 */
    if (this.tabsContent && this.menusUl) {
      this.hideMenu();
      this.tabsHeader.oncontextmenu = (event) => {
        /* 浏览器的默认行为：浏览器自带的功能，如：超链接，文本框可以输入内容，网页的右键菜单 */
        const evt = event || window.event;
        evt.preventDefault();
        const { app } = this.props;
        const { panes } = app;
        const tagArr = panes.filter(item => item.newRecordFlag !== undefined);
        const bRecordFlagDisabled = tagArr.length > 0;
        if (bRecordFlagDisabled) {
          return;
        }

        this.menusUl.style.left = `${evt.pageX}px`;
        this.menusUl.style.top = `${evt.pageY}px`;
        this.showMenu();
      };
      this.tabsHeader.onclick = () => this.hideMenu();
      this.tabsContent.oncontextmenu = () => this.hideMenu();
      this.tabsContent.onclick = () => this.hideMenu();
      this.header.oncontextmenu = () => this.hideMenu();
      this.header.onclick = () => this.hideMenu();
    }
    this.onChange(this.props.app.currentPane.key);

    this.computedNavTabWrapWidth();
    window.addEventListener('resize', this.computedNavTabWrapWidth);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.computedNavTabWrapWidth);
  }
  // componentDidUpdate(prevProps) {
  //   const { panes } = prevProps.app;
  //   if (commonUtils.isNotEmptyArr(panes)) {
  //     const currentPageTitle = commonFunc.showMessage(prevProps.app.commonConst, 'MainPage');/* 主页 */
  //     const homeTitle = commonUtils.isNotEmptyObject(currentPageTitle) ? currentPageTitle : '主页';
  //     const iIndex = panes.findIndex(item => item.paneType === 'home');
  //     if (iIndex > -1 && !commonUtils.isEmpty(panes[iIndex].title)) {
  //       panes[iIndex].title = homeTitle;
  //     }
  //   }
  // }
  onChange = (activeKey) => {
    for (const each of this.props.app.panes) {
      each.notCurrentPane = true;
    }
    const pane = this.props.app.panes.filter(paneTmp => paneTmp.key === activeKey)[0];
    pane.notCurrentPane = false;
    this.handleHideModal();
    window.fetchCount = 0;
    window.refreshTabFlag = 1;
    this.props.onSaveCurrentPane(pane);
  };

  onEdit = (targetKey, action) => {
    this[action](targetKey);
    this.handleHideModal();
  };

  remove = (targetKey) => {
    const rmpane = this.props.app.panes.filter(pane => pane.key === targetKey);
    const newRecordParentKey = rmpane[0].newRecordFlag !== undefined ? rmpane[0].newRecordFlag.replace('NewRecord_', '').toString().trim() : '';
    const parentKey = rmpane[0].parentPaneKey !== undefined ? rmpane[0].parentPaneKey : '';
    let lastIndex = -1;
    this.props.app.panes.forEach((pane, i) => {
      if (newRecordParentKey !== '' && pane.key === newRecordParentKey) {
        lastIndex = i;
      } else if (parentKey !== '' && pane.key === parentKey) { /* 非newRecord页签时移除时，回到来源页签 */
        lastIndex = i;
      } else if (parentKey === '' && pane.key === targetKey) {
        lastIndex = i - 1;
      }
      pane.notCurrentPane = true;
    });

    const panes = this.props.app.panes.filter(pane => pane.key !== targetKey);
    let pane;
    if (lastIndex >= 0) {
      pane = panes[lastIndex];
    } else if (lastIndex === -1 && panes.length > 0) {
      pane = panes[lastIndex + 1];
    } else {
      pane = {};
    }
    pane.notCurrentPane = false;

    this.props.onRemove(panes, pane, rmpane);
  };

  // 计算标签总宽度
  computedNavTabWrapWidth = () => {
    const navTabWrap = document.querySelector('#navTabWrap');
    const pcDropdwonContainer = document.querySelector('#pcDropdwonContainer');
    const root = document.querySelector('#root');
    if (navTabWrap && pcDropdwonContainer && root) {
      const tabsNav = navTabWrap.querySelector('.ant-tabs-nav');
      if (tabsNav) {
        const tabsNavLeft = tabsNav.getBoundingClientRect().left;
        const pcDropdwonContainerLeft = pcDropdwonContainer.getBoundingClientRect().left;
        const tabsNavWidth = `${pcDropdwonContainerLeft - tabsNavLeft - 9}px`;
        root.style.setProperty('--tabs-nav-width', tabsNavWidth);
      }
    }
  }

  handleRightClick = (e) => {
    const { key } = e;
    const { panes, currentPane } = this.props.app;
    this.hideMenu();
    if (panes.length === 1) {
      return;
    }

    const closeOther = () => {
      let newPanes = [panes[0], currentPane];
      // 双主页的问题
      if (panes[0].paneType === 'home' && currentPane.paneType === 'home') {
        newPanes = [panes[0]];
      }
      const removePane = this.props.app.panes.filter(pane => pane.key !== currentPane.key);
      this.props.onRemove(newPanes, currentPane, removePane);
    };
    const closeAll = () => {
      this.props.onRemove([panes.shift()], panes[0], panes);
    };
    const closeCurrent = () => {
      const currentPaneIndex = panes.findIndex(item => item.key === currentPane.key);
      const newPanes = [];
      if (currentPaneIndex > 0) {
        panes.forEach((item, index) => {
          if (index !== currentPaneIndex) {
            newPanes.push(item);
          }
        });
        this.props.onRemove(newPanes, panes[currentPaneIndex - 1], [currentPane]);
      }
    };
    const closeRight = () => {
      const currentPaneIndex = panes.findIndex(item => item.key === currentPane.key);
      const newPanes = [];
      const removePane = [];
      if (currentPaneIndex > -1) {
        panes.forEach((item, index) => {
          if (index <= currentPaneIndex) {
            newPanes.push(item);
          } else {
            removePane.push(item);
          }
        });
        this.props.onRemove(newPanes, currentPane, removePane);
      }
    };
    const funcMap = new Map([
      ['other', closeOther],
      ['all', closeAll],
      ['current', closeCurrent],
      ['right', closeRight],
    ]);
    funcMap.get(key)();
  };

  handleHideModal = () => {
    const currentPane = this.props.app.panes.find(item => item.notCurrentPane === false);
    const hideModal = document.querySelector(`.ant-modal-root[data-attr-modalId=modalId_${currentPane.key}]`);
    if (hideModal) {
      hideModal.style.display = '';
      hideModal.removeAttribute('data-attr-modalId');
    }
  };

  render() {
    const { tabpanes, app } = this.props;
    const { panes } = app;
    const tagArr = panes.filter(item => item.newRecordFlag !== undefined);
    const bRecordFlagDisabled = tagArr.length > 0;

    const closeOtherPages = commonFunc.showMessage(app.commonConst, 'closeOtherPages');/* 关闭其他页面 */
    const closeAllPages = commonFunc.showMessage(app.commonConst, 'closeAllPages');/* 关闭所有页面 */
    const closeCurrentPage = commonFunc.showMessage(app.commonConst, 'closeCurrentPage');/* 关闭当前页面 */
    const closeRightPanges = commonFunc.showMessage(app.commonConst, 'closeRightPanges');/* 关闭右侧页面 */
    const closeTabs = (
      <Menu className={styles.menuCloseTabs} onClick={this.handleRightClick}>
        <Menu.Item key="other">
          {closeOtherPages}
        </Menu.Item>
        <Menu.Item key="all">{closeAllPages}</Menu.Item>
      </Menu>
    );
    const HomePage = commonUtils.isNotEmptyObject(commonFunc.showMessage(app.commonConst, 'HomePage')) ? commonFunc.showMessage(app.commonConst, 'HomePage') : '主页';/* 选择工艺参数标题 */
    const homeTab = (<div className={`homeTab ${this.props.app.currentPane.key === '1' ? 'homeTab__active' : ''} ${bRecordFlagDisabled ? styles.homeTab_disabled : ''}`} onClick={() => !bRecordFlagDisabled && this.onChange('1')}><LegacyIcon type="home" /><span>{HomePage}</span></div>);
    const { userinfo = {} } = app;
    const { sLanguage } = userinfo;
    return (
      <div className={`${styles.menus}${sLanguage === 'sEnglish' ? ' xlyerpEnglish' : ''}`} id="tabs">
        <div className={styles.allMenus} id="allMenus">
          <MenuPanel />
        </div>
        <Tabs
          hideAdd
          id="navTabWrap"
          className={`${styles.tabs} mainTabWrap`}
          onChange={this.onChange}
          activeKey={this.props.app.currentPane.key}
          type="editable-card"
          onEdit={this.onEdit}
          tabBarExtraContent={{
            left: homeTab,
          }}
        >
          {tabpanes}
        </Tabs>
        <div className={styles.rightMenu}>
          <Dropdown overlay={closeTabs} trigger={['click']}>
            <Button>
              <DownSquareOutlined />
            </Button>
          </Dropdown>
        </div>
        <Menu className={styles.contextMenu} id="menuDisplay" onClick={this.handleRightClick}>
          <Menu.Item key="current">
            {closeCurrentPage}
          </Menu.Item>
          <Menu.Item key="other">
            {closeOtherPages}
          </Menu.Item>
          <Menu.Item key="right">{closeRightPanges}</Menu.Item>
        </Menu>
      </div>
    );
  }
}

export default TabComponent;