前端初始化
This commit is contained in:
zer0Black
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/imgs/logo.jpg" alt="">
|
||||
</div>
|
||||
<div class="breadcrumb">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/report/list', query: {showId: $route.query.id } }"><img
|
||||
src="@/assets/imgs/icon-home.png" alt=""><span>首页</span></el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="this.$route.path == '/system/urlIndex'">{{this.$store.state.menuName}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-else-if="this.$route.path == '/system/401Page'">{{this.$store.state.menuName}}</el-breadcrumb-item>
|
||||
<template v-else v-for="item in $route.meta.crumb">
|
||||
<el-breadcrumb-item>{{ item }}</el-breadcrumb-item>
|
||||
</template>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;margin-left: auto">
|
||||
<div class="setsys-menu" @click="goSystemPage" v-if="isSystemManager">
|
||||
<img src="../assets/imgs/icon-setting.png" alt="" width="14" height="14">
|
||||
<span>系统设置</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<el-popover v-model="popoverValue" trigger="click" transition="">
|
||||
<div class="user-operate">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-button type="text" @click="logout">退出系统</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="user" slot="reference">
|
||||
<img src="@/assets/imgs/avatar.png" alt="">
|
||||
<span>你好，{{$store.state.userInfo.usname}}</span>
|
||||
<i v-if="!popoverValue" class="el-icon-arrow-down"></i>
|
||||
<i v-else class="el-icon-arrow-up"></i>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex';
|
||||
import {BASE_URL} from "../utils/http";
|
||||
|
||||
export default {
|
||||
name: "Header",
|
||||
data() {
|
||||
return {
|
||||
popoverValue: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
menuData: 'menuData',
|
||||
}),
|
||||
isSystemManager() {
|
||||
return this.menuData.some(menu => menu.id === 'AVL9YSB7ZF');
|
||||
},
|
||||
isSystemManagerBelong() {
|
||||
return this.menuData.some(menu => menu.id === 'AVL9YSB7ZF' && menu.belong == 1);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 退出系统
|
||||
logout() {
|
||||
this.$confirm('确定退出系统?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$api.login.logout().then(_ => {
|
||||
this.$message.success('退出成功');
|
||||
this.$store.commit('saveUserInfo', null);
|
||||
|
||||
// var sevice = "http://"+window.location.host+"/";
|
||||
// var serviceUrl = encodeURIComponent(sevice);
|
||||
//正式
|
||||
// window.open("https://caddmuat.changan.com.cn/cas/logout?service=http://10.64.23.30:7766/home", '_self');
|
||||
//测试
|
||||
// window.open(BASE_URL.BASE_CHANGAN + "/logout?service=" + BASE_URL.BASE_LOCAL + "/login?loginType=1", '_self');
|
||||
this.$router.push('/login');
|
||||
})
|
||||
})
|
||||
},
|
||||
goSystemPage() {
|
||||
if(this.isSystemManagerBelong){
|
||||
if (this.$route.path === '/system/menu') return;
|
||||
this.$store.commit('savePathUrl', '/system/menu');
|
||||
this.$router.push({path: '/system/menu', query: {id: 'AVL9YSB7ZF'}});
|
||||
}else{
|
||||
if(this.$route.path == '/system/401Page'){
|
||||
|
||||
}else{
|
||||
this.$router.replace({name: '401Page', query: {id: 'AVL9YSB7ZF'}});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: rgb(4, 71, 155);
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: auto !important;
|
||||
height: 40px !important;
|
||||
// width: 172px;
|
||||
// height: 26px;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding-left: 30px;
|
||||
height: 100%;
|
||||
|
||||
::v-deep .el-breadcrumb {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.el-breadcrumb__item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.el-breadcrumb__inner {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-breadcrumb__separator {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setsys-menu {
|
||||
margin-right: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/*position: absolute;*/
|
||||
/*right: 225px;*/
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
color: #FFFFFF;
|
||||
margin-left: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
/*position: absolute;*/
|
||||
/*top: 0;*/
|
||||
/*right: 0;*/
|
||||
/*bottom: 0;*/
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 19px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 17px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-operate {
|
||||
::v-deep .el-button {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user