命名修改以及菜单控制演示页面

Former-commit-id: 76944a9d40ab38c17539c3e04fa1b32821254495 [formerly 76944a9d40ab38c17539c3e04fa1b32821254495 [formerly 76944a9d40ab38c17539c3e04fa1b32821254495 [formerly 76944a9d40ab38c17539c3e04fa1b32821254495 [formerly 26802a8e2a1b4092bf2d19e341dde2fbe6761dc2 [formerly 041aaa709feee4a170f5b9b55403b5316e5a70d3]]]]] Former-commit-id: c0ff8f0aa986769fc2e9957d5ff90d55ac191ec8 Former-commit-id: 9169398f65367c84e9d61fd28bdb1eeb0e22945c Former-commit-id: 25066fd9231ffe2f3beaf335a333196a901f3d02 [formerly fe4024c634332eccd5a3c7ae11e692f8bae2d081] Former-commit-id: 1eb48f78ae708f37ef9b9b5abbf5ac0cc6d855ad Former-commit-id: c02929a32cd82760dff684d022456a9e0da28f8c Former-commit-id: 46aa87ff0f2bcc71de6d8956b8d5a439b7dd19ae Former-commit-id: 0a89d86ff625e9981444022a0d731352c71bedd0 Former-commit-id: 4e7fc917398365a853edebdd19f94bad9e67dbc8
2018-07-23 23:05:14 +08:00
parent 6d46d5694b
commit 779b0b6220
9 changed files with 164 additions and 18 deletions
--- a/src/layout/header-aside/components/menu-header/index.vue
+++ b/src/layout/header-aside/components/menu-header/index.vue
@@ -1,6 +1,6 @@
 <template>
  <el-menu mode="horizontal" @select="handleMenuSelect">
-    <template v-for="(menu, menuIndex) in menusHeader">
+    <template v-for="(menu, menuIndex) in menuHeader">
      <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
      <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
    </template>
@@ -23,7 +23,7 @@ export default {
  },
  computed: {
    ...mapState({
-      menusHeader: state => state.d2admin.menusHeader
+      menuHeader: state => state.d2admin.menuHeader
    })
  }
 }
--- a/src/layout/header-aside/components/menu-side/index.vue
+++ b/src/layout/header-aside/components/menu-side/index.vue
@@ -6,12 +6,12 @@
      :default-active="active"
      ref="menu"
      @select="handleMenuSelect">
-      <template v-for="(menu, menuIndex) in menusAside">
+      <template v-for="(menu, menuIndex) in menuAside">
        <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
        <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
      </template>
    </el-menu>
-    <div v-if="menusAside.length === 0 && !isMenuAsideCollapse" class="d2-layout-header-aside-menu-empty">
+    <div v-if="menuAside.length === 0 && !isMenuAsideCollapse" class="d2-layout-header-aside-menu-empty">
      <d2-icon name="inbox"/>
      <span>没有侧栏菜单</span>
    </div>
@@ -42,7 +42,7 @@ export default {
  },
  computed: {
    ...mapState({
-      menusAside: state => state.d2admin.menusAside,
+      menuAside: state => state.d2admin.menuAside,
      isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
    })
  },
