|
|
|
|
@ -10,39 +10,22 @@ |
|
|
|
|
</el-menu> |
|
|
|
|
|
|
|
|
|
<left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu> |
|
|
|
|
<div class="left_menu_box" style="display: flex;" v-if="setting.styleRadio == '3'"> |
|
|
|
|
<div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''" style="display: flex;height: 100%;background: #fff;" v-if="setting.styleRadio == '3'"> |
|
|
|
|
<div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'"> |
|
|
|
|
<div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> |
|
|
|
|
<div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" |
|
|
|
|
:class="item.id == selectedIndex ? 'active' : ''"> |
|
|
|
|
<el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0' |
|
|
|
|
popper-class="log-popover" |
|
|
|
|
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"> |
|
|
|
|
<template #reference> |
|
|
|
|
<div class="left_menu_item"> |
|
|
|
|
<div style="display: flex;align-items: center;"> |
|
|
|
|
<!-- <div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> --> |
|
|
|
|
<div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" @mouseenter="mouseEnter(item,index)" |
|
|
|
|
:class="index == selectIndex ? 'active' : ''"> |
|
|
|
|
<div class="left_menu_item"> |
|
|
|
|
<i :class="item.source" ></i> |
|
|
|
|
<span class="name_text">{{ item.name }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="img_box" v-if="item.children"></div> |
|
|
|
|
<span class="name_text">{{ item.name.substring(0,2) }}</span> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template #default v-if="item.children && item.children.length != 0"> |
|
|
|
|
<div class="third_box" v-if="item.children && item.children.length != 0"> |
|
|
|
|
<div class="third_box_item" v-for="third in item.children" :key="third.id" @click='clickPage(third)'> |
|
|
|
|
{{ third.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-popover> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- <div style="flex: 1;"> |
|
|
|
|
<div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children"> |
|
|
|
|
<div |
|
|
|
|
v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0"> |
|
|
|
|
<div class="left_top">{{ leftMenu[selectIndex].name }} </div> |
|
|
|
|
<div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id"> |
|
|
|
|
<div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id" @mouseleave="mounseLeave(leftMenu[selectIndex],item)"> |
|
|
|
|
<div class="right_menu_item"> |
|
|
|
|
<el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0' |
|
|
|
|
popper-class="log-popover" |
|
|
|
|
@ -55,18 +38,28 @@ |
|
|
|
|
</el-icon> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template #default v-if="item.children && item.children.length != 0"> |
|
|
|
|
<div class="third_box" v-if="item.children && item.children.length != 0"> |
|
|
|
|
<div class="third_box_item" v-for="third in item.children" :key="third.id"> |
|
|
|
|
<template #default > |
|
|
|
|
<div class="third_box" v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)"> |
|
|
|
|
<div class="third_box_item" v-for="third in item.children" :key="third.id" @click="handleClick(third)"> |
|
|
|
|
{{ third.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="four_box" v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)"> |
|
|
|
|
<div class="four_box_item" v-for="third in item.children" :key="third.id"> |
|
|
|
|
<div class="third_name" @click="handleClick(third)"><span></span>{{ third.name }}</div> |
|
|
|
|
<div class="four_con_box" v-if="third.children"> |
|
|
|
|
<div class="four_con_item" v-for="four in third.children" :key="four.id" @click="handleClick(four)"> |
|
|
|
|
{{ four.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-popover> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -82,6 +75,7 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
isCollapse: false, |
|
|
|
|
showRight:false |
|
|
|
|
// selectIndex:0 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -100,6 +94,7 @@ export default { |
|
|
|
|
mounted() { |
|
|
|
|
console.log('left--------------------------',this.leftMenu) |
|
|
|
|
console.log('menu--------------------------',this.menu) |
|
|
|
|
console.log('selectIndex--------------------------',this.selectIndex) |
|
|
|
|
if(this.setting.styleRadio=='3'){ |
|
|
|
|
this.index.openMenu2(); |
|
|
|
|
}else{ |
|
|
|
|
@ -113,9 +108,9 @@ export default { |
|
|
|
|
path: item.path, |
|
|
|
|
query: item.query, |
|
|
|
|
}); |
|
|
|
|
this.$store.commit('SET_SELECT_INDEX', index); |
|
|
|
|
this.$store.commit('SET_SELECTED_INDEX', item.id + ''); |
|
|
|
|
} |
|
|
|
|
this.$store.commit('SET_SELECTED_INDEX', item.id + ''); |
|
|
|
|
this.$store.commit('SET_SELECT_INDEX', index); |
|
|
|
|
// this.selectIndex = index |
|
|
|
|
}, |
|
|
|
|
clickPage(item) { |
|
|
|
|
@ -124,24 +119,72 @@ export default { |
|
|
|
|
path: item.path, |
|
|
|
|
query: item.query, |
|
|
|
|
}); |
|
|
|
|
this.$store.commit('SET_SELECTED_INDEX', item.parentId + ''); |
|
|
|
|
// this.$store.commit('SET_SELECTED_INDEX', item.parentId + ''); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mouseEnter(item,index){ |
|
|
|
|
this.$store.commit('SET_SELECT_INDEX', index); |
|
|
|
|
if(item.children){ |
|
|
|
|
this.showRight = true |
|
|
|
|
}else{ |
|
|
|
|
this.showRight = false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounseLeave(item,item1){ |
|
|
|
|
console.log('item----------------------',item) |
|
|
|
|
console.log('item1----------------------',item1) |
|
|
|
|
console.log('tmp-------------------',item.children.find(item1 => item1.children)) |
|
|
|
|
if(!item1.children){ |
|
|
|
|
if(item.id != this.selectedIndex){ |
|
|
|
|
let tmp = this.leftMenu.find(item => item.id == this.selectedIndex) |
|
|
|
|
let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex) |
|
|
|
|
this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex); |
|
|
|
|
if(tmp && tmp.children){ |
|
|
|
|
this.showRight = true |
|
|
|
|
}else{ |
|
|
|
|
this.showRight = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
handleClick(item){ |
|
|
|
|
console.log('item000000000000000000000000',item) |
|
|
|
|
if(!item.children){ |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: item.path, |
|
|
|
|
query: item.query, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
|
|
.left_menu_box{ |
|
|
|
|
// background: #f7fafc; |
|
|
|
|
width: 48px !important; |
|
|
|
|
|
|
|
|
|
&.right_box{ |
|
|
|
|
width: 200px !important; |
|
|
|
|
background: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.no_child { |
|
|
|
|
width: 195px; |
|
|
|
|
width: 48px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.children { |
|
|
|
|
width: 195px; |
|
|
|
|
width: 48px; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
&:hover{ |
|
|
|
|
transition: all .5s; |
|
|
|
|
box-shadow: 5px 5px 30px #afaeae; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.top_title{ |
|
|
|
|
font-size: 14px; |
|
|
|
|
@ -174,9 +217,9 @@ export default { |
|
|
|
|
.left_menu_item { |
|
|
|
|
cursor: pointer; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
padding: 0 10px; |
|
|
|
|
height: 46px; |
|
|
|
|
padding: 10px 0px; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
|
|
|
@ -196,12 +239,17 @@ export default { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.name_text{ |
|
|
|
|
// display: inline-block; |
|
|
|
|
// width: 52px; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
// overflow: hidden; |
|
|
|
|
// text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */ |
|
|
|
|
// white-space: nowrap; /* 限制不允许换行 */ |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: var(--header-bkColor-hover); |
|
|
|
|
padding-top: 5px; |
|
|
|
|
text-align: center; |
|
|
|
|
width: 45px; |
|
|
|
|
word-break: keep-all; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -296,7 +344,7 @@ export default { |
|
|
|
|
padding-left: 15px; |
|
|
|
|
padding-right: 15px; |
|
|
|
|
position: relative; |
|
|
|
|
font-weight: bolder; |
|
|
|
|
// font-weight: normal; |
|
|
|
|
word-break: keep-all; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
@ -311,4 +359,49 @@ export default { |
|
|
|
|
.log-popover { |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.four_box{ |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.four_box_item{ |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
// line-height: 46px; |
|
|
|
|
min-width: 140px; |
|
|
|
|
padding-left: 15px; |
|
|
|
|
padding-top: 15px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
.third_name{ |
|
|
|
|
line-height: 46px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
span{ |
|
|
|
|
width: 3px; |
|
|
|
|
height: 15px; |
|
|
|
|
margin-right: 5px; |
|
|
|
|
display: inline-block; |
|
|
|
|
background:#0066ff ; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.four_con_box{ |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.four_con_item{ |
|
|
|
|
line-height: 46px; |
|
|
|
|
padding-left: 10px; |
|
|
|
|
|
|
|
|
|
&:hover{ |
|
|
|
|
background: #0066ff; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
