<template>
|
<div class="base-nav-comp">
|
<div class="base-nav-comp__toggle" @click="toggleMenu">
|
<svg
|
:class="{ 'is-active': !menuShrink }"
|
class="base-nav-comp__toggle__svg"
|
viewBox="0 0 1024 1024"
|
xmlns="http://www.w3.org/2000/svg"
|
width="64"
|
height="64"
|
>
|
<path
|
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
|
/>
|
</svg>
|
</div>
|
<!-- <div class="base-nav-comp__breadcrumb">-->
|
<!-- <el-ext-breadcrumb :menus="menus"></el-ext-breadcrumb>-->
|
<!-- </div>-->
|
<div class="base-nav-comp__right">
|
<!-- <el-tooltip content="主题色" effect="dark" placement="bottom">-->
|
<!-- <div class="base-nav-comp__right__action">-->
|
<!-- <base-theme-picker />-->
|
<!-- </div>-->
|
<!-- </el-tooltip>-->
|
<el-tooltip
|
:content="$t('nav.layoutSize')"
|
effect="dark"
|
placement="bottom"
|
>
|
<el-dropdown trigger="click" @command="handleSize">
|
<div class="base-nav-comp__right__action">
|
<i class="fa fa-text-height"></i>
|
</div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="item in sizeList"
|
:key="item.value"
|
:disabled="size === item.value"
|
:command="item.value"
|
>
|
{{ item.label }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</el-tooltip>
|
<!-- <el-tooltip-->
|
<!-- :content="$t('nav.language')"-->
|
<!-- effect="dark"-->
|
<!-- placement="bottom"-->
|
<!-- >-->
|
<!-- <el-dropdown trigger="click" @command="handleLanguage">-->
|
<!-- <div class="base-nav-comp__right__action">-->
|
<!-- <i class="fa fa-language"></i>-->
|
<!-- </div>-->
|
<!-- <el-dropdown-menu slot="dropdown">-->
|
<!-- <el-dropdown-item-->
|
<!-- v-for="item in languageList"-->
|
<!-- :key="item.value"-->
|
<!-- :disabled="$i18n.locale === item.value"-->
|
<!-- :command="item.value"-->
|
<!-- >-->
|
<!-- {{ item.label }}-->
|
<!-- </el-dropdown-item>-->
|
<!-- </el-dropdown-menu>-->
|
<!-- </el-dropdown>-->
|
<!-- </el-tooltip>-->
|
<el-dropdown trigger="click" @command="handleUser">
|
<div class="base-nav-comp__right__user base-nav-comp__right__action">
|
<img
|
v-if="avatar"
|
:src="avatar"
|
class="base-nav-comp__right__user__avatar"
|
/>
|
<img
|
src="~static/images/avatar.png"
|
class="base-nav-comp__right__user__avatar"
|
/>
|
<div class="base-nav-comp__right__user__nickname">
|
{{ nickName || loginName }}
|
</div>
|
</div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="changePassword">{{
|
$t('nav.changePassword')
|
}}</el-dropdown-item>
|
<el-dropdown-item command="logout">{{
|
$t('nav.logout')
|
}}</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<extra-dialog
|
ref="passwordDialog"
|
:title="$t('nav.changePassword')"
|
:dialog-attrs="{ appendToBody: true }"
|
:form-attrs="{ labelWidth: 'auto' }"
|
:form="passwordForm"
|
:at-confirm="onPasswordFormConfirm"
|
@formUpdate="onPasswordFormUpdate"
|
></extra-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapGetters } from 'vuex'
|
import { joinLocaleText } from 'el-business'
|
|
export default {
|
name: 'BaseNav',
|
data() {
|
return {
|
sizeList: [
|
{ label: 'Medium', value: 'medium' },
|
{ label: 'Small', value: 'small' },
|
{ label: 'Mini', value: 'mini' },
|
],
|
languageList: [
|
{ label: '中文', value: 'zh-CN' },
|
{ label: 'English', value: 'en' },
|
],
|
passwordFormInfo: {},
|
passwordForm: [
|
{
|
label: this.$t('nav.oldPassword'),
|
id: 'oldPassword',
|
type: 'input',
|
el: { type: 'password' },
|
rules: {
|
required: true,
|
message: joinLocaleText(
|
this.$t('elBus.common.pleaseEnter'),
|
this.$t('nav.oldPassword')
|
),
|
trigger: 'blur',
|
},
|
},
|
{
|
label: this.$t('nav.newPassword'),
|
id: 'password',
|
type: 'input',
|
el: { type: 'password' },
|
rules: [
|
{
|
required: true,
|
message: joinLocaleText(
|
this.$t('elBus.common.pleaseEnter'),
|
this.$t('nav.newPassword')
|
),
|
trigger: 'blur',
|
},
|
{
|
pattern:
|
/^(?:(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[-_!@#$%^&*? ]))\S{8,20}$/,
|
message: this.$t('nav.passwordPattern'),
|
trigger: 'blur',
|
},
|
],
|
},
|
{
|
label: this.$t('nav.confirmPassword'),
|
id: 'confirmPassword',
|
type: 'input',
|
el: { type: 'password' },
|
rules: [
|
{
|
required: true,
|
message: joinLocaleText(
|
this.$t('elBus.common.pleaseEnter'),
|
this.$t('nav.confirmPassword')
|
),
|
trigger: 'blur',
|
},
|
{
|
validator: (rule, value, callback) => {
|
if (value !== this.passwordFormInfo.password) {
|
callback(new Error(this.$t('nav.passwordInconsistent')))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur',
|
},
|
],
|
},
|
],
|
}
|
},
|
computed: {
|
...mapState({
|
menuShrink: (state) => state.app.menuShrink,
|
size: (state) => state.app.size,
|
}),
|
...mapGetters({
|
nickName: 'auth/nickName',
|
loginName: 'auth/loginName',
|
avatar: 'auth/avatar',
|
tel: 'auth/tel',
|
menus: 'permission/menus',
|
}),
|
},
|
methods: {
|
toggleMenu() {
|
this.$store.commit('app/SET_MENU_SHRINK', !this.menuShrink)
|
},
|
handleSize(size) {
|
this.$store.commit('app/SET_SIZE', size)
|
window.location.reload()
|
},
|
handleLanguage(language) {
|
const url = this.switchLocalePath(language)
|
window.location.href = url
|
},
|
handleUser(command) {
|
this[command]()
|
},
|
logout() {
|
this.$store.dispatch('auth/clearLoginInfo')
|
this.$router.replace('/login')
|
},
|
changePassword() {
|
this.$refs.passwordDialog.show()
|
},
|
onPasswordFormUpdate(e) {
|
this.passwordFormInfo = { ...e }
|
},
|
async onPasswordFormConfirm(e) {
|
const { code } = await this.$services.auth.changePassword(e)
|
if (code === 0) {
|
this.$message.success('密码修改成功')
|
return true
|
}
|
return false
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.base-nav-comp {
|
height: 50px;
|
overflow: hidden;
|
position: relative;
|
background: #fff;
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
display: flex;
|
align-items: center;
|
&__toggle {
|
padding: 0 15px;
|
line-height: 46px;
|
height: 100%;
|
float: left;
|
cursor: pointer;
|
transition: background 0.3s;
|
-webkit-tap-highlight-color: transparent;
|
|
&:hover {
|
background: rgba(0, 0, 0, 0.025);
|
}
|
&__svg {
|
display: inline-block;
|
vertical-align: middle;
|
width: 20px;
|
height: 20px;
|
&.is-active {
|
transform: rotate(180deg);
|
}
|
}
|
}
|
&__breadcrumb {
|
margin-left: 8px;
|
}
|
&__right {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding: 0 20px;
|
height: 100%;
|
.el-dropdown {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
&__user {
|
&__avatar {
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
}
|
&__nickname {
|
font-size: 14px;
|
color: $main-title-color;
|
margin-left: 10px;
|
}
|
}
|
&__action {
|
padding: 0 15px;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
height: 100%;
|
i {
|
font-size: 16px;
|
color: $main-title-color;
|
}
|
&:hover {
|
background-color: rgba(0, 0, 0, 0.025);
|
}
|
}
|
}
|
}
|
</style>
|
