<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({
|
// method: 'get',
|
// url: 'sccg/system/portal/menu/search',
|
// data: {
|
// current: 1,
|
// size: 10,
|
// }
|
// }).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>
|
