work/src/components/MainPage.vue

<style lang="scss" scoped>
.main-page{
  height: 100%;
  display: flex;
}
.left-menu{
  width: 60px;
  background-image: linear-gradient(185deg,#536080,#2e374d);
  text-align: center;
  position: relative;
  .head{
    width: 40px;
    height: 40px;
    background: #3C76FC;
    border: solid 2px #f8f9fa;
    border-radius: 50%;
    margin: 30px auto 10px;
    color:#f8f9fa;
    p{
      height: 100%;
      line-height: 36px;
    }
  }
  &>p{
    color: white;
    font-size: 15px;
  }
  ul{
    margin-top: 20px;
    li{
      cursor: pointer;
      .route-menu{
        display: inline-block;
        width: 100%;
        height: 100%;
        img{
          margin: 15px auto;
          width: 25px;
          opacity: 0.5;
        }
        &:hover,&.router-link-active{
          background: #3C76FC;
          img{
            opacity: 1;
          }
        }
      }
    }
  }
}
.right-content{
  width: calc(100% - 60px);
  .tool-bar{
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    border-bottom: solid 1px #DEE0E3;
    display: flex;
    &>div{
      flex: auto;
      span:first-child{
        margin-right: 20px;
      }
      span:nth-child(3){
        margin-left: 50px;
      }
    }
    &>p{
      font-size: 16px;
    }
  }
  .route-area{
    height: calc(100% - 60px);
  }
}
.seting-bt{
  color: white;
  font-size: 20px;
  position: absolute;
  left: 20px;
  bottom: 20px;
  cursor: pointer;
}
.dialog-style{
  /deep/ .el-dialog__body{
    height: 500px;
    padding: 10px 20px;
    overflow: auto;
  }
  p{
    font-size: 16px;
    margin-bottom: 15px;
  }
}
</style>
<template>
<div class="main-page">
  <div class="left-menu">
    <div class="head"> 
      <p>头像</p>
    </div>
    <p>{{$store.state.loginUser.name}}</p>
    <ul>
      <li v-for="item in list" :key="item.name">
        <router-link class="route-menu" :to="item.link">
          <img :src="item.src">
        </router-link>
      </li>
    </ul>
    <i class="el-icon-s-release seting-bt" @click="logout"></i>
  </div>
  <div class="right-content">
    <div class="tool-bar">
      <div>
        <span v-if="ableChangeUser">查看计划：{{$store.state.checkUser.name}}</span>
        <el-button type="primary" icon="el-icon-edit" circle v-if="ableChangeUser" @click="personChange = true;currentUser = JSON.parse(JSON.stringify($store.state.checkUser))"></el-button>
      </div>
      <p>
        <label>年度总目标：{{currentPlan.name}}</label>
      </p>
    </div>
    <router-view class="route-area"></router-view>
  </div>
  <el-dialog
    class="dialog-style"
    title="切换成员"
    :visible.sync="personChange"
    width="500px">
    <p>查看：{{currentUser.name}}</p>
    <UserTree @chooseUser="chooseUser"></UserTree>
    <span slot="footer" class="dialog-footer">
      <el-button @click="personChange = false">取 消</el-button>
      <el-button type="primary" @click="changeCheckUser">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import { getCurrent } from '@/api/year';
import { logout } from "@/api/login";
import UserTree from "@/components/MainPage/Department/UserTree";

export default {
  name: 'MainPage',
  components: {
    UserTree
  },
  data () {
    return {
      list:[
      // {
      //   name: '待办',
      //   src: require('@/images/icon/todo.png'),
      //   link: '/app/mainPage/todo'
      // },
      {
        name: '年度计划',
        src: require('@/images/icon/year.png'),
        link: '/app/mainPage/year'
      },{
        name: '季度计划',
        src: require('@/images/icon/quarter.png'),
        link: '/app/mainPage/quarter'
      },{
        name: '月计划',
        src: require('@/images/icon/month.png'),
        link: '/app/mainPage/month'
      },{
        name: '人员',
        src: require('@/images/icon/person.png'),
        link: '/app/mainPage/department'
      }],
      personChange: false,
      currentPlan:{},
      currentUser: {}
	  }
  },
  created() {
    this.getCurrent();
  },
  computed: {
      ableChangeUser() {
          return this.$route.name == 'Month'
      },
  },
  watch: {
    '$store.state.curPlanSin'(val){
      this.getCurrent();
    }
  },
  methods: {
    getCurrent(){
      let currentYear = new Date().getFullYear();
      getCurrent(currentYear).then((data) => {
        if(data.result){
          this.currentPlan = data.data;
        }
      })
    },
    chooseUser(val){
      this.currentUser = val;
    },
    changeCheckUser(){
      this.$store.dispatch('setCheckUser', this.currentUser);
      this.personChange = false;
    },
    logout() {
      logout()
        .then(res => {
          if (res && res.ok == "1") {
            this.$router.replace({path: '/login'});
          } else {
            this.$Message.error((res && res.msg) || "登出失败！");
          }
        })
        .catch(() => {
          this.$Message.error("登出失败！");
        });
    },
  }
}
</script>