improve: 菜单子菜单选中

template/admin/src/layout/navBars/breadcrumb/setings.vue

@@ -363,6 +363,15 @@ export default {
           themeSelect['--prev-bg-topBarColor'] = '#fff';
           themeSelect['--prev-bg-menuBarColor'] = '#fff';
           themeSelect['--prev-MenuActiveColor'] = '#fff';
+          if (val == 'theme-1') {
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#1890ff';
+          } else if (val == 'theme-3') {
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';
+          } else if (val == 'theme-5') {
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';
+          } else if (val == 'theme-7') {
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37';
+          }
         } else if (this.getThemeConfig.layout === 'columns') {
           themeSelect['--prev-bg-topBar'] = '#fff';
           themeSelect['--prev-bg-topBarColor'] = '#515a6e';
@@ -501,7 +510,6 @@ export default {
     },
     // 设置布局切换，重置主题样式
     initSetLayoutChange() {
-
       // if (this.$store.state.themeConfig.themeConfig.layout === 'classic') {
       //   this.onBgColorPickerChange('menuBar', '#282c34');
       //   this.onBgColorPickerChange('menuBarColor', '#ffffff');

template/admin/src/layout/navMenu/horizontal.vue

@@ -3,7 +3,7 @@
     <el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
       <el-menu
         router
-        :default-active="defaultActive"
+        :default-active="activePath || defaultActive"
         background-color="transparent"
         mode="horizontal"
         @select="onHorizontalSelect"
@@ -38,6 +38,7 @@
 
 <script>
 import SubItem from '@/layout/navMenu/subItem.vue';
+import { mapState } from 'vuex';
 export default {
   name: 'navMenuHorizontal',
   components: { SubItem },
@@ -47,6 +48,9 @@ export default {
       default: () => [],
     },
   },
+  computed: {
+    ...mapState('menu', ['activePath']),
+  },
   data() {
     return {
       defaultActive: null,

template/admin/src/layout/navMenu/subItem.vue

@@ -7,14 +7,14 @@
 <template>
   <div>
     <template v-for="val in chil">
-      <el-submenu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
+      <el-submenu :index="val.path" :key="val.path" v-if="!val.is_show_path && val.children && val.children.length > 0">
         <template slot="title">
           <i class="ivu-icon" :class="val.icon"></i>
           <span>{{ $t(val.title) }}</span>
         </template>
         <sub-item :chil="val.children" />
       </el-submenu>
-      <template v-else>
+      <template v-else-if="!val.is_show_path">
         <el-menu-item :index="val.path" :key="val.path">
           <template v-if="!val.isLink || (val.isLink && val.isIframe)">
             <i class="ivu-icon" :class="val.icon ? val.icon : ''"></i>

template/admin/src/layout/navMenu/vertical.vue

@@ -1,47 +1,55 @@
 <template>
-  <el-menu
-    router
-    background-color="transparent"
-    :default-active="defaultActive"
-    :collapse="setIsCollapse"
-    :unique-opened="getThemeConfig.isUniqueOpened"
-    :collapse-transition="true"
-  >
-    <template v-for="val in menuList">
-      <el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
-        <template slot="title">
-          <Icon
-            :class="
-              ['defaults', 'classic'].includes(getThemeConfig.layout) && getThemeConfig.isCollapse ? 'center' : 'mr10'
-            "
-            :type="val.icon ? val.icon : ''"
-          />
-          <span>{{ $t(val.title) }}</span>
+  <div>
+    <el-menu
+      router
+      background-color="transparent"
+      :default-active="activePath || defaultActive"
+      :collapse="setIsCollapse"
+      :unique-opened="getThemeConfig.isUniqueOpened"
+      :collapse-transition="true"
+    >
+      <template v-for="val in menuList">
+        <el-submenu
+          :index="val.path"
+          v-if="!val.is_show_path && val.children && val.children.length > 0"
+          :key="val.path"
+        >
+          <template slot="title">
+            <Icon
+              :class="
+                ['defaults', 'classic'].includes(getThemeConfig.layout) && getThemeConfig.isCollapse ? 'center' : 'mr10'
+              "
+              :type="val.icon ? val.icon : ''"
+            />
+            <span>{{ $t(val.title) }} </span>
+          </template>
+          <SubItem :chil="val.children" />
+        </el-submenu>
+        <template v-else-if="!val.is_show_path">
+          <el-menu-item :index="val.path" :key="val.path">
+            <Icon
+              :class="
+                ['defaults', 'classic'].includes(getThemeConfig.layout) && getThemeConfig.isCollapse ? 'center' : 'mr10'
+              "
+              :type="val.icon ? val.icon : ''"
+            />
+            <template slot="title" v-if="!val.isLink || (val.isLink && val.isIframe)">
+              <span>{{ $t(val.title) }}</span>
+            </template>
+            <template slot="title" v-else>
+              <a :href="val.isLink" target="_blank">{{ $t(val.title) }}</a>
+            </template>
+          </el-menu-item>
         </template>
-        <SubItem :chil="val.children" />
-      </el-submenu>
-      <template v-else>
-        <el-menu-item :index="val.path" :key="val.path">
-          <Icon
-            :class="
-              ['defaults', 'classic'].includes(getThemeConfig.layout) && getThemeConfig.isCollapse ? 'center' : 'mr10'
-            "
-            :type="val.icon ? val.icon : ''"
-          />
-          <template slot="title" v-if="!val.isLink || (val.isLink && val.isIframe)">
-            <span>{{ $t(val.title) }}</span>
-          </template>
-          <template slot="title" v-else>
-            <a :href="val.isLink" target="_blank">{{ $t(val.title) }}</a>
-          </template>
-        </el-menu-item>
       </template>
-    </template>
-  </el-menu>
+    </el-menu>
+  </div>
 </template>
 
 <script>
 import SubItem from '@/layout/navMenu/subItem.vue';
+import { mapState } from 'vuex';
+
 export default {
   name: 'navMenuVertical',
   components: { SubItem },
@@ -56,9 +64,11 @@ export default {
   data() {
     return {
       defaultActive: this.$route.path,
+      onRoutes: '',
     };
   },
   computed: {
+    ...mapState('menu', ['activePath']),
     // 获取布局配置信息
     getThemeConfig() {
       return this.$store.state.themeConfig.themeConfig;
@@ -79,8 +89,7 @@ export default {
       deep: true,
     },
   },
-  created() {
-  },
+  created() {},
 };
 </script>
 <style scoped>

template/admin/src/main.js

@@ -195,6 +195,10 @@ new Vue({
   watch: {
     // 监听路由 控制侧边栏显示 标记当前顶栏菜单（如需要）
     $route(to, from) {
+      console.log(to, 'newRoute');
+      const onRoutes = to.meta.activeMenu ? to.meta.activeMenu : '';
+      this.$store.commit('menu/setActivePath', onRoutes);
+
       //   const path = to.path;
       //   let menus = this.$store.state.menus.menusName;
       //   const menuSider = menus;

template/admin/src/pages/marketing/storeBargain/index.vue

@@ -234,7 +234,7 @@ export default {
   methods: {
     // 添加
     add() {
-      this.$router.push({ path: this.$routeProStr + '/marketing/store_bargain/create/0' });
+      this.$router.push({ path: this.$routeProStr + '/marketing/store_bargain/create/0/0' });
     },
     // 导出
     // 用户导出

template/admin/src/router/modules/app.js

@@ -9,7 +9,7 @@
 // +---------------------------------------------------------------------
 
 import LayoutMain from '@/layout';
-import setting  from '@/setting'
+import setting from '@/setting';
 let routePre = setting.routePre;
 
 const pre = 'app_';
@@ -95,6 +95,7 @@ export default {
       meta: {
         auth: ['wechat-wechat-news-category-save'],
         title: '图文添加',
+        activeMenu: routePre + '/app/wechat/news_category/index',
       },
       component: () => import('@/pages/app/wechat/newsCategory/save'),
     },

template/admin/src/router/modules/cms.js

@@ -9,7 +9,7 @@
 // +---------------------------------------------------------------------
 
 import LayoutMain from '@/layout';
-import setting  from '@/setting'
+import setting from '@/setting';
 let routePre = setting.routePre;
 
 const pre = 'cms_';
@@ -48,6 +48,7 @@ export default {
       meta: {
         auth: ['cms-article-creat'],
         title: '文章添加',
+        activeMenu: routePre + '/cms/article/index',
       },
       component: () => import('@/pages/cms/addArticle/index'),
     },

template/admin/src/router/modules/marketing.js

@@ -9,13 +9,13 @@
 // +---------------------------------------------------------------------
 
 import LayoutMain from '@/layout';
-import setting  from '@/setting'
+import setting from '@/setting';
 let routePre = setting.routePre;
 
 const pre = 'marketing_';
 
 export default {
-  path: routePre+'/marketing',
+  path: routePre + '/marketing',
   name: 'marketing',
   header: 'marketing',
   redirect: {
@@ -48,6 +48,7 @@ export default {
       meta: {
         auth: ['marketing-store_combination-create'],
         title: '添加拼团',
+        activeMenu: routePre + '/marketing/store_combination/index',
       },
       component: () => import('@/pages/marketing/storeCombination/create'),
     },
@@ -84,6 +85,7 @@ export default {
       meta: {
         auth: ['marketing-store_coupon_issue-create'],
         title: '添加优惠券',
+        activeMenu: routePre + '/marketing/store_coupon_issue/index',
       },
       component: () => import('@/pages/marketing/storeCouponIssue/create'),
     },
@@ -130,6 +132,7 @@ export default {
       meta: {
         auth: ['marketing-store_bargain-create'],
         title: '添加砍价',
+        activeMenu: routePre + '/marketing/store_bargain/index',
       },
       component: () => import('@/pages/marketing/storeBargain/create'),
     },
@@ -166,6 +169,7 @@ export default {
       meta: {
         auth: ['marketing-store_seckill-create'],
         title: '添加秒杀',
+        activeMenu: routePre + '/marketing/store_seckill/index',
       },
       component: () => import('@/pages/marketing/storeSeckill/create'),
     },
@@ -202,6 +206,7 @@ export default {
       meta: {
         auth: ['marketing-store_integral-create'],
         title: '添加积分商品',
+        activeMenu: routePre + '/marketing/store_integral/index',
       },
       component: () => import('@/pages/marketing/storeIntegral/create'),
     },
@@ -247,6 +252,7 @@ export default {
       meta: {
         auth: true,
         title: '直播间管理',
+        activeMenu: routePre + '/marketing/live/live_room',
       },
       component: () => import('@/pages/marketing/live/creat_live'),
     },
@@ -265,6 +271,7 @@ export default {
       meta: {
         auth: true,
         title: '直播间商品管理',
+        activeMenu: routePre + '/marketing/live/live_goods',
       },
       component: () => import('@/pages/marketing/live/add_goods'),
     },
@@ -347,6 +354,7 @@ export default {
       meta: {
         auth: ['marketing-channel_code-create'],
         title: '新建渠道码',
+        activeMenu: routePre + '/marketing/channel_code/channelCodeIndex',
       },
       component: () => import('@/pages/marketing/channelCode/createCode'),
     },

template/admin/src/router/modules/product.js

@@ -9,13 +9,13 @@
 // +---------------------------------------------------------------------
 
 import LayoutMain from '@/layout';
-import setting  from '@/setting'
+import setting from '@/setting';
 let routePre = setting.routePre;
 
 const pre = 'product_';
 
 export default {
-  path: routePre+'/product',
+  path: routePre + '/product',
   name: 'product',
   header: 'product',
   meta: {
@@ -53,6 +53,7 @@ export default {
       meta: {
         auth: ['admin-store-storeProuduct-index'],
         title: '商品添加',
+        activeMenu: routePre + '/product/product_list',
       },
       component: () => import('@/pages/product/productAdd'),
     },

template/admin/src/router/modules/setting.js

@@ -408,6 +408,7 @@ export default {
       meta: {
         auth: ['admin-setting-pages-diy'],
         title: '页面设计',
+        activeMenu: routePre + '/setting/pages/devise',
       },
       component: () => import('@/pages/setting/devisePage/index'),
     },

template/admin/src/router/modules/system.js

@@ -32,6 +32,7 @@ export default {
       meta: {
         auth: ['system-config-code-generation'],
         title: '代码生成',
+        activeMenu: routePre + '/system/code_generation_list',
       },
       component: () => import('@/pages/system/codeGeneration/index'),
     },
@@ -122,6 +123,7 @@ export default {
       meta: {
         auth: ['system-maintain-system-file'],
         title: '文件管理入口',
+        activeMenu: routePre + '/system/maintain/system_file/opendir',
       },
       component: () => import('@/pages/system/maintain/systemFile/login'),
     },

template/admin/src/theme/app.scss

@@ -75,6 +75,7 @@ body,
     overflow: hidden;
     width: 100%;
     background-color: var(--prev-bg-main-color);
+    position: relative;
   }
   .el-scrollbar {
     width: 100%;