开启TopNav没有子菜单情况隐藏侧边栏
This commit is contained in:
parent
6de1250639
commit
93caadaadb
@ -7,6 +7,10 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
margin-left: 0!important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
-webkit-transition: width .28s;
|
||||
transition: width 0.28s;
|
||||
|
@ -40,6 +40,7 @@ const currentIndex = ref(null);
|
||||
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// 主题颜色
|
||||
const theme = computed(() => store.state.settings.theme);
|
||||
@ -69,7 +70,7 @@ const childrenMenus = computed(() => {
|
||||
for (let item in router.children) {
|
||||
if (router.children[item].parentPath === undefined) {
|
||||
if(router.path === "/") {
|
||||
router.children[item].path = "/redirect/" + router.children[item].path;
|
||||
router.children[item].path = "/" + router.children[item].path;
|
||||
} else {
|
||||
if(!isHttp(router.children[item].path)) {
|
||||
router.children[item].path = router.path + "/" + router.children[item].path;
|
||||
@ -86,52 +87,48 @@ const childrenMenus = computed(() => {
|
||||
// 默认激活的菜单
|
||||
const activeMenu = computed(() => {
|
||||
const path = route.path;
|
||||
let activePath = defaultRouter.value;
|
||||
let activePath = path;
|
||||
if (path !== undefined && path.lastIndexOf("/") > 0) {
|
||||
const tmpPath = path.substring(1, path.length);
|
||||
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
|
||||
store.dispatch('app/toggleSideBarHide', false);
|
||||
} else if ("/index" == path || "" == path) {
|
||||
if (!isFrist.value) {
|
||||
isFrist.value = true;
|
||||
} else {
|
||||
activePath = "index";
|
||||
}
|
||||
store.dispatch('app/toggleSideBarHide', true);
|
||||
} else if(!route.children) {
|
||||
activePath = path;
|
||||
store.dispatch('app/toggleSideBarHide', true);
|
||||
}
|
||||
let routes = activeRoutes(activePath);
|
||||
if (routes.length === 0) {
|
||||
activePath = currentIndex.value || defaultRouter.value
|
||||
activeRoutes(activePath);
|
||||
}
|
||||
activeRoutes(activePath);
|
||||
return activePath;
|
||||
})
|
||||
// 默认激活的路由
|
||||
const defaultRouter = computed(() => {
|
||||
let router;
|
||||
Object.keys(routers.value).some((key) => {
|
||||
if (!routers.value[key].hidden) {
|
||||
router = routers.value[key].path;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
return router;
|
||||
})
|
||||
|
||||
function setVisibleNumber() {
|
||||
const width = document.body.getBoundingClientRect().width / 3;
|
||||
visibleNumber.value = parseInt(width / 85);
|
||||
}
|
||||
|
||||
function handleSelect(key, keyPath) {
|
||||
currentIndex.value = key;
|
||||
const route = routers.value.find(item => item.path === key);
|
||||
if (isHttp(key)) {
|
||||
// http(s):// 路径新窗口打开
|
||||
window.open(key, "_blank");
|
||||
} else if (key.indexOf("/redirect") !== -1) {
|
||||
// /redirect 路径内部打开
|
||||
router.push({ path: key.replace("/redirect", "") });
|
||||
} else if (!route || !route.children) {
|
||||
// 没有子路由路径内部打开
|
||||
router.push({ path: key });
|
||||
store.dispatch('app/toggleSideBarHide', true);
|
||||
} else {
|
||||
// 显示左侧联动菜单
|
||||
activeRoutes(key);
|
||||
store.dispatch('app/toggleSideBarHide', false);
|
||||
}
|
||||
}
|
||||
|
||||
function activeRoutes(key) {
|
||||
let routes = [];
|
||||
if (childrenMenus.value && childrenMenus.value.length > 0) {
|
||||
|
@ -102,6 +102,7 @@ const topNav = computed({
|
||||
value: val
|
||||
})
|
||||
if (!val) {
|
||||
store.dispatch('app/toggleSideBarHide', false);
|
||||
store.commit("SET_SIDEBAR_ROUTERS", store.state.permission.defaultRoutes);
|
||||
}
|
||||
}
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<sidebar class="sidebar-container" />
|
||||
<div :class="{ hasTagsView: needTagsView }" class="main-container">
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||
<div :class="{ 'fixed-header': fixedHeader }">
|
||||
<navbar @setLayout="setLayout" />
|
||||
<tags-view v-if="needTagsView" />
|
||||
|
@ -3,7 +3,8 @@ import Cookies from 'js-cookie'
|
||||
const state = {
|
||||
sidebar: {
|
||||
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
|
||||
withoutAnimation: false
|
||||
withoutAnimation: false,
|
||||
hide: false
|
||||
},
|
||||
device: 'desktop',
|
||||
size: Cookies.get('size') || 'default'
|
||||
@ -30,6 +31,9 @@ const mutations = {
|
||||
SET_SIZE: (state, size) => {
|
||||
state.size = size
|
||||
Cookies.set('size', size)
|
||||
},
|
||||
SET_SIDEBAR_HIDE: (state, status) => {
|
||||
state.sidebar.hide = status
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +49,9 @@ const actions = {
|
||||
},
|
||||
setSize({ commit }, size) {
|
||||
commit('SET_SIZE', size)
|
||||
},
|
||||
toggleSideBarHide({ commit }, status) {
|
||||
commit('SET_SIDEBAR_HIDE', status)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -24,12 +24,7 @@ const permission = {
|
||||
state.defaultRoutes = constantRoutes.concat(routes)
|
||||
},
|
||||
SET_TOPBAR_ROUTES: (state, routes) => {
|
||||
// 顶部导航菜单默认添加统计报表栏指向首页
|
||||
const index = [{
|
||||
path: 'index',
|
||||
meta: { title: '统计报表', icon: 'dashboard' }
|
||||
}]
|
||||
state.topbarRouters = routes.concat(index);
|
||||
state.topbarRouters = routes
|
||||
},
|
||||
SET_SIDEBAR_ROUTERS: (state, routes) => {
|
||||
state.sidebarRouters = routes
|
||||
|
@ -13,7 +13,7 @@
|
||||
<el-form-item label="任务组名" prop="jobGroup">
|
||||
<el-select
|
||||
v-model="queryParams.jobGroup"
|
||||
placeholder="请任务组名"
|
||||
placeholder="请选择任务组名"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user