<template>
<div class="clearfix" style="display:flex">
<div class="menuwarp">
<menu-com
v-if="menuList.length"
ref="menuCom"
:menuList="menuList"
@menuReload="menuReload"
:selectedKeys="selectedKeys"></menu-com>
</div>
<div class="menuMains">
<menu-content type="ZS" ref="menuList" @sourceId="sourceId"></menu-content>
<!-- <router-view /> -->
</div>
</div>
</template>
<script>
import MenuContent from './KnowledgeMenulist'
import MenuCom from './MenuCom'
import { allSend, getAction } from '@api/manage'
import { kmsKnowledgeTypeListTreeUrl } from '@/api/api'
export default {
name: 'KnowledgeMain',
components: { MenuContent, MenuCom },
data () {
return {
menuList: [],
selectedKeys: []
}
},
methods: {
// 获取左侧树
getTreeList () {
allSend([
// 获取分类左侧树
getAction(kmsKnowledgeTypeListTreeUrl, { knowType: 'ZS' })
]).then((res) => {
console.log('res', res)
this.menuList = res[0].result
})
},
menuReload (item) {
this.$refs.menuList.toSource(item)
},
sourceId (data) {
this.selectedKeys = Array(data)
this.$refs.menuCom.setOpenKeys(data)
},
__requset () {
this.menuList = [
{
key: '1',
id: '1',
icon: 'file-text',
// path: '/plat/knowledge/menu',
name: '一级菜单01',
color: '#323C46',
class: 'level-1',
children: [
{
key: '1.1',
id: '2',
icon: 'caret-right',
// path: '/plat/knowledge/menu',
name: '二级菜单01',
color: '#F95355',
class: 'level-2',
children: [
{
key: '1.1.1',
id: '3',
icon: 'caret-right',
// path: '/plat/knowledge/menu',
name: '三级菜单01',
class: 'level-3',
color: '#FF9900',
children: [
{
key: '1.1.1.1',
id: '4',
icon: 'caret-right',
// path: '/plat/knowledge/menu',
name: '四级菜单01',
class: 'level-4',
color: '#65686A',
children: [
{
key: '1.1.1.1.1',
id: '5',
icon: '',
// path: '/plat/knowledge/menu',
name: '五级菜单01',
class: 'level-5',
color: '#65686A'
}
]
},
{
key: '1.1.1.2',
id: '6',
icon: 'caret-right',
// path: '/plat/knowledge/menu',
name: '四级菜单02',
class: 'level-4',
color: '#65686A',
children: [
{
key: '1.1.1.2.1',
id: '7',
icon: '',
// path: '/plat/knowledge/menu',
name: '五级菜单022',
class: 'level-5',
color: '#65686A'
}
]
}
]
},
{
key: '1.1.2',
id: '8',
icon: 'caret-right',
// path: '/plat/knowledge/menu',
name: '三级菜单02',
class: 'level-3',
color: '#FF9900'
}
]
},
{
key: '1.2',
id: '9',
icon: 'caret-right',
// path: '/plat/knowledge/menu',
name: '二级菜单02',
class: 'level-2',
color: '#F95355'
}
]
},
{
key: '2',
id: '10',
icon: 'file-text',
// path: '/plat/knowledge/menu',
name: '一级菜单02',
class: 'level-1',
color: '#323C46'
},
{
key: '3',
id: '11',
icon: 'file-text',
// path: '/plat/knowledge/menu',
name: '一级菜单03',
class: 'level-1',
color: '#323C46'
},
{
key: '4',
id: '12',
icon: 'file-text',
// path: '/plat/knowledge/menu',
name: '一级菜单04',
class: 'level-1',
color: '#323C46'
}
]
// 网络请求获取菜单
}
},
mounted () {
},
created () {
this.getTreeList()
// this.__requset()
}
}
</script>
<style scoped>
@media screen and (max-width: 770px) {
.titleName {
display: none !important;
}
.menuwarp {
width: 80px !important;
height: calc(100vh - 9.5vh);
background: #F6F7F9;
float: left;
}
.title_left img {
min-width: 0.8rem;
}
.menuwarp .ant-menu .level-1 {
font-size: 0.4rem;
}
}
@media screen and (min-width: 770px) {
.menuwarp .ant-menu .level-1 {
font-size: 16px !important;
}
}
.clearfix:after { /*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.menuwarp {
width: 233px;
height: calc(100vh - 9.5vh);
background: #F6F7F9;
overflow: auto;
float: left;
}
.menuMains {
width: 78%;
float: left;
margin-left: 20px;
}
</style>
评论0