supervise/supervise-risk-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: "RiskManage",
            meta: {
              icon: "el-icon-menu",
              title: "风险管理",
            },
            name: "/RiskManage",
            path: "/RiskManage",
            children: [{
                alwaysShow: true,
                component: "category",
                meta: {
                  icon: "el-icon-help",
                  title: "风险类别",
                },
                name: "/RiskManage/category",
                path: "/RiskManage/category",
              },
            {
                alwaysShow: true,
                component: "RiskIndex",
                meta: {
                  icon: "el-icon-help",
                  title: "风险指标",
                },
                name: "/RiskManage/RiskIndex",
                path: "/RiskManage/RiskIndex",
              },
            {
                alwaysShow: true,
                component: "RiskSet",
                meta: {
                  icon: "el-icon-help",
                  title: "风险等级",
                },
                name: "/RiskManage/RiskSet",
                path: "/RiskManage/RiskSet",
              },
            ]

          },
          {
            alwaysShow: true,
            component: "RiskBjzx",
            meta: {
              icon: "el-icon-menu",
              title: "报警中心",
            },
            name: "/bjzx/index",
            path: "/bjzx/index",
          },
          {
            alwaysShow: true,
            component: "riskCljl",
            meta: {
              icon: "el-icon-menu",
              title: "报警消息记录",
            },
            name: "/riskCljl/index",
            path: "/riskCljl/index",
          },
          {
            alwaysShow: true,
            component: "riskBlack",
            meta: {
              icon: "el-icon-menu",
              title: "黑名单",
            },
            name: "/addRiskBlack/index",
            path: "/addRiskBlack/index",
          },
          {
            alwaysShow: true,
            component: "riskJkzb",
            meta: {
              icon: "el-icon-menu",
              title: "监控指标",
            },
            name: "/riskJkzb/index",
            path: "/riskJkzb/index",
          }
        ],
        params: {
          sourceSid: 'ff05fef5-3f6d-4712-9c41-b5b661a8dd02',
          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) => {
              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>