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="menuDefaultActive">
        <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="back">返回
        </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+'/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">{{
                  getStaffFullname()[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; ">
              {{
                getStaffFullname()
              }}</span>
              <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{
                  projectStaffPosition
                }}</span>

            </div>
          </div>
        </div>
      </el-header>
      <el-main style="overflow: unset">
        <router-view
            :projectAccessLevel="projectAccessLevel"
            :projectGroup="projectGroup"
            @groupChanged="groupChanged"
        ></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: ''
      },
      projectGroup: [],
      projectStaffPosition: '',
      projectAccessLevel: 3,
      menuDefaultActive: '1',
    }
  },

  created() {
    switch (this.$route.path.split('/').pop()) {
      case 'workitem':
        this.menuDefaultActive = '2';
        break
      case 'group':
        this.menuDefaultActive = '3';
        break
      default:
        this.menuDefaultActive = '1';
        break
    }
    const that = this
    request({
      url: 'project/' + this.$route.params.projectId + '/group/' + this.$store.state.staff.staffId,
      method: 'get',
    }).then(response => {
      if (response.data.code === 200) {
        that.projectStaffPosition = response.data.data.projectStaffPosition.replaceAll(',','，')
        that.projectAccessLevel = response.data.data.projectAccessLevel
      }
    }).catch(function (error) {
      console.log(error)
    })
    this.getProjectInfo();
    this.getProjectGroup()
  },
  methods: {
    back() {
      router.push({path: '/'})
    },
    getStaffFullname() {
      return this.$store.state.staff === null ? ' ' : this.$store.state.staff.staffFullname
    },
    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)
      })
    },
    getProjectGroup() {
      const that = this
      request({
        url: 'project/' + this.$route.params.projectId + '/group',
        method: 'get'

      }).then(response => {
        if (response.data.code === 200) {
          that.projectGroup = response.data.data.records
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    groupChanged() {
      console.log('groupChanged')
      this.getProjectGroup()
    }
  }
}
</script>

<style scoped>

</style>