src/views/layout/layout.vue

<template>
  <el-container class="app-wrapper">
    <!-- 顶部导航 -->
    <el-header height="60px" class="app-header">
      <div class="header-left">
        <div class="logo">HC</div>
        <el-menu mode="horizontal" :default-active="activeMenu" class="header-menu" background-color="#1e2132"
          text-color="#fff" active-text-color="#409EFF">
          <el-menu-item :index="item.caId" v-for="(item, index) in catalogs" :key="index"
            @click="_changeMenuCatalog(item)">{{ item.name }}</el-menu-item>
        </el-menu>
      </div>
      <div class="header-right">
        <el-dropdown @command="changeCommunity" v-if="storeInfo.storeTypeCd == '800900000003'" class="margin-right">
          <span class="user-info">
            {{ curCommunityName }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="c" v-for="(c, index) in communitys" :key="index">{{ c.name }}</el-dropdown-item>
            <el-dropdown-item command="moreCommunity" class="moreCommunity">{{ $t('layout.moreCommunity')
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand">
          <span class="user-info">
            {{ username }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">{{ $t('layout.logout') }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="margin-left">v1.9</span>
      </div>
    </el-header>
    <el-container>
      <!-- 左侧菜单 width="64px"-->
      <el-aside class="app-aside" width="80">
        <div class="vc-menu flex justify-start" id="menu-nav">
          <div class="vc-menu-main">
            <ul>
              <template v-for="(menu, index) in menuTree">
                <li :key="index" v-if="menu.childs && menu.childs.length > 0" :class="{ active: menu.active }"
                  @click="switchMenu(menu)">
                  <i class="fa " v-bind:class="menu.icon"></i><span class="margin-left-xs">{{ menu.name }}</span>
                </li>
              </template>
            </ul>
          </div>
          <div class="vc-menu-sub" v-if="subMenus && subMenus.length > 0">
            <ul>
              <li class="title">{{ curMenuName }}</li>
              <template v-for="(subMenu, index) in subMenus">
                <li :key="index" v-if="subMenu.isShow == 'Y'" :class="{ active: subMenu.active }"
                  v-on:click="_gotoPage(subMenu.href, subMenu.name)">
                  {{ subMenu.name }}
                </li>
              </template>
              <li class="sub-footer" @click="_closeSubMenu()"><i class="fa fa-dedent"></i></li>
            </ul>
          </div>
        </div>
      </el-aside>
      <!-- 主要内容区 -->
      <el-main class="app-main">
        <router-view />
      </el-main>
    </el-container>
    <more-community ref="moreCommunity" />
  </el-container>
</template>
<script>
import { _getMenuCatalog, getMenuTree } from '@/api/user/menuApi'
import { getStoreInfo } from "@/api/user/indexApi"
import { deepCopy, setCurrentCommunity } from "@/utils/vc"
import { getCommunityName, _loadCommunityInfo } from '@/api/community/communityApi'
import moreCommunity from '@/components/community/moreCommunity.vue'
export default {
  name: 'Layout',
  data() {
    return {
      catalogs: [],
      menuTree: [],
      subMenus: [],
      menuWidth: 80,
      menuId: '',
      curMenuName: '',
      activeMenu: '',
      activeSubMenu: 'communityList',
      searchText: '',
      username: '',
      curCommunityName: '',
      communitys: [],
      storeInfo: {
        storeTypeCd: '',
        storeId: ''
      },
    }
  },
  created() {
    let _user = JSON.parse(localStorage.getItem('user'));
    this.username = _user.name
    this._loadStoreInfo()
    this.loadCatalogs()
    this.curCommunityName = getCommunityName()
    this.loadCommunity()
  },
  components: {
    moreCommunity
  },
  methods: {
    async loadCommunity() {
      const { communitys } = await _loadCommunityInfo()
      this.communitys = communitys
    },
    async _loadStoreInfo() {
      this.loading = true
      try {
        const res = await getStoreInfo()
        deepCopy(res, this.storeInfo);
      } catch (error) {
        console.error('登录失败：', error)
      } finally {
        this.loading = false
      }
    },
    async loadCatalogs() {
      this.loading = true
      try {
        const res = await _getMenuCatalog()
        if (res.code != 0) {
          return;
        }
        this.catalogs = res.data;
        if (this.catalogs && this.catalogs.length > 0) {
          this._changeMenuCatalog(this.catalogs[0])
        }
      } catch (error) {
        console.error('登录失败：', error)
      } finally {
        this.loading = false
      }
    },
    _changeMenuCatalog(_catalog) {
      this.activeMenu = _catalog.caId;
      if (_catalog.caId === '1') {
        this.$router.push('/#/pages/mall/product');
      }
      if (_catalog.url == 'IOT') {
        this._navJumpToIot();
        return;
      }
      if (_catalog.url == 'MALL') {
        //获取用户名
        this.jumpToMall('/');
        return;
      }
      console.log(_catalog)
      if (_catalog.url != '#') {
        this._gotoPage(_catalog.url, _catalog.name)
        //return;
      }
      this.loadMenuTree(_catalog)
    },
    handleCommand(command) {
      if (command === 'logout') {
        // 处理退出登录
        localStorage.removeItem('token')
        localStorage.clear();
        this.$router.push('/login')
      } else if (command === 'zh' || command === 'en') {
        // 切换语言
        this.$i18n.locale = command
        localStorage.setItem('language', command)
      }
    },
    changeCommunity(community) {
      if (community == 'moreCommunity') {
        this.$refs.moreCommunity.open()
        return
      }
      setCurrentCommunity(community);
      this.curCommunityName = getCommunityName()
    },
    handleMenuSelect(index) {
      // 处理菜单选择
      this.$router.push({ name: index })
    },
    loadMenuTree(_catalog) {
      getMenuTree(_catalog).then(res => {
        let _menus = res.data;
        _menus.sort(function (a, b) {
          return a.seq - b.seq
        });
        this.menuTree = _menus;
      })
    },
    switchMenu(_menu) {
      //设置菜单ID
      this.menuId = _menu.id;
      this.menuTree = this.refreshMenuActive(this.menuTree, _menu.id);
      this.subMenus = _menu.childs;
      console.log(this.subMenus)
      this.curMenuName = _menu.name;
      if (!_menu.childs || _menu.childs.length < 1) {
        return;
      }
      //选中第一个
      this._gotoPage(_menu.childs[0].href, _menu.childs[0].name);
      //vc._fix_height()
    },
    refreshMenuActive(jsonArray, _id) {
      for (let menuIndex = 0; menuIndex < jsonArray.length; menuIndex++) {
        if (jsonArray[menuIndex].childs) {
          let _childs = jsonArray[menuIndex].childs;
          _childs.sort(function (_child, _newChild) {
            return _child.seq - _newChild.seq
          });
          jsonArray[menuIndex].childs = _childs;
        }
        if (_id === jsonArray[menuIndex].id) {
          //如果当前本身是打开状态，说明 需要关闭
          jsonArray[menuIndex].active = true;
          continue;
        }
        jsonArray[menuIndex].active = false;
      }
      return jsonArray;
    },
    _setSelectedMenusChild(_href) {
      for (var menuIndex = 0; menuIndex < this.menuTree.length; menuIndex++) {
        if (this.menuTree[menuIndex].childs) {
          var _childs = this.menuTree[menuIndex].childs;
          for (var childIndex = 0; childIndex < _childs.length; childIndex++) {
            if (_href == _childs[childIndex].href) {
              this.menuTree[menuIndex].childs[childIndex].active = true;
            } else {
              this.menuTree[menuIndex].childs[childIndex].active = false;
            }
          }
        }
      }
      this.$forceUpdate();
    },
    _gotoPage(_href, _tabName) {
      // 子菜单默认选中
      this._setSelectedMenusChild(_href);
      // if (_href.indexOf('?') > -1) {
      //   _href += ("&tab=" + _tabName)
      // } else {
      //   _href += ("?tab=" + _tabName)
      // }
      if (_href.indexOf('/#/') > -1) {
        _href = _href.replace('/#/', '/')
      }
      console.log(_href, _tabName)
      this.$router.push(_href)
    },
  }
}
</script>
<style lang="scss" scoped>
.app-wrapper {
  height: 100vh;
}
.app-header {
  background-color: #1e2132;
  color: #fff;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left {
  display: flex;
  align-items: center;
}
.logo {
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}
.header-menu {
  border: none;
}
.header-right {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.margin-left {
  margin-left: 15px;
  color: #fff;
}
.user-info {
  color: #fff;
  cursor: pointer;
}
.app-aside {
  width: auto;
}
.menu-wrapper {
  height: 100%;
}
.el-menu-vertical {
  border: none;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}
.app-main {
  background-color: #f5f7fa;
  height: calc(100vh - 60px);
  padding: 0px;
}
:deep(.el-menu--horizontal) {
  border-bottom: none;
}
:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}
:deep(.el-submenu__title) {
  height: 50px;
  line-height: 50px;
  padding: 0 20px !important;
}
:deep(.el-menu--collapse) {
  width: 64px;
}
:deep(.el-menu--collapse .el-submenu__title) {
  padding: 0 !important;
  text-align: center;
}
:deep(.el-menu--collapse .el-submenu__title i) {
  margin: 0;
  font-size: 20px;
}
:deep(.el-menu--popup) {
  min-width: 200px;
  background-color: #1e2132 !important;
}
:deep(.el-menu--popup .el-menu-item) {
  background-color: #1e2132;
  color: #fff;
}
:deep(.el-menu--popup .el-menu-item:hover) {
  background-color: #2a2f45;
}
:deep(.el-menu--popup .el-menu-item.is-active) {
  color: #409EFF;
}
.vc-menu {
  border-right: 1px solid #EFEFF0;
  .vc-menu-main {
    background-color: #1F2339;
    color: #838A9B;
    text-align: center;
    width: 80px;
    font-size: 14px;
    height: calc(100vh - 60px);
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    .active {
      background-color: #3E77FC;
      color: #FFFFFF;
    }
  }
  .vc-menu-main::-webkit-scrollbar {
    display: none;
  }
  ul {
    padding-inline-start: 0px;
    margin: 0;
    padding: 0;
  }
  li {
    margin: 0;
    padding: 0;
  }
}
.moreCommunity {
  font-weight: 600;
  color: #212529;
  font-size: 12px;
}
.vc-menu-main ul li {
  height: 45px;
  line-height: 45px;
  cursor: pointer;
  list-style-type: none;
}
.vc-menu-main ul li:hover {
  background-color: #3E77FC;
  color: #FFFFFF;
}
.vc-menu-main ul li.title {
  color: #FFFFFF;
  height: 60px;
  font-size: 24px;
  line-height: 60px;
}
.vc-menu-main ul li.title a {
  text-decoration: none;
  cursor: pointer;
  color: #FFFFFF;
}
.vc-menu-sub {
  background-color: #FFFFFF;
  color: #545761;
  text-align: start;
  width: 110px;
  font-size: 14px;
  height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}
.vc-menu-sub::-webkit-scrollbar {
  display: none;
}
.vc-menu-sub .active {
  background-color: #EAF0FE;
  color: #3E77FC;
}
.vc-menu-sub ul li {
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vc-menu-sub ul li.title {
  color: #4F525C;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  padding-left: 0px;
  border-bottom: 1px solid #F2F2F3;
  margin-bottom: 10px;
}
.vc-menu-sub ul li:hover {
  background-color: #EAF0FE;
  color: #3E77FC;
}
.vc-menu-sub ul li.sub-footer {
  background-color: #F6F6F7;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100px;
}
</style>