update

gaosp

2024-03-08 8b887f86a35b9711135087c9fc54f85a6ebf50d5

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
<template> 
  <div class="menu-wrapper"> 
    <template v-for="item in routes" v-if="!item.hidden"> 
      <!--<router-link v-if="hasNoChildren(item)" :to="{ path: item.path, params: { pid: item }}":key="item.path"--> 
      <a v-if="hasNoChildren(item)":key="item.path" @click="onSideItemClick({ path:item.path })"> 
        <el-menu-item v-if="hasNoChildren(item)"  :index="item.path" :class="{'submenu-title-noDropdown':!isNest}"> 
          <!--<svg-icon :icon-class="item.meta.icon"></svg-icon>--> 
          <img-icon :icon-url="getIconUrl(item.meta.icon)"></img-icon> 
          <span slot="title">{{item.meta.title}}</span> 
        </el-menu-item> 
      </a> 
      <!--<router-link v-else-if="hasOneChildren(item)" :to="{ path: item.path+'/'+item.children[0].path, params: { pid: item }}":key="item.path"--> 
      <a v-else-if="hasOneChildren(item)" :key="item.path" @click="onSideItemClick({ path:item.path+'/'+item.children[0].path })"> 
        <el-menu-item v-if="hasOneChildren(item)"  :index="item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}"> 
          <!--<svg-icon :icon-class="item.children[0].meta.icon"></svg-icon>--> 
          <img-icon :icon-url="getIconUrl(item.children[0].meta.icon)"></img-icon> 
          <span slot="title">{{item.children[0].meta.title}}</span> 
        </el-menu-item> 
      </a> 
 
      <el-submenu v-else :index="item.path" :key="item.path"> 
        <template slot="title"> 
          <!--<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>--> 
          <img-icon v-if="item.meta&&item.meta.icon" :icon-url="getIconUrl(item.meta.icon)"></img-icon> 
          <span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span> 
        </template> 
 
        <template v-for="child in item.children" v-if="!child.hidden"> 
          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item> 
          <!--<router-link v-else :to="{ path:item.path+'/'+child.path,params:{pid:child.path}}" :key="child.path"--> 
          <a v-else :key="child.path" @click="onSideItemClick({ path:item.path+'/'+child.path })"> 
            <el-menu-item :index="item.path+'/'+child.path"> 
              <!--<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>--> 
              <img-icon v-if="child.meta&&child.meta.icon" :icon-url="getIconUrl(child.meta.icon)"></img-icon> 
              <span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span> 
            </el-menu-item> 
          </a> 
        </template> 
      </el-submenu> 
    </template> 
  </div> 
</template> 
 
<script> 
import ImgIcon from '@/components/ImgIcon/index' 
import { cfgUtil } from 'cfgUtil' 
export default { 
  name: 'SidebarItem', 
  components: { ImgIcon }, 
  props: { 
    routes: { 
      type: Array 
    }, 
    isNest: { 
      type: Boolean, 
      default: false 
    } 
  }, 
  data() { 
    return { 
      imgPreFix: (process.env.NODE_ENV === 'development' ? '' : '/mdc') + '/static/data/img/side/' 
    } 
  }, 
  methods: { 
    hasNoChildren(item) { 
      return !item.children || item.children.length === 0 
    }, 
    hasOneChildren(item) { 
      return item.children.length === 1 
    }, 
    getIconUrl(key) { 
      const relUrl = cfgUtil.sideNavIconMap[key] || cfgUtil.sideNavIconMap.def 
      return relUrl ? this.imgPreFix + relUrl : '' 
    }, 
    onSideItemClick(path) { 
      // console.log(path) 
      this.$router.push(path) 
    } 
  } 
} 
</script>