撤回修改
This commit is contained in:
parent
aaf85ccf22
commit
cff2a60701
@ -7,7 +7,6 @@
|
||||
|
||||
<Horizontal :menuList="state.menuList" />
|
||||
<div class="right-section">
|
||||
<!-- <module-switch :menuList="state.menuList" /> -->
|
||||
<User />
|
||||
</div>
|
||||
</div>
|
||||
@ -20,7 +19,6 @@ import { storeToRefs } from 'pinia'
|
||||
import { useRoutesList } from '/@/stores/routesList'
|
||||
import { useThemeConfig } from '/@/stores/themeConfig'
|
||||
import mittBus from '/@/utils/mitt'
|
||||
import ModuleSwitch from './module-switch.vue'
|
||||
|
||||
// 引入组件
|
||||
const User = defineAsyncComponent(() => import('/@/layout/navBars/topBar/user.vue'))
|
||||
@ -62,7 +60,9 @@ const isLayoutTransverse = computed(() => {
|
||||
const setFilterRoutes = () => {
|
||||
let { layout, isClassicSplitMenu } = themeConfig.value
|
||||
if (layout === 'classic' && isClassicSplitMenu) {
|
||||
state.menuList = delClassicChildren(filterRoutesFun(routesList.value))
|
||||
// 为了支持下拉菜单，我们保留完整的菜单结构给 horizontal 组件
|
||||
// 但仍然发送分割后的数据给侧边栏
|
||||
state.menuList = filterRoutesFun(routesList.value) // 保留完整结构用于下拉菜单
|
||||
const resData = setSendClassicChildren(route.path)
|
||||
mittBus.emit('setSendClassicChildren', resData)
|
||||
} 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