撤回修改
This commit is contained in:
parent
aaf85ccf22
commit
cff2a60701
@ -7,7 +7,6 @@
|
|||||||
|
|
||||||
<Horizontal :menuList="state.menuList" />
|
<Horizontal :menuList="state.menuList" />
|
||||||
<div class="right-section">
|
<div class="right-section">
|
||||||
<!-- <module-switch :menuList="state.menuList" /> -->
|
|
||||||
<User />
|
<User />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -20,7 +19,6 @@ import { storeToRefs } from 'pinia'
|
|||||||
import { useRoutesList } from '/@/stores/routesList'
|
import { useRoutesList } from '/@/stores/routesList'
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig'
|
import { useThemeConfig } from '/@/stores/themeConfig'
|
||||||
import mittBus from '/@/utils/mitt'
|
import mittBus from '/@/utils/mitt'
|
||||||
import ModuleSwitch from './module-switch.vue'
|
|
||||||
|
|
||||||
// 引入组件
|
// 引入组件
|
||||||
const User = defineAsyncComponent(() => import('/@/layout/navBars/topBar/user.vue'))
|
const User = defineAsyncComponent(() => import('/@/layout/navBars/topBar/user.vue'))
|
||||||
@ -62,7 +60,9 @@ const isLayoutTransverse = computed(() => {
|
|||||||
const setFilterRoutes = () => {
|
const setFilterRoutes = () => {
|
||||||
let { layout, isClassicSplitMenu } = themeConfig.value
|
let { layout, isClassicSplitMenu } = themeConfig.value
|
||||||
if (layout === 'classic' && isClassicSplitMenu) {
|
if (layout === 'classic' && isClassicSplitMenu) {
|
||||||
state.menuList = delClassicChildren(filterRoutesFun(routesList.value))
|
// 为了支持下拉菜单，我们保留完整的菜单结构给 horizontal 组件
|
||||||
|
// 但仍然发送分割后的数据给侧边栏
|
||||||
|
state.menuList = filterRoutesFun(routesList.value) // 保留完整结构用于下拉菜单
|
||||||
const resData = setSendClassicChildren(route.path)
|
const resData = setSendClassicChildren(route.path)
|
||||||
mittBus.emit('setSendClassicChildren', resData)
|
mittBus.emit('setSendClassicChildren', resData)
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -1,190 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onMenuChange">
|
|
||||||
<div class="layout-navbars-breadcrumb-user-icon">
|
|
||||||
<i class="iconfont icon-diqiu" :title="$t('message.user.title1')"></i>
|
|
||||||
<span class="current-lang">{{ state.currentModuleName }}</span>
|
|
||||||
</div>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item v-for="item in menuLists as RouteItem[]" :key="item.path || ''" :command="item.path || ''">
|
|
||||||
<SvgIcon :name="item.meta?.icon" />
|
|
||||||
{{ $t(item.meta?.title || '未命名模块') }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="navMenuHorizontal">
|
|
||||||
import { defineAsyncComponent, reactive, computed, onBeforeMount, watch } from 'vue'
|
|
||||||
import { useRoute, onBeforeRouteUpdate, RouteRecordRaw, useRouter } from 'vue-router'
|
|
||||||
import { storeToRefs } from 'pinia'
|
|
||||||
import { useRoutesList } from '/@/stores/routesList'
|
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig'
|
|
||||||
import other from '/@/utils/other'
|
|
||||||
import mittBus from '/@/utils/mitt'
|
|
||||||
import { treeToList, listToTree, filterList } from '/@/utils/tree'
|
|
||||||
import { cloneDeep } from 'lodash-es'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
const { t } = useI18n()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
// 引入组件
|
|
||||||
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'))
|
|
||||||
|
|
||||||
// 定义父组件传过来的值
|
|
||||||
const props = defineProps({
|
|
||||||
// 菜单列表
|
|
||||||
menuList: {
|
|
||||||
type: Array<RouteRecordRaw>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
// 定义变量内容
|
|
||||||
const stores = useRoutesList()
|
|
||||||
const storesThemeConfig = useThemeConfig()
|
|
||||||
const { routesList } = storeToRefs(stores)
|
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig)
|
|
||||||
const route = useRoute()
|
|
||||||
const state = reactive({
|
|
||||||
defaultActive: '' as string | undefined,
|
|
||||||
currentModuleName: '' as string,
|
|
||||||
})
|
|
||||||
|
|
||||||
// 获取父级菜单数据
|
|
||||||
const menuLists = computed(() => {
|
|
||||||
return <RouteItems>props.menuList
|
|
||||||
})
|
|
||||||
|
|
||||||
// 路由过滤递归函数
|
|
||||||
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
|
||||||
return arr
|
|
||||||
.filter((item: T) => !item.meta?.isHide)
|
|
||||||
.map((item: T) => {
|
|
||||||
item = Object.assign({}, item)
|
|
||||||
if (item.children) item.children = filterRoutesFun(item.children)
|
|
||||||
return item
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得根菜单路径
|
|
||||||
const getRootPath = (path: string) => {
|
|
||||||
let rootPath = ''
|
|
||||||
let routeTree = listToTree(
|
|
||||||
filterList(treeToList(cloneDeep(routesList.value)), path, {
|
|
||||||
filterWhere: (item: any, filterword: string) => {
|
|
||||||
return item.path?.toLocaleLowerCase() === filterword
|
|
||||||
},
|
|
||||||
})
|
|
||||||
)
|
|
||||||
if (routeTree.length > 0 && routeTree[0]?.path) {
|
|
||||||
rootPath = routeTree[0].path
|
|
||||||
}
|
|
||||||
return rootPath
|
|
||||||
}
|
|
||||||
|
|
||||||
// 传送当前子级数据到菜单中
|
|
||||||
const setSendClassicChildren = (path: string) => {
|
|
||||||
let rootPath = getRootPath(path)
|
|
||||||
rootPath = rootPath || path
|
|
||||||
const currentPathSplit = rootPath.split('/')
|
|
||||||
let currentData: MittMenu = { children: [] }
|
|
||||||
filterRoutesFun(routesList.value).map((v, k) => {
|
|
||||||
if (v.path === `/${currentPathSplit[1]}`) {
|
|
||||||
v['k'] = k
|
|
||||||
currentData['item'] = { ...v }
|
|
||||||
currentData['children'] = [{ ...v }]
|
|
||||||
if (v.children) currentData['children'] = v.children
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return currentData
|
|
||||||
}
|
|
||||||
// 设置页面当前路由高亮
|
|
||||||
const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
|
|
||||||
const { path, meta } = currentRoute
|
|
||||||
|
|
||||||
if (themeConfig.value.layout === 'classic') {
|
|
||||||
let rootPath = getRootPath(path || '')
|
|
||||||
rootPath = rootPath || path || ''
|
|
||||||
state.defaultActive = `/${rootPath?.split('/')[1]}`
|
|
||||||
if (!state.defaultActive || state.defaultActive === '/') router.push(routesList.value[0].path)
|
|
||||||
} else {
|
|
||||||
const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/')
|
|
||||||
if (pathSplit.length >= 4 && meta?.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/')
|
|
||||||
else state.defaultActive = path
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onMenuChange = (path: string) => {
|
|
||||||
console.log('path', path)
|
|
||||||
let to = menuLists.value.find(item => item.path === path)
|
|
||||||
state.currentModuleName = t(to.meta?.title || '未命名模块')
|
|
||||||
setCurrentRouterHighlight(to)
|
|
||||||
let { layout } = themeConfig.value
|
|
||||||
if (layout === 'classic') {
|
|
||||||
mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 页面加载前
|
|
||||||
onBeforeMount(() => {
|
|
||||||
setCurrentRouterHighlight(route)
|
|
||||||
state.currentModuleName = t(route.meta?.title || '未命名模块')
|
|
||||||
let { layout } = themeConfig.value
|
|
||||||
if (layout === 'classic') {
|
|
||||||
mittBus.emit('setSendClassicChildren', setSendClassicChildren(route.path))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 路由更新时
|
|
||||||
onBeforeRouteUpdate((to) => {
|
|
||||||
state.currentModuleName = t(to.meta?.title || '未命名模块')
|
|
||||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
|
||||||
setCurrentRouterHighlight(to)
|
|
||||||
// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
|
|
||||||
let { layout, isClassicSplitMenu } = themeConfig.value
|
|
||||||
if (layout === 'classic' && isClassicSplitMenu) {
|
|
||||||
mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.el-menu-horizontal-warp {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-right: 30px;
|
|
||||||
|
|
||||||
:deep(.el-scrollbar__bar.is-vertical) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(a) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu.el-menu--horizontal {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-navbars-breadcrumb-user-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.module-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--el-text-color-primary);
|
|
||||||
max-width: 120px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user