优化菜单展示模式

jshERP-web/src/components/setting/SettingDrawer.vue

@@ -58,49 +58,8 @@
         <a-divider />
 
         <div :style="{ marginBottom: '24px' }">
-<!--          <h3 class="setting-drawer-index-title">导航模式</h3>-->
-
-<!--          <div class="setting-drawer-index-blockChecbox">-->
-<!--            <a-tooltip>-->
-<!--              <template slot="title">-->
-<!--                侧边栏导航-->
-<!--              </template>-->
-<!--              <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">-->
-<!--                <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">-->
-<!--                <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">-->
-<!--                  <a-icon type="check"/>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </a-tooltip>-->
-
-<!--            <a-tooltip>-->
-<!--              <template slot="title">-->
-<!--                顶部栏导航-->
-<!--              </template>-->
-<!--              <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">-->
-<!--                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">-->
-<!--                <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">-->
-<!--                  <a-icon type="check"/>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </a-tooltip>-->
-<!--          </div>-->
           <div :style="{ marginTop: '24px' }">
             <a-list :split="false">
-<!--              <a-list-item>-->
-<!--                <a-tooltip slot="actions">-->
-<!--                  <template slot="title">-->
-<!--                    该设定仅 [顶部栏导航] 时有效-->
-<!--                  </template>-->
-<!--                  <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">-->
-<!--                    <a-select-option value="Fixed">固定</a-select-option>-->
-<!--                    <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>-->
-<!--                  </a-select>-->
-<!--                </a-tooltip>-->
-<!--                <a-list-item-meta>-->
-<!--                  <div slot="title">内容区域宽度</div>-->
-<!--                </a-list-item-meta>-->
-<!--              </a-list-item>-->
               <a-list-item>
                 <a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
                 <a-list-item-meta>
@@ -114,7 +73,7 @@
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item >
-                <a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :checked="dataFixSiderbar" @change="handleFixSiderbar" />
+                <a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :checked="fixSiderbar" @change="handleFixSiderbar" />
                 <a-list-item-meta>
                   <div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div>
                 </a-list-item-meta>
@@ -143,19 +102,8 @@
             </a-list>
           </div>
         </div>
-<!--        <a-divider />-->
-<!--        <div :style="{ marginBottom: '24px' }">-->
-<!--          <a-alert type="warning">-->
-<!--            <span slot="message">-->
-<!--              生产环境如需修改默认配置，请手动修改配置文件-->
-<!--              src/defaultSettings.js-->
-<!--            </span>-->
-<!--          </a-alert>-->
-<!--        </div>-->
       </div>
       <div class="setting-drawer-index-handle" @click="toggle" v-if="visible">
-<!--        <a-icon type="setting" v-if="!visible"/>-->
-<!--        <a-icon type="close" v-else/>-->
         <a-icon type="close" />
       </div>
     </a-drawer>
@@ -179,8 +127,7 @@
     data() {
       return {
         visible: true,
-        colorList,
-        dataFixSiderbar: false
+        colorList
     }
     },
     watch: {
@@ -225,7 +172,7 @@
       handleLayout (mode) {
         this.$store.dispatch('ToggleLayoutMode', mode)
         // 因为顶部菜单不能固定左侧菜单栏，所以强制关闭
-        this.handleFixSiderbar(false)
+        this.handleFixSiderbar(this.fixSiderbar)
         // 触发窗口resize事件
         triggerWindowResizeEvent()
       },
@@ -245,10 +192,7 @@
         this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
       },
       handleFixSiderbar (fixed) {
-        if (this.layoutMode === 'topmenu') {
-          fixed = false
-        }
-        this.dataFixSiderbar = fixed
+        this.fixSiderbar = fixed
         this.$store.dispatch('ToggleFixSiderbar', fixed)
       }
     },

jshERP-web/src/defaultSettings.js

