dy-admin-manager/src/layout/components/Sidebar/index.vue

<template>
  <div :class="{'has-logo':showLogo}">
    <!-- <logo v-if="showLogo"
          :collapse="false" /> -->
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <!--    -->
      <el-menu :default-active="activeMenu"
               :collapse='false'
                :background-color="variables.menuBg"
               :text-color="variables.menuText"
               :unique-opened="true"
               :active-text-color="variables.menuActiveText2"
               :collapse-transition="true"
               mode="vertical">
        <template v-for="route in permission_routes">
          <template v-if="!route.hidden">
            <!-- <sidebar-item  v-for="route2 in route.children" :key="route.path + '/' + route2.path" :item="route2" :base-path="route.path" :resolve-path="route.path" :active-top-menu="getTopMenuActive" /> -->
            <!-- <sidebar-menu-item v-for="route2 in route.children" :key="route.path + '/' + route2.path" :routes="route2" :base-path="route.path" :resolve-path="route.path" :active-top-menu="getTopMenuActive"/> -->
            <sidebar-item v-for="(route2) in route.children"
                      :key="route2.id"
                      :item="route2"
                      :active-top-menu="getTopMenuActive"
                      :base-path="route2.path" />
          </template>
        </template>
        <!-- <sidebar-item v-for="(route,index) in permission_routes"
                      :key="index"
                      :item="route"
                      :base-path="route.path" /> -->
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarMenuItem from './SidebarMenuItem'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { getBelongTopMenuPath, getActiveSidebarMenuPath } from '@/utils/permission';
export default {
  components: { SidebarItem, Logo, SidebarMenuItem },
  // mounted () {
  // },
  computed: {
    ...mapGetters([
      'sidebar',
      'permission_routes'
    ]),
    // routes () {
    //   return this.$router.options.routes
    // },
    activeMenu () {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      // 设置高亮的位置
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      // console.log(meta, path)
      return path
    },
    showLogo () {
      return this.$store.state.settings.sidebarLogo
    },
    variables () {
      return variables
    },
    isCollapse () {
      return false

    },
    getSidebarMenuActive: function() {
      const route = this.$route;
      return getActiveSidebarMenuPath(route);
    },
    getTopMenuActive() {
      let route = this.$route;
      // console.log(getBelongTopMenuPath(route))
      return getBelongTopMenuPath(route);
    }
  },
  mounted() {
    // console.log(this.permission_routes)
    this.menuIsShow(this.$route)
  },
  watch: {
    $route() {
      this.menuIsShow(this.$route)
    }
  },
  methods: {
    menuIsShow(route) {
      let activeTopMenu
      const { meta } = route;
      if (meta.belongTopMenu) {
          activeTopMenu = meta.belongTopMenu;
      }
      let permissions = this.permission_routes || []
      let childList = []
      permissions.forEach(item => {
        if(item.path == activeTopMenu) {
          childList = item
        }
      });
      let index = this.menuOperation(childList.children)
      // console.log(index)
      let status = index > 1 ? true : false
      this.$emit('childStatus', status)
    },
    menuOperation(arr) {
      let index = 0;
      for(let i = 0; i < arr.length; i++) {
        if(arr[i].hidden) {
          continue
        }
        if(arr[i].children && arr[i].children.length > 0) {
          index += this.menuOperation(arr[i].children)
        } else {
          index++
        }
      }
      return index
    }
  }
}
</script>
<style lang="scss" scoped>
.el-menu-item {
  &:nth-last-child(1) {
    padding-bottom: 20px;
  }
}

/deep/.el-submenu__title, /deep/.el-menu-item {
  font-size: 14px;
}

/deep/.el-menu-item.is-active {
    font-weight: bold;
    background-color: #EEF4F4 !important;
    color: #14928a !important;
    position: relative;
    &::after{
      position: absolute;
      top: 0;
      right: 0;
      content: ' ';
      width: 6px;
      background-color: #14928a;
      display: block;
      height: 100%;
    }
}
/deep/.el-submenu .el-menu-item.is-active {
  color: #14928a !important;
}
/deep/.el-menu .menu-wrapper .el-menu-item {
  color: #666666;
}
/deep/.el-menu-item, /deep/.el-submenu__title {
  height: 60px !important;
  line-height: 60px !important;
}
/deep/.el-submenu .el-menu-item {
  color: #666666 !important;
}
/deep/.el-submenu__icon-arrow {
  font-size: 14px;
}
</style>