项目页增加返回按钮,更换退出登录按钮

main
wuyize 2022-07-05 13:18:56 +08:00
parent 19a96c67d6
commit 75ad491e55
4 changed files with 95 additions and 89 deletions

View File

@ -0,0 +1 @@
<svg t="1656996011379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2265" width="512" height="512"><path d="M725.333333 736 725.333333 597.333333 426.666667 597.333333 426.666667 426.666667 725.333333 426.666667 725.333333 288 949.333333 512 725.333333 736M554.666667 85.333333C601.6 85.333333 640 123.733333 640 170.666667L640 341.333333 554.666667 341.333333 554.666667 170.666667 170.666667 170.666667 170.666667 853.333333 554.666667 853.333333 554.666667 682.666667 640 682.666667 640 853.333333C640 900.266667 601.6 938.666667 554.666667 938.666667L170.666667 938.666667C123.733333 938.666667 85.333333 900.266667 85.333333 853.333333L85.333333 170.666667C85.333333 123.733333 123.733333 85.333333 170.666667 85.333333L554.666667 85.333333Z" p-id="2266" fill="currentColor"></path></svg>

After

Width:  |  Height:  |  Size: 840 B

View File

@ -0,0 +1,67 @@
<template>
<el-tooltip
effect="dark"
content="退出登录"
placement="bottom"
>
<div @click="logout" class="div-quitButton">
<svg-icon style="width: 24px;height: 24px;" icon-class="logout" class-name="icon-quit"></svg-icon>
</div>
</el-tooltip>
</template>
<script>
import {ElMessage} from "element-plus";
import router from "../router";
import request from "../utils/request";
export default {
name: "LogoutButton",
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>

View File

@ -23,9 +23,7 @@
<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>
<logout-button></logout-button>
<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;
@ -54,6 +52,7 @@
</template>
<script setup>
import LogoutButton from "../components/LogoutButton";
</script>
<script>
// @ is an alias to /src
@ -74,30 +73,7 @@ export default {
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>
@ -109,24 +85,6 @@ export default {
max-width: 100%;
}
.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>

View File

@ -11,8 +11,11 @@
<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>
<span>概览</span>
</el-menu-item>
<el-menu-item index="2" :route="'/project/'+$route.params.projectId+'/workitem'">
<span>工作项</span>
@ -29,9 +32,8 @@
<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>
<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;
@ -44,7 +46,7 @@
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
staffJob
}}</span>
</div>
@ -57,12 +59,12 @@
</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 moment from "moment";
import axios from "axios";
import baseUrl from "@/utils/baseUrl";
import router from "@/router";
import {ElMessage} from "element-plus";
@ -70,32 +72,30 @@ export default {
name: "Project",
data() {
return {
project: {
projectName: ''
},
staffJob: '项目经理',
}
},
mounted() {
created() {
this.getProjectInfo();
},
methods: {
logout() {
getProjectInfo() {
const that = this
request({
url: 'staff/logout',
method: 'post',
url: 'project/'+this.$route.params.projectId,
method: 'get'
}).then(response => {
this.$store.commit('clearStaff')
ElMessage({
message: '已登出',
type: 'success',
})
router.push({path: '/login'})
if (response.data.code === 200) {
that.project = response.data.data
}
}).catch(function (error) {
console.log(error)
})
},
}
}
@ -103,24 +103,4 @@ export default {
<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>