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

<template lang="html">
  <div id="menus">
    <el-row :style="`background:${backColor}`">
      <div class="w_1200">
        <el-col :span="24" class="menu">
          <el-menu :default-active="activeIndex" mode="horizontal" background-color="#850000" text-color="#fff" active-text-color="#fff" :router="true">
            <el-menu-item index="/">首页</el-menu-item>
            <template>
              <el-submenu index="/jobs">
                <template slot="title">
                  {{ jobs.title }}
                </template>
                <el-menu-item v-for="(sub, subIndex) in jobs.children" :key="subIndex" :index="sub.path">{{ sub.title }}</el-menu-item>
              </el-submenu>
            </template>
            <template v-for="(item, index) in menu">
              <el-submenu :index="`${index}`" :key="index" v-if="item.type !== 'url' && item.type !== 'content'">
                <template slot="title">
                  {{ item.title }}
                </template>
                <template v-for="(sub, subIndex) in item.children">
                  <el-menu-item :index="sub.path" :key="subIndex" v-if="sub.type !== 'url'">{{ sub.title }}</el-menu-item>
                  <el-menu-item :index="``" :key="subIndex" @click="turnTo(sub.url)" v-else> {{ sub.title }}</el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item v-else-if="item.type === 'content'" :index="item.path" :key="index">{{ item.title }}</el-menu-item>
              <el-menu-item v-else :index="``" :key="index" @click="turnTo(item.url)">{{ item.title }}</el-menu-item>
            </template>
          </el-menu>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { jobMenu } from '@/config/jobs-menu';
import { mapActions, mapState } from 'vuex';
import _ from 'lodash';
export default {
  name: 'menus',
  components: {},
  data: () => ({
    activeIndex: '1',
    jobs: jobMenu,
    menu: [],
    backColor: '#850000',
  }),
  created() {
    this.loadMenu();
  },
  methods: {
    ...mapActions(['menuOperation', 'newsOperation', 'columnOperation']),
    async loadMenu() {
      let menu = sessionStorage.getItem('menu');
      if (menu) {
        this.$set(this, `menu`, JSON.parse(menu));
        return;
      } else this.getMenu();
    },
    async getMenu() {
      //获取菜单
      let result = await this.menuOperation({ type: 'list', data: { site: this.$site } });
      if (`${result.errcode}` === '0') {
        //获取菜单的栏目
        let allMenu = result.data;
        for (let item of allMenu) {
          if (item.type === 'content') {
            item.path = `/info/detail?id=${item.content_id}`;
          } else if (item.type !== 'url') {
            let res = await this.completeMenu(item);
            item.children = res;
          }
        }
        sessionStorage.setItem('menu', JSON.stringify(allMenu));
        this.$set(this, `menu`, allMenu);
      }
    },
    async completeMenu(item) {
      let res = await this.columnOperation({ type: 'list', data: { parent_id: item.id, site: item.site } });
      if (`${res.errcode}` === '0') {
        //组合path:res.data内容都为栏目.所以,点击这些栏目显示的列表应该是信息列表,需要用栏目的id作为查询信息的parten_id查出不同栏目的信息
        for (const col of res.data) {
          if (col.type === 'content') col.path = `/info/detail?id=${col.content_id}`;
          else if (item.type !== 'url') col.path = `/info/list/${col.id}`;
        }
        return res.data;
      }
    },
    turnTo(url) {
      window.open(url);
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.menu {
  position: relative;
  height: 40px;
}
/deep/.el-menu--horizontal > .el-menu-item {
  height: 40px;
  line-height: 40px;
  width: 110px;
  text-align: center;
}
.el-submenu {
  width: 110px;
  text-align: center;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  display: none;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 40px;
  line-height: 40px;
}
/deep/.el-menu--popup {
  min-width: 110px !important;
}
/deep/.el-menu--popup-bottom-start {
  margin-top: 0px;
}
/deep/.menu .el-menu.el-menu--horizontal {
  border-bottom: none;
}
/deep/.el-menu--horizontal > .el-menu-item.is-active {
  color: #fff;
  border-bottom: none;
}
</style>