7 changed files with 341 additions and 235 deletions
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse" :default-openeds="defaultOpeneds"> |
|||
<div class="menu-top"> |
|||
<span v-show="!isCollapse">导航</span> |
|||
<img v-if="!isCollapse" src="../../assets/menu-close.svg" @click="changeMenuStatus(true)" alt=""> |
|||
<img v-else src="../../assets/menu-open.svg" @click="changeMenuStatus(false)" alt=""> |
|||
</div> |
|||
<el-submenu v-for="item in menuData" :key="item.index" :index="item.index"> |
|||
<template slot="title"> |
|||
<i :class="item.icon"></i> |
|||
<span>{{ item.title }}</span> |
|||
</template> |
|||
<el-menu-item style="padding: 0 22px;" v-for="subItem in item.children" :key="subItem.index" :index="subItem.index"> |
|||
{{ subItem.title }} |
|||
</el-menu-item> |
|||
</el-submenu> |
|||
</el-menu> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'RankingLeft', |
|||
data() { |
|||
return { |
|||
isCollapse: false, |
|||
activeMenu: '', |
|||
defaultOpeneds: [], // <-- 添加这个变量 |
|||
routerList: [], |
|||
menuData: [ |
|||
{ |
|||
index: '1', |
|||
title: '总利润', |
|||
icon: 'el-icon-menu', |
|||
children: [ |
|||
{ index: '1-1', title: '年排行', path: '/super/ranking/yearProfit' }, |
|||
{ index: '1-2', title: '月排行', path: '/super/ranking/monthProfit' } |
|||
] |
|||
}, |
|||
{ |
|||
index: '2', |
|||
title: '产品', |
|||
icon: 'el-icon-menu', |
|||
children: [ |
|||
{ index: '2-1', title: '毛利润排行', path: '/super/ranking/checkProfit' }, |
|||
{ index: '2-2', title: '订单数排行', path: '/super/ranking/checkOrdernum' }, |
|||
{ index: '2-3', title: '退单数排行', path: '/super/ranking/checkRefund' }, |
|||
{ index: '2-4', title: '负毛利排行', path: '/super/ranking/loss' } |
|||
] |
|||
}, |
|||
{ |
|||
index: '3', |
|||
title: '代理商', |
|||
icon: 'el-icon-menu', |
|||
children: [ |
|||
{ index: '3-1', title: '毛利润排行', path: '/super/ranking/agentProfit' }, |
|||
{ index: '3-2', title: '充值排行', path: '/super/ranking/agentRecharge' }, |
|||
{ index: '3-3', title: '新加盟', path: '/super/ranking/agentNew' } |
|||
] |
|||
}, |
|||
{ |
|||
index: '4', |
|||
title: '设置', |
|||
icon: 'el-icon-menu', |
|||
children: [ |
|||
{ index: '4-1', title: '采购价', path: '/super/ranking/purchase' }, |
|||
{ index: '4-2', title: '阶段采购', path: '/super/ranking/stagePurchase' } |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
methods: { |
|||
changeMenuStatus(flag) { |
|||
this.isCollapse = flag; |
|||
}, |
|||
handleSelect(index) { |
|||
this.activeMenu = index; |
|||
|
|||
// 找到被点击的 menu 项对应的 path |
|||
const allItems = this.menuData.flatMap(menu => menu.children); |
|||
const targetItem = allItems.find(item => item.index === index); |
|||
|
|||
if (targetItem && this.$route.path !== targetItem.path) { |
|||
this.$router.push(targetItem.path); |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
const allItems = this.menuData.flatMap(menu => menu.children.map(child => ({ ...child, parentIndex: menu.index }))); |
|||
const current = allItems.find(item => item.path === this.$route.path); |
|||
this.activeMenu = current ? current.index : ''; |
|||
this.defaultOpeneds = current ? [current.parentIndex] : []; |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.el-menu-vertical-demo:not(.el-menu--collapse) { |
|||
width: 158px; |
|||
min-width: 158px; |
|||
min-height: calc(100vh - 62px); |
|||
} |
|||
|
|||
.el-menu-item { |
|||
padding: 0 22px; |
|||
} |
|||
|
|||
.menu-top { |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
/* middle/middle_line_1 */ |
|||
border-width: 0px 0px 1px 0px; |
|||
border-style: solid; |
|||
border-color: #DFE2E6; |
|||
padding: 15px 0px; |
|||
margin: 0 22px; |
|||
display: flex; |
|||
font-size: 16px; |
|||
color: #1E2226; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
::v-deep .el-submenu { |
|||
width: 16px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
::v-deep .el-submenu .el-menu-item { |
|||
min-width: 138px; |
|||
width: 100%; |
|||
} |
|||
|
|||
::v-deep .el-submenu__title { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
::v-deep .el-submenu__title:hover { |
|||
background-color: transparent; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down { |
|||
display: none; |
|||
} |
|||
|
|||
::v-deep .el-submenu .el-menu-item { |
|||
padding: 0 22px; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
::v-deep .el-submenu .el-menu-item { |
|||
height: 36px; |
|||
} |
|||
|
|||
::v-deep.el-submenu .el-menu-item { |
|||
height: 36px; |
|||
line-height: 36px; |
|||
color: #8A9099; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
|
|||
::v-deep .el-menu-item:hover { |
|||
background: #F6F7FA; |
|||
} |
|||
|
|||
::v-deep .el-menu-item.is-active { |
|||
color: #006AFF; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -1,196 +0,0 @@ |
|||
<template> |
|||
<aside class="sidebar"> |
|||
<ul> |
|||
<li v-for="item in menuList" :key="item.path"> |
|||
<div class="flex"> |
|||
<img :src="item.imgActive" alt=""> |
|||
{{ item.name }} |
|||
</div> |
|||
<p :class="['flex', $route.path == item1.path ? 'curActive' : '']" v-for="(item1) in item.list" |
|||
@click="setActiveCur(item1.desc, item1)" :key="item1.name">{{ item1.name }}</p> |
|||
</li> |
|||
</ul> |
|||
</aside> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapState} from 'vuex'; |
|||
import store from '../../store'; |
|||
|
|||
export default { |
|||
name: 'Sidebar', |
|||
props: {}, |
|||
data() { |
|||
return { |
|||
menuList: [ |
|||
{ |
|||
name: '总利润', |
|||
imgActive: require('@/assets/super/ranking-menu.svg'), |
|||
list: [ |
|||
{ |
|||
name: '年排行', |
|||
path: '/super/ranking/yearProfit', |
|||
}, |
|||
{ |
|||
name: '月排行', |
|||
path: '/super/ranking/monthProfit', |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
name: '产品', |
|||
imgActive: require('@/assets/super/ranking-menu.svg'), |
|||
list: [ |
|||
{ |
|||
name: '毛利润排行', |
|||
path: '/super/ranking/checkProfit', |
|||
}, |
|||
{ |
|||
name: '订单数排行', |
|||
path: '/super/ranking/checkOrdernum', |
|||
}, |
|||
{ |
|||
name: '退单数排行', |
|||
path: '/super/ranking/checkRefund', |
|||
}, |
|||
{ |
|||
name: '负毛利排行', |
|||
path: '/super/ranking/loss', |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
name: '代理商', |
|||
imgActive: require('@/assets/super/ranking-menu.svg'), |
|||
list: [ |
|||
{ |
|||
name: '毛利润排行', |
|||
path: '/super/ranking/agentProfit', |
|||
}, |
|||
{ |
|||
name: '充值排行', |
|||
path: '/super/ranking/agentRecharge', |
|||
}, |
|||
{ |
|||
name: '新加盟', |
|||
path: '/super/ranking/agentNew', |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
name: '设置', |
|||
imgActive: require('@/assets/super/ranking-menu.svg'), |
|||
list: [ |
|||
{ |
|||
name: '采购价', |
|||
path: '/super/ranking/purchase', |
|||
}, |
|||
{ |
|||
name: '阶段采购', |
|||
path: '/super/ranking/stagePurchase', |
|||
}, |
|||
// { |
|||
// name: '订单列表', |
|||
// path: '/super/ranking/agentNew', |
|||
// }, |
|||
] |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
created() { |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|||
}, |
|||
beforeDestroy() { |
|||
}, |
|||
methods: { |
|||
setActiveCur(dom, item) { |
|||
if (this.$route.path != item.path) { |
|||
this.$router.push(item.path) |
|||
store.commit('SET_PAGETITLE', item.name); |
|||
} |
|||
setTimeout(() => { |
|||
this.setHighActive(dom) |
|||
}, 500) |
|||
}, |
|||
setHighActive(dom) { |
|||
const ele = document.getElementById(dom) |
|||
if (!ele) return |
|||
ele.classList.add('ceshi') |
|||
ele.scrollIntoView({behavior: 'smooth', block: 'start'}) |
|||
setTimeout(() => { |
|||
ele.classList.remove('ceshi') |
|||
}, 1000) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.sidebar { |
|||
width: 158px; |
|||
padding: 21px; |
|||
box-sizing: border-box; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11); |
|||
} |
|||
|
|||
ul { |
|||
list-style: none; |
|||
padding: 0; |
|||
} |
|||
|
|||
.not-point { |
|||
pointer-events: none; |
|||
/* 阻止鼠标事件 */ |
|||
opacity: 0.5; |
|||
/* 可选，降低透明度以视觉上表示不可用 */ |
|||
cursor: not-allowed; |
|||
/* 改变鼠标光标样式，表示不可用 */ |
|||
} |
|||
|
|||
li { |
|||
margin-bottom: 10px; |
|||
|
|||
div { |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin: 11px 0; |
|||
cursor: pointer; |
|||
|
|||
img { |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
|
|||
p { |
|||
margin: 9px 0; |
|||
letter-spacing: 0.08em; |
|||
line-height: 18px; |
|||
color: #8A9099; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #006AFF; |
|||
} |
|||
} |
|||
|
|||
.curActive { |
|||
color: #006AFF; |
|||
} |
|||
} |
|||
|
|||
.active { |
|||
font-weight: bold; |
|||
letter-spacing: 0.08em; |
|||
color: #006AFF; |
|||
} |
|||
|
|||
.item-active { |
|||
color: #006AFF; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue