hyyfClient/src/components/SideMenu.vue

<template>
  <div class="sidemenu">
    <div style="height: 100%" v-if="mode">
      <el-menu
          :style="{width: width + 'px', display: 'inline-block', height: '100%'}"
          background-color="#464C5B"
          text-color="#fff"
          :default-active="activeName"
          :active-text-color="color">
        <el-menu-item
            v-for="(item) in menuList"
            :class="[item.title === activeName && activeName!== '首页' ? 'menuSet' : '']"
            :index="item.title"
            :key="item.id"
            @click="jump(item)">
          <template slot="title">
            <span>{{item.title}}</span>
          </template>
        </el-menu-item>
      </el-menu>
      <div v-show="isShow && activeName!== '首页'" class="subsidemenu">
        <div class="menu-header">{{selectItem.title}}</div>
        <ul class="menu-item-children">
          <li
              v-for="item in selectItem.children"
              class="menuChildren"
              :style="{color: item.url == activeUrl ? color : '#999'}"
              @click="go(item)"
              :key="item.id">{{item.title}}</li>
        </ul>
      </div>
    </div>
    <div style="height: 100%" v-else>
      <el-menu
          router
          :style="{width: '249px', display: 'inline-block', height: '100%'}"
          background-color="#464C5B"
          text-color="#fff"
          :default-active="routerName"
          :active-text-color="color">
          <template v-for="item in menuList">
            <el-submenu :key="item.id" v-if="item.children.length > 0 && item.url !== 'dashboard'" :index="item.url">
              <span slot="title">{{item.title}}</span>
              <el-menu-item v-for="list in item.children" :key="list.id" :index="list.url">{{list.title}}</el-menu-item>
            </el-submenu>
            <el-menu-item :key="item.id" v-else :index="item.url">{{item.title}}</el-menu-item>
          </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserMenu} from "../utils/api";
export default {
  name: "SideMenu",
  computed: {
    ...mapState(['color', 'mode'])
  },
  data() {
    return {
      menuList: [],
      width: 249,
      isShow: false,
      selectItem: {},
      activeUrl: '',
      activeName: '首页',
      routerName: 'dashboard'
    }
  },
  watch: {
    $route(newVal) {
      // 标题名称
      let name = newVal.meta.title;
      let parentName = newVal.meta.parentName;
      let routerName = newVal.meta.permission;
      this.$emit('setRouterName', {name: name, router: routerName});
      if(this.mode) {
        this.activeName = parentName;
        this.activeUrl = routerName
        var that = this;

        that.selectItem = that.getFilter(that.menuList, parentName)[0];
          if (that.selectItem.children.length > 0) {
            that.isShow = true;
          } else {
            that.isShow = false;
          }

      } else {
        this.routerName = routerName
      }
    },
    mode(newVal) {
      // 路由地址
      let routerName = this.$route.meta.permission;
      // 上级菜单名字
      let parentName = this.$route.meta.parentName;
      if(newVal) {
        this.selectItem = this.getFilter(this.menuList, parentName)[0];
        this.activeUrl = routerName;
        this.activeName = parentName;
        if (this.selectItem.children.length > 0) {
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      } else {
        this.routerName = routerName;
      }
    },
    isShow(newVal) {
      if(newVal) {
        if(this.activeName === '首页') {
          this.width = 249;
        } else {
          this.width = 100;
        }
      } else {
        this.width = 249;
      }
    },
  },
  methods: {
    init() {
      let params = {
        userId: localStorage.getItem('UserId')
      }
      let parentName = this.$route.meta.parentName;
      getUserMenu(params).then(res => {
        if(res.code === 10000) {
          this.menuList = res.data;
          this.selectItem = this.getFilter(this.menuList, parentName)[0];
          if (this.selectItem.children.length > 0) {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
        }
      })
    },
    jump(item) {
      console.log(item);
      this.activeName = item.title;
      if(item.children.length > 0 && item.url !== "dashboard") {
        this.isShow = true;
        this.selectItem = item;
      } else {
        this.isShow = false;
        this.$router.push({
          path: '/' + item.url
        })
      }
    },
    go(item) {
      this.activeUrl = item.url;
      this.$router.push({
        path: '/' + item.url
      })
    },
    // 过滤找到自己上级
    getFilter(list, name) {
     let childrenList = [];
     const targetList = list.filter((item) => {
        if(item.title == name) {
            return true
        } else if(item.children && item.children.length) {
          childrenList = childrenList.concat(this.getFilter(item.children, name));
          return false
        } else {
          return false;
        }
     })
      return targetList.concat(childrenList);
    }
  },
  created() {
    this.init()
  },
  mounted() {
    // // 路由地址
    let routerName = this.$route.meta.permission;
    // 上级菜单名字
    let parentName = this.$route.meta.parentName;
    if(this.mode) {
      this.activeUrl = routerName;
      this.activeName = parentName;
    } else {
      this.routerName = routerName;
    }
  }
}
</script>

<style scoped>
.sidemenu {
  height: calc(100vh - 75px);
  overflow-y: auto;
  position: relative;
  padding: 0;
  margin: 0;
}
.subsidemenu {
  position: absolute;
  top: 0;
  right: 0;
  width: 149px;
  height: calc(100vh - 75px);
  float: right;
  border-right: 1px solid #ddd;
}
.menu-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #999;
  text-align: center;
  border-bottom: 1px solid #ddd;
  background-color: rgb(242, 242, 242);
}
.menu-item-children {
  width: 100%;
  height: calc(100% - 52px);
  background-color: #EAEDF1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menuChildren {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  cursor: pointer;
  color: #BCBCBC;
}
.menuSet {
  position: relative;
}
.menuSet:after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 20px;
  left: 92px;
  transform: rotate(45deg);
  background-color: #EAEDF1;

}
</style>