import Menu from 'ant-design-vue/es/menu'
|
import Icon from 'ant-design-vue/es/icon'
|
import { getAction } from '@tievd/cube-block/lib/api/manage'
|
|
const { Item, SubMenu } = Menu
|
|
export default {
|
name: 'SMenu',
|
|
props: {
|
menu: {
|
type: Array,
|
required: true
|
},
|
mode: {
|
type: String,
|
required: false,
|
default: 'inline'
|
},
|
collapsed: {
|
type: Boolean,
|
required: false,
|
default: false
|
}
|
},
|
|
data() {
|
return {
|
chooseKeys:[],
|
openKeys: [],
|
selectedKeys: [],
|
cachedOpenKeys: [],
|
}
|
},
|
|
computed: {
|
rootSubmenuKeys: vm => {
|
const keys = []
|
vm.menu.forEach(item => keys.push(item.path))
|
return keys
|
}
|
},
|
|
mounted() {
|
this.updateMenu()
|
},
|
|
watch: {
|
collapsed(val) {
|
if (val) {
|
this.cachedOpenKeys = this.openKeys.concat()
|
this.openKeys = []
|
} else {
|
this.openKeys = this.cachedOpenKeys
|
}
|
},
|
$route: function (currentRoute) {
|
// 路由发生改变，会触发到这里
|
this.chooseKeys[0]=currentRoute.path;
|
console.log(currentRoute.fullPath)
|
let params = {
|
fullPath: currentRoute.fullPath
|
}
|
getAction('/sys/permission/history/collect', params)
|
this.updateMenu()
|
}
|
},
|
|
methods: {
|
// select menu item
|
onOpenChange(openKeys) {
|
// 在水平模式下时执行，并且不再执行后续
|
if (this.mode === 'horizontal') {
|
this.openKeys = openKeys
|
return
|
}
|
// 非水平模式时
|
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
|
if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
|
this.openKeys = openKeys
|
} else {
|
this.openKeys = latestOpenKey ? [latestOpenKey] : []
|
}
|
},
|
updateMenu() {
|
const routes = this.$route.matched.concat()
|
const { hidden } = this.$route.meta
|
if (routes.length >= 3 && hidden) {
|
routes.pop()
|
this.selectedKeys = [routes[routes.length - 1].path]
|
} else {
|
this.selectedKeys = [routes.pop().path]
|
}
|
const openKeys = []
|
if (this.mode === 'inline') {
|
routes.forEach(item => {
|
openKeys.push(item.path)
|
})
|
}
|
//update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
|
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
|
}
|
//update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
},
|
|
// render
|
renderItem(menu) {
|
if (!menu.hidden) {
|
return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
|
}
|
return null
|
},
|
renderMenuItem(menu) {
|
// === 注释掉机构类型限制，只要配置了权限就能看到菜单 ===
|
let userDepartCategory = JSON.parse(localStorage.getItem("userDepartInfo")).orgCategory
|
if(userDepartCategory==3){
|
if(menu.meta.title=='运营分析(机构)'||menu.meta.title=='告警分析(机构)'){
|
menu = Object.assign(menu, { hidden: true })
|
}
|
}
|
if(userDepartCategory==1){
|
if(menu.meta.title=='运营分析'||menu.meta.title=='告警分析'){
|
menu = Object.assign(menu, { hidden: true })
|
}
|
if(menu.meta.title=='运营分析(机构)'||menu.meta.title=='告警分析(机构)'){
|
menu = Object.assign(menu, { hidden: true })
|
}
|
}
|
if(userDepartCategory==2){
|
if(menu.meta.title=='运营分析'||menu.meta.title=='告警分析'){
|
menu = Object.assign(menu, { hidden: true })
|
}
|
}
|
// === 机构类型限制注释结束 ===
|
const target = menu.meta.target || null
|
let tag = target && 'a' || 'router-link'
|
let props = { to: { name: menu.name } }
|
if (menu.route && menu.route === '0') {
|
props = { to: { path: menu.path } }
|
}
|
let attrs = { href: menu.path, target: menu.meta.target }
|
// 判断是否新开页面
|
if(menu.path=="/analysisScreen/operationBigdata"||menu.path=="/analysisScreen/alarmBigdata"||menu.path=="/analysisScreen/organOperationBigdata"||menu.path=="/analysisScreen/organAlarmBigdata"){
|
tag='a'
|
attrs.target='_blank'
|
attrs.onclick=this.clickDash(menu.path)
|
}
|
if (menu.children && menu.alwaysShow) {
|
// 把有子菜单的 并且 父菜单是要隐藏子菜单的
|
// 都给子菜单增加一个 hidden 属性
|
// 用来给刷新页面时， selectedKeys 做控制用
|
menu.children.forEach(item => {
|
item.meta = Object.assign(item.meta, { hidden: true })
|
})
|
}
|
|
return (
|
<Item {...{ key: menu.path }}>
|
<tag {...{ props, attrs }}>
|
{this.renderIcon(menu.meta.icon)}
|
<span>{menu.meta.title}</span>
|
</tag>
|
</Item>
|
)
|
},
|
clickDash(){
|
const currentRoute=this.selectedKeys[0];
|
if(currentRoute=='/analysisScreen/operationBigdata'||currentRoute=='/analysisScreen/alarmBigdata' || currentRoute=='/analysisScreen/organOperationBigdata'|| currentRoute=='/analysisScreen/organAlarmBigdata'){
|
setTimeout(() => {
|
this.selectedKeys=this.chooseKeys.length?this.chooseKeys:['/dashboard/analysis']
|
}, 100);
|
}
|
|
},
|
renderSubMenu(menu) {
|
const itemArr = []
|
if (!menu.alwaysShow) {
|
menu.children.forEach(item => itemArr.push(this.renderItem(item)))
|
}
|
return (
|
<SubMenu {...{ key: menu.path }}>
|
<span slot="title">
|
{this.renderIcon(menu.meta.icon)}
|
<span>{menu.meta.title}</span>
|
</span>
|
{itemArr}
|
</SubMenu>
|
)
|
},
|
renderIcon(icon) {
|
if (icon === 'none' || icon === undefined) {
|
return null
|
}
|
const props = {}
|
typeof icon === 'object' ? (props.component = icon) : (props.type = icon)
|
return <Icon {...{ props }} />
|
}
|
},
|
|
render() {
|
const { mode, menu } = this
|
const props = {
|
mode: mode,
|
openKeys: this.openKeys
|
}
|
const on = {
|
select: obj => {
|
this.selectedKeys = obj.selectedKeys
|
this.$emit('select', obj)
|
},
|
openChange: this.onOpenChange
|
}
|
|
const menuTree = menu.map(item => {
|
if (item.hidden) {
|
return null
|
}
|
return this.renderItem(item)
|
})
|
// {...{ props, on: on }}
|
return (
|
<Menu vModel={this.selectedKeys} {...{ props, on: on }}>
|
{menuTree}
|
</Menu>
|
)
|
}
|
}
|
