loulijun2021
2022-07-15 869f6c069e86c2ff90393c1441854a6f05989481
src/layout/components/Sidebar/index.vue
@@ -1,7 +1,7 @@
<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <logo v-if="showLogo" :collapse="isCollapse"/>
    <el-scrollbar wrap-class="scrollbar-wrapper" style="margin-top:56px;height: 85%">
      <el-menu
        :default-active="activeMenu"
@@ -13,20 +13,21 @@
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in routes"
          :key="route.path"
          class="el-scrollbar-menu"
          :item="route"
          :base-path="route.path"
        />
        <!--        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />-->
        <!--        <sidebar-item-->
        <!--          v-for="route in routes"-->
        <!--          :key="route.path"-->
        <!--          class="el-scrollbar-menu"-->
        <!--          :item="route"-->
        <!--          :base-path="route.path"-->
        <!--        />-->
        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path"/>
      </el-menu>
    </el-scrollbar>
    <div style="position: absolute;bottom: 20px;left: 30px;">
      <div>
        <el-button type="text">新凯迪制造V1.0.01</el-button>
<!--        <el-button type="text"><a href="http://www.ykxkd.com/" target="_blank">新凯迪制造V1.0.01</a></el-button>-->
      </div>
    </div>
@@ -34,23 +35,19 @@
</template>
<script>
import { mapGetters } from 'vuex'
import {mapGetters} from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { LoginMenu } from '@/api/user'
import {LoginMenu} from '@/api/user'
import {removeCookie, setCookie} from '@/utils/auth'
export default {
  components: { SidebarItem, Logo },
  components: {SidebarItem, Logo},
  data() {
    return {
      routers: []
    }
  },
  async created() {
    const { data: res } = await LoginMenu()
    this.routers = res
    this.routers.unshift({ code: '1000', name: '系统设置' })
  },
  computed: {
    ...mapGetters([
@@ -58,59 +55,14 @@
      'sidebar'
    ]),
    routes() {
      // 接口中的返回值 进行格式化
      const newCodeArr = []
      const newCodeNameArr = []
      this.routers.forEach(item => {
        if (item.code) {
          newCodeArr.push(item.code)
          newCodeNameArr.push({ code: item.code, title: item.name })
          if (item.children) {
            item.children.forEach(it => {
              if (it.code) {
                newCodeArr.push(it.code)
                newCodeNameArr.push({ code: it.code, title: it.name })
              }
            })
          }
        }
      })
      // 本地路由与 接口中的返回值进行匹配,有相同code的值进行push
      const arr = this.$router.options.routes
      const arr2 = []
      arr.forEach((item, index) => {
        if (newCodeArr.includes(item.code) && item.children.length === 1) {
          arr2.push(item)
        } else if (newCodeArr.includes(item.code) && item.children.length > 1) {
          newCodeNameArr.forEach(it1 => { // 替换接口中的name为菜单名称
            if (it1.code === item.code) {
              item.meta.title = it1.title
            }
          })
          const a = []
          item.children.forEach((it2, ind) => { // 遍历
            if (newCodeArr.includes(it2.code)) {
              newCodeNameArr.forEach(it1 => { // 替换接口中的name为菜单名称
                if (it2.code === it1.code) {
                  it2.meta.title = it1.title
                }
              })
              a.push(it2)
            }
          })
          item.children = a
          arr2.push(item)
        }
      })
      return arr2
      // return arr
      return this.$router.options.routes
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      const {meta, path} = route
      // if set path, the sidebar will highlight the path you set
      removeCookie('ruleCode')
      setCookie('ruleCode', meta.code)// 将编码规则code存到cookie里面
      if (meta.activeMenu) {
        return meta.activeMenu
      }
@@ -135,6 +87,10 @@
  font-size: 18px;
}
.el-button--text:focus {
  color: white;
}
#app .sidebar-container .el-submenu .el-menu-item {
  background-color: transparent !important;
}