122 lines
4.2 KiB
Vue
122 lines
4.2 KiB
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="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+'/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: '项目经理',
|
|
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
|
|
}
|
|
|
|
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> |