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

RuoYi

2022-03-06 93caadaadb5472f4c368528f7f777d973bc55719

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

 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;


 src/components/TopNav/index.vue

@@ -40,6 +40,7 @@


const store = useStore();

const route = useRoute();

const router = useRouter();



// 主题颜色

const theme = computed(() => store.state.settings.theme);

@@ -69,7 +70,7 @@
    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 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) {


 src/layout/components/Settings/index.vue

@@ -102,6 +102,7 @@
      value: val

    })

    if (!val) {

      store.dispatch('app/toggleSideBarHide', false);

      store.commit("SET_SIDEBAR_ROUTERS", store.state.permission.defaultRoutes);

    }

  }


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


 src/store/modules/app.js

@@ -3,7 +3,8 @@
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 @@
  SET_SIZE: (state, size) => {

    state.size = size

    Cookies.set('size', size)

  },

  SET_SIDEBAR_HIDE: (state, status) => {

    state.sidebar.hide = status

  }

}



@@ -45,6 +49,9 @@
  },

  setSize({ commit }, size) {

    commit('SET_SIZE', size)

  },

  toggleSideBarHide({ commit }, status) {

    commit('SET_SIDEBAR_HIDE', status)

  }

}




 src/store/modules/permission.js

@@ -24,12 +24,7 @@
      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


 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"

            >