Procházet zdrojové kódy

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

RuoYi před 3 roky
rodič
revize
93caadaadb

+ 4 - 0
src/assets/styles/sidebar.scss

@@ -7,6 +7,10 @@
     position: relative;
   }
 
+  .sidebarHide {
+    margin-left: 0!important;
+  }
+
   .sidebar-container {
     -webkit-transition: width .28s;
     transition: width 0.28s;

+ 18 - 21
src/components/TopNav/index.vue

@@ -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) {

+ 1 - 0
src/layout/components/Settings/index.vue

@@ -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);
     }
   }

+ 2 - 2
src/layout/index.vue

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

+ 8 - 1
src/store/modules/app.js

@@ -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)
   }
 }
 

+ 1 - 6
src/store/modules/permission.js

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

+ 1 - 1
src/views/monitor/job/log.vue

@@ -13,7 +13,7 @@
          <el-form-item label="任务组名" prop="jobGroup">
             <el-select
                v-model="queryParams.jobGroup"
-               placeholder="请任务组名"
+               placeholder="请选择任务组名"
                clearable
                style="width: 240px"
             >