anrui/yxt-as-ui/src/layout/components/Sidebar/index.vue

<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
        :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false"
        mode="vertical">
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import Logo from './Logo'
  import SidebarItem from './SidebarItem'
  import variables from '@/styles/variables.scss'
  import {
    getrolemenus,
    loginDetails
  } from '@/api/system/Role/role.js'
  import {
    getStorage
  } from '@/utils/auth'
  export default {
    components: {
      SidebarItem,
      Logo
    },
    data() {
      return {
        YongHuid: [],
        routes: [

          {
            path: '/storage',
            component: 'storage',
            redirect: '/storage',
            meta: {
              title: '仓储'
            },
            children: [{
                path: '/inventory/inventory',
                component: () => import('@/views/storage/inventory/inventory.vue'),
                name: 'Inventory',
                meta: {
                  title: '库存查询',
                  noCache: true
                }
              },
              {
                path: '/stocktaking/index',
                name: 'Stocktaking',
                component: () => import('@/views/storage/stocktaking/index'),
                meta: {
                  title: '盘点管理',
                  noCache: true
                }
              },
              {
                path: '/allocation/index',
                name: 'Allocation',
                component: () => import('@/views/storage/allocation/index'),
                meta: {
                  title: '调拨管理',
                  noCache: true
                }
              },
              {
                path: '/deliveryNotice/index',
                name: 'DeliveryNotice',
                component: () => import('@/views/storage/deliveryNotice/index'),
                meta: {
                  title: '到货通知单',
                  noCache: true
                }
              },
              {
                path: '/receivingGoods/index',
                name: 'ReceivingGoods',
                component: () => import('@/views/storage/receivingGoods/index'),
                meta: {
                  title: '收货单',
                  noCache: true
                }
              },
            ]
          },

        ],
        params: {
          // sourceSid: 'ab270a77-a3a2-4ac5-9bf9-1e0d68a900c6',
          sourceSid: '',
          userSid: ''
        },
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      // routes() {
      // df3e44ae-412e-4b02-b9e4-6893dbf5f83b
      //   console.log('78979789', this.$router.options.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
        // }
        // return path
        return '/index'
      },
      showLogo() {
        return this.$store.state.settings.sidebarLogo
      },
      variables() {
        return variables
      },
      isCollapse() {
        return !this.sidebar.opened
      }
    },
    created() {
      this.postHuoquyonghu()
    },
    methods: {
      // 获取用户信息
      postHuoquyonghu() {
        // var token = getStorage()
        // loginDetails(token).then((response) => {
        //   if (response.code === '200') {
        //     this.YongHuid = response.data
        //     this.params.userSid = this.YongHuid.sid
        //     getrolemenus(this.params).then((res) => {
        //       const userRoles = this.resRouter(res.data)
        //       userRoles.push({
        //         path: '*',
        //         redirect: '/404',
        //         hidden: true
        //       })
        //       return userRoles
        //     })
        //   }
        // })

        this.routes.push({
          path: '*',
          redirect: '/404',
          hidden: true
        })
        console.log('左侧菜单', this.routes)
        return this.routes

      },
      resRouter(menus) {
        // 递归，将后台传来数组
        for (var i = 0; i < menus.length; i++) {
          if (menus[i].children && menus[i].children.length != 0) {
            this.resRouter(menus[i].children)
          }
          if (menus[i].children.length == 0) {
            delete menus[i].children
            delete menus[i].redirect
          }
          if (menus[i].component == '') {
            console.log('55555', menus[i])
            menus[i] = {
              path: menus[i].path,
              component: Layout,
              redirect: menus[i].path,
              children: [menus[i]]
            }
          }
        }
        this.routes = menus
        console.log('左侧菜单', this.routes)
        return menus
      }
    }
  }
</script>