pengda
2 days ago
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