@@ -1,32 +1,32 @@
-/**
- * 项目默认配置项
- * primaryColor - 默认主题色
- * navTheme - sidebar theme ['dark', 'light'] 两种主题
- * colorWeak - 色盲模式
- * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
- * fixedHeader - 固定 Header : boolean
- * fixSiderbar - 固定左侧菜单栏 ： boolean
- * autoHideHeader - 向下滚动时，隐藏 Header : boolean
- * contentWidth - 内容区布局： 流式 |  固定
- *
- * storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
- *
- */
-
-export default {
-  primaryColor: '#1890FF', // primary color of ant design
-  navTheme: 'light', // theme for nav menu
-  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
-  contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
-  fixedHeader: false, // sticky header
-  fixSiderbar: false, // sticky siderbar
-  autoHideHeader: false, //  auto hide header
-  colorWeak: false,
-  multipage: true, //默认多页签模式
-  // vue-ls options
-  storageOptions: {
-    namespace: 'pro__', // key prefix
-    name: 'ls', // name variable Vue.[ls] or this.[$ls],
-    storage: 'local', // storage name session, local, memory
-  }
+/**
+ * 项目默认配置项
+ * primaryColor - 默认主题色
+ * navTheme - sidebar theme ['dark', 'light'] 两种主题
+ * colorWeak - 色盲模式
+ * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
+ * fixedHeader - 固定 Header : boolean
+ * fixSiderbar - 固定左侧菜单栏 ： boolean
+ * autoHideHeader - 向下滚动时，隐藏 Header : boolean
+ * contentWidth - 内容区布局： 流式 |  固定
+ *
+ * storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
+ *
+ */
+
+export default {
+  primaryColor: '#1890FF', // primary color of ant design
+  navTheme: 'light', // theme for nav menu
+  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+  contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
+  fixedHeader: false, // sticky header
+  fixSiderbar: true, // sticky siderbar
+  autoHideHeader: false, //  auto hide header
+  colorWeak: false,
+  multipage: true, //默认多页签模式
+  // vue-ls options
+  storageOptions: {
+    namespace: 'pro__', // key prefix
+    name: 'ls', // name variable Vue.[ls] or this.[$ls],
+    storage: 'local', // storage name session, local, memory
+  }
 }

jshERP-web/src/store/modules/app.js

@@ -1,126 +1,126 @@
-import Vue from 'vue'
-import {
-  SIDEBAR_TYPE,
-  DEFAULT_THEME,
-  DEFAULT_LAYOUT_MODE,
-  DEFAULT_COLOR,
-  DEFAULT_COLOR_WEAK,
-  DEFAULT_FIXED_HEADER,
-  DEFAULT_FIXED_SIDEMENU,
-  DEFAULT_FIXED_HEADER_HIDDEN,
-  DEFAULT_CONTENT_WIDTH_TYPE,
-  DEFAULT_MULTI_PAGE
-} from "@/store/mutation-types"
-
-const app = {
-  state: {
-    sidebar: {
-      opened: true,
-      withoutAnimation: false
-    },
-    device: 'desktop',
-    theme: '',
-    layout: '',
-    contentWidth: '',
-    fixedHeader: false,
-    fixSiderbar: false,
-    autoHideHeader: false,
-    color: null,
-    weak: false,
-    multipage: true //默认多页签模式
-  },
-  mutations: {
-    SET_SIDEBAR_TYPE: (state, type) => {
-      state.sidebar.opened = type
-      Vue.ls.set(SIDEBAR_TYPE, type)
-    },
-    CLOSE_SIDEBAR: (state, withoutAnimation) => {
-      Vue.ls.set(SIDEBAR_TYPE, true)
-      state.sidebar.opened = false
-      state.sidebar.withoutAnimation = withoutAnimation
-    },
-    TOGGLE_DEVICE: (state, device) => {
-      state.device = device
-    },
-    TOGGLE_THEME: (state, theme) => {
-      // setStore('_DEFAULT_THEME', theme)
-      Vue.ls.set(DEFAULT_THEME, theme)
-      state.theme = theme
-    },
-    TOGGLE_LAYOUT_MODE: (state, layout) => {
-      Vue.ls.set(DEFAULT_LAYOUT_MODE, layout)
-      state.layout = layout
-    },
-    TOGGLE_FIXED_HEADER: (state, fixed) => {
-      Vue.ls.set(DEFAULT_FIXED_HEADER, fixed)
-      state.fixedHeader = fixed
-    },
-    TOGGLE_FIXED_SIDERBAR: (state, fixed) => {
-      Vue.ls.set(DEFAULT_FIXED_SIDEMENU, fixed)
-      state.fixSiderbar = fixed
-    },
-    TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => {
-      Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
-      state.autoHideHeader = show
-    },
-    TOGGLE_CONTENT_WIDTH: (state, type) => {
-      Vue.ls.set(DEFAULT_CONTENT_WIDTH_TYPE, type)
-      state.contentWidth = type
-    },
-    TOGGLE_COLOR: (state, color) => {
-      Vue.ls.set(DEFAULT_COLOR, color)
-      state.color = color
-    },
-    TOGGLE_WEAK: (state, flag) => {
-      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
-      state.weak = flag
-    },
-    SET_MULTI_PAGE (state, multipageFlag) {
-      Vue.ls.set(DEFAULT_MULTI_PAGE, multipageFlag)
-      state.multipage = multipageFlag
-    }
-  },
-  actions: {
-    setSidebar: ({ commit }, type) => {
-      commit('SET_SIDEBAR_TYPE', type)
-    },
-    CloseSidebar({ commit }, { withoutAnimation }) {
-      commit('CLOSE_SIDEBAR', withoutAnimation)
-    },
-    ToggleDevice({ commit }, device) {
-      commit('TOGGLE_DEVICE', device)
-    },
-    ToggleTheme({ commit }, theme) {
-      commit('TOGGLE_THEME', theme)
-    },
-    ToggleLayoutMode({ commit }, mode) {
-      commit('TOGGLE_LAYOUT_MODE', mode)
-    },
-    ToggleFixedHeader({ commit }, fixedHeader) {
-      if (!fixedHeader) {
-        commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
-      }
-      commit('TOGGLE_FIXED_HEADER', fixedHeader)
-    },
-    ToggleFixSiderbar({ commit }, fixSiderbar) {
-      commit( 'TOGGLE_FIXED_SIDERBAR', fixSiderbar)
-    },
-    ToggleFixedHeaderHidden({ commit }, show) {
-      commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
-    },
-    ToggleContentWidth({ commit }, type) {
-      commit('TOGGLE_CONTENT_WIDTH', type)
-    },
-    ToggleColor({ commit }, color) {
-      commit('TOGGLE_COLOR', color)
-    },
-    ToggleWeak({ commit }, weakFlag) {
-      commit('TOGGLE_WEAK', weakFlag)
-    },
-    ToggleMultipage({ commit }, multipageFlag) {
-      commit('SET_MULTI_PAGE', multipageFlag)
-    }
-  }
-}
-
+import Vue from 'vue'
+import {
+  SIDEBAR_TYPE,
+  DEFAULT_THEME,
+  DEFAULT_LAYOUT_MODE,
+  DEFAULT_COLOR,
+  DEFAULT_COLOR_WEAK,
+  DEFAULT_FIXED_HEADER,
+  DEFAULT_FIXED_SIDEMENU,
+  DEFAULT_FIXED_HEADER_HIDDEN,
+  DEFAULT_CONTENT_WIDTH_TYPE,
+  DEFAULT_MULTI_PAGE
+} from "@/store/mutation-types"
+
+const app = {
+  state: {
+    sidebar: {
+      opened: true,
+      withoutAnimation: false
+    },
+    device: 'desktop',
+    theme: '',
+    layout: '',
+    contentWidth: '',
+    fixedHeader: false,
+    fixSiderbar: true,
+    autoHideHeader: false,
+    color: null,
+    weak: false,
+    multipage: true //默认多页签模式
+  },
+  mutations: {
+    SET_SIDEBAR_TYPE: (state, type) => {
+      state.sidebar.opened = type
+      Vue.ls.set(SIDEBAR_TYPE, type)
+    },
+    CLOSE_SIDEBAR: (state, withoutAnimation) => {
+      Vue.ls.set(SIDEBAR_TYPE, true)
+      state.sidebar.opened = false
+      state.sidebar.withoutAnimation = withoutAnimation
+    },
+    TOGGLE_DEVICE: (state, device) => {
+      state.device = device
+    },
+    TOGGLE_THEME: (state, theme) => {
+      // setStore('_DEFAULT_THEME', theme)
+      Vue.ls.set(DEFAULT_THEME, theme)
+      state.theme = theme
+    },
+    TOGGLE_LAYOUT_MODE: (state, layout) => {
+      Vue.ls.set(DEFAULT_LAYOUT_MODE, layout)
+      state.layout = layout
+    },
+    TOGGLE_FIXED_HEADER: (state, fixed) => {
+      Vue.ls.set(DEFAULT_FIXED_HEADER, fixed)
+      state.fixedHeader = fixed
+    },
+    TOGGLE_FIXED_SIDERBAR: (state, fixed) => {
+      Vue.ls.set(DEFAULT_FIXED_SIDEMENU, fixed)
+      state.fixSiderbar = fixed
+    },
+    TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => {
+      Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
+      state.autoHideHeader = show
+    },
+    TOGGLE_CONTENT_WIDTH: (state, type) => {
+      Vue.ls.set(DEFAULT_CONTENT_WIDTH_TYPE, type)
+      state.contentWidth = type
+    },
+    TOGGLE_COLOR: (state, color) => {
+      Vue.ls.set(DEFAULT_COLOR, color)
+      state.color = color
+    },
+    TOGGLE_WEAK: (state, flag) => {
+      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
+      state.weak = flag
+    },
+    SET_MULTI_PAGE (state, multipageFlag) {
+      Vue.ls.set(DEFAULT_MULTI_PAGE, multipageFlag)
+      state.multipage = multipageFlag
+    }
+  },
+  actions: {
+    setSidebar: ({ commit }, type) => {
+      commit('SET_SIDEBAR_TYPE', type)
+    },
+    CloseSidebar({ commit }, { withoutAnimation }) {
+      commit('CLOSE_SIDEBAR', withoutAnimation)
+    },
+    ToggleDevice({ commit }, device) {
+      commit('TOGGLE_DEVICE', device)
+    },
+    ToggleTheme({ commit }, theme) {
+      commit('TOGGLE_THEME', theme)
+    },
+    ToggleLayoutMode({ commit }, mode) {
+      commit('TOGGLE_LAYOUT_MODE', mode)
+    },
+    ToggleFixedHeader({ commit }, fixedHeader) {
+      if (!fixedHeader) {
+        commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
+      }
+      commit('TOGGLE_FIXED_HEADER', fixedHeader)
+    },
+    ToggleFixSiderbar({ commit }, fixSiderbar) {
+      commit( 'TOGGLE_FIXED_SIDERBAR', fixSiderbar)
+    },
+    ToggleFixedHeaderHidden({ commit }, show) {
+      commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
+    },
+    ToggleContentWidth({ commit }, type) {
+      commit('TOGGLE_CONTENT_WIDTH', type)
+    },
+    ToggleColor({ commit }, color) {
+      commit('TOGGLE_COLOR', color)
+    },
+    ToggleWeak({ commit }, weakFlag) {
+      commit('TOGGLE_WEAK', weakFlag)
+    },
+    ToggleMultipage({ commit }, multipageFlag) {
+      commit('SET_MULTI_PAGE', multipageFlag)
+    }
+  }
+}
+
 export default app