5e1d60315e
Former-commit-id: 065c82fb7b1f90edc4eaa17ab76e6abd29f305e4 [formerly 065c82fb7b1f90edc4eaa17ab76e6abd29f305e4 [formerly 065c82fb7b1f90edc4eaa17ab76e6abd29f305e4 [formerly 065c82fb7b1f90edc4eaa17ab76e6abd29f305e4 [formerly 62466b5bb1fb38830c15e045346003a927434eb9 [formerly ad65663e7aaaec298c10ce0ec6b6dc070db77db9]]]]] Former-commit-id: 1ba6f330fb1c50a40b1519a288b3f1a35f88939f Former-commit-id: c1e1b2b30513c794024ccdd6acf7d1006cc67f69 Former-commit-id: 6c70bff84d8ac1d7323de442e1485d26d5e302b8 [formerly aef95c597116a3835e2f19125206d67d829e1431] Former-commit-id: fbecd0db8785e6ac59ff164f6a7831c4454f6673 Former-commit-id: 400ef6551497a7933f833070bc72d3683b96f5b2 Former-commit-id: 66bc72b9b80547150079fa3770c76c5776189597 Former-commit-id: 38fc516c8e9b7d24998951a56a9b2b3f862dd080 Former-commit-id: b26d88f7b0af8549cb8560e7a1beed098d9d4e50
144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
|
<d2-container>
|
|
<el-tabs>
|
|
<el-tab-pane label="顶栏菜单">
|
|
<el-button-group class="d2-mb">
|
|
<el-button @click="handleHeaderSet">设置顶栏空菜单</el-button>
|
|
<el-button @click="headerReset">恢复顶栏菜单</el-button>
|
|
</el-button-group>
|
|
<d2-highlight :code="JSON.stringify(header, null, 2)"/>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="侧栏菜单">
|
|
<el-button-group class="d2-mb">
|
|
<el-button @click="handleAsideSet">设置侧栏空菜单</el-button>
|
|
<el-button @click="asideReset">恢复侧栏菜单</el-button>
|
|
</el-button-group>
|
|
<d2-highlight :code="JSON.stringify(aside, null, 2)"/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</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' }
|
|
]
|
|
}
|
|
],
|
|
headerChanged: false,
|
|
asideChanged: false,
|
|
headerBak: [],
|
|
asideBak: []
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('d2admin/menu', [
|
|
'header',
|
|
'aside'
|
|
])
|
|
},
|
|
created () {
|
|
this.headerBak = clonedeep(this.header)
|
|
this.asideBak = clonedeep(this.aside)
|
|
},
|
|
beforeDestroy () {
|
|
if (this.headerChanged && this.asideChanged) {
|
|
this.headerSet(this.headerBak)
|
|
this.asideSet(this.asideBak)
|
|
this.$notify({
|
|
title: '菜单恢复',
|
|
message: '对侧边栏和顶栏菜单的修改已经复原',
|
|
type: 'success'
|
|
})
|
|
return
|
|
}
|
|
if (this.headerChanged) {
|
|
this.headerSet(this.headerBak)
|
|
this.$notify({
|
|
title: '菜单恢复',
|
|
message: '对顶栏菜单的修改已经复原',
|
|
type: 'success'
|
|
})
|
|
return
|
|
}
|
|
if (this.asideChanged) {
|
|
this.asideSet(this.asideBak)
|
|
this.$notify({
|
|
title: '菜单恢复',
|
|
message: '对侧边栏菜单的修改已经复原',
|
|
type: 'success'
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations('d2admin/menu', [
|
|
'headerSet',
|
|
'asideSet'
|
|
]),
|
|
/**
|
|
* 修改顶栏菜单
|
|
*/
|
|
handleHeaderSet () {
|
|
this.headerChanged = true
|
|
this.headerSet(this.menuEmpty)
|
|
this.$notify({
|
|
title: '菜单修改',
|
|
message: '对顶栏菜单的修改已经生效',
|
|
type: 'success'
|
|
})
|
|
},
|
|
/**
|
|
* 修改侧边栏菜单
|
|
*/
|
|
handleAsideSet () {
|
|
this.asideChanged = true
|
|
this.asideSet(this.menuEmpty)
|
|
this.$notify({
|
|
title: '菜单修改',
|
|
message: '对侧边栏菜单的修改已经生效',
|
|
type: 'success'
|
|
})
|
|
},
|
|
/**
|
|
* 恢复顶栏菜单
|
|
*/
|
|
headerReset () {
|
|
this.headerSet(this.headerBak)
|
|
this.$notify({
|
|
title: '菜单恢复',
|
|
message: '对顶栏菜单的修改已经复原',
|
|
type: 'success'
|
|
})
|
|
},
|
|
/**
|
|
* 恢复侧边栏菜单
|
|
*/
|
|
asideReset () {
|
|
this.asideSet(this.asideBak)
|
|
this.$notify({
|
|
title: '菜单恢复',
|
|
message: '对侧边栏菜单的修改已经复原',
|
|
type: 'success'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|