sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
liyang
2018-07-23 23:05:14 +08:00
parent 6d46d5694b
commit 779b0b6220
9 changed files with 164 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/pages/demo/playground/store/menu/index.vue Normal file
View File

@@ -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>

8
src/pages/demo/playground/store/sys/index.vue
View File

@@ -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,