<template>
|
<div class="menu-wrapper">
|
<template v-for="item in menu">
|
<el-menu-item
|
v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
|
:index="item[pathKey]"
|
:key="item[labelKey]"
|
:class="{'is-active':vaildAvtive(item)}"
|
@click="open(item)">
|
<i :class="item[iconKey]"/>
|
<span
|
slot="title"
|
:alt="item[pathKey]">{{ item[labelKey] }}</span>
|
</el-menu-item>
|
<el-submenu
|
v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
|
:index="item[pathKey]"
|
:key="item[labelKey]">
|
<template slot="title">
|
<i :class="item[iconKey]"/>
|
<span
|
slot="title"
|
:class="{'el-menu--display':collapse && first}">{{ item[labelKey] }}</span>
|
</template>
|
<template v-for="(child,cindex) in item[childrenKey]">
|
<el-menu-item
|
v-if="validatenull(child[childrenKey])"
|
:index="child[pathKey],cindex"
|
:class="{'is-active':vaildAvtive(child)}"
|
:key="child[labelKey]"
|
>
|
<!--<a slot="title" draggable="true" @dragend ="dragOpen(child)" style="display: block;" >
|
<span>{{ child[labelKey] }}</span>
|
</a>-->
|
<a slot="title" :href="'#'+child[pathKey]" @click.prevent="open(child)" style="display: block;" >
|
<span>{{ child[labelKey] }}</span>
|
</a>
|
</el-menu-item>
|
<sidebar-item
|
v-else
|
:menu="[child]"
|
:key="cindex"
|
:props="props"
|
:screen="screen"
|
:collapse="collapse"/>
|
</template>
|
</el-submenu>
|
</template>
|
</div>
|
</template>
|
<script>
|
import { mapGetters } from 'vuex'
|
import { validatenull } from '@/util/validate'
|
import config from './config.js'
|
export default {
|
name: 'SidebarItem',
|
props: {
|
menu: {
|
type: Array
|
},
|
screen: {
|
type: Number
|
},
|
first: {
|
type: Boolean,
|
default: false
|
},
|
props: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
collapse: {
|
type: Boolean
|
}
|
},
|
data() {
|
return {
|
config: config
|
}
|
},
|
created() {},
|
mounted() {},
|
computed: {
|
...mapGetters(['roles']),
|
labelKey() {
|
return this.props.label || this.config.propsDefault.label
|
},
|
pathKey() {
|
return this.props.path || this.config.propsDefault.path
|
},
|
iconKey() {
|
return this.props.icon || this.config.propsDefault.icon
|
},
|
childrenKey() {
|
return this.props.children || this.config.propsDefault.children
|
},
|
nowTagValue() {
|
return this.$router.$avueRouter.getValue(this.$route)
|
}
|
},
|
methods: {
|
dragOpen(item){
|
var routeData=this.$router.resolve({
|
name:item[this.labelKey],
|
query: item.query
|
});
|
window.open(routeData.href,'_blank');
|
},
|
vaildAvtive(item) {
|
const groupFlag = (item['group'] || []).some(ele =>
|
this.$route.path.includes(ele)
|
)
|
return this.nowTagValue === item[this.pathKey] || groupFlag
|
},
|
vaildRoles(item) {
|
item.meta = item.meta || {}
|
return item.meta.roles ? item.meta.roles.includes(this.roles) : true
|
},
|
validatenull(val) {
|
return validatenull(val)
|
},
|
open(item) {
|
console.log(item[this.labelKey])
|
console.log(item[this.pathKey])
|
if (this.screen <= 1) this.$store.commit('SET_COLLAPSE');
|
this.$router.$avueRouter.group = item.group;
|
if(item[this.labelKey]=='工作台'){
|
/*this.$router.push({
|
name:item[this.labelKey],
|
query: item.query
|
}).catch(() => {})*/
|
var routeData=this.$router.resolve({
|
name:item[this.labelKey],
|
query: item.query
|
});
|
window.open(routeData.href, '_blank');
|
}else{
|
this.$router.push({
|
path: this.$router.$avueRouter.getPath({
|
name: item[this.labelKey],
|
src: item[this.pathKey]
|
}),
|
query: item.query
|
}).catch(() => {})
|
}
|
}
|
}
|
}
|
</script>
|
