<el-menu
ref="menu"
:show-timeout="200"
:collapse="isCollapse"
:unique-opened="$store.state.settings.uniqueOpened"
active-text-color="#4979FF"
:default-active="onRoutes"
@close="closeMenu"
@open="chooseMenu"
>
</el-menu>
export default {
components: { Logo, SidebarItem },
data() {
this.selectedKeysMap = {}
this.openKeysMap = {}
return {
hide: true,
selectedKeys: this.selectedKeysMap[this.$route.path],
openKeys: this.openKeysMap[this.$route.path],
menuData:null,
}
},
watch:{
},
created(){
this.getMenuData();
},
mounted(){
},
computed: {
...mapState({
hideSidebar: state => state.app.sidebar.opened,
openMenu: state => state.menu.openMenu,
}),
...mapGetters(["permission_routes", "sidebar", "hideChildMenu"]),
isCollapse() {
return false
},
fmt_permission_routes() {
return this.permission_routes.filter(item => !item.hidden);
},
onRoutes() {
let path = this.$route.path;
this.selectedKeys = this.selectedKeysMap[path];
this.openKeys = this.openKeysMap[path];
for (let i = 0; i < this.menuData.length; i++) {
if(this.menuData[i].children) {
for (let j = 0; j < this.menuData[i].children.length; j++) {
if (
this.menuData[i] &&
this.menuData[i].children[j] &&
path == this.menuData[i].path+'/'+this.menuData[i].children[j].path
) {
return i +'-'+ j + '';
}
}
}
}
},
},
methods: {
closeMenu(index, indexPath) {
this.$store.dispatch('hideChildrenMenu', true)
this.$refs.menu.open(indexPath);
},
chooseMenu(index, indexPath) {
this.$store.dispatch('hideChildrenMenu', false)
this.$router.push( this.menuData[index].path+'/'+this.menuData[index].children[0].path)
},
getMenuData(){
this.menuData=this.removeRouteHide(this.fmt_permission_routes);
},
removeRouteHide(list){
let menuData=this.fmt_permission_routes.filter(item => {
let child;
if(item.children && item.children.length){
child = item.children.filter(itemchild => !itemchild || itemchild && itemchild.meta && !itemchild.meta.hidden)
}
item.children = child
return !item || item && item.meta && !item.meta.hidden
});
return menuData
},
}
};