update: 菜单接口联调

src/components/layout/aside-menu.vue

 <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 {

src/components/layout/bread-menu.vue

 <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;
       }

src/components/layout/components/change-store.vue

@@ -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;

src/components/layout/index.vue

 <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) || {};
     }
   }
 };

src/components/layout/main-menu.vue

@@ -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 {