supervise/yxt-supervise-cyf/yxt-supervise-cyf-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: [],
        params: {
          sourceSid: '9d048c07-7677-4774-9177-aa02b049ff06',
          userSid: '',
        },
        routes: [{
            alwaysShow: true,
            component: 'index',
            meta: {
              icon: "el-icon-menu",
              title: "原料类型"
            },
            name: "/rawMaterialType/index",
            path: "/rawMaterialType/index"
          },{
            alwaysShow: true,
            component: 'index',
            meta: {
              icon: "el-icon-menu",
              title: "原料信息"
            },
            name: "/rawMaterialInfo/index",
            path: "/rawMaterialInfo/index"
          },{
            alwaysShow: true,
            component: 'index',
            meta: {
              icon: "el-icon-menu",
              title: "原油类型"
            },
            name: "/oilType/index",
            path: "/oilType/index"
          },
          {
            alwaysShow: true,
            component: 'index',
            meta: {
              icon: "el-icon-menu",
              title: "油罐信息"
            },
            name: "/oilTank/index",
            path: "/oilTank/index"
          },
          {
            alwaysShow: true,
            component: 'index',
            meta: {
              icon: "el-icon-menu",
              title: "流量仪器"
            },
            name: "/flowInstrument/index",
            path: "/flowInstrument/index"
          },
          {
            alwaysShow: true,
            component: 'index',
            meta: {
              icon: "el-icon-menu",
              title: "原油出入库记录"
            },
            name: "/oilTypeInAndOutBound/index",
            path: "/oilTypeInAndOutBound/index"
          },
          {
            alwaysShow: true,
            component: 'index',
            meta: {
              icon: "el-icon-menu",
              title: "原料出入库记录"
            },
            name: "/rawMaterialInAndOutBound/index",
            path: "/rawMaterialInAndOutBound/index"
          },
          // {
          //   alwaysShow: true,
          //   component: 'index',
          //   meta: {
          //     icon: "el-icon-menu",
          //     title: "项目列表"
          //   },
          //   name: "/project/index",
          //   path: "/project/index"
          // },
        ]
      }
    },
    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 "/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) => {
        //   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)
        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: '',
              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>