web-portal/src/layout/layout-part/menus.vue

<template>
  <div id="menus">
    <el-menu :default-active="activeMenu" active-text-color="#850000" :router="true" v-if="!is_router">
      <template v-for="(item, index) in list">
        <el-menu-item
          v-if="item.type === 'column'"
          :key="index"
          :index="item.path"
          :style="`${activeMenu === item.path ? 'border-left:2px solid #850000;color:#850000' : ''}`"
        >
          <span slot="title">{{ item.title }} </span>
        </el-menu-item>
        <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-menu :default-active="activeMenu" active-text-color="#850000" :router="true" v-else>
      <template v-for="(item, index) in list">
        <el-menu-item :key="index" :index="item.path" :style="`${activeMenu === item.path ? 'border-left:2px solid #850000;color:#850000' : ''}`">
          <span slot="title">{{ item.title }} </span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { jobMenu, masterMenu } from '@/config/jobs-menu';
import _ from 'lodash';
export default {
  name: 'menus',
  props: {
    menuList: { type: Array, default: () => [] },
  },
  data: () => ({
    activeMenu: '',
    jobs: [],
    list: [],
    title: '',
    is_router: false,
  }),
  created() {
    this.initJobs();
    this.getMenu();
  },
  mounted() {
    this.getPage();
  },
  computed: {
    parent_id() {
      return this.$route.params.parent_id;
    },
  },
  watch: {
    $route: {
      handler(val) {
        this.$set(this, `activeMenu`, val.path);
      },
      deep: true,
    },
    parent_id: 'getMenu',
  },
  methods: {
    getMenu() {
      let route = this.$route.path;
      if (!route.includes('/info/list')) {
        //显示固定的招聘菜单
        this.$set(this, `list`, this.jobs.children);
        this.$set(this, `is_router`, true);
        return;
      }
      //过滤自定义的栏目出来
      let menu = sessionStorage.getItem('menu');
      if (menu) {
        menu = JSON.parse(menu);
        let res = menu.filter(fil => {
          let is_this = false;
          if (fil.children) {
            for (const item of fil.children) {
              if (item.path === route) {
                is_this = true;
                break;
              }
            }
          }
          return is_this;
        });
        if (res.length > 0) {
          let this_menu = res[0];
          if (this_menu.children.length > 0) {
            this_menu = this_menu.children;
          }
          console.log(this_menu);
          this.$set(this, `list`, this_menu);
        }
      }
    },
    getPage() {
      let path = this.$route.path;
      this.$set(this, `activeMenu`, path);
      return path;
    },
    turnTo(url) {
      window.open(url);
    },
    initJobs() {
      if (this.$site === 'master') this.$set(this, `jobs`, masterMenu);
      else this.$set(this, `jobs`, jobMenu);
    },
  },
  metaInfo() {
    let path = this.$route.path;
    let obj = this.list.find(f => f.path == path);
    return { title: obj.title || '就业指导' };
  },
};
</script>

<style lang="less" scoped>
.el-menu-item {
  line-height: 32px;
  height: 32px;
}
</style>