最新版本

jiangping

2024-06-11 c3c67ee9e88c579e8ac784821ab41f58d0372ebb

 admin/src/components/common/Menu.vue

@@ -1,19 +1,15 @@
<template>
  <div class="menu" :class="{collapse: menuData.collapse}">
    <div class="logo">
      <div><img src="@/assets/logo.png"></div>
      <h1 :class="{hidden: menuData.collapse}">华晟园区</h1>
    </div>
    <scrollbar>
<!--      :default-openeds="defaultOpeneds"-->
      <el-menu
        ref="menu"
        :unique-opened="true"
        :default-active="activeIndex"
        text-color="#fff"
        active-text-color="#fff"
        :collapse="menuData.collapse"
        :default-openeds="defaultOpeneds"
        :collapse-transition="false"
        unique-opened
        @select="handleSelect"
      >
        <MenuItems v-for="menu in menuData.list" :key="menu.index" :menu="menu" :is-root-menu="true"/>
@@ -37,15 +33,20 @@
      if (path.endsWith('/')) {
        path = path.substring(0, path.length - 1)
      }
      const menuConfig = this.__getMenuConfig(path, 'url', this.menuData.list)
      const menuConfig = this.__getMenuConfig(path, 'index', this.menuData.list)
      if (menuConfig == null) {
        return null
      } else {
        this.$store.commit('pushtags', menuConfig)
      }
      // console.log(menuConfig.index);
      return menuConfig.index
    },
    // 默认展开的菜单index
    defaultOpeneds () {
      return this.menuData.list.map(menu => menu.index)
      // return this.menuData.list.map(menu => menu.index)

      return [this.menuData.list[0].index]
    }
  },
  methods: {
@@ -54,18 +55,24 @@
      const menuConfig = this.__getMenuConfig(menuIndex, 'index', this.menuData.list)
      // 找不到页面
      try {
        require('@/views' + menuConfig.url)
          require('@/views' + menuConfig.url)
      } catch (e) {
        this.$tip.error('未找到页面文件@/views' + menuConfig.url + '.vue，请检查菜单路径是否正确')
        return
      }
      // 点击当前菜单不做处理
      if (menuConfig.url === this.$route.path) {
      if (menuConfig.url === this.$route.path && (menuConfig.params ==null || menuConfig.params==undefined || menuConfig.params=='' ||  menuConfig.params === this.$route.query.param)) {
        return
      }
      if (menuConfig.url == null || menuConfig.url.trim().length === 0) {
        return
      }
      this.$router.push(menuConfig.url)
      if(menuConfig.params!=null && menuConfig.params!=''){
        this.$router.push({path:menuConfig.url,query:{index:menuConfig.index,param:menuConfig.params}})
      }else{
        this.$router.push(menuConfig.url)
      }
      this.$store.commit('pushtags', menuConfig)
    },
    // 获取菜单配置
    __getMenuConfig (value, key, menus) {
@@ -92,37 +99,6 @@
  height: 100%;
  display: flex;
  flex-direction: column;
  // LOGO
  .logo {
    height: 60px;
    flex-shrink: 0;
    line-height: 60px;
    overflow: hidden;
    display: flex;
    background: $primary-color - 20;
    padding: 0 16px;
    & > div {
      width: 32px;
      flex-shrink: 0;
      margin-right: 12px;
      img {
        width: 100%;
        flex-shrink: 0;
        vertical-align: middle;
        position: relative;
        top: -2px;
      }
    }
    h1 {
      font-size: 16px;
      font-weight: 500;
      transition: opacity ease .3s;
      overflow: hidden;
      &.hidden {
        opacity: 0;
      }
    }
  }
}
</style>
<style lang="scss">
@@ -136,11 +112,11 @@
    background: $primary-color;
    // 选中状态
    &.is-active {
      background: $primary-color - 40 !important;
      background: $primary-color-sel !important;
    }
    // 悬浮
    &:hover {
      background-color: $primary-color - 12;
      background-color: $primary-color-hover;
    }
    &:focus {
      background: $primary-color;
@@ -153,13 +129,13 @@
    }
    &.is-active {
      .el-submenu__title{
        background-color: $primary-color - 20;
        background-color: $icon-background-color;
      }
      .el-menu .el-menu-item{
        background-color: $primary-color - 20;
        background-color: $icon-background-color;
        // 悬浮
        &:hover {
          background-color: $primary-color - 30;
          background-color: $icon-background-color;
        }
      }
    }