前端侧边栏更新

ruoyi-ui/src/App.vue

@@ -6,6 +6,6 @@
 
 <script>
 export default  {
-  name:  'App'
+  name:  'App',
 }
 </script>

ruoyi-ui/src/components/Breadcrumb/index.vue

@@ -37,8 +37,8 @@ export default {
       if (!this.isDashboard(first)) {
         matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
       }
-
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+      console.log(this.levelList,999)
     },
     isDashboard(route) {
       const name = route && route.name

ruoyi-ui/src/components/HeaderSearch/index.vue

@@ -56,6 +56,7 @@ export default {
   },
   mounted() {
     this.searchPool = this.generateRoutes(this.routes)
+    console.log(this.searchPool,999)
   },
   methods: {
     click() {

ruoyi-ui/src/components/SignNumArr/index.vue

@@ -1,28 +1,91 @@
 <template>
   <div class="sign_box">
-    <div class="sign_item" v-for="item in 4" @click="indexs = item">
-      <img src="@/assets/images/pic_tabbg@2x.png" v-show="indexs==item" alt="" class="img">
-      <img src="@/assets/404_images/404_cloud.png" alt="" class="icon">
-      <span>首页</span>
+    <div class="sign_item" v-for="item in this.sidebarRouters.filter(res => {
+          return res.hidden == false || res.redirect == 'index'
+        })"
+      @click="tabBtn(item)">
+      <img src="@/assets/images/pic_tabbg@2x.png" draggable="false" v-show="activeMenu.includes((item.path||item.redirect))"
+        alt="" class="img">
+      <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>
 </template>
 
 <script>
-  export default{
+  import {
+    mapGetters,
+    mapState
+  } from "vuex";
+  import Item from '@/layout/components/Sidebar/Item'
+
+  export default {
     data() {
       return {
-        indexs:1
+        indexs: 1,
+        newArr: [],
+      }
+    },
+    components: {
+      Item
+    },
+    computed: {
+      ...mapGetters(["sidebarRouters", "sidebar", "tabIndex"]),
+      activeMenu() {
+        // const route = this.$route;
+        // const { meta, path } = route;
+        // // if set path, the sidebar will highlight the path you set
+        // if (meta.activeMenu) {
+        //     return meta.activeMenu;
+        // }
+        console.log(this.tabIndex, 887)
+        return this.tabIndex;
+      },
+    },
+    mounted() {
+      this.init()
+    },
+    watch: {
+
+    },
+    methods: {
+      tabBtn(item) {
+        if(this.activeMenu.includes((item.path||item.redirect))){
+          return
+        }
+        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)
+      },
+      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>
 
 <style lang="scss" scoped>
-  .sign_box{
+  .sign_box {
     padding-left: 52px;
-    .sign_item{
+
+    .sign_item {
       cursor: pointer;
       float: left;
       display: flex;
@@ -33,25 +96,36 @@
       width: 153px;
       padding-top: 10px;
       box-sizing: border-box;
-      .img{
+      color: #fff;
+
+      .img {
         width: 153px;
         height: 48px;
         position: absolute;
         left: 0;
         bottom: 0;
       }
-      .icon{
+
+      .icon {
         position: relative;
         z-index: 1;
         width: 20px;
         height: 20px;
         margin-right: 8px;
       }
-      span{
+
+      span {
         position: relative;
         z-index: 1;
-        color: #fff;
-        font-size: 17px;
+        color: #fff !important;
+        font-size: 17px !important;
+      }
+
+      svg {
+        color: #fff !important;
+        z-index: 2;
+        line-height: 1;
+        margin-right: 5px;
       }
     }
   }

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

@@ -38,7 +38,7 @@ export default {
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - 94px);
   }
 
   .fixed-header+.app-main {

ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue

@@ -56,6 +56,8 @@ export default {
     this.onlyOneChild = null
     return {}
   },
+  mounted() {
+  },
   methods: {
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {

ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -13,7 +13,7 @@
                 mode="vertical"
             >
                 <sidebar-item
-                    v-for="(route, index) in sidebarRouters"
+                    v-for="(route, index) in handleSide"
                     :key="route.path  + index"
                     :item="route"
                     :base-path="route.path"
@@ -31,17 +31,31 @@ import variables from "@/assets/styles/variables.scss";
 
 export default {
     components: { SidebarItem, Logo },
+    mounted() {
+      console.log(this.sidebarRouters,this.sidebar,this.settings)
+    },
     computed: {
         ...mapState(["settings"]),
-        ...mapGetters(["sidebarRouters", "sidebar"]),
+        ...mapGetters(["sidebarRouters", "sidebar","tabIndex"]),
         activeMenu() {
-            const route = this.$route;
-            const { meta, path } = route;
-            // if set path, the sidebar will highlight the path you set
-            if (meta.activeMenu) {
-                return meta.activeMenu;
+            // const route = this.$route;
+            // const { meta, path } = route;
+            // // if set path, the sidebar will highlight the path you set
+            // if (meta.activeMenu) {
+            //     return meta.activeMenu;
+            // }
+
+            return this.tabIndex;
+        },
+        handleSide() {
+          let add = []
+          console.log(this.sidebarRouters)
+          for(let item of this.sidebarRouters){
+            if(this.activeMenu.includes(item.path||item.redirect)){
+              add.push(item)
             }
-            return path;
+          }
+          return add
         },
         showLogo() {
             return this.$store.state.settings.sidebarLogo;

ruoyi-ui/src/layout/index.vue

@@ -5,10 +5,10 @@
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
-        <tags-view v-if="needTagsView&&false"/>
+        <tags-view v-if="needTagsView"/>
       </div>
       <app-main />
-      <right-panel v-if="showSettings&&false">
+      <right-panel v-if="showSettings">
         <settings />
       </right-panel>
     </div>

ruoyi-ui/src/store/getters.js

@@ -12,5 +12,6 @@ const getters = {
   permissions: state => state.user.permissions,
   permission_routes: state => state.permission.routes,
   sidebarRouters:state => state.permission.sidebarRouters,
+  tabIndex:state => state.permission.tabIndex,
 }
 export default getters

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

@@ -7,9 +7,13 @@ const permission = {
   state: {
     routes: [],
     addRoutes: [],
-    sidebarRouters: []
+    sidebarRouters: [],
+    tabIndex: '',
   },
   mutations: {
+    SET_TABINDEX: (state, tabIndex) => {
+      state.tabIndex = tabIndex
+    },
     SET_ROUTES: (state, routes) => {
       state.addRoutes = routes
       state.routes = constantRoutes.concat(routes)
@@ -19,6 +23,13 @@ const permission = {
     },
   },
   actions: {
+    // 根据属性修改tab值
+    TabFn({ commit, state },userInfo){
+      return new Promise(resolve => {
+        commit('SET_TABINDEX', userInfo)
+        resolve()
+      })
+    },
     // 生成路由
     GenerateRoutes({ commit }) {
       return new Promise(resolve => {

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

@@ -7,7 +7,7 @@ const user = {
     name: '',
     avatar: '',
     roles: [],
-    permissions: []
+    permissions: [],
   },
 
   mutations: {
@@ -85,7 +85,7 @@ const user = {
         })
       })
     },
-    
+
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {

ruoyi-ui/src/views/system/role/index.vue

@@ -580,7 +580,7 @@ export default {
   }
   .app-container{
      background-color: #EFF0FF;
-     min-height: calc(100vh - 60px);
+     min-height: calc(100vh - 70px);
      box-sizing: border-box;
   }
   .roleBox{