You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
241 lines
7.7 KiB
241 lines
7.7 KiB
<template>
|
|
<el-aside class="index-aside" height="100vh" width="180px">
|
|
<div class="index-aside-inner menulist" style="height:100%">
|
|
<div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item" style="height:100%;broder:0;background-color:#58B351">
|
|
<div class="menulistImg" style="backgroundColor:#58B351;padding:25px 0" v-if="false && menulistStyle == 'vertical'">
|
|
<el-image v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'" src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" />
|
|
</div>
|
|
<el-menu mode="vertical" :unique-opened="true" class="el-menu-demo" style="height:100%;" background-color="#58B351" text-color="#FFFFFF" active-text-color="#F2DD3D" default-active="0">
|
|
<el-menu-item index="(0).toString()" :style="menulistBorderBottom" @click="menuHandler('')"><i v-if="true" class="el-icon-s-home" />首页</el-menu-item>
|
|
<el-submenu :index="(1).toString()" :style="menulistBorderBottom">
|
|
<template slot="title">
|
|
<i v-if="true" class="el-icon-user-solid" />
|
|
<span>个人中心</span>
|
|
</template>
|
|
<el-menu-item :index="(1-1).toString()" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
|
|
<el-menu-item :index="(1-2).toString()" @click="menuHandler('center')">个人信息</el-menu-item>
|
|
</el-submenu>
|
|
<el-submenu :style="menulistBorderBottom" v-for=" (menu,index) in item.backMenu" :key="menu.menu" :index="(index+2).toString()">
|
|
<template slot="title">
|
|
<i v-if="true" :class="icons[index]" />
|
|
<span>{{ menu.menu }}</span>
|
|
</template>
|
|
<el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="((index+2)+'-'+sort).toString()" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
|
|
</el-submenu>
|
|
</el-menu>
|
|
|
|
</div>
|
|
</div>
|
|
</el-aside>
|
|
</template>
|
|
<script>
|
|
import menu from '@/utils/menu'
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuList: [],
|
|
dynamicMenuRoutes: [],
|
|
role: '',
|
|
icons: [
|
|
'el-icon-s-cooperation',
|
|
'el-icon-s-order',
|
|
'el-icon-s-platform',
|
|
'el-icon-s-fold',
|
|
'el-icon-s-unfold',
|
|
'el-icon-s-operation',
|
|
'el-icon-s-promotion',
|
|
'el-icon-s-release',
|
|
'el-icon-s-ticket',
|
|
'el-icon-s-management',
|
|
'el-icon-s-open',
|
|
'el-icon-s-shop',
|
|
'el-icon-s-marketing',
|
|
'el-icon-s-flag',
|
|
'el-icon-s-comment',
|
|
'el-icon-s-finance',
|
|
'el-icon-s-claim',
|
|
'el-icon-s-custom',
|
|
'el-icon-s-opportunity',
|
|
'el-icon-s-data',
|
|
'el-icon-s-check',
|
|
'el-icon-s-grid',
|
|
'el-icon-menu',
|
|
'el-icon-chat-dot-square',
|
|
'el-icon-message',
|
|
'el-icon-postcard',
|
|
'el-icon-position',
|
|
'el-icon-microphone',
|
|
'el-icon-close-notification',
|
|
'el-icon-bangzhu',
|
|
'el-icon-time',
|
|
'el-icon-odometer',
|
|
'el-icon-crop',
|
|
'el-icon-aim',
|
|
'el-icon-switch-button',
|
|
'el-icon-full-screen',
|
|
'el-icon-copy-document',
|
|
'el-icon-mic',
|
|
'el-icon-stopwatch',
|
|
],
|
|
menulistStyle: 'vertical',
|
|
menulistBorderBottom: {},
|
|
}
|
|
},
|
|
mounted() {
|
|
const menus = menu.list()
|
|
this.menuList = menus
|
|
this.role = this.$storage.get('role')
|
|
},
|
|
created(){
|
|
setTimeout(()=>{
|
|
this.menulistStyleChange()
|
|
},10)
|
|
this.icons.sort(()=>{
|
|
return (0.5-Math.random())
|
|
})
|
|
this.lineBorder()
|
|
},
|
|
methods: {
|
|
lineBorder() {
|
|
let style = 'vertical'
|
|
let w = '1px'
|
|
let s = 'dashed'
|
|
let c = '#F8D303'
|
|
if(style == 'vertical') {
|
|
this.menulistBorderBottom = {
|
|
borderBottomWidth: w,
|
|
borderBottomStyle: s,
|
|
borderBottomColor: c
|
|
}
|
|
} else {
|
|
this.menulistBorderBottom = {
|
|
borderRightWidth: w,
|
|
borderRightStyle: s,
|
|
borderRightColor: c
|
|
}
|
|
}
|
|
},
|
|
menuHandler(name) {
|
|
let router = this.$router
|
|
name = '/'+name
|
|
router.push(name).catch(err => err)
|
|
},
|
|
// 菜单
|
|
setMenulistHoverColor(){
|
|
let that = this
|
|
this.$nextTick(()=>{
|
|
document.querySelectorAll('.menulist .el-menu-item').forEach(el=>{
|
|
el.addEventListener("mouseenter", e => {
|
|
e.stopPropagation()
|
|
el.style.backgroundColor = "rgba(129, 187, 124, 1)"
|
|
})
|
|
el.addEventListener("mouseleave", e => {
|
|
e.stopPropagation()
|
|
el.style.backgroundColor = "#58B351"
|
|
})
|
|
el.addEventListener("focus", e => {
|
|
e.stopPropagation()
|
|
el.style.backgroundColor = "rgba(129, 187, 124, 1)"
|
|
})
|
|
})
|
|
document.querySelectorAll('.menulist .el-submenu__title').forEach(el=>{
|
|
el.addEventListener("mouseenter", e => {
|
|
e.stopPropagation()
|
|
el.style.backgroundColor = "rgba(129, 187, 124, 1)"
|
|
})
|
|
el.addEventListener("mouseleave", e => {
|
|
e.stopPropagation()
|
|
el.style.backgroundColor = "#58B351"
|
|
})
|
|
})
|
|
})
|
|
},
|
|
setMenulistIconColor() {
|
|
this.$nextTick(()=>{
|
|
document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
|
|
el.style.color = "rgba(254, 253, 253, 1)"
|
|
})
|
|
})
|
|
},
|
|
menulistStyleChange() {
|
|
this.setMenulistIconColor()
|
|
this.setMenulistHoverColor()
|
|
this.setMenulistStyleHeightChange()
|
|
let str = "vertical"
|
|
if("horizontal" === str) {
|
|
this.$nextTick(()=>{
|
|
document.querySelectorAll('.el-container .el-container').forEach(el=>{
|
|
el.style.display = "block"
|
|
el.style.paddingTop = "60px" // header 高度
|
|
})
|
|
document.querySelectorAll('.el-aside').forEach(el=>{
|
|
el.style.width = "100%"
|
|
el.style.height = "60px"
|
|
el.style.paddingTop = '0'
|
|
})
|
|
document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
|
|
el.style.paddingTop = '0'
|
|
})
|
|
})
|
|
}
|
|
if("vertical" === str) {
|
|
this.$nextTick(()=>{
|
|
document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
|
|
el.style.paddingTop = "60px"
|
|
})
|
|
})
|
|
}
|
|
},
|
|
setMenulistStyleHeightChange() {
|
|
this.$nextTick(()=>{
|
|
document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
|
|
el.style.height = "60px"
|
|
el.style.lineHeight = "60px"
|
|
})
|
|
document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
|
|
el.style.height = "60px"
|
|
el.style.lineHeight = "60px"
|
|
})
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.index-aside {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.menulistImg {
|
|
padding: 24px 0;
|
|
box-sizing: border-box;
|
|
|
|
.el-image {
|
|
margin: 0 auto;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.index-aside-inner {
|
|
height: 100%;
|
|
margin-right: -17px;
|
|
margin-bottom: -17px;
|
|
overflow: scroll;
|
|
overflow-x: hidden !important;
|
|
padding-top: 60px;
|
|
box-sizing: border-box;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.el-menu {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|