xgd_system/src/layouts/index.tsx

import { Outlet, history, useLocation } from 'umi';
import styles from './index.less';
import { useEffect, useState } from 'react';
import { MenuType, tabsType } from '@/utils/menu';
import { Select, message } from 'antd';
import LeftMenuOne from '@/layouts/LeftMenuOne';
import LeftMenuTwo from '@/layouts/LeftMenuTwo';
import BottomConfigInfo from '@/layouts/BottomConfigInfo';

const options2 = [
  { value: 1, label: 'GLQ管理' },
  { value: 2, label: 'MY管理' },
  { value: 3, label: 'SB管理' },
  { value: 4, label: 'SF管理' },
  { value: 5, label: 'SBJK二维版', disabled: true },
  { value: 6, label: '设备注册', disabled: true }
]

const leftMenuType: any = {
  // GLQ管理
  'GLQ远程维护': <LeftMenuOne key={1} data={MenuType['GLQ远程维护']} />,
  '网络MMJ管理': <LeftMenuTwo key={2} data={MenuType['网络MMJ管理']} />,
  '网络GLQ配置': <LeftMenuOne key={3} data={MenuType['网络GLQ配置']} />,
  // MY管理
  '密钥体管理': <LeftMenuOne key={4} data={MenuType['密钥体管理']} />,
  '密钥管理': <LeftMenuOne key={5} data={MenuType['密钥管理']} />,
  '邮箱管理': <LeftMenuOne key={6} data={MenuType['邮箱管理']} />,
  // SB管理
  '设备管理': <LeftMenuOne key={7} data={MenuType['设备管理']} />,
  '日志管理': <LeftMenuTwo key={8} data={MenuType['日志管理']} />,
  '审计管理': <LeftMenuTwo key={9} data={MenuType['审计管理']} />,
  '境外任务管理': <LeftMenuTwo key={10} data={MenuType['境外任务管理']} />,
  // SF管理
  '算法资源管理': <LeftMenuOne key={11} data={MenuType['算法资源管理']} />,
  '算法配置管理': <LeftMenuOne key={12} data={MenuType['算法配置管理']} />,
  '算法托收管理': <LeftMenuOne key={13} data={MenuType['算法托收管理']} />,
  '算法邮箱管理': <LeftMenuOne key={14} data={MenuType['算法邮箱管理']} />,
  // SBJK二维版
  '设备监控二维版': <div />,
  // 设备注册
  '注册管理': <LeftMenuOne key={15} data={MenuType['注册管理']} />,
  '位置管理': <LeftMenuOne key={16} data={MenuType['位置管理']} />
}

export default function Layout() {
  const [selectVal, setSelectVal] = useState<number>(1);
  const [tabList, setTabList] = useState<any>([]);
  const [active, setActive] = useState<number>(1);
  const [activeName, setActiveName] = useState<any>('GLQ远程维护');

  // 获取布局信息
  let layoutInfo: any = localStorage.getItem('layoutInfo');
  layoutInfo = JSON.parse(layoutInfo);

  useEffect(() => {
    // 校验浏览器是否有储存的布局信息
    if (layoutInfo) {
      setActive(layoutInfo.active);
      setActiveName(layoutInfo.activeName);
      setSelectVal(layoutInfo.selectVal);
      setTabList([...tabsType[layoutInfo.selectVal]]);
    } else {
      setTabList([...tabsType[selectVal]]);
    }
  }, [])

  // 页面销毁前记录下当前布局信息
  window.addEventListener('beforeunload', function (event) {
    let layoutInfo: any = {
      selectVal: selectVal,
      active: active,
      activeName: activeName,
    }
    localStorage.setItem('layoutInfo', JSON.stringify(layoutInfo));
  });

  useEffect(() => {
    // 条件判断： 当选择框的值发生改变时，在（tabList长度大于0 并且 没有发现记录布局的数据）时 ，默认进入第一个模块的页面
    if (tabList.length > 0 && !layoutInfo) {
      setActiveName(tabList[0].name)
      let info = MenuType[tabList[0].name];
      if (info[0].data) {
        history.push(`${info[0].data[0].url}`)
      } else {
        history.push(`${info[0].url}`)
      }
    }
  }, [selectVal])

  return (
    <div id={styles.layout_main}>
      {/* 顶部导航 */}
      <div className={styles.nav_warp}>
        <div className={styles.nav_warp_t}>

          <div className={styles.logo_warp}>
            <div className={styles.logo_icon}></div>
            <div className={styles.system_title}>XXXX管理系统</div>
          </div>

          <Select
            value={selectVal}
            style={{ width: 180 }}
            onChange={(e) => {
              // 改变下拉框数据时将布局信息清空
              localStorage.setItem('layoutInfo', JSON.stringify(null));
              setSelectVal(e)
              setTabList([...tabsType[e]])
              setActive(1)
            }}
            options={options2}
          />

          <div className={styles.menu_list}>
            <div title=''></div>
            <div title=''></div>
            <div title=''></div>
            <div title=''></div>
            <div title=''></div>
            <div title=''></div>
          </div>

          <div className={styles.times}>
            <div>XXXX：3023-00-00 15:00:00</div>
            <div>XXXX：3023-00-00 15:00:00</div>
          </div>
        </div>

        <div className={styles.nav_warp_b}>
          {
            tabList.map((item: any, index: number) => {
              return <div key={index} className={styles.tab_warp}>
                <div className={`${styles.tab_con} ${(index + 1) == active ? styles.active_tab : ''}`}
                  onClick={() => {
                    let info = MenuType[item.name];

                    setActive(item.id)
                    setActiveName(item.name)

                    if (info.length == 0 || info[0].data && info[0].data.length == 0) {
                      history.push('/construction');
                      // 暂时屏蔽
                      // setActive(tabList[0].id)
                      // setActiveName(tabList[0].name)
                      // message.info(item.name + '模块正在建设中！')
                      return
                    }

                    // 改变activeName时跳转菜单栏的第一个路由
                    if (info[0].data) {
                      history.push(`${info[0].data[0].url}`)
                    } else {
                      history.push(`${info[0].url}`)
                    }

                  }}>
                  {item.name}
                </div>
              </div>
            })
          }
        </div>
      </div>

      {/* 主体内容 */}
      <div className={styles.main_warp}>
        {/* 右侧菜单栏 */}
        <div className={styles.left_menu}>
          {leftMenuType[activeName]}
        </div>

        {/* 左侧内容 */}
        <div className={styles.right_warp}>
          <div className={styles.right_route} 
            style={{
              height: selectVal == 1 ? 
              'calc(100vh - 114px - 141px - 52px)' : 
              'calc(100vh - 114px - 52px)'
            }}
          >
            <Outlet></Outlet>
          </div>

          {/* GQL管理整个模块页面底部的配置信息 */}
          {selectVal == 1 && <BottomConfigInfo />}
          
          {/* 底部信息 */}
          <div className={styles.footer}>
            <div>软件当前版本：0.0.0</div>
            <div>当前用户：admin</div>
            <div>当前操作：设备注册</div>
          </div>
        </div>
      </div>
    </div>
  );
}