187 lines
3.9 KiB
Vue
187 lines
3.9 KiB
Vue
<template>
|
|
<view>
|
|
<uni-nav-menu :active="value" activeKey="value" :activeTextColor="activeTextColor" :uniqueOpened="uniqueOpened"
|
|
@select="onSelect">
|
|
<uni-menu-sidebar :data="userMenu"></uni-menu-sidebar>
|
|
<uni-menu-sidebar :data="staticMenu"></uni-menu-sidebar>
|
|
</uni-nav-menu>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapActions
|
|
} from 'vuex'
|
|
import {
|
|
buildMenus
|
|
} from './util.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
menus: [],
|
|
userMenu: [],
|
|
famliy: [],
|
|
|
|
};
|
|
},
|
|
mixins: [uniCloud.mixinDatacom],
|
|
props: {
|
|
// 当前激活菜单的 url
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 当前激活菜单的文字颜色
|
|
activeTextColor: {
|
|
type: String,
|
|
default: '#42B983'
|
|
},
|
|
// 是否只保持一个子菜单的展开
|
|
uniqueOpened: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
staticMenu: {
|
|
type: Array,
|
|
default () {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
localdata: {
|
|
handler(newval) {
|
|
if (this.hasLocalData(newval)) {
|
|
this.userMenu = newval
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
// TODO 暂时无需监听，需要看后面会出现什么问题
|
|
// #ifdef H5
|
|
menus: {
|
|
immediate: true,
|
|
handler(newVal,oldVal) {
|
|
const item = this.menus.find(m => m.value === this.$route.path)
|
|
// 设置面包屑
|
|
if(item){
|
|
this.getMenuAncestor(item.menu_id, newVal)
|
|
item && this.setRoutes && this.setRoutes(this.famliy)
|
|
}
|
|
}
|
|
},
|
|
// #endif
|
|
$route: {
|
|
immediate: false,
|
|
handler(val, old) {
|
|
if (val.fullPath !== old.fullPath) {
|
|
this.famliy = []
|
|
const menu = this.menus.find(m => m.value === val.path)
|
|
const menu_id = menu && menu.menu_id
|
|
this.getMenuAncestor(menu_id, this.menus)
|
|
this.setRoutes && this.setRoutes(this.famliy)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
if (this.hasLocalData(this.localdata)) return
|
|
// #ifndef H5
|
|
this.load()
|
|
// #endif
|
|
},
|
|
// computed:{
|
|
// userMenu() {
|
|
// return this.getUserMenu(this.menus)
|
|
// }
|
|
// },
|
|
methods: {
|
|
...mapActions({
|
|
setRoutes: 'app/setRoutes'
|
|
}),
|
|
getUserMenu(menuList) {
|
|
const {
|
|
permission,
|
|
role
|
|
} = uniCloud.getCurrentUserInfo()
|
|
// 标记叶子节点
|
|
menuList.map(item => {
|
|
if (!menuList.some(subMenuItem => subMenuItem.parent_id === item.menu_id)) {
|
|
item.isLeafNode = true
|
|
}
|
|
})
|
|
|
|
// 删除无权限访问的菜单
|
|
if (!role.includes('admin')) {
|
|
menuList = menuList.filter(item => {
|
|
if (item.isLeafNode) {
|
|
if (item.permission && item.permission.length) {
|
|
return item.permission.some(item => permission.indexOf(item) > -1)
|
|
}
|
|
return false
|
|
}
|
|
return true
|
|
})
|
|
}
|
|
return buildMenus(menuList)
|
|
},
|
|
onSelect(menu) {
|
|
|
|
this.famliy = []
|
|
this.getMenuAncestor(menu.menu_id, this.menus)
|
|
this.emit(menu)
|
|
},
|
|
emit(menu) {
|
|
this.$emit('select', menu, this.famliy)
|
|
this.$emit('input', menu.value)
|
|
},
|
|
hasLocalData(value) {
|
|
return Array.isArray(value) && value.length > 0
|
|
},
|
|
load() {
|
|
if (this.mixinDatacomLoading == true) {
|
|
return
|
|
}
|
|
this.mixinDatacomLoading = true
|
|
this.mixinDatacomGet().then((res) => {
|
|
this.mixinDatacomLoading = false
|
|
const {
|
|
data,
|
|
count
|
|
} = res.result
|
|
this.menus = data
|
|
this.userMenu = this.getUserMenu(this.menus)
|
|
}).catch((err) => {
|
|
this.mixinDatacomLoading = false
|
|
this.mixinDatacomErrorMessage = err
|
|
})
|
|
},
|
|
getMenuAncestor(menuId, menus) {
|
|
menus.forEach(item => {
|
|
if (item.menu_id === menuId) {
|
|
const route = {
|
|
name: item.text
|
|
}
|
|
const path = item.value
|
|
if (path) {
|
|
route.to = {
|
|
path
|
|
}
|
|
}
|
|
this.famliy.unshift(route)
|
|
const parent_id = item.parent_id
|
|
if (parent_id) {
|
|
this.getMenuAncestor(parent_id, menus)
|
|
}
|
|
}
|
|
})
|
|
// return famliy
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|