提交

ruoyi-ui/src/layout/components/Navbar.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar(0)" />
 
     <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
-
-      <SignNumArr class="SignNumArr"/>
+      <!-- <SignNumArr class="SignNumArr"/> -->
+	  <div class="sign_box">
+	    <div class="sign_item" :class="{active: activeMenu.includes((item.path||item.redirect))}"  v-for="item in this.sidebarRouters.filter(res => {
+	          return res.hidden == false || res.redirect == 'index'
+	        })"
+	      @click="tabBtn(item)">
+	      <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+	      <item v-if="!item.meta" :icon="item.meta && item.meta.icon" :title="'首页'" />
+	    </div>
+	  </div>
     <div class="right-menu">
       <!-- <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
@@ -48,7 +56,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import SignNumArr from '@/components/SignNumArr'
 import Hamburger from '@/components/Hamburger'
@@ -57,8 +65,15 @@ import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 import RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
-
+import Item from '@/layout/components/Sidebar/Item'
 export default {
+	data() {
+	  return {
+	    indexs: 1,
+	    newArr: [],
+      showde:true
+	  }
+	},
   components: {
     SignNumArr,
     Hamburger,
@@ -66,16 +81,22 @@ export default {
     SizeSelect,
     Search,
     RuoYiGit,
-    RuoYiDoc
+    RuoYiDoc,
+	  Item
   },
   mounted() {
+	   this.init()
   },
   computed: {
     ...mapGetters([
       'sidebar',
       'avatar',
-      'device'
-    ]),
+      'device',
+	    "sidebarRouters", "sidebar", "tabIndex"
+    ]),
+    activeMenu() {
+      return this.tabIndex;
+    },
     setting: {
       get() {
         return this.$store.state.settings.showSettings
@@ -85,12 +106,14 @@ export default {
           key: 'showSettings',
           value: val
         })
-      }
+      },
+
     }
   },
   methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+    toggleSideBar(index) {
+      this.$store.dispatch('app/toggleSideBar')
+       // console.log( this.$store.dispatch('app/toggleSideBar'))
     },
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
@@ -102,7 +125,39 @@ export default {
           location.href = '/index';
         })
       })
-    }
+    },
+	tabBtn(item) {
+    console.log(item)
+	  if(this.activeMenu.includes((item.path||item.redirect))){
+	    return
+	  }
+    this.$store.dispatch('app/toggleSideBartwo')
+	  if (item.redirect == 'index') {
+	    if(this.$route.path!=='/index'){
+	      this.$router.push({
+	        path: '/index'
+	      })
+	    }
+	    this.$store.dispatch('TabFn', item.redirect)
+	    return
+	  }
+	  this.$store.dispatch('TabFn', item.path)
+    this.showde = true
+   
+	},
+	init() {
+	  const route = this.$route;
+	  const {
+	    meta,
+	    path
+	  } = route;
+	  // if set path, the sidebar will highlight the path you set
+	  console.log(route)
+	  if (meta.activeMenu) {
+	    this.$store.dispatch('TabFn', meta.activeMenu)
+	  }
+	  this.$store.dispatch('TabFn', path)
+	}
   }
 }
 </script>
@@ -198,4 +253,57 @@ export default {
     }
   }
 }
+
+.sign_box {
+    // padding-left: 12px;
+    width: calc(100% - 160px);
+    overflow-x: scroll;
+     white-space: nowrap;
+
+    .sign_item {
+      cursor: pointer;
+      float: left;
+      display: inline-table;
+      height: 50px;
+      text-align: center;
+      line-height: 50px;
+      position: relative;
+      width: 143px;
+      box-sizing: border-box;
+      color: #fff;
+
+      .img {
+        width: 153px;
+        height: 48px;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+
+      .icon {
+        position: relative;
+        z-index: 1;
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+
+      span {
+        position: relative;
+        z-index: 1;
+        color: #fff !important;
+        font-size: 16px !important;
+      }
+
+      svg {
+        color: #fff !important;
+        z-index: 2;
+        line-height: 1;
+        margin-right: 5px;
+      }
+    }
+  }
+  .active{
+    background-color: #367FA8!important;
+  }
 </style>

ruoyi-ui/src/store/modules/app.js

@@ -18,6 +18,15 @@ const mutations = {
     } else {
       Cookies.set('sidebarStatus', 0)
     }
+  }, 
+  TOGGLE_SIDEBARTWO: state => {
+    state.sidebar.opened = true
+    state.sidebar.withoutAnimation = false
+    if (state.sidebar.opened) {
+      Cookies.set('sidebarStatus', 1)
+    } else {
+      Cookies.set('sidebarStatus', 0)
+    }
   },
   CLOSE_SIDEBAR: (state, withoutAnimation) => {
     Cookies.set('sidebarStatus', 0)
@@ -37,6 +46,9 @@ const actions = {
   toggleSideBar({ commit }) {
     commit('TOGGLE_SIDEBAR')
   },
+  toggleSideBartwo({ commit }) {
+    commit('TOGGLE_SIDEBARTWO')
+  },
   closeSideBar({ commit }, { withoutAnimation }) {
     commit('CLOSE_SIDEBAR', withoutAnimation)
   },