2019-02-25 15:58:05 +08:00
|
|
|
|
import Menu from 'ant-design-vue/es/menu'
|
|
|
|
|
import Icon from 'ant-design-vue/es/icon'
|
|
|
|
|
|
|
|
|
|
const { Item, SubMenu } = Menu
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'SMenu',
|
|
|
|
|
props: {
|
|
|
|
|
menu: {
|
|
|
|
|
type: Array,
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
theme: {
|
|
|
|
|
type: String,
|
|
|
|
|
required: false,
|
|
|
|
|
default: 'dark'
|
|
|
|
|
},
|
|
|
|
|
mode: {
|
|
|
|
|
type: String,
|
|
|
|
|
required: false,
|
|
|
|
|
default: 'inline'
|
|
|
|
|
},
|
|
|
|
|
collapsed: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
required: false,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
openKeys: [],
|
|
|
|
|
selectedKeys: [],
|
|
|
|
|
cachedOpenKeys: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
rootSubmenuKeys: vm => {
|
|
|
|
|
const keys = []
|
2019-02-25 15:58:05 +08:00
|
|
|
|
vm.menu.forEach(item => keys.push(item.path))
|
|
|
|
|
return keys
|
|
|
|
|
}
|
|
|
|
|
},
|
2019-05-19 18:54:09 +08:00
|
|
|
|
mounted () {
|
2019-02-25 15:58:05 +08:00
|
|
|
|
this.updateMenu()
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
collapsed (val) {
|
|
|
|
|
if (val) {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
this.cachedOpenKeys = this.openKeys.concat()
|
2019-02-25 15:58:05 +08:00
|
|
|
|
this.openKeys = []
|
|
|
|
|
} else {
|
|
|
|
|
this.openKeys = this.cachedOpenKeys
|
|
|
|
|
}
|
|
|
|
|
},
|
2019-05-19 18:54:09 +08:00
|
|
|
|
$route: function () {
|
2019-02-25 15:58:05 +08:00
|
|
|
|
this.updateMenu()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
// select menu item
|
|
|
|
|
onOpenChange (openKeys) {
|
2019-04-14 16:20:04 +08:00
|
|
|
|
|
2019-05-19 18:54:09 +08:00
|
|
|
|
// 在水平模式下时执行,并且不再执行后续
|
|
|
|
|
if (this.mode === 'horizontal') {
|
|
|
|
|
this.openKeys = openKeys
|
|
|
|
|
return
|
2019-02-25 15:58:05 +08:00
|
|
|
|
}
|
2019-05-19 18:54:09 +08:00
|
|
|
|
// 非水平模式时
|
|
|
|
|
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
|
|
|
|
|
if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
|
2019-02-25 15:58:05 +08:00
|
|
|
|
this.openKeys = openKeys
|
|
|
|
|
} else {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
this.openKeys = latestOpenKey ? [latestOpenKey] : []
|
2019-02-25 15:58:05 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
updateMenu () {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
const routes = this.$route.matched.concat()
|
|
|
|
|
const { hidden } = this.$route.meta
|
|
|
|
|
if (routes.length >= 3 && hidden) {
|
2019-02-25 15:58:05 +08:00
|
|
|
|
routes.pop()
|
2019-05-19 18:54:09 +08:00
|
|
|
|
this.selectedKeys = [routes[routes.length - 1].path]
|
2019-02-25 15:58:05 +08:00
|
|
|
|
} else {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
this.selectedKeys = [routes.pop().path]
|
2019-02-25 15:58:05 +08:00
|
|
|
|
}
|
2021-06-02 15:32:35 +08:00
|
|
|
|
let openKeys = []
|
2019-02-25 15:58:05 +08:00
|
|
|
|
if (this.mode === 'inline') {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
routes.forEach(item => {
|
2019-02-25 15:58:05 +08:00
|
|
|
|
openKeys.push(item.path)
|
|
|
|
|
})
|
|
|
|
|
}
|
2021-06-02 15:32:35 +08:00
|
|
|
|
|
|
|
|
|
// update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
|
|
|
|
// 包含冒号的是动态菜单
|
|
|
|
|
if (this.selectedKeys[0].includes(':')) {
|
|
|
|
|
let selectedKey = this.$route.fullPath
|
|
|
|
|
this.selectedKeys = [selectedKey]
|
|
|
|
|
let newOpenKeys = []
|
|
|
|
|
this.fullOpenKeys(this.menu, selectedKey, newOpenKeys)
|
|
|
|
|
if (newOpenKeys.length > 0) {
|
|
|
|
|
openKeys = newOpenKeys.reverse()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
|
|
|
|
|
2019-05-19 18:54:09 +08:00
|
|
|
|
//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表单菜单点击展开的一级目录不对
|
|
|
|
|
},
|
2021-06-02 15:32:35 +08:00
|
|
|
|
// update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
|
|
|
|
// 递归查找当前选中的菜单和父级菜单,填充openKeys
|
|
|
|
|
fullOpenKeys(menus, selectedKey, openKeys) {
|
|
|
|
|
for (let item of menus) {
|
|
|
|
|
if (item.path === selectedKey) {
|
|
|
|
|
openKeys.push(item.path)
|
|
|
|
|
this.$emit('updateMenuTitle', item)
|
|
|
|
|
return true
|
|
|
|
|
} else if (Array.isArray(item.children)) {
|
|
|
|
|
if (this.fullOpenKeys(item.children, selectedKey, openKeys)) {
|
|
|
|
|
openKeys.push(item.path)
|
|
|
|
|
return true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
2019-02-25 15:58:05 +08:00
|
|
|
|
|
2019-05-19 18:54:09 +08:00
|
|
|
|
// render
|
|
|
|
|
renderItem (menu) {
|
|
|
|
|
if (!menu.hidden) {
|
2019-07-05 15:38:38 +08:00
|
|
|
|
return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
|
2019-05-19 18:54:09 +08:00
|
|
|
|
}
|
|
|
|
|
return null
|
|
|
|
|
},
|
|
|
|
|
renderMenuItem (menu) {
|
|
|
|
|
const target = menu.meta.target || null
|
|
|
|
|
const tag = target && 'a' || 'router-link'
|
|
|
|
|
let props = { to: { name: menu.name } }
|
|
|
|
|
if(menu.route && menu.route === '0'){
|
|
|
|
|
props = { to: { path: menu.path } }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const attrs = { href: menu.path, target: menu.meta.target }
|
|
|
|
|
|
2019-07-05 15:38:38 +08:00
|
|
|
|
if (menu.children && menu.alwaysShow) {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
// 把有子菜单的 并且 父菜单是要隐藏子菜单的
|
|
|
|
|
// 都给子菜单增加一个 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>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
renderSubMenu (menu) {
|
|
|
|
|
const itemArr = []
|
2019-07-05 15:38:38 +08:00
|
|
|
|
if (!menu.alwaysShow) {
|
2019-05-19 18:54:09 +08:00
|
|
|
|
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 } }/>
|
|
|
|
|
)
|
2019-02-25 15:58:05 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2019-05-19 18:54:09 +08:00
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
const { mode, theme, menu } = this
|
|
|
|
|
const props = {
|
|
|
|
|
mode: mode,
|
|
|
|
|
theme: theme,
|
|
|
|
|
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>
|
2019-02-25 15:58:05 +08:00
|
|
|
|
)
|
|
|
|
|
}
|
2019-05-19 18:54:09 +08:00
|
|
|
|
}
|