Commit d6264d37 by caoyanzhi

update: 菜单接口联调

parent c0adf2b4
<template>
<el-menu class="aside-menu-box" default-active="2" :default-openeds="['1']">
<el-submenu class="aside-menu-list" index="1">
<el-menu class="aside-menu-box" :default-openeds="menuList.map(el => el.menuCode)">
<el-submenu class="aside-menu-list" v-for="el in menuList" :index="el.menuCode" :key="el.menuCode">
<div class="aside-menu-list-title" slot="title">
<i class="iconfont-hb3 iconwodekehu menu-icon"></i>
<span>我的客户</span>
<i :class="['menu-icon iconfont-hb3', el.iconUrl]"></i>
<span>{{ el.menuName }}</span>
</div>
<el-menu-item class="aside-menu-title" index="1-1">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title actived" index="1-2">客户标签</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-3">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-4">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-5">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-6">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-7">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-8">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-9">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-10">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-11">客户列表</el-menu-item>
<el-menu-item class="aside-menu-title" index="1-12">客户列表123</el-menu-item>
<el-menu-item :class="['aside-menu-title', { actived: activedCode == item.menuCode }]" v-for="item in el.childList" :index="item.menuCode" :key="item.menuCode" @click="toPage(item)">
{{ item.menuName }}
</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
name: 'AsideMenu'
name: 'AsideMenu',
props: {
menuList: {
type: Array,
default: () => []
},
activedCode: String
},
methods: {
toPage(menu) {
if (this.activedCode == menu.menuCode) return;
this.$router.push('/' + menu.menuUrl);
}
}
};
</script>
......@@ -58,7 +62,8 @@ export default {
line-height: 44px;
box-sizing: border-box;
border-radius: 2px;
&:hover {
&:hover,
&:focus {
background: #f2f3f5;
}
&.actived {
......
<template>
<div class="bread-menu">
<span class="bread-menu-item">
<span class="bread-menu-text is-link">客户标签</span>
</span>
<span class="bread-menu-item">
<i class="bread-menu-icon iconfont-hb3 iconnavigate_next"></i>
<span class="bread-menu-text bread-menu-active">同步记录</span>
<span class="bread-menu-item" v-for="(el, index) in menuList" :key="el.menuCode">
<i v-if="index > 0" class="bread-menu-icon iconfont-hb3 iconnavigate_next"></i>
<span :class="['bread-menu-text', index == menuList.length - 1 ? 'bread-menu-actived' : 'is-link']" @click="toPage">{{ el.menuName }}</span>
</span>
</div>
</template>
<script>
export default {
name: 'BreadMenu'
name: 'BreadMenu',
props: {
menuList: {
type: Array,
default: () => []
}
},
methods: {
toPage() {
this.$router.go(-1);
}
}
};
</script>
......@@ -42,7 +50,7 @@ export default {
color: #2f54eb;
}
}
&.bread-menu-active {
&.bread-menu-actived {
font-weight: 500;
color: #303133;
}
......
......@@ -6,7 +6,7 @@
<i class="iconfont-hb3 iconxiajiantou change-store-icon"></i>
</span>
<div class="change-store">
<div class="store-item active">
<div class="store-item actived">
<div>
<div class="store-name">金华达摩</div>
<div class="default-store-tag">默认商户</div>
......@@ -129,7 +129,7 @@ export default {
+ .store-item {
margin-top: 4px;
}
&.active {
&.actived {
background: #f7f8fa;
.store-name {
color: #2f54eb;
......
<template>
<div class="hb-layout">
<main-menu></main-menu>
<aside-menu></aside-menu>
<main-menu :menu-list="menuList" :actived-code="activedMenu.length > 0 ? activedMenu[0].menuCode : ''"></main-menu>
<aside-menu :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>
<div class="hb-layout-content">
<bread-menu v-if="breadShow"></bread-menu>
<div class="hb-layout-pager" :style="{ height: breadShow ? `calc(100% - 30px)` : '100%' }">
<bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu>
<div class="hb-layout-pager" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%' }">
<slot>
<!-- <div style="width: 1300px;height: 1000px;border:1px solid red"></div>
页面内容 -->
......@@ -16,6 +16,7 @@
<script>
import { getRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
import MainMenu from './main-menu.vue';
import AsideMenu from './aside-menu.vue';
import BreadMenu from './bread-menu.vue';
......@@ -24,18 +25,54 @@ export default {
components: { MainMenu, AsideMenu, BreadMenu },
data() {
return {
breadShow: true
breadShow: true,
// 菜单树数据
menuList: [],
// 菜单平铺数据
flatMenuList: [],
// 侧边栏菜单数据
asideMenu: [],
// 激活的菜单
activedMenu: []
};
},
created() {
this.getMenuList();
},
methods: {
// /get-haoban-menu
getMenuList() {
getRequest('/haoban-manage3-web/get-haoban-menu', { requestProject: 'haoban-manage-web', enterpriseId: '' }).then(res => {
console.log(res);
getRequest('/haoban-manage3-web/get-haoban-menu', { requestProject: 'haoban-manage-web' }).then(res => {
const { errorCode, result } = res.data || [];
if (errorCode != 1) {
errorMsg.errorMsg(res.data);
return;
}
if (!Array.isArray(result)) return;
this.menuList = result;
this.flatMenuList = this.getFlatMenuList(result);
this.activedMenu = this.getActivedMenu(this.getMenuByPath(this.$route.path.slice(1)));
});
},
getFlatMenuList(menuList) {
return menuList.reduce((list, el) => {
if (Array.isArray(el.childList)) {
list = list.concat(this.getFlatMenuList(el.childList));
}
list.push(el);
return list;
}, []);
},
getActivedMenu(menu) {
if (!menu.menuCode) return [];
let result = [menu];
const parentMenu = this.flatMenuList.find(el => el.menuCode == menu.parentCode) || {};
if (parentMenu.menuCode) {
result = [...this.getActivedMenu(parentMenu), ...result];
}
return result;
},
getMenuByPath(path) {
return this.flatMenuList.find(el => el.menuUrl == path) || {};
}
}
};
......
......@@ -2,9 +2,9 @@
<div class="main-menu-box">
<div class="main-menu">
<img class="main-menu-logo" src="@/assets/logo-layout.png" alt="" @click="toIndex" />
<div class="main-menu-item active">客户</div>
<div class="main-menu-item">营销</div>
<div class="main-menu-item">数据</div>
<div v-for="el in menuList.filter(el => el.hasRight == 1 && el.isShow == 1)" :key="el.menuCode" :class="['main-menu-item', { actived: activedCode == el.menuCode }]" @click="toPage(el)">
{{ el.menuName }}
</div>
</div>
<div class="main-info">
<change-store></change-store>
......@@ -22,9 +22,34 @@ export default {
provide: {
projectName: 'haoban-manage-web'
},
props: {
menuList: {
type: Array,
default: () => []
},
activedCode: String
},
methods: {
toIndex() {
this.$router.push('/');
},
toPage(menu) {
// 找到第一个有权限的路径
let path = '';
menu.childList.some(el => {
if (el.hasRight && Array.isArray(el.childList)) {
el.childList.some(item => {
if (item.hasRight) {
path = item.menuUrl;
}
return item.hasRight;
});
}
return path;
});
if (path) {
this.$router.push('/' + path);
}
}
}
};
......@@ -65,7 +90,7 @@ export default {
+ .main-menu-item {
margin-left: 40px;
}
&.active {
&.actived {
font-weight: 600;
color: #2f54eb;
&::after {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment