开启TopNav没有子菜单情况隐藏侧边栏

master
RuoYi 3 years ago
parent 6de1250639
commit 93caadaadb
  1. 4
      src/assets/styles/sidebar.scss
  2. 39
      src/components/TopNav/index.vue
  3. 1
      src/layout/components/Settings/index.vue
  4. 4
      src/layout/index.vue
  5. 9
      src/store/modules/app.js
  6. 7
      src/store/modules/permission.js
  7. 2
      src/views/monitor/job/log.vue

@ -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"
> >

Loading…
Cancel
Save