refactor: layout setting drawer. (#113)

src/components/SettingDrawer/SettingDrawer.vue

@@ -7,7 +7,7 @@
       width="300"
       closable
       @close="onClose"
-      :visible="visible"
+      :visible="layoutSetting"
     >
       <div class="setting-drawer-index-content">
         <div :style="{ marginBottom: '24px' }">
@@ -194,6 +194,7 @@ import SettingItem from '@/components/SettingDrawer/SettingItem'
 import config from '@/config/defaultSettings'
 import { updateTheme, colorList } from './setting'
 import { mixin, mixinDevice } from '@/utils/mixin'
+import { mapActions, mapGetters } from 'vuex'
 
 export default {
   components: {
@@ -202,7 +203,6 @@ export default {
   mixins: [mixin, mixinDevice],
   data() {
     return {
-      visible: false,
       colorList,
       baseConfig: Object.assign({}, config)
     }
@@ -214,15 +214,13 @@ export default {
       updateTheme(this.primaryColor)
     }
   },
+  computed: {
+    ...mapGetters(['layoutSetting'])
+  },
   methods: {
-    showDrawer() {
+    ...mapActions(['setSidebar', 'ToggleLayoutSetting']),
-      this.visible = true
-    },
     onClose() {
-      this.visible = false
+      this.ToggleLayoutSetting(false)
-    },
-    toggle() {
-      this.visible = !this.visible
     },
     handleMenuTheme(theme) {
       this.baseConfig.navTheme = theme

src/components/Tools/UserMenu.vue

@@ -15,7 +15,7 @@
     </a>
     <a
       href="javascript:void(0)"
-      @click="showOptionModal"
+      @click="handleShowLayoutSetting"
     >
       <a-tooltip
         placement="bottom"
@@ -60,34 +60,23 @@
         </a-menu-item>
       </a-menu>
     </a-dropdown>
-    <setting-drawer ref="drawer"></setting-drawer>
   </div>
 </template>
 
 <script>
 import HeaderComment from './HeaderComment'
-import SettingDrawer from '@/components/SettingDrawer/SettingDrawer'
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'UserMenu',
   components: {
-    HeaderComment,
+    HeaderComment
-    SettingDrawer
-  },
-  data() {
-    return {
-      optionVisible: true
-    }
-  },
-  mounted() {
-    this.optionVisible = this.$refs.drawer.visible
   },
   computed: {
     ...mapGetters(['user', 'options'])
   },
   methods: {
-    ...mapActions(['logout']),
+    ...mapActions(['logout', 'ToggleLayoutSetting']),
     handleLogout() {
       const that = this
 
@@ -110,9 +99,8 @@ export default {
         onCancel() {}
       })
     },
-    showOptionModal() {
+    handleShowLayoutSetting() {
-      this.optionVisible = this.$refs.drawer.visible
+      this.ToggleLayoutSetting(true)
-      this.$refs.drawer.toggle()
     }
   }
 }

src/layouts/BasicLayout.vue

@@ -54,6 +54,8 @@
         <global-footer />
       </a-layout-footer>
     </a-layout>
+
+    <setting-drawer ref="drawer"></setting-drawer>
   </a-layout>
 </template>
 
@@ -68,6 +70,7 @@ import RouteView from './RouteView'
 import SideMenu from '@/components/Menu/SideMenu'
 import GlobalHeader from '@/components/GlobalHeader'
 import GlobalFooter from '@/components/GlobalFooter'
+import SettingDrawer from '@/components/SettingDrawer/SettingDrawer'
 
 export default {
   name: 'BasicLayout',
@@ -76,7 +79,8 @@ export default {
     RouteView,
     SideMenu,
     GlobalHeader,
-    GlobalFooter
+    GlobalFooter,
+    SettingDrawer
   },
   data() {
     return {

src/store/getters.js

@@ -2,6 +2,7 @@ const getters = {
   device: state => state.app.device,
   theme: state => state.app.theme,
   color: state => state.app.color,
+  layoutSetting: state => state.app.layoutSetting,
   token: state => state.user.token,
   user: state => state.user.user,
   addRouters: state => state.permission.addRouters,

src/store/modules/app.js

@@ -8,7 +8,8 @@ import {
   DEFAULT_FIXED_SIDEMENU,
   DEFAULT_FIXED_HEADER_HIDDEN,
   DEFAULT_CONTENT_WIDTH_TYPE,
-  API_URL
+  API_URL,
+  LAYOUT_SETTING
 } from '@/store/mutation-types'
 
 const app = {
@@ -22,7 +23,8 @@ const app = {
     fixSiderbar: false,
     autoHideHeader: false,
     color: null,
-    apiUrl: null
+    apiUrl: null,
+    layoutSetting: false
   },
   mutations: {
     SET_API_URL: (state, apiUrl) => {
@@ -72,6 +74,10 @@ const app = {
     TOGGLE_COLOR: (state, color) => {
       Vue.ls.set(DEFAULT_COLOR, color)
       state.color = color
+    },
+    TOGGLE_LAYOUT_SETTING: (state, show) => {
+      Vue.ls.set(LAYOUT_SETTING, show)
+      state.layoutSetting = show
     }
   },
   actions: {
@@ -107,6 +113,9 @@ const app = {
     },
     ToggleColor({ commit }, color) {
       commit('TOGGLE_COLOR', color)
+    },
+    ToggleLayoutSetting({ commit }, show) {
+      commit('TOGGLE_LAYOUT_SETTING', show)
     }
   }
 }

src/store/mutation-types.js

@@ -10,6 +10,7 @@ export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
 export const USER = 'USER'
 export const API_URL = 'API_URL'
 export const OPTIONS = 'OPTIONS'
+export const LAYOUT_SETTING = 'LAYOUT_SETTING'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',