baoman / Ezquiz_Platform

  <template>
    <div>
      <el-header id="header">
        <span class="hideAside" @click="collapse"

          ><i class="el-icon-s-fold" v-show="!isCollapse"></i>

          <i class="el-icon-s-unfold" v-show="isCollapse"></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 :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: 50px;
    line-height: 50px;
    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;

    .hideAside {
      @extend %cursor;

      i {
        font-size: 24px;

        line-height: 50px;
      }

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

        @include set-value(margin, 8px);

        font-size: 12px;

        @extend %cursor;

        position: relative;

        line-height: 50px;

      }

    }
    .userInfo {
      display: flex;
      align-items: center;
      height: 50px;
      @extend %cursor;
      .txt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 5px;
        p {
          line-height: 16px;
          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: 50px;

      }
    }
  }
  </style>