|
|
|
|
@ -1,30 +1,69 @@ |
|
|
|
|
<template> |
|
|
|
|
<el-scrollbar class="avue-menu"> |
|
|
|
|
<div v-if="menu && menu.length == 0 && !isHorizontal" class="avue-sidebar--tip"> |
|
|
|
|
{{ $t('menuTip') }} |
|
|
|
|
<el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse" |
|
|
|
|
v-if="setting.styleRadio == '1'"> |
|
|
|
|
<sidebar-item :menu="menu"></sidebar-item> |
|
|
|
|
</el-menu> |
|
|
|
|
<left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu> |
|
|
|
|
<div style="display: flex;" v-if="setting.styleRadio == '3'"> |
|
|
|
|
<div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'"> |
|
|
|
|
<div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" |
|
|
|
|
:class="index == selectIndex ? 'active' : ''"> |
|
|
|
|
<div class="left_menu_item"> |
|
|
|
|
<i :class="item.source" style="margin-bottom: 5px;"></i> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="getScreen(isCollapse)" |
|
|
|
|
v-if="setting.styleRadio == '1'"> |
|
|
|
|
<sidebar-item :menu="menu"></sidebar-item> |
|
|
|
|
</el-menu> |
|
|
|
|
<leftMenu :menulist="menu" v-if="setting.styleRadio == '2'"></leftMenu> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
<div style="flex: 1;"> |
|
|
|
|
<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_item"> |
|
|
|
|
<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="right_menu_item_box" @click='clickPage(item)'> |
|
|
|
|
<div>{{ item.name }}</div> |
|
|
|
|
<el-icon> |
|
|
|
|
<ArrowRight /> |
|
|
|
|
</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"> |
|
|
|
|
{{ third.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-popover> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { mapGetters } from 'vuex'; |
|
|
|
|
import sidebarItem from './sidebarItem.vue'; |
|
|
|
|
import { setStore, getStore } from '@/utils/store'; |
|
|
|
|
import leftMenu from './leftMenu.vue'; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: 'sidebar', |
|
|
|
|
components: { sidebarItem, leftMenu }, |
|
|
|
|
inject: ['index'], |
|
|
|
|
created() { |
|
|
|
|
this.index.openMenu(); |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
isCollapse: false, |
|
|
|
|
// selectIndex:0 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
inject: ['index'], |
|
|
|
|
computed: { |
|
|
|
|
...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId']), |
|
|
|
|
...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId', 'leftMenu', 'activeIndex', 'selectedIndex', 'selectIndex']), |
|
|
|
|
activeMenu() { |
|
|
|
|
const route = this.$route; |
|
|
|
|
const { meta, path } = route; |
|
|
|
|
@ -34,10 +73,168 @@ export default { |
|
|
|
|
return path; |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
if(setting.styleRadio=='3'){ |
|
|
|
|
this.index.openMenu2(); |
|
|
|
|
}else{ |
|
|
|
|
this.index.openMenu(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log(8888,leftMenu) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
clickItem(item, index) { |
|
|
|
|
if (!item.children) { |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: item.path, |
|
|
|
|
query: item.query, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
this.$store.commit('SET_SELECTED_INDEX', item.id + ''); |
|
|
|
|
this.$store.commit('SET_SELECT_INDEX', index); |
|
|
|
|
// this.selectIndex = index |
|
|
|
|
}, |
|
|
|
|
clickPage(item) { |
|
|
|
|
if (!item.children) { |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: item.path, |
|
|
|
|
query: item.query, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
:deep(.el-scrollbar__view) { |
|
|
|
|
height: 100%; |
|
|
|
|
.no_child { |
|
|
|
|
width: 185px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.children { |
|
|
|
|
width: 60px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left_menu { |
|
|
|
|
width: 100%; |
|
|
|
|
background: #f7fafc; |
|
|
|
|
color: #41a5ff; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
background: #41a5ff; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left_menu_item { |
|
|
|
|
cursor: pointer; |
|
|
|
|
padding: 10px 0; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: var(--header-bkColor-hover); |
|
|
|
|
text-align: center; |
|
|
|
|
width: 60px; |
|
|
|
|
word-break: keep-all; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
background: #0066ff; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left_top { |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
|
|
|
font-weight: 700; |
|
|
|
|
text-align: center; |
|
|
|
|
height: 48px; |
|
|
|
|
display: flex; |
|
|
|
|
color: #5a6f82; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_menu { |
|
|
|
|
flex: 1; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.right_menu_item { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 46px; |
|
|
|
|
// color: var(--header-fontColor); |
|
|
|
|
// font-size: 14px; |
|
|
|
|
// line-height: 46px; |
|
|
|
|
// cursor: pointer; |
|
|
|
|
// padding: 0 10px; |
|
|
|
|
// box-sizing: border-box; |
|
|
|
|
// overflow: hidden; |
|
|
|
|
// display: flex; |
|
|
|
|
// justify-content: space-between; |
|
|
|
|
// align-items: center; |
|
|
|
|
// position: relative; |
|
|
|
|
|
|
|
|
|
.right_menu_item_box { |
|
|
|
|
font-size: 14px; |
|
|
|
|
line-height: 46px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
padding: 0 10px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
overflow: hidden; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
background: #0066ff; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
.third_box { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
// flex-wrap: wrap; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
max-width: calc(100vw - 500px) !important; |
|
|
|
|
max-height: calc(100vh - 200px); |
|
|
|
|
|
|
|
|
|
.third_box_item { |
|
|
|
|
min-width: 140px; |
|
|
|
|
color: #5a6f82; |
|
|
|
|
text-align: left; |
|
|
|
|
font-size: 14px; |
|
|
|
|
line-height: 46px; |
|
|
|
|
/* background: var(--header-bkColor); */ |
|
|
|
|
padding-left: 15px; |
|
|
|
|
padding-right: 15px; |
|
|
|
|
position: relative; |
|
|
|
|
font-weight: bolder; |
|
|
|
|
word-break: keep-all; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.log-popover { |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
