商品管理列表页优化 实现全屏效果

日常需求：
https://xiaolv.qima-inc.com/#/demand/search?show=true&ids=37128
商品管理页 实现全屏

1. 通过使用js 的api ： element.requestFullScreen（）退出全屏：element.exitFullscreen（）
   但是在实现过程中会有层级问题；

2.通过操纵dom 的隐藏和显示实现虚拟的全屏

export default class OperatorWrapper extends Component<IFilterHandler> {
  state = {
    // 控制pop框展示
    visible: false,
    // 控制是否是全屏
    isFullScreen: false,
    imgUrlOpen: 'https://img01.yzcdn.cn/upload_files/2021/02/01/FuP3UIzt2XTiDL9HIKc3mzecfyoH.png',
    imgUrlClose: 'https://img01.yzcdn.cn/upload_files/2021/02/01/FnBYCbhSNTGrUcoXXtesMacrXNTr.png',
  };

  exportList = () => {
    const exportDialogId = `export_dialog_${+new Date()}`;
    const dialogParams = {
    });
  };

  componentDidMount() {
    // 是否显示用户引导信息
    const { localStorage } = window;
    // 从localstorage 中获取 isLeadUser；
    const isLeadUser = localStorage.getItem('isLeadUser');
    if (!isLeadUser) this.setState({ visible: true });
    // 监控esc事件
    document.addEventListener('keydown', this.escFunction, false);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.escFunction, false);
  }

  // esc 退出事件
  escFunction = event => {
    if (event.keyCode === 27) {
      this.setState({ isFullScreen: false }, () => {
        this.fullScreen();
      });
    }
  };

  // 显示全屏方法
  fullScreen() {
    const { isFullScreen } = this.state;
    const appHelpContainer: HTMLElement | null = document.getElementById('app-help-container');
    const sharedSider: HTMLElement | null = document.getElementById('shared-sidebar');
    const appHelpButton: HTMLElement | null = document.getElementById('app-help-button');
    const appThirdSidebar: HTMLElement | null = document.getElementById('app-third-sidebar');
    const appContainer: HTMLElement | null = document.getElementById('app-container');
    // 获取商品管理页模块的dom；
    // @ts-ignore
    const app: HTMLElement | null = document.getElementsByClassName('app')[0];

    if (
      appHelpContainer &&
      sharedSider &&
      appHelpButton &&
      appThirdSidebar &&
      appContainer &&
      app
    ) {
      appHelpContainer.style.display = isFullScreen ? 'none' : 'block';
      sharedSider.style.display = isFullScreen ? 'none' : 'block';
      appHelpButton.style.display = isFullScreen ? 'none' : 'block';
      appThirdSidebar.style.display = isFullScreen ? 'none' : 'block';
      appContainer.style.marginLeft = isFullScreen ? '0' : '224px';
      // 获取当前屏幕宽度;
      const { width } = window.screen;
      const curWidth = width + 'px';
      // 设置 商品管理模块的宽度 模拟全屏
      app.style.width = isFullScreen ? curWidth : '100%';
      // 显示弹窗；
      if (isFullScreen) {
        Notify.config({ duration: 2500 });
        Notify.info('按"Esc"键可退出全屏模式');
        this.popClose();
      }
    }
  }

  // 设置全屏
  setFullScreen = () => {
    const { isFullScreen } = this.state;
    this.setState({ isFullScreen: !isFullScreen }, () => {
      this.fullScreen();
    });
  };

  //关闭pop
  popClose = () => {
    const { localStorage } = window;
    // 存储isLeadUser === '1' 到localStorage中；
    localStorage.setItem('isLeadUser', '1');
    this.setState({ visible: false });
  };

  render() {
    const { isFullScreen, imgUrlOpen, imgUrlClose } = this.state;
    const {
      data: { queryType, isLoading },
      onSearchData,
      resetFilterData,
    } = this.props;
    const PopContent = (
      <p>
        点击展示全部字段列
        <Icon style={{ paddingLeft: 8, cursor: 'pointer' }} type="close" onClick={this.popClose} />
      </p>
    );

    return (
      <div className={style.wrapper}>
        >
          重置筛选条件
        </a>
        {/* 全屏icon */}
        <Pop
          trigger="none"
          position="left-center"
          content={PopContent}
          visible={this.state.visible}
        >
          <img
            className={style.fullScreenIcon}
            onClick={this.setFullScreen}
            src={isFullScreen ? imgUrlClose : imgUrlOpen}
            alt="icon"
          />
        </Pop>
      </div>
    );
  }