ProjectManagement_frontend/src/views/Project.vue

<template>
  <el-container style="width: 100%;height: 100%">
    <el-aside width="260px"
              style="display: flex;flex-direction: column;align-items: stretch;overflow: unset">
      <el-menu
          router
          style="height: 100%"
          default-active="1">
        <div
            style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
          <svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
          <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
        </div>
        <el-menu-item index="1" :route="'/project/'+$route.params.projectId">
          <span>项目概览</span>
        </el-menu-item>
        <el-menu-item index="2" :route="'/project/'+$route.params.projectId+'/workitem'">
          <span>工作项</span>
        </el-menu-item>
        <el-menu-item index="3" :route="'/project/'+$route.params.projectId+'/demand'">
          <span>需求</span>
        </el-menu-item>
        <el-menu-item index="4" :route="'/project/'+$route.params.projectId+'/group'">
          <span>团队</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container style="background-color: #F2F3F5">
      <el-header height="100px">
        <div style="height: 60px; margin: 30px 30px 30px 30px; background-color: white; border-radius: 10px;
                  display: flex; flex-direction: row; align-items: center;justify-content: space-between">
          <div @click="logout" class="div-quitButton">
            <svg-icon style="width: 17px;height: 19px;" icon-class="quit" class-name="icon-quit"></svg-icon>
          </div>
          <div style="margin: 0 30px 0 30px; ;
                  display: flex; flex-direction: row-reverse; align-items: center">
            <div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px;
                      display: flex; justify-content: center;align-items: center;">
              <span style="color: white">{{ this.$store.state.staff===null? this.$store.state.staff:this.$store.state.staff.staffFullname[0] }}</span>
            </div>
            <div style="height: 100%; margin-right: 10px;
                      display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
            <span
                style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; ">
              {{ this.$store.state.staff===null? this.$store.state.staff: this.$store.state.staff.staffFullname }}</span>
              <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{
                  this.$store.state.staff===null? this.$store.state.staff:this.$store.state.staff.staffUsername
                }}</span>

            </div>
          </div>
        </div>
      </el-header>
      <el-main style="overflow: unset">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import request from "@/utils/request";
import moment from "moment";
import axios from "axios";
import baseUrl from "@/utils/baseUrl";
import router from "@/router";
import {ElMessage} from "element-plus";

export default {
  name: "Project",
  data() {
    return {

    }
  },

  mounted() {

  },
  methods: {
    logout() {
      request({
        url: 'staff/logout',
        method: 'post',
      }).then(response => {

        this.$store.commit('clearStaff')

        ElMessage({
          message: '已登出',
          type: 'success',
        })

        router.push({path: '/login'})
      }).catch(function (error) {
        console.log(error)
      })

    },
  }
}
</script>

<style scoped>

.icon-quit {
  color: #606266;
}

div.div-quitButton {
  margin-left: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.div-quitButton:hover {
  cursor: pointer;
}

div.div-quitButton:hover > .icon-quit {
  color: #409EFF;
}
</style>