@@ -59,7 +59,7 @@ export default {
      handler (val) {
        this.active = val[val.length - 1].path
        this.$nextTick(() => {
-          if (this.menusAside.length > 0) {
+          if (this.menuAside.length > 0) {
            this.$refs.menu.activeIndex = this.active
          }
        })
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@ import i18n from './i18n'
 import util from '@/libs/util'
 import store from '@/store/index'
 import { frameInRoutes } from '@/router/routes'
-import { menusAside, menusHeader } from '@/menu'
+import { menuAside, menuHeader } from '@/menu'
 import '@/assets/library/font-awesome-4.7.0/css/font-awesome.min.css'
 import '@/assets/library/highlight/styles/atom-one-light.css'
 import '@/assets/svg-icons'
@@ -48,7 +48,7 @@ new Vue({
    // 处理路由 得到每一级的路由设置
    this.getAllTagFromRoutes()
    // 设置顶栏菜单
-    this.$store.commit('d2adminMenusHeaderSet', menusHeader)
+    this.$store.commit('d2adminMenuHeaderSet', menuHeader)
  },
  mounted () {
    // D2Admin 开发环境检查更新
@@ -65,8 +65,8 @@ new Vue({
  watch: {
    // 监听路由 控制侧边栏显示
    '$route.matched' (val) {
-      const _side = menusAside.filter(menu => menu.path === val[0].path)
-      this.$store.commit('d2adminMenusAsideSet', _side.length > 0 ? _side[0].children : [])
+      const _side = menuAside.filter(menu => menu.path === val[0].path)
+      this.$store.commit('d2adminMenuAsideSet', _side.length > 0 ? _side[0].children : [])
    }
  },
  methods: {
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -10,7 +10,7 @@ import demoElement from './modules/demo-element'
 import demoPlayground from './modules/demo-playground'

 // 菜单 侧边栏
-export const menusAside = [
+export const menuAside = [
  demoPlugins,
  demoComponents,
  demoCharts,
@@ -19,7 +19,7 @@ export const menusAside = [
 ]

 // 菜单 顶栏
-export const menusHeader = [
+export const menuHeader = [
  {
    path: '/index',
    title: '首页',
--- a/src/menu/modules/demo-playground.js
+++ b/src/menu/modules/demo-playground.js
@@ -28,6 +28,7 @@ export default {
      icon: 'bolt',
      children: [
        { path: `${pre}store/sys`, title: '系统状态', icon: 'microchip' },
+        { path: `${pre}store/menu`, title: '菜单控制', icon: 'bars' },
        { path: `${pre}store/ua`, title: '浏览器信息', icon: 'info-circle' },
        { path: `${pre}store/gray`, title: '灰度模式', icon: 'eye' },
        { path: `${pre}store/fullscreen`, title: '全屏', icon: 'arrows-alt' },
--- a/src/pages/demo/playground/store/menu/index.vue
+++ b/src/pages/demo/playground/store/menu/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <d2-container type="ghost">
+    <el-row :gutter="20" class="d2-mt d2-mr-10 d2-mb">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template slot="header">顶栏菜单</template>
+          <el-button-group class="d2-mb">
+            <el-button @click="handleMenuHeaderSet">设置空菜单</el-button>
+            <el-button @click="menuHeaderReset">恢复</el-button>
+          </el-button-group>
+          <div style="height: 400px; overflow: auto;">
+            <tree-view
+              class="tree-view-small"
+              :data="menuHeader"
+              :options="{
+                rootObjectKey: 'menuHeader',
+                maxDepth: 1
+              }"/>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template slot="header">侧栏菜单</template>
+          <el-button-group class="d2-mb">
+            <el-button @click="handleMenuAsideSet">设置空菜单</el-button>
+            <el-button @click="menuAsideReset">恢复</el-button>
+          </el-button-group>
+          <div style="height: 400px; overflow: auto;">
+            <tree-view
+              class="tree-view-small"
+              :data="menuAside"
+              :options="{
+                rootObjectKey: 'menuAside',
+                maxDepth: 1
+              }"/>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+import clonedeep from 'lodash.clonedeep'
+import { mapState, mapMutations } from 'vuex'
+export default {
+  data () {
+    return {
+      menuEmpty: [
+        {
+          title: '空菜单演示',
+          icon: 'folder-o',
+          children: [
+            {
+              title: '空菜单 1',
+              children: [
+                { title: '空菜单 1-1' },
+                { title: '空菜单 1-2' }
+              ]
+            },
+            { title: '空菜单 2' },
+            { title: '空菜单 3' }
+          ]
+        }
+      ],
+      menuHeaderChanged: false,
+      menuAsideChanged: false,
+      menuHeaderBak: [],
+      menuAsideBak: []
+    }
+  },
+  computed: {
+    ...mapState({
+      menuHeader: state => state.d2admin.menuHeader,
+      menuAside: state => state.d2admin.menuAside
+    })
+  },
+  created () {
+    this.menuHeaderBak = clonedeep(this.menuHeader)
+    this.menuAsideBak = clonedeep(this.menuAside)
+  },
+  beforeDestroy () {
+    if (this.menuHeaderChanged && this.menuAsideChanged) {
+      this.menuHeaderReset()
+      this.menuAsideReset()
+      this.$notify({
+        title: '菜单恢复',
+        message: '对侧边栏和顶栏菜单的修改已经复原',
+        type: 'success'
+      })
+      return
+    }
+    if (this.menuHeaderChanged) {
+      this.menuHeaderReset()
+      this.$notify({
+        title: '菜单恢复',
+        message: '对顶栏菜单的修改已经复原',
+        type: 'success'
+      })
+      return
+    }
+    if (this.menuAsideChanged) {
+      this.menuAsideReset()
+      this.$notify({
+        title: '菜单恢复',
+        message: '对侧边栏菜单的修改已经复原',
+        type: 'success'
+      })
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminMenuHeaderSet',
+      'd2adminMenuAsideSet'
+    ]),
+    /**
+     * 修改顶栏菜单
+     */
+    handleMenuHeaderSet () {
+      this.menuHeaderChanged = true
+      this.d2adminMenuHeaderSet(this.menuEmpty)
+    },
+    /**
+     * 修改侧边栏菜单
+     */
+    handleMenuAsideSet () {
+      this.menuAsideChanged = true
+      this.d2adminMenuAsideSet(this.menuEmpty)
+    },
+    /**
+     * 恢复顶栏菜单
+     */
+    menuHeaderReset () {
+      this.d2adminMenuHeaderSet(this.menuHeaderBak)
+    },
+    /**
+     * 恢复侧边栏菜单
+     */
+    menuAsideReset () {
+      this.d2adminMenuAsideSet(this.menuAsideBak)
+    }
+  }
+}
+</script>
--- a/src/pages/demo/playground/store/sys/index.vue
+++ b/src/pages/demo/playground/store/sys/index.vue
@@ -7,7 +7,7 @@
          <el-card shadow="never" class="d2-card d2-mb">
            <template slot="header">顶栏菜单数据</template>
            <div style="height: 300px; overflow: auto;">
-              <tree-view class="tree-view-small" :data="menusHeader" :options="{ rootObjectKey: 'menusHeader', maxDepth: 2 }"/>
+              <tree-view class="tree-view-small" :data="menuHeader" :options="{ rootObjectKey: 'menuHeader', maxDepth: 2 }"/>
            </div>
          </el-card>
        </el-col>
@@ -15,7 +15,7 @@
          <el-card shadow="never" class="d2-card d2-mb">
            <template slot="header">侧边栏菜单数据</template>
            <div style="height: 300px; overflow: auto;">
-              <tree-view class="tree-view-small" :data="menusAside" :options="{ rootObjectKey: 'menusAside', maxDepth: 1 }"/>
+              <tree-view class="tree-view-small" :data="menuAside" :options="{ rootObjectKey: 'menuAside', maxDepth: 1 }"/>
            </div>
          </el-card>
        </el-col>
@@ -113,8 +113,8 @@ export default {
      version: state => state.d2admin.version,
      releasesLatest: state => state.d2admin.releasesLatest,
      releasesUpdate: state => state.d2admin.releasesUpdate,
-      menusHeader: state => state.d2admin.menusHeader,
-      menusAside: state => state.d2admin.menusAside,
+      menuHeader: state => state.d2admin.menuHeader,
+      menuAside: state => state.d2admin.menuAside,
      isFullScreen: state => state.d2admin.isFullScreen,
      isGrayMode: state => state.d2admin.isGrayMode,
      isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse,
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-22470549b36a73bc9a0ff2a817ed9c1f162d0108
+c908393a42fbdbb90006fb0e0678b5136c78908a
--- a/src/store/modules/d2admin.js.REMOVED.git-id
+++ b/src/store/modules/d2admin.js.REMOVED.git-id
@@ -1 +1 @@
-a90ea1c26136a74ab078f2212cd396b2dfe12c13
+2372f09c3e06b1cc538901de0bb6cd6c3c21b8f2