修改菜单

src/layout/layout-part/top-menu.vue

@@ -1,17 +1,8 @@
 <template lang="html">
   <div id="menus">
     <el-col :span="24" class="menu">
-      <el-menu
-        :default-active="activeIndex"
-        class="el-menu-demo"
-        mode="horizontal"
-        background-color="#850000"
-        text-color="#fff"
-        active-text-color="#fff"
-        :router="true"
-      >
-        <el-menu-item index="1">首页</el-menu-item>
-        <el-submenu index="2">
+      <el-menu :default-active="activeIndex" mode="horizontal" background-color="#850000" text-color="#fff" active-text-color="#fff" :router="true">
+        <!-- <el-submenu index="2">
           <template slot="title">
             学院概括
           </template>
@@ -25,68 +16,79 @@
           <el-menu-item index="3-1">创业法规</el-menu-item>
           <el-menu-item index="3-2">创业培训</el-menu-item>
           <el-menu-item index="3-3">创业案例</el-menu-item>
-        </el-submenu>
-        <el-submenu index="4">
-          <template slot="title">
-            新闻公告
-          </template>
-          <el-menu-item index="4-1">最新新闻</el-menu-item>
-          <el-menu-item index="4-2">就业新闻</el-menu-item>
-        </el-submenu>
-        <el-submenu index="5">
-          <template slot="title">
-            招聘信息
-          </template>
-          <el-menu-item index="/talk/list/in">校内宣讲会</el-menu-item>
-          <el-menu-item index="/talk/list/out">校外宣讲会</el-menu-item>
-          <el-menu-item index="/jobfair/list/in">校内双选会</el-menu-item>
-          <el-menu-item index="/jobfair/list/out">校外双选会</el-menu-item>
-          <el-menu-item index="/jobinfo/list">在线招聘</el-menu-item>
-          <el-menu-item index="/jobs/list/official">正式岗位</el-menu-item>
-          <el-menu-item index="/jobs/list/internship">实习岗位</el-menu-item>
-        </el-submenu>
-        <el-submenu index="6">
-          <template slot="title">
-            生源信息
-          </template>
-          <el-menu-item index="6-1">学院专业</el-menu-item>
-          <el-menu-item index="6-2">生源速览</el-menu-item>
-        </el-submenu>
-        <el-menu-item index="7">政策法规</el-menu-item>
-        <el-submenu index="8">
-          <template slot="title">
-            服务指南
-          </template>
-          <el-menu-item index="8-1">办事流程</el-menu-item>
-          <el-menu-item index="8-2">常用下载</el-menu-item>
-          <el-menu-item index="8-3">常见问题解答</el-menu-item>
-        </el-submenu>
-        <el-submenu index="9">
-          <template slot="title">
-            就业学生团队
-          </template>
-          <el-menu-item index="9-1">就业形象大使</el-menu-item>
-          <el-menu-item index="9-2">就业助理团队</el-menu-item>
-          <el-menu-item index="9-3">创新创业协会</el-menu-item>
-        </el-submenu>
-        <el-submenu index="10">
-          <template slot="title">
-            联系我们
-          </template>
-          <el-menu-item index="10-1">联系我们</el-menu-item>
-        </el-submenu>
+        </el-submenu> -->
+        <!-- <new-menu-item></new-menu-item> -->
+        <template v-for="(item, index) in menu">
+          <el-submenu v-if="item.children.length > 0" :index="`${index}`" :key="index">
+            <template slot="title">
+              {{ item.name }}
+            </template>
+            <el-menu-item v-for="(sub, subIndex) in item.children" :key="subIndex">{{ sub.name }}</el-menu-item>
+          </el-submenu>
+          <el-menu-item v-else index="2-1" :key="index">{{ item.name }}</el-menu-item>
+        </template>
       </el-menu>
     </el-col>
   </div>
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex';
+import NewMenuItem from './menu-item.vue';
+import _ from 'lodash';
 export default {
   name: 'menus',
+  components: {},
   data: () => ({
     activeIndex: '1',
+    menu: [],
   }),
-  methods: {},
+  created() {
+    this.loadMenu();
+  },
+  methods: {
+    ...mapActions(['menuOperation']),
+    async loadMenu() {
+      let menu = sessionStorage.getItem('menu');
+      if (menu) return;
+      else this.getMenu();
+    },
+    async getMenu() {
+      let site = '99991';
+      let result = await this.menuOperation({ type: 'list', data: { site: site } });
+      if (`${result.errcode}` === '0') {
+        let allMenu = result.data;
+        let fMenu = [];
+        let otherMenu = [];
+        allMenu.map(item => {
+          if (item.parent_id) {
+            otherMenu.push(item);
+          } else {
+            item.children = [];
+            fMenu.push(item);
+          }
+        });
+        //先整合非一级菜单的数据
+        let newArr = otherMenu.map(item => {
+          let index = _.findIndex(otherMenu, menuItem => menuItem.id === item.parent_id);
+          if (index > -1) {
+            //若此数据为otherMenu中某项的子项,则将此项推进该项的children中,且不需要返回
+            if (!otherMenu[index].children) otherMenu[index].children = [];
+            otherMenu[index].children.push(item);
+          } else {
+            //若不是otherMenu中某项的子项,则返回
+            return item;
+          }
+        });
+        newArr = newArr.filter(fil => fil !== undefined);
+        newArr.map(item => {
+          let index = _.findIndex(fMenu, menuItem => menuItem.id === item.parent_id);
+          if (index > -1) fMenu[index].children.push(item);
+        });
+        this.$set(this, `menu`, fMenu);
+      }
+    },
+  },
 };
 </script>
 

src/store.js

@@ -29,6 +29,9 @@ const api = {
   //双选会企业信息
   fairCorp: '/api/jobs/faircorps',
   fairJobs: '/api/jobs/faircorps/{id}/jobs',
+  //分站菜单
+  menuQuery: '/adminapi/menu/query',
+  menuSearch: `/adminapi/menu/fetch/{id}`,
 };
 
 export default new Vuex.Store({
@@ -251,6 +254,19 @@ export default new Vuex.Store({
       let result = await this.$axios.$get('/bugInfo/newsinfo', {}, { skip: skip, limit: limit });
       return result;
     },
+    //分站菜单
+    async menuOperation({ state }, { type, data }) {
+      let result;
+      if (type === 'list') {
+        let { site } = data;
+        result = await this.$axios.$get(api.menuQuery, {}, { site: site });
+      }
+      if (type === 'search') {
+        let { id } = data;
+        result = await this.$axios.$get(api.menuSearch, { id: id });
+      }
+      return result;
+    },
   },
 });
 

vue.config.js

@@ -45,19 +45,8 @@ module.exports = {
         changeOrigin: true,
         ws: true,
       },
-      '/loginProject': {
-        target: 'http://localhost:8001',
-        changeOrigin: true,
-        ws: true,
-      },
-      '/studentProject': {
-        target: 'http://localhost:8002',
-        changeOrigin: true,
-        ws: true,
-      },
-      '/corpProject': {
-        target: 'http://localhost:8003',
-        changeOrigin: true,
+      '/adminapi': {
+        target: 'http://10.16.5.15:8105',
         ws: true,
       },
     },