jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/CustomMenu.vue

<template>
  <el-menu ref="elMenu" :default-active="activeIndex" mode="horizontal" @select="handleSelect" class="menuBox">
    <template v-for="(item, index) in menuData">
      <component :index="prefix + '_' + index" v-if="item.children" is="el-submenu" class="menuItem" :class="{ 'menuActive': activeIndex && activeIndex.includes(prefix + '_' + index) }">
        <template slot="title">{{ item.title }}</template>

        <!-- 第二层菜单 -->
        <template v-for="(item1, index1) in item.children">
          <component :index="prefix + '_' + index + '-' + index1" v-if="item1.children" is="el-submenu" :class="{ 'menuActive': activeIndex && activeIndex.includes(prefix + '_' + index + '-' + index1) }">
            <template slot="title">
              <p index="1">{{ item1.title }}</p>
            </template>

            <!-- 第三层菜单 -->
            <template v-for="(item2, index2) in item1.children">
              <component :index="prefix + '_' + index + '-' + index1 + '-' + index2" is="el-menu-item" :class="{ 'menuActive': activeIndex && activeIndex.includes(prefix + '_' + index + '-' + index1 + '-' + index2) }">
                {{item2.title }}
              </component>
            </template>

          </component>
          <component :index="prefix + '_' + index + '-' + index1" v-else is="el-menu-item" :class="{ 'menuActive': activeIndex && activeIndex.includes(prefix + '_' + index + '-' + index1) }">{{ item1.title
          }}
          </component>
        </template>

      </component>
      <component :index="prefix + '_' + index" v-else is="el-menu-item" class="menuItem"
        :class="{ 'menuActive': activeIndex && activeIndex.includes(prefix + '_' + index) }">{{
          item.title }}
      </component>
    </template>
  </el-menu>
</template>
<script>
/**
 *
 */

import { getConfigKey } from "@/api/system/config";
export default {
  name: "CustomMenu",
  data() {
    return {
      activeIndex:""
    };
  },
  props: {
    prefix: {
      type: String,
      default: ""
    },
    // activeIndex: {
    //   type: String,
    //   default: ""
    // },
    menuData: {
      type: Array,
      default: () => []
    },
    activeMenu: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    $route:{
      handler(newV){
        this.activeIndex = newV.meta.menuId
      },
      immediate: true
    }
  },
  created() {

  },
  methods: {
    handleSelect(key, keyPath) {
      let arr = (key.split("_")[1]).split("-");
      let node = this.menuData
      for (let i = 0; i < arr.length; i++) {
        node = node[arr[i] * 1];
        if (node.children) {
          node = node.children;
        }
      }
      if(node.title === '系统管理'){
        this.$refs.elMenu.activeIndex = null
        getConfigKey("backgroundUrl").then((res) => {
          window.open(res.msg)
        });
      } else if(node.title==='桥梁监测'){
        this.$refs.elMenu.activeIndex = null
        window.open('http://iot.sdhscloud.com/home?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTc1MSwidWlkIjoiM2M2NTZjOGUtMzgwZC0xMWVmLWFhNmItYmVhNGE2MDZhMzE2IiwidXNlcm5hbWUiOiJKSFpIR1MiLCJuaWNrbmFtZSI6Ilx1NmQ0ZVx1ODNjZlx1NjY3YVx1NjE2N1x1OWFkOFx1OTAxZiIsImVtYWlsIjoiMjU4NTQwMjg0MEBxcS5jb20iLCJ0ZWwiOiIiLCJpc19zdXBlcnVzZXIiOmZhbHNlLCJpc19tYXN0ZXIiOmZhbHNlLCJpc19hY3RpdmUiOnRydWUsInRlbmFudF9pZCI6NDUsImF0dHJzIjp7Imdyb3VwIjoiIn0sImhhc3VyYSI6eyJ4LWhhc3VyYS11c2VyLWlkIjoiM2M2NTZjOGUtMzgwZC0xMWVmLWFhNmItYmVhNGE2MDZhMzE2IiwieC1oYXN1cmEtdGVuYW50Ijo0NSwieC1oYXN1cmEtYWN0aXZlIjp0cnVlLCJ4LWhhc3VyYS1tYXN0ZXIiOmZhbHNlLCJ4LWhhc3VyYS1yb2xlX2lkIjo1MjcsIngtaGFzdXJhLWFwcF9pZCI6NTIsIngtaGFzdXJhLXNlcnZpY2VfaWQiOjQsIngtaGFzdXJhLXN1cGVydXNlciI6ZmFsc2V9LCJhcHBfaWQiOjUyLCJyb2xlX2lkIjo1MjcsInNlcnZpY2VfaWQiOjQsImNsaWVudF9pZCI6IjA1ZTI1NzU4LTBhYTQtMTFlYS1iYTM0LTAyNDJhYzEwMDExZiIsImV4cCI6NDg3MzUxMzk1M30.JR5dwFCmNfaDFkSISOF5ZhRyPBulzDwG1bg4BA-Jqog')
      }
      else if(node.title==='数字收费站'){
        this.$refs.elMenu.activeIndex = null
        getConfigKey("digitalTollStation").then((response) => {
          window.open(response.msg===''?'https://10.0.86.63:9000/s?loadType=auto&group=15ai1k13748d&runType=box':response.msg);
        })
      }
      else if(node.title==='GIS+BIM可视化'){
        this.$refs.elMenu.activeIndex = null
        getConfigKey("dc.gisAndBim").then((response) => {
          window.open(response.msg===''?'https://10.0.86.63:9000/s?loadType=auto&group=15ai1k13748d&runType=box':response.msg);
        })
      }
      else if(node.title==='零碳能源'){
        this.$refs.elMenu.activeIndex = null
        getConfigKey("carbon").then((response) => {
          window.open(response.msg===''?'https://10.0.111.11:100/single?key=jhszyy&route=home':response.msg);
        })
      }
      else if (this.$route.path != node.path){
          this.$router.push(node.path);
      }

    }
  }
};
</script>
<style lang="scss" scoped>
@mixin btnClass{
  transition: none;
  width: 110px;
  height: 34px;
  line-height: 32px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  padding: 0 !important;
}
@mixin activeBtnBg{
  background: url("../../images/active.png") no-repeat 0 0 !important;
  background-size: 100% 100% !important;
}
.menuBox {
  border: none;
  border-radius: 0;
  background: none;
  width: 25%;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.menuItem {
  @include btnClass;
  text-align: center;
  background-size: 100% 100%;
  background: none !important;
  ::v-deep &.is-active {
    border: none !important;
    color: #fff !important;
  }

  ::v-deep &:focus {
    border: none !important;
    color: #fff !important;
  }

  ::v-deep .el-icon-arrow-down {
    display: none !important;
  }

  ::v-deep .el-submenu__title{
    @include btnClass;
  }
  ::v-deep .el-submenu__title:hover {
    background: none !important;
  }

  &:hover {
    @include activeBtnBg;
    color: #fff !important;
    border: none !important;
    ::v-deep .el-submenu__title{
      color: #fff;
    }
  }

  &.menuActive {
    @include activeBtnBg;
    ::v-deep .el-submenu__title{
      color: #fff !important;
      border:none !important;
    }
  }
  ::v-deep &:focus .el-submenu__title{
    color: #fff !important;
    border:none !important;
  }

}
</style>