Blame view

src/layout/components/Sidebar/index.vue 2.08 KB
2d21111e   wangming   项目初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
  <template>
    <div :class="{'has-logo':showLogo}">
      <logo v-if="showLogo" :collapse="isCollapse" />
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :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" v-if="haspermission(route)" />
        </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 {getUser} from '../../../utils/auth.js'
  export default {
  	data(){
  		return {
  			permission:this.$store.state.user.permissions
  		}
  	},
  	methods:{
  		haspermission(route){
  			 var show = true;
  			 var permissions = this.permission;
  			 // console.log('permission',permissions);
  			 // console.log('meta',route.meta)
  			 try{
  			 	if(!permissions || !route.meta ) show = true;
  				else if(!route.meta.permissions) show = true;
  				else{
  					
  					var tmp = false;
  					   route.meta.permissions.forEach(item=>{
  						   tmp = permissions.includes(item);
  					   })
  					   show = tmp;
  					
  				}
  			 }catch(e){
  			 	//TODO handle the exception
  			 }
  			return show;
  		}
  	},
    components: { SidebarItem, Logo },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      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() {
  	}
  }
  </script>