fix:菜单“出库管理”默认展开
parent
f3f7a99b10
commit
c10a81f271
|
|
@ -3,6 +3,7 @@
|
|||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
ref="sideMenu"
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||
|
|
@ -11,6 +12,8 @@
|
|||
:active-text-color="settings.theme"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
@open="handleMenuOpen"
|
||||
@close="handleMenuClose"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
|
|
@ -24,6 +27,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import pathLib from 'path'
|
||||
import { mapGetters, mapState } from "vuex"
|
||||
import Logo from "./Logo"
|
||||
import SidebarItem from "./SidebarItem"
|
||||
|
|
@ -52,6 +56,55 @@ export default {
|
|||
isCollapse() {
|
||||
return !this.sidebar.opened
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 监听菜单折叠事件:当折叠"进销存管理"时同步折叠"出库管理"子菜单
|
||||
handleMenuClose(index) {
|
||||
// 在一级路由中找到当前折叠的菜单
|
||||
const closedRoute = this.sidebarRouters.find(route => route.path === index)
|
||||
if (!closedRoute || !closedRoute.children || !closedRoute.children.length) return
|
||||
|
||||
// 找到直属子级中名为"出库管理"的子菜单
|
||||
const outerRoute = closedRoute.children.find(
|
||||
child => !child.hidden && child.meta && child.meta.title === '出库管理'
|
||||
)
|
||||
if (!outerRoute) return
|
||||
|
||||
// 计算"出库管理"在 el-menu 中注册的 index(与展开逻辑保持一致)
|
||||
const outerBasePath = pathLib.resolve(index, outerRoute.path)
|
||||
const outerIndex = pathLib.resolve(outerBasePath, outerRoute.path)
|
||||
|
||||
if (this.$refs.sideMenu) {
|
||||
this.$refs.sideMenu.close(outerIndex)
|
||||
}
|
||||
},
|
||||
// 监听菜单展开事件:当展开的菜单含有"出库管理"子菜单时同步将其展开
|
||||
handleMenuOpen(index) {
|
||||
// 在一级路由中找到当前展开的菜单
|
||||
const openedRoute = this.sidebarRouters.find(route => route.path === index)
|
||||
if (!openedRoute || !openedRoute.children || !openedRoute.children.length) return
|
||||
|
||||
// 找到直属子级中名为"出库管理"且自身含子项的子菜单
|
||||
const outerRoute = openedRoute.children.find(
|
||||
child => !child.hidden && child.meta && child.meta.title === '出库管理'
|
||||
)
|
||||
if (!outerRoute) return
|
||||
|
||||
// 计算"出库管理"对应的 el-menu index
|
||||
// SidebarItem 渲染嵌套菜单时:
|
||||
// 先将 basePath 设为 path.resolve(parentPath, child.path)
|
||||
// 再以新 basePath 计算 el-submenu :index = path.resolve(basePath, child.path)
|
||||
// 因此需要对 child.path 做两次 resolve 才能与注册 index 对齐
|
||||
const outerBasePath = pathLib.resolve(index, outerRoute.path)
|
||||
const outerIndex = pathLib.resolve(outerBasePath, outerRoute.path)
|
||||
|
||||
// 延迟 300ms 展开,确保 el-submenu 子组件已完成挂载并向 el-menu 注册
|
||||
setTimeout(() => {
|
||||
if (this.$refs.sideMenu) {
|
||||
this.$refs.sideMenu.open(outerIndex)
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue