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">
            <div class="userInfo">
              <img :src="avatar" />
              <div class="txt">
                <p>{{ `${this.$store.getters.info.name}` }}</p>
                <p>{{ `${permissions[0].roleName}` }}</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="fullScreen" @click="fullScreen">
            <el-tooltip
              class="item"
              effect="dark"
              content="全屏"
              placement="bottom"

              ><i class="el-icon-rank"></i

            ></el-tooltip>
          </li>

          <li>

            <el-tooltip
              class="item"
              effect="dark"
              content="退出"
              placement="bottom"
            >
              <i @click="logOut" class="el-icon-switch-button"></i
            ></el-tooltip>

          </li>

        </ul>
      </el-header>
      <!-- <tabNav></tabNav> -->
    </div>
  </template>
  
  <script>
  import Cookies from "js-cookie";
  import langSelect from "../../../components/lang/langSelect";
  import tabNav from "./tabNav";
  import UserInfo from "../../../components/userForm/userInfo";

  
  export default {
    name: "Header",

    components: { tabNav, langSelect, UserInfo },

    computed: {
      permissions: function () {
        return this.$store.getters.info.permissions || [];
      },
    },

    data() {
      return {
        isfullScreen: true,
        avatar: require("@/assets/images/womandefault.png"),
        dialogInfoVisible: false,
        dialogPassVisible: false,
        title: "",
        userId: "",

        isCollapse: false,

      };
    },

    created() {
      this.isCollapse = this.$store.getters.isCollapse;

    },

    methods: {
      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", this);

      },

      async logOut() {

        const { data,status } = await this.$request.logout();
        if (status == 0) {
          if (data) {

            window.location.href = data;
          } else {
            this.$router.push({
              path: "/login",
            });
          }
        } else {
          this.$message.error(message);
        }

      },
    },
  };
  </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-rank {
      font-size: 20px;
      transform: rotate(45deg);

      line-height: 50px;

    }
    .el-icon-switch-button {
      font-size: 18px;

      line-height: 50px;

    }
    .fa-lg {
      color: #fff;
    }
    .dropdown {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      .dropdown-link {
        height: 50px;

      }
    }
  }
  </style>