<template>
|
<div class="menu-wrapper">
|
<template v-for="(item,index) in menus">
|
<el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)" :index="item[pathKey]"
|
:key="index" :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="index">
|
<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="cindex">
|
<!--<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,
|
menus: [],
|
}
|
},
|
created() {
|
//过滤基础不要的菜单
|
// this.filterMenus('基础',['POC','盘具维护','IFS日志'])
|
},
|
mounted() {
|
this.filterMenus('基础',['POC','盘具维护','IFS日志'])
|
},
|
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: {
|
filterMenus(fatherName, childrens) {
|
this.menus=this.menu
|
let start_menu = JSON.parse(JSON.stringify(this.menus));
|
let base = start_menu.filter(item => {
|
return item.label === fatherName
|
})[0]
|
let up_base = base.children.filter(item => {
|
return !childrens.includes(item.label);
|
})
|
this.menus.forEach(element => {
|
if (element.label === '基础') {
|
element.children = []
|
element.children = up_base
|
}
|
});
|
},
|
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>
|
