front/src/components/Top/index.vue

<template>
  <div class="page-header-box" style="line-height: 40px;position: relative;padding:0 12px">
    <el-row :gutter="24">
      <el-col :span="12" v-if="path=='/login'" class="layui-col-md6 layui-col-xs4 header-left">
        <img class="header-icon" src="../../assets/images/icon_tel2.png" />
        <span class="p-l-small">服务热线：400-1797-985</span>
        <img class="m-l header-icon" src="../../assets/images/icon_phone.png" />
        <span class="pos-r" id="app_download" @mouseover="app=true" @mouseleave="app=false">
          <a href="javascript:void(0);">APP下载</a>
          <div id="appQrcode" v-show="app">
            <img style="width:110px;height:110px;" src="../../assets/images/app.png" />
            <p style="width:110px;color:#000;font-size:12px;margin-top:5px;">扫描下载APP</p>
          </div>
        </span>
      </el-col>
      <el-col v-if="false" :span="12" class="layui-col-md6 layui-col-xs8" style="text-align:right;">
        您好！名学金榜欢迎你，
        <a href="#" class="color-orange">请登录&gt;&gt;</a>
      </el-col>
      <el-col :span="12" v-if="path!='/login'" class="layui-col-md6 layui-col-xs4 header-left">
        <span @click="to('/login')" style="margin-right:20px;cursor:pointer">首页</span>
        <span v-for="(item, index) in visibleMenus" :key="index" style="margin-right:20px;cursor:pointer" @click="handleClick(item)">{{item.meta.title}}</span>
      </el-col>
      <el-col v-if="userInfo" :span="12" class="layui-col-md6 layui-col-xs8" style="text-align:right;">
        您好！
        <span style="color:#FFA400;">{{userInfo.nickName}}{{userInfo.userName}} [{{userInfo.provinceName}} {{userInfo.schoolName}}]，</span>
        欢迎登录名学金榜
        <el-dropdown v-if="roleList.length > 1" @command="handleRoleExchange">
          <span class="el-dropdown-link pointer">[{{currentRole.roleName}}]</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item disabled class="role-change-title">
              角色切换
              <i class="el-icon-refresh"></i>
            </el-dropdown-item>
            <el-dropdown-item v-for="(r,i) in roleList" :key="i" :disabled="r==currentRole" :command="r.roleId" :divided="i==0">{{r.roleName}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <img style="height:16px;margin-left:5px;position:relative;bottom:-2px;" :src="userInfo.avatar||'https://www.mingxuejc.com/images/photo/4_2.png'" />
        <a @click="userTo">个人中心</a>
        <a style="padding-left:30px;color:#FB731F;" @click="logout">退出登录</a>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import auth from "@/utils/auth";
import { mapGetters } from "vuex";
import { changeRole } from "@/api/login.js";

export default {
  data() {
    return {
      app: false,
      path: "",
      menuList: [],
    };
  },

  computed: {
    ...mapGetters(["currentUser", "currentRole", "roleList"]),
    userInfo() {
      if (!auth.getToken()) return null;
      return this.currentUser;
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.topbarRouters;
    },
    visibleMenus() {
      return this.menuList.filter((m) => !m.hidden);
    },
  },
  created() {
    this.path = this.$route.path;
  },
  mounted() {
    this.menuList = this.topMenus();
  },
  methods: {
    logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/login" });
          window.location.reload();
        });
      });
    },
    to(url) {
      this.$router.push({
        path: url,
      });
    },

    // 顶部显示菜单
    topMenus() {
      let topMenus = [];
      this.routers.map((menu) => {
        menu.level = 1;
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === "/") {
            if (menu.children) {
              topMenus.push(menu.children[0]);
            }
          } else {
            topMenus.push(menu);
          }
        }
      });
      return topMenus;
    },
    userTo() {
      //跳转至个人中心
      this.menuList = this.topMenus();
      this.menuList.forEach((item) => {
        if (item.path == "/user") {
          this.handleClick(item);
        } else if ("index" == item.path) {
          this.$emit("userNavTo");
        }
      });
    },
    handleClick(data) {
      auth.setMenuTab(data);
      auth.setActiveMenu(data.path + "/" + data.children[0].path);
      let item = JSON.parse(JSON.stringify(data));
      let routes = []; //三级菜单
      let second = []; //二级
      let routesTo = [];
      if (item.children) {
        //有二级菜单
        item.children.forEach((item2) => {
          if (item2.children) {
            item2.children.forEach((item3) => {
              item3.path = item.path + "/" + item2.path + "/" + item3.path;
            });
            if (routes.length == 0 && item2.children.length) {
              //一级菜单下面第一个有3个菜单的二级菜单
              routes = item2.children;
              routesTo = item2.children;
            }
          } else {
            routesTo = item.children;
          }
          item2.path = item.path + "/" + item2.path;
          item2.level = 2;
          second.push(item2);
        });
        let fal = false;
        second.forEach((item) => {
          if (!fal && item.children && item.children.length > 0) {
            auth.setActiveMenu(item.path);
            fal = true;
          }
        });
        auth.setMenuTab(second);
        this.three = true;
        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
      } else {
        //没有二级菜单
        this.$store.commit("SET_SIDEBAR_ROUTERS", []);
        this.$router.push({
          path: item.path,
        });
      }
      let path = this.gouAction(routesTo);
      if (path) {
        this.$router.push({
          path: path,
        });
        auth.setMenuListAction(path);
      } else {
      }
      auth.setMenuList(routes);
    },
    toPath(data, path, url) {
      data.forEach((item) => {
        if (!path && item.children && item.children.length > 0) {
          let ac = url ? url + "/" : "";
          path = this.toPath(item.children, path, ac + item.path);
        } else if (!path) {
          let ac = url ? url + "/" : "";
          path = ac + item.path;
        }
      });
      return path;
    },
    gouAction(data) {
      if (data && data.length > 0) {
        if (data[0].children && data[0].children.length > 0) {
          if (
            data[0].children[0].children &&
            data[0].children[0].children.length > 0
          ) {
            return data[0].children[0].children.path;
          } else {
            return data[0].path + "/" + data[0].children[0].path;
          }
        } else {
          return data[0].path;
        }
      } else {
        return "";
      }
    },
    handleRoleExchange(roleId) {
      changeRole(roleId).then((_) => {
        // IMPORTANT: 此处会触发GetInfo/GetRouters
        //window.location.reload();
        window.location.href = "/login";
      });
    },
  },
};
</script>

<style scoped>
.page-header-box > .layui-row {
  width: 1184px;
  margin: 0 auto;
  padding: 8px 0;
  font-size: 14px;
}
.page-header-box .header-icon {
  height: 16px;
  vertical-align: middle;
}
img {
  border: none;
}
.p-l-small {
  padding-left: 8px;
}
.page-header-box .header-left > span {
  display: inline-block;
  vertical-align: middle;
}
#appQrcode {
  background: #fff;
  border: 1px solid #cdcdcd;
  box-shadow: 0 0 8px #cdcdcd;
  border-radius: 3px;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 40px;
  z-index: 9999;
  text-align: center;
}
.pos-r {
  position: relative;
}
.m-l {
  margin-left: 16px;
}
.color-orange {
  color: #47c6a2;
}
.role-change-title {
  color: #666666;
  font-size: 12px;
  font-weight: bold;
}
</style>