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-button style="width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: flex-start"
                   text :icon="ArrowLeft" @click="this.router.push({path: '/'})">返回</el-button>

        <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">
          <logout-button></logout-button>
          <span style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">{{project.projectName}}</span>
          <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;">{{
                  staffJob
                }}</span>

            </div>
          </div>
        </div>
      </el-header>
      <el-main style="overflow: unset">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import {ArrowLeft} from '@element-plus/icons'
import LogoutButton from "../components/LogoutButton";
</script>
<script>
import request from "@/utils/request";
import router from "@/router";
import {ElMessage} from "element-plus";

export default {
  name: "Project",
  data() {
    return {
      project: {
        projectName: ''
      },
      staffJob: '项目经理',
    }
  },

  created() {
    this.getProjectInfo();
  },
  methods: {
    getProjectInfo() {
      const that = this
      request({
        url: 'project/'+this.$route.params.projectId,
        method: 'get'

      }).then(response => {
        if (response.data.code === 200) {
          that.project = response.data.data
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
  }
}
</script>

<style scoped>

</style>