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