supervise/supervise-enterprise-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: [
            {
            alwaysShow: true,
            component: "warehouse",
            meta: {
              icon: "el-icon-menu",
              title: "入库质押申请",
            },
            name: "/Rkzysq/index",
            path: "/Rkzysq/index"
          },
            {
            alwaysShow: true,
            component: "outbound",
            meta: {
              icon: "el-icon-menu",
              title: "解质出库申请",
            },
            name: "/Jzcksq/index",
            path: "/Jzcksq/index"
          },
            {
            alwaysShow: true,
            component: "needMoney",
            meta: {
              icon: "el-icon-menu",
              title: "用款申请",
            },
            name: "/Yksq/index",
            path: "/Yksq/index"
          },
            {
            alwaysShow: true,
            component: "returnedMoney",
            meta: {
              icon: "el-icon-menu",
              title: "回款上报",
            },
            name: "/NewList/returnedMoney",
            path: "/NewList/returnedMoney"
          },
            {
            alwaysShow: true,
            component: "market",
            meta: {
              icon: "el-icon-menu",
              title: "销售数据上报",
            },
            name: "/NewList/market",
            path: "/NewList/market"
          },
            {
            alwaysShow: true,
            component: "kucungysgl",
            meta: {
              icon: "el-icon-menu",
              title: "供应商管理",
            },
            name: "/khzxgysgl/index",
            path: "/khzxgysgl/index"
          },
            {
            alwaysShow: true,
            component: "Yjsq",
            meta: {
              icon: "el-icon-menu",
              title: "印鉴使用申请",
            },
            name: "/Yjsq/index",
            path: "/Yjsq/index"
          },
            {
            alwaysShow: true,
            component: "kucunDdcxs",
            meta: {
              icon: "el-icon-menu",
              title: "订单查询",
            },
            name: "/kucun/ddcx",
            path: "/kucun/ddcx"
          },
          {
            alwaysShow: true,
            component: "commodityFile",
            meta: {
              icon: "el-icon-menu",
              title: "商品档案",
            },
            name: "/commodityFile",
            path: "/commodityFile",
            children: [{
                alwaysShow: true,
                component: "commodityManagementInfo",
                meta: {
                  icon: "el-icon-help",
                  title: "商品管理",
                },
                name: "/supervise/commodityFile/commodity/commodityManagementInfo",
                path: "/supervise/commodityFile/commodity/commodityManagementInfo",
              },
              {
                alwaysShow: true,
                component: "brandManagementInfo",
                meta: {
                  icon: "el-icon-help",
                  title: "品牌维护",
                },
                name: "/supervise/commodityFile/brand/brandManagementInfo",
                path: "/supervise/commodityFile/brand/brandManagementInfo",
              },
              {
                alwaysShow: true,
                component: "classManagementInfo",
                meta: {
                  icon: "el-icon-help",
                  title: "类别维护",
                },
                name: "/supervise/commodityFile/classification/classManagementInfo",
                path: "/supervise/commodityFile/classification/classManagementInfo",
              }
            ]

          },
        ],
        params: {
          sourceSid: '8aeb5ddd-b810-4846-96bf-34262094c0ea',
          userSid: '',
        }
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      // routes() {
      // f4d2e507-c4ed-451c-b364-04c08f962045
      //   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
      },
      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) => {
        //   console.log('resss', response)
        //   if (response.code === '200') {
        //     this.YongHuid = response.data
        //     this.params.userSid = this.YongHuid.sid
            getrolemenus(this.params).then((res) => {
                console.log('res', res)
              const userRoles = this.resRouter(res.data)
              userRoles.push({
                path: '*',
                redirect: '/404',
                hidden: true
              })
              return userRoles
            })
        //   }
        // })
      },
      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: '',
              redirect: menus[i].path,
              children: [menus[i]],
            }
          }
          else{
            // menus[i] = {
            //   path: menus[i].path,
            //   component: '',
            //   redirect: menus[i].path,
            //   children: [menus[i]],
            // }
          }
        }
        // this.routes = menus
        console.log('左侧菜单', this.routes)
        return menus
      },
    },
  }
</script>