main
赵培友
3 years ago
parent
5e6de78f5f
commit
09bf6e9d58
5 changed files with 111 additions and 330 deletions
@ -1,256 +1,42 @@ |
||||
<template> |
||||
<div class="avue-top"> |
||||
<div class="top-bar__left"> |
||||
<div class="avue-breadcrumb" |
||||
:class="[{ 'avue-breadcrumb--active': isCollapse }]" |
||||
v-if="showCollapse"> |
||||
<i class="icon-navicon" |
||||
@click="setCollapse"></i> |
||||
</div> |
||||
</div> |
||||
<div class="top-bar__title"> |
||||
<div class="top-bar__item top-bar__item--show" |
||||
v-if="showMenu"> |
||||
<top-menu ref="topMenu"></top-menu> |
||||
</div> |
||||
<span class="top-bar__item" |
||||
v-if="showSearch"> |
||||
<top-search></top-search> |
||||
</span> |
||||
</div> |
||||
<div class="top-bar__right"> |
||||
<!-- <el-tooltip v-if="showColor" |
||||
effect="dark" |
||||
:content="$t('navbar.color')" |
||||
placement="bottom"> |
||||
<div class="top-bar__item"> |
||||
<top-color></top-color> |
||||
</div> |
||||
</el-tooltip> --> |
||||
<!-- <el-tooltip v-if="showDebug" |
||||
effect="dark" |
||||
:content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')" |
||||
placement="bottom"> |
||||
<div class="top-bar__item"> |
||||
<top-logs></top-logs> |
||||
</div> |
||||
</el-tooltip> --> |
||||
<el-tooltip v-if="showLock" |
||||
effect="dark" |
||||
:content="$t('navbar.lock')" |
||||
placement="bottom"> |
||||
<div class="top-bar__item"> |
||||
<top-lock></top-lock> |
||||
</div> |
||||
</el-tooltip> |
||||
<el-tooltip v-if="showTheme" |
||||
effect="dark" |
||||
:content="$t('navbar.theme')" |
||||
placement="bottom"> |
||||
<div class="top-bar__item top-bar__item--show"> |
||||
<top-theme></top-theme> |
||||
</div> |
||||
</el-tooltip> |
||||
<el-tooltip effect="dark" |
||||
:content="$t('navbar.notice')" |
||||
placement="bottom"> |
||||
<div class="top-bar__item top-bar__item--show"> |
||||
<top-notice></top-notice> |
||||
</div> |
||||
</el-tooltip> |
||||
<!-- <el-tooltip effect="dark" |
||||
:content="$t('navbar.language')" |
||||
placement="bottom"> |
||||
<div class="top-bar__item top-bar__item--show"> |
||||
<top-lang></top-lang> |
||||
</div> |
||||
</el-tooltip> --> |
||||
<el-tooltip v-if="showFullScren" |
||||
effect="dark" |
||||
:content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')" |
||||
placement="bottom"> |
||||
<div class="top-bar__item"> |
||||
<i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" |
||||
@click="handleScreen"></i> |
||||
</div> |
||||
</el-tooltip> |
||||
<img class="top-bar__img" |
||||
:src="userInfo.avatar"> |
||||
<el-dropdown> |
||||
<span class="el-dropdown-link"> |
||||
{{userInfo.userName}} |
||||
<i class="el-icon-arrow-down el-icon--right"></i> |
||||
</span> |
||||
<el-dropdown-menu slot="dropdown"> |
||||
<el-dropdown-item> |
||||
<router-link to="/">{{$t('navbar.dashboard')}}</router-link> |
||||
</el-dropdown-item> |
||||
<el-dropdown-item> |
||||
<router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link> |
||||
</el-dropdown-item> |
||||
<el-dropdown-item v-if="this.website.switchMode" @click.native="switchDept" |
||||
>{{$t('navbar.switchDept')}} |
||||
</el-dropdown-item> |
||||
<el-dropdown-item @click.native="logout" |
||||
divided>{{$t('navbar.logOut')}} |
||||
</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</el-dropdown> |
||||
<el-dialog title="用户信息选择" |
||||
append-to-body |
||||
:visible.sync="userBox" |
||||
width="350px"> |
||||
<avue-form ref="form" :option="userOption" v-model="userForm" @submit="submitSwitch"/> |
||||
</el-dialog> |
||||
<div class="top-left">{{tag.label}}</div> |
||||
<div class="top-right"> |
||||
<div class="avatar"></div> |
||||
<i class="el-icon-arrow-down"></i> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import {resetRouter} from '@/router/router' |
||||
import {mapGetters, mapState} from "vuex"; |
||||
import {fullscreenToggel, listenfullscreen} from "@/util/util"; |
||||
import topLock from "./top-lock"; |
||||
import topMenu from "./top-menu"; |
||||
import topSearch from "./top-search"; |
||||
import topTheme from "./top-theme"; |
||||
import topLogs from "./top-logs"; |
||||
import topColor from "./top-color"; |
||||
import topNotice from './top-notice' |
||||
import topLang from "./top-lang"; |
||||
|
||||
export default { |
||||
components: { |
||||
topLock, |
||||
topMenu, |
||||
topSearch, |
||||
topTheme, |
||||
topLogs, |
||||
topColor, |
||||
topNotice, |
||||
topLang |
||||
}, |
||||
name: "top", |
||||
data() { |
||||
return { |
||||
userBox: false, |
||||
userForm: { |
||||
deptId: '', |
||||
roleId: '' |
||||
}, |
||||
userOption: { |
||||
labelWidth: 70, |
||||
submitBtn: true, |
||||
emptyBtn: false, |
||||
submitText: '切换', |
||||
column: [ |
||||
{ |
||||
label: '部门', |
||||
prop: 'deptId', |
||||
type: 'select', |
||||
props: { |
||||
label: 'deptName', |
||||
value: 'id' |
||||
}, |
||||
dicUrl: '/api/blade-system/dept/select', |
||||
span: 24, |
||||
display: false, |
||||
rules: [{ |
||||
required: true, |
||||
message: "请选择部门", |
||||
trigger: "blur" |
||||
}], |
||||
}, |
||||
{ |
||||
label: '角色', |
||||
prop: 'roleId', |
||||
type: 'select', |
||||
props: { |
||||
label: 'roleName', |
||||
value: 'id' |
||||
}, |
||||
dicUrl: '/api/blade-system/role/select', |
||||
span: 24, |
||||
display: false, |
||||
rules: [{ |
||||
required: true, |
||||
message: "请选择角色", |
||||
trigger: "blur" |
||||
}], |
||||
}, |
||||
] |
||||
} |
||||
}; |
||||
}, |
||||
filters: {}, |
||||
created() { |
||||
}, |
||||
mounted() { |
||||
listenfullscreen(this.setScreen); |
||||
}, |
||||
computed: { |
||||
...mapState({ |
||||
showDebug: state => state.common.showDebug, |
||||
showTheme: state => state.common.showTheme, |
||||
showLock: state => state.common.showLock, |
||||
showFullScren: state => state.common.showFullScren, |
||||
showCollapse: state => state.common.showCollapse, |
||||
showSearch: state => state.common.showSearch, |
||||
showMenu: state => state.common.showMenu, |
||||
showColor: state => state.common.showColor |
||||
}), |
||||
...mapGetters([ |
||||
"userInfo", |
||||
"isFullScren", |
||||
"tagWel", |
||||
"tagList", |
||||
"isCollapse", |
||||
"tag", |
||||
"logsLen", |
||||
"logsFlag" |
||||
]) |
||||
}, |
||||
methods: { |
||||
handleScreen() { |
||||
fullscreenToggel(); |
||||
}, |
||||
setCollapse() { |
||||
this.$store.commit("SET_COLLAPSE"); |
||||
}, |
||||
setScreen() { |
||||
this.$store.commit("SET_FULLSCREN"); |
||||
}, |
||||
switchDept() { |
||||
const userId = this.userInfo.user_id; |
||||
const deptColumn = this.findObject(this.userOption.column, "deptId"); |
||||
deptColumn.dicUrl = `/api/blade-system/dept/select?userId=${userId}`; |
||||
deptColumn.display = true; |
||||
const roleColumn = this.findObject(this.userOption.column, "roleId"); |
||||
roleColumn.dicUrl = `/api/blade-system/role/select?userId=${userId}`; |
||||
roleColumn.display = true; |
||||
this.userBox = true; |
||||
}, |
||||
submitSwitch (form, done) { |
||||
this.$store.dispatch("refreshToken", form).then(() => { |
||||
this.userBox = false; |
||||
this.$router.push({path: "/"}); |
||||
}) |
||||
done(); |
||||
}, |
||||
logout() { |
||||
this.$confirm(this.$t("logoutTip"), this.$t("tip"), { |
||||
confirmButtonText: this.$t("submitText"), |
||||
cancelButtonText: this.$t("cancelText"), |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$store.dispatch("LogOut").then(() => { |
||||
resetRouter(); |
||||
this.$router.push({path: "/login"}); |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
import { mapGetters } from "vuex"; |
||||
export default { |
||||
computed: { |
||||
...mapGetters(["tagWel", "tagList", "tag", "website"]), |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.top-left { |
||||
color: #273240; |
||||
font-size: 30px; |
||||
font-weight: 500; |
||||
} |
||||
.top-right { |
||||
display: flex; |
||||
align-items: center; |
||||
.avatar { |
||||
width: 56px; |
||||
height: 56px; |
||||
border-radius: 50%; |
||||
background: skyblue; |
||||
margin-right: 18px; |
||||
} |
||||
i { |
||||
font-style: normal; |
||||
font-size: 20px; |
||||
color: #6e7e92; |
||||
font-weight: 800; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -1,108 +1,95 @@ |
||||
$height:64px; |
||||
$height: 64px; |
||||
.avue-top { |
||||
padding: 0 20px; |
||||
position: relative; |
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); |
||||
color: rgba(0, 0, 0, .65); |
||||
font-size: 28px; |
||||
height: $height; |
||||
line-height: $height; |
||||
box-sizing: border-box; |
||||
white-space: nowrap; |
||||
.el-menu-item{ |
||||
i,span{ |
||||
font-size: 13px; |
||||
} |
||||
} |
||||
.el-menu--horizontal>.el-menu-item { |
||||
height: $height; |
||||
line-height: $height; |
||||
} |
||||
height: 92px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
} |
||||
.avue-breadcrumb { |
||||
height: 100%; |
||||
i{ |
||||
font-size: 30px !important; |
||||
} |
||||
&--active { |
||||
transform:rotate(90deg); |
||||
} |
||||
height: 100%; |
||||
i { |
||||
font-size: 30px !important; |
||||
} |
||||
&--active { |
||||
transform: rotate(90deg); |
||||
} |
||||
} |
||||
|
||||
.top-menu { |
||||
box-sizing: border-box; |
||||
.el-menu-item { |
||||
padding: 0 10px; |
||||
border:none !important; |
||||
} |
||||
box-sizing: border-box; |
||||
.el-menu-item { |
||||
padding: 0 10px; |
||||
border: none !important; |
||||
} |
||||
} |
||||
|
||||
.top-search { |
||||
line-height: $height; |
||||
position: absolute !important; |
||||
left: 20px; |
||||
top:0; |
||||
width: 400px !important; |
||||
.el-input__inner { |
||||
font-size: 13px; |
||||
border: none; |
||||
background-color: transparent; |
||||
} |
||||
line-height: $height; |
||||
position: absolute !important; |
||||
left: 20px; |
||||
top: 0; |
||||
width: 400px !important; |
||||
.el-input__inner { |
||||
font-size: 13px; |
||||
border: none; |
||||
background-color: transparent; |
||||
} |
||||
} |
||||
|
||||
.top-bar__img { |
||||
margin: 0 8px 0 5px; |
||||
padding: 2px; |
||||
width: 30px; |
||||
height: 30px; |
||||
border-radius: 100%; |
||||
box-sizing: border-box; |
||||
border: 1px solid #eee; |
||||
vertical-align: middle; |
||||
margin: 0 8px 0 5px; |
||||
padding: 2px; |
||||
width: 30px; |
||||
height: 30px; |
||||
border-radius: 100%; |
||||
box-sizing: border-box; |
||||
border: 1px solid #eee; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.top-bar__left, |
||||
.top-bar__right { |
||||
height: $height; |
||||
position: absolute; |
||||
top: 0; |
||||
i{ |
||||
line-height: $height; |
||||
} |
||||
height: $height; |
||||
position: absolute; |
||||
top: 0; |
||||
i { |
||||
line-height: $height; |
||||
} |
||||
} |
||||
|
||||
.top-bar__left { |
||||
left: 20px; |
||||
left: 20px; |
||||
} |
||||
|
||||
.top-bar__right { |
||||
right: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
right: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.top-bar__item { |
||||
position: relative; |
||||
display: inline-block; |
||||
height: $height; |
||||
margin:0 10px; |
||||
font-size: 16px; |
||||
&--show { |
||||
display: inline-block !important; |
||||
} |
||||
.el-badge__content.is-fixed{ |
||||
top:12px; |
||||
right: 5px; |
||||
} |
||||
position: relative; |
||||
display: inline-block; |
||||
height: $height; |
||||
margin: 0 10px; |
||||
font-size: 16px; |
||||
&--show { |
||||
display: inline-block !important; |
||||
} |
||||
.el-badge__content.is-fixed { |
||||
top: 12px; |
||||
right: 5px; |
||||
} |
||||
} |
||||
|
||||
.top-bar__title { |
||||
height: 100%; |
||||
padding:0 40px; |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
font-size: inherit; |
||||
font-weight: 400; |
||||
height: 100%; |
||||
padding: 0 40px; |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
font-size: inherit; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
Loading…
Reference in new issue