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>