<template>
|
<div class="mySetting">
|
<!-- header 页面标题提示 -->
|
<header>
|
<div class="headerTitle">系统设置 >> 门户管理 > 自定义菜单设置</div>
|
</header>
|
<!-- main 内容展示区 -->
|
<main>
|
<div class="mainContent">
|
<!-- 侧边导航栏 -->
|
<div class="aside">
|
<div class="asideItem" v-for="(item,index) in menuList" :key="item.id" @click="getContent(index)">
|
<h4>{{item.title}}</h4>
|
<!-- 子菜单 -->
|
<ul class="menu">
|
<li class="menuItem" v-for="(son,sonIndex) in item.children" @click.stop="getContent(index,sonIndex)">
|
<span>{{son.title}}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 菜单设置 -->
|
<div class="content">
|
<h4>菜单管理-{{article.title}}</h4>
|
<!-- 子菜单项目 -->
|
<ul class="edit">
|
<li class="editItem">
|
<label>名称:</label>
|
<span>{{article.name}}</span>
|
</li>
|
<li class="editItem">
|
<label>描述:</label>
|
<span>{{article.description}}</span>
|
</li>
|
<li class="editItem">
|
<label>是否显示菜单:</label>
|
<span>{{article.hidden===0 ? '否':'是' }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</main>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
menuList:[],
|
article:[],
|
}
|
},
|
created(){
|
const { getMenuList } = this;
|
getMenuList();
|
},
|
methods:{
|
// 获取菜单列表
|
getMenuList(){
|
this.$axios.get('sccg/menu/treeList').then(res=>{
|
console.log(res);
|
const {data} = res;
|
this.menuList = data;
|
this.getContent(0);
|
})
|
},
|
// 切换菜单内容展示
|
getContent(index,sonIndex=null){
|
if(sonIndex===null){
|
this.article = this.menuList[index];
|
return;
|
}
|
this.article = this.menuList[index][sonIndex];
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.mySetting {
|
text-align: left;
|
color: #4b9bb7;
|
|
header {
|
line-height: 60px;
|
padding: 0 20px;
|
}
|
|
main {
|
.mainContent {
|
display: flex;
|
|
li {
|
list-style: none;
|
}
|
|
.aside {
|
width: 200px;
|
border: 1px solid #fff;
|
padding: 20px;
|
height: calc(100vh - 120px);
|
.asideItem {
|
h4 {
|
line-height: 40px;
|
margin: 0;
|
}
|
|
ul {
|
padding: 0;
|
margin: 0;
|
}
|
|
.menu {
|
.menuItem {
|
line-height: 30px;
|
}
|
}
|
}
|
}
|
|
.content {
|
flex: 1;
|
margin-left: 100px;
|
h4 {
|
margin: 0;
|
line-height: 80px;
|
}
|
|
ul {
|
padding: 0;
|
margin: 0;
|
}
|
|
.edit {
|
.editItem {
|
line-height: 40px;
|
display: flex;
|
span{
|
margin-left: 10px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|