improve: 菜单开关字段vuex

template/admin/src/components/main/components/header-bar/header-bar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header-bar">
     <div class="header-l">
-      <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger>
+      <sider-trigger @on-change="handleCollpasedChange"></sider-trigger>
       <!-- <span class="i-layout-header-trigger" @click="handleReload">
       <Icon type="ios-refresh" color='#fff' />
     </span> -->
@@ -9,7 +9,6 @@
         show-icon
         :list="breadCrumbList"
         :listLast="crumbPast"
-        :collapsed="collapsed"
       ></custom-bread-crumb>
     </div>
 
@@ -19,7 +18,6 @@
   </div>
 </template>
 <style scoped lang="less">
-
 .i-layout-header-trigger {
   position: absolute;
   margin: 0 10px;
@@ -34,7 +32,7 @@
 import siderTrigger from './sider-trigger';
 import customBreadCrumb from './custom-bread-crumb';
 import { R } from '@/libs/util';
-
+import { mapState } from 'vuex';
 import './header-bar.less';
 export default {
   name: 'HeaderBar',
@@ -43,9 +41,10 @@ export default {
     customBreadCrumb,
   },
   props: {
-    collapsed: Boolean,
+    // collapsed: Boolean,
   },
   computed: {
+    ...mapState('layout', ['menuCollapse']),
     breadCrumbList() {
       let openMenus = this.$store.state.menus.openMenus;
       let menuList = this.$store.state.menus.menusName;
@@ -60,7 +59,7 @@ export default {
           });
         });
       }
-      console.log('selectMenu',openMenus)
+      console.log('selectMenu', openMenus);
       return selectMenu;
       // return this.$store.state.app.breadCrumbList
     },

template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="sider-menu" @click="handleChange">
-    <a type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']"
-      ><i class="iconfont" color="#fff" :class="collapsed ? 'iconcaidanzhankai' : 'iconcaidanshouqi'"></i
+    <a type="text" :class="['sider-trigger-a', menuCollapse ? 'menuCollapse' : '']"
+      ><i class="iconfont" color="#fff" :class="menuCollapse ? 'iconcaidanzhankai' : 'iconcaidanshouqi'"></i
     ></a>
   </div>
 </template>
 <script>
+import { mapState } from 'vuex';
 export default {
   name: 'siderTrigger',
   props: {
-    collapsed: Boolean,
+    // collapsed: Boolean,
     icon: {
       type: String,
       default: 'navicon-round',
@@ -19,9 +20,16 @@ export default {
       default: 18,
     },
   },
+  computed: {
+    ...mapState('layout', ['menuCollapse']),
+  },
+  data() {
+    return {};
+  },
   methods: {
     handleChange() {
-      this.$emit('on-change', !this.collapsed);
+      this.$emit('on-change', !this.menuCollapse);
+      this.$store.commit('layout/changeCol', !this.menuCollapse);
     },
   },
 };

template/admin/src/components/main/components/side-menu/side-menu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="side-menu-wrapper">
     <!-- <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger> -->
-    <div class="side-menu-box" v-if="!collapsed">
+    <div class="side-menu-box" v-if="!menuCollapse">
       <div class="parent-menu">
         <slot></slot>
         <Menu
@@ -63,7 +63,7 @@
       </div>
     </div>
 
-    <div class="menu-collapsed" v-if="collapsed">
+    <div class="menu-collapsed" v-if="menuCollapse">
       <slot></slot>
       <template v-for="item in menusName">
         <collapsed-menu
@@ -109,9 +109,9 @@ export default {
     siderTrigger,
   },
   props: {
-    collapsed: {
-      type: Boolean,
-    },
+    // collapsed: {
+    //   type: Boolean,
+    // },
     theme: {
       type: String,
       default: 'light',
@@ -145,7 +145,7 @@ export default {
     ...mapState('menus', ['menusName']),
     ...mapState('menu', ['activePath', 'openNames', 'header', 'headerName', 'sider', 'oneMenuName']),
     ...mapGetters('menu', ['filterSider']),
-
+    ...mapState('layout', ['menuCollapse']),
     textColor() {
       return this.theme === 'dark' ? '#fff' : '#495060';
     },
@@ -163,7 +163,7 @@ export default {
         this.$refs.childMenu.updateActiveName();
       });
     },
-    collapsed(val) {
+    menuCollapse(val) {
       if (!val) {
         this.$nextTick(() => {
           this.$refs.menu.updateOpened();
@@ -400,6 +400,7 @@ export default {
       color: #606266;
       padding: 15px 23px;
       text-align: left;
+      white-space: nowrap;
       border-bottom: 1px solid #f2f2f2;
     }
   }

template/admin/src/components/main/main.vue

@@ -5,7 +5,7 @@
       collapsible
       :width="sider.length ? 240 : 80"
       :collapsed-width="isMobile ? 0 : 80"
-      v-model="collapsed"
+      v-model="menuCollapse"
       :style="{ overflow: 'hidden' }"
       v-if="!headMenuNoShow"
     >
@@ -14,7 +14,6 @@
         ref="sideMenu"
         @on-coll-change="handleCollapsedChange"
         :active-name="$route.path"
-        :collapsed="collapsed"
         @on-select="turnToPage"
       >
         <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
@@ -25,7 +24,7 @@
     </Sider>
     <Layout>
       <Header class="header-con" v-if="!headMenuNoShow">
-        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
+        <header-bar  @on-coll-change="handleCollapsedChange">
           <user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
           <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px" :lang="local" />
           <header-notice></header-notice>
@@ -111,7 +110,7 @@ export default {
   },
   data() {
     return {
-      collapsed: JSON.parse(getCookies('collapsed') || 'false'),
+      // collapsed: JSON.parse(getCookies('collapsed') || 'false'),
       minLogo,
       maxLogo,
       isFullscreen: false,
@@ -130,6 +129,8 @@ export default {
     ...mapGetters(['errorCount']),
     ...mapState('menu', ['sider']),
     ...mapState('media', ['isMobile']),
+    ...mapState('layout', ['menuCollapse']),
+
     tagNavList() {
       return this.$store.state.app.tagNavList;
     },
@@ -179,8 +180,8 @@ export default {
       });
     },
     handleCollapsedChange(state) {
-      this.collapsed = state;
-      setCookies('collapsed', state);
+      // this.collapsed = state;
+      // setCookies('collapsed', state);
     },
     handleCloseTag(res, type, route) {
       if (type !== 'others') {
@@ -244,11 +245,13 @@ export default {
       return (() => {
         this.screenWidth = document.body.clientWidth;
         if (this.screenWidth <= 1060) {
-          this.collapsed = true;
-          setCookies('collapsed', true);
+          // this.collapsed = true;
+          // setCookies('collapsed', true);
+          this.$store.commit('layout/changeCol', true);
         } else {
-          this.collapsed = false;
-          setCookies('collapsed', false);
+          // this.collapsed = false;
+          // setCookies('collapsed', false);
+          this.$store.commit('layout/changeCol', false);
         }
       })();
     };

template/admin/src/pages/setting/agreement/index.vue

@@ -23,11 +23,12 @@
         >保存</Button
       >
     </Row> -->
+
     <Card
       :bordered="false"
       dis-hover
       class="fixed-card"
-      :style="{ left: `${!menuCollapse ? '200px' : isMobile ? '0' : '80px'}` }"
+      :style="{ left: `${!menuCollapse ? '240px' : isMobile ? '0' : '80px'}` }"
     >
       <div class="acea-row row-center">
         <Button class="bnt" type="primary" @click="save" :loading="loadingExist">保存</Button>
@@ -71,9 +72,11 @@ export default {
     };
   },
   computed: {
-    ...mapState('admin/layout', ['isMobile', 'menuCollapse']),
+    ...mapState('layout', ['menuCollapse']),
+    ...mapState('admin/layout', ['isMobile']),
   },
   created() {
+    console.log(menuCollapse)
     this.changeTab(this.currentTab);
   },
   methods: {
@@ -148,7 +151,7 @@ export default {
   right: 0;
   bottom: 0;
   left: 200px;
-  z-index: 99;
+  z-index: 8;
   box-shadow: 0 -1px 2px rgb(240, 240, 240);
 
   /deep/ .ivu-card-body {

template/admin/src/store/index.js

@@ -28,6 +28,7 @@ import kefu from './module/kefu';
 import integralOrder from './module/integralOrder';
 import mobildConfig from './module/mobildConfig';
 import upgrade from './module/upgrade';
+import layout from './module/layout';
 
 Vue.use(Vuex);
 // 持久化储存
@@ -61,6 +62,7 @@ export default new Vuex.Store({
         integralOrder: state.integralOrder,
         mobildConfig: state.mobildConfig,
         upgrade: state.upgrade,
+        layout: state.layout,
       }),
       storage: window.localStorage,
     }).plugin,
@@ -82,5 +84,6 @@ export default new Vuex.Store({
     mobildConfig,
     integralOrder,
     upgrade,
+    layout,
   },
 });

template/admin/src/store/module/layout.js

@@ -0,0 +1,17 @@
+export default {
+  namespaced: true,
+  state: {
+    menuCollapse: false,
+  },
+  getters: {},
+  mutations: {
+    /**
+     * @description 设置侧边栏展开关闭
+     * @param {Object} state vuex state
+     * @param {Array} status status
+     */
+    changeCol(state, status) {
+      state.menuCollapse = status;
+    },
+  },
+};