baoman / Ezquiz_Platform

<template>
  <div>
    <el-header id="header">
      <span class="hideAside" @click="collapse">
        <i class="el-icon-s-fold" style="font-size: 24px !important;" v-show="!isCollapse"></i>
        <i class="el-icon-s-unfold" style="font-size: 24px !important;" v-show="isCollapse"></i>
        <i class="routeMap">
          <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          </el-breadcrumb> -->
        </i>
      </span> 
      <ul class="personal">
        <!-- <li>
          <langSelect></langSelect>
        </li> -->
        <li class="dropdown-box" v-if="role != 'ROLE_PERSONAL' && role != 'ROLE_PINGTAI'">
          <div class="userInfo">
            <img :src="avatar" />
            <div class="txt">
              <p>{{ `${this.$store.getters.info.name}` }}</p>
              <p>{{ `${this.$store.getters.info.showRoleName}` }}</p>
            </div>
            <i class="el-icon-arrow-down"></i>
          </div>
          <el-dropdown class="dropdown" @command="handleCommand" trigger="click">
            <div class="el-dropdown-link dropdown-link"></div>
            <el-dropdown-menu slot="dropdown" v-if="permissions.length">
              <el-dropdown-item v-for="item in permissions" :key="item.role" :command="item.role">{{ item.roleName
                }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li class="dropdown-box" v-if="role == 'ROLE_PINGTAI'">
          <div class="userInfo">
            <img :src="avatar" />
            <div class="txt">
              <p>{{ `${this.$store.getters.info.name}` }}</p>
            </div>
          </div>
        </li>
        <li class="dropdown-box" v-if="role == 'ROLE_PERSONAL'" @click="linkToUserInfo">
          <div class="userInfo">
            <img :src="avatar" />
            <div class="txt">
              <p>{{ `${this.$store.getters.info.name}` }}</p>
              <p>个人版</p>
            </div>
          </div>
        </li>

        <li class="fullScreen" v-if="role != 'ROLE_PERSONAL' && !code" @click="openPwd">
          <el-tooltip class="item" effect="dark" content="修改密码" placement="bottom"><i
              class="el-icon el-icon-key"></i></el-tooltip>
        </li>
        <li class="fullScreen" @click="fullScreen">
          <el-tooltip class="item" effect="dark" content="全屏" placement="bottom"><i
              class="el-icon el-icon-full-screen"></i></el-tooltip>
        </li>
        <li v-if="code && (role == 'ROLE_BANZHUREN' || role == 'ROLE_JIAOSHI')">
          <el-tooltip class="item" effect="dark" content="老平台入口" placement="bottom">
            <i @click="_LinkOld" class="el-icon el-icon-guide"></i></el-tooltip>
        </li>
        <li>
          <el-tooltip class="item" effect="dark" content="退出" placement="bottom">
            <i @click="logOut" class="el-icon el-icon-switch-button"></i></el-tooltip>
        </li>
      </ul>
    </el-header>
    <!-- <tabNav></tabNav> -->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" title="修改密码" :visible.sync="diaPass" width="400">
      <el-form v-loading="loading" ref="formPass" class="form-box" :model="password" :rules="rulesPassword"
        label-width="160px">
        <el-form-item label="旧密码：" prop="oldPassword"><el-col :span="10"><el-input maxlength="30"
              v-model="password.oldPassword" placeholder="请输入密码" show-password></el-input></el-col></el-form-item>
        <el-form-item label="新密码：" prop="password"><el-col :span="10"><el-input maxlength="30"
              v-model="password.password" placeholder="请输入新密码" show-password></el-input></el-col></el-form-item>
        <el-form-item label="确认密码：" prop="resetPassword"><el-col :span="10"><el-input maxlength="30"
              v-model="password.resetPassword" placeholder="请输入新密码" show-password></el-input></el-col></el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="editPass">确 定</el-button>
        <el-button @click="diaPass = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { encryptLoginPassword } from "@/utils";
import langSelect from "../../../components/lang/langSelect";
import tabNav from "./tabNav";
import _ from "lodash";
export default {
  name: "Header",
  components: { tabNav, langSelect },
  computed: {
    permissions: function () {
      return this.$store.getters.info.permissions || [];
    },
  },
  data() {
    return {
      loading: false,
      code: "",
      role: "",
      isfullScreen: true,
      avatar: require("@/assets/images/womandefault.png"),
      dialogInfoVisible: false,
      dialogPassVisible: false,
      title: "",
      userId: "",
      isCollapse: false,
      diaPass: false,
      password: {
        oldPassword: "",
        password: "",
        resetPassword: "",
      },
      rulesPassword: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        resetPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.code = this.$store.getters.csCode;
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this.isCollapse = this.$store.getters.isCollapse;
  },
  methods: {
    _LinkOld: _.throttle(
      async function () {
        const { data, status, info } = await this.$request.linkOld();
        if (status == 0) {
          window.location.href = data.url;
        } else {
          this.$message.error(info);
        }
      },
      2000,
      { leading: true, trailing: false }
    ),
    openPwd() {
      this.password.password = "";
      this.password.oldPassword = "";
      this.password.resetPassword = "";
      this.diaPass = true;
    },
    editPass() {
      if (this.loading) {
        return;
      }
      this.$refs.formPass.validate(async (valid) => {
        if (valid) {
          if (this.password.password != this.password.resetPassword) {
            this.$message.warning("两次输入密码不一致请检查！");
            return;
          }
          this.loading = true;
          const { data, status, info } = await this.$request.changePwd({
            oldPassword: encryptLoginPassword(this.password.oldPassword),
            password: encryptLoginPassword(this.password.password),
          });
          this.loading = false;
          if (status === 0) {
            this.$message.success("密码修改成功~");
            this.diaPass = false;
            const res = await this.$request.logout();
            this.$store.commit("setToken", "");
            this.$store.commit("setInfo", {});
            this.$store.commit("setRouters", []);
            this.$store.commit("resetTabnavBox");
            this.$router.push({
              path: "/login",
            });
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.error("数据有误，请检查！");
        }
      });
    },
    linkToUserInfo() {
      this.$router.push({
        path: "/userInfo",
      });
    },
    collapse() {
      this.isCollapse = !this.isCollapse;
      this.$store.dispatch("collapse");
    },
    successCallback() {
      this.dialogInfoVisible = false;
    },
    editPwdCallback() {
      this.dialogPassVisible = false;
    },
    fullScreen() {
      if (this.isfullScreen) {
        var docElm = document.documentElement;
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        }
        this.isfullScreen = false;
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.isfullScreen = true;
      }
    },
    handleCommand(command) {
      //刷新权限跳转首页
      this.$store.dispatch("permissions", command);
      this.$store.commit('setClasses', "")
    },
    async logOut() {
      const { data, status, info } = await this.$request.logout();
      if (status == 0) {
        if (data) {
          window.location.href = data;
        } else {
          localStorage.setItem("token", "");
          sessionStorage.setItem("addTab", "")
          this.$store.commit("setToken", "");
          this.$store.commit("setInfo", "");
          this.$store.commit("setRouters", "");
          this.$store.commit("resetTabnavBox");
          this.$store.commit('setClasses', "")
          this.$router.push({
            path: "/login",
          });
          window.location.reload() //缓存页面问题需要刷新
        }
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style lang="scss">
$top: top;
$bottom: bottom;
$left: left;
$right: right;
$leftright: (
  $left,
  $right
);

%w100 {
  width: 100%;
}

%h100 {
  height: 100%;
}

%cursor {
  cursor: pointer;
}

html,
body,
#app,
.el-container,
#asideNav,
ul.el-menu {
  @extend %h100;
}

@mixin set-value($side, $value) {
  @each $prop in $leftright {
    #{$side}-#{$prop}: $value;
  }
}

#header {
  max-height: 70px;
  line-height: 70px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background: #03152a;
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 0 20px 0 10px;

  .routeMap { 
    display: inline-block;
  }

  .hideAside {
    @extend %cursor;

    i {
      font-size: 24px;
      line-height: 70px;
    }
  }

  .personal {
    display: flex;
    flex-direction: row;

    li {
      @include set-value(margin, 8px);
      font-size: 12px;
      @extend %cursor;
      position: relative;
      line-height: 70px;
    }
  }

  .userInfo {
    display: flex;
    align-items: center;
    height: 70px;
    @extend %cursor;

    .txt {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 5px;

      p {
        line-height: 20px;
        font-size: 12px;
      }
    }

    img {
      border-radius: 5px;
      width: 28px;
      height: 28px;
    }
  }

  .el-icon {
    font-size: 20px;
    line-height: 50px;
  }

  .fa-lg {
    color: #fff;
  }

  .dropdown {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .dropdown-link {
      height: 70px;
    }
  }
}
</style>