jk-temporary-workers-portal/src/views/layout/index.vue

<template>
  <el-container class="outter-container">
    <el-header>
      <h3><img src="../../assets/logo.png" height="50"/></h3>
      <div class="user-info">
        <i class="el-icon-s-custom"></i>
        <span v-html="user.realName" style="margin-right:10px;"></span>
        <a href="#" @click="logout()">退出</a>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="sidebarWidth" v-loading="loading" class="sidebar">
        <div class="sidebar-collpase-btn" @click="collapse=!collapse" style="cursor:pointer">
          <i :class="sidbarHandlerClass"></i>
        </div>
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          :collapse="collapse"
          :collapse-transition="false"
        >
          <menu-tree-item :routes="menuList"></menu-tree-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import MenuTreeItem from "@/components/MenuTreeItem"
import menuApi from "@/api/sys/menu"
import userApi from "@/api/sys/user"

export default {
  data() {
    return {
      menuList: [],
      loading: false,
      collapse: false,
      user: {}
    };
  },
  computed:{
    sidebarWidth() {
      return !this.collapse ? "200px" : "64px";
    },
    sidbarHandlerClass(){
      return {
        "iconfont" : true,
        "icon-icon_left_arrow" : this.collapse,
        "icon-icon_right_arrow" : !this.collapse
      }
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      //console.log(key, keyPath);
      this.$router.push({ path: key });
    },
    logout() {
      this.$store.dispatch("user/logout").then(() => {
        this.$router.push({ path: "/login" });
      });
    }
  },
  components: {
    "menu-tree-item" : MenuTreeItem
  },
  mounted() {
    this.loading = true;

    userApi.userInfo().then(resp=>{
      if(resp.data.result){
        this.user = resp.data.data;
      }
    });

    menuApi.getMenuTree().then(response=>{
      console.log(response);

      var jsonData = response.data;

      this.menuList = jsonData.data;
    
      this.loading = false;
    }).catch(exception=>{
      this.$message.error(exception + "");
      this.loading = false;
    });
  }
};
</script>

<style lang="scss" scoped>
.outter-container {
  flex: 1;
}

.el-header {
  position: relative;
  background-color: #fff;
  color: #333;
  text-align: left;
  height: 70px !important;
  line-height:70px;
  // border-bottom: 2px solid rgb(36,61,162);
  border-bottom: 2px solid #64a63c;
}

.el-header h3 {
  margin: 5px;
  padding: 0px;
}

.el-aside {
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.el-aside .el-menu {
  flex: 1;
  background-color:rgb(238, 238, 238);
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding: 0px;
}

.el-menu-vertical-demo {
  text-align: left;
}

.user-info{
  position: absolute;
  right:20px;
  bottom:10px;
  font-size:14px;
  line-height: 30px;

  a{
    color:blue;
    cursor: pointer;
    text-decoration: none;
  }

  a:hover{
    text-decoration: underline;
  }
}

.sidebar{
  position:relative;
  overflow:visible !important;
}

.sidebar-collpase-btn{
  position:absolute;
  width:12px;
  height:53px;
  border-radius: 0px 10px 10px 0px;
  top:200px;
  right:-12px;
  background-color:#eeeeee;
  z-index: 10000;
  padding-top:30px;
  padding-right:4px;
  color:black;
  font-weight: bold;
}
</style>