<template>
|
<div>
|
<div
|
class="navbar"
|
:class="{'display_btw':$store.state.settings.menuIsHorizontal}"
|
:style="{background: $store.state.settings.headBackgroundColorValue? '#304156':'#fff'}"
|
>
|
|
<hamburger
|
v-if="!$store.state.settings.menuIsHorizontal"
|
:is-active="sidebar.opened"
|
class="hamburger-container"
|
@toggleClick="toggleSideBar"
|
/>
|
|
<breadcrumb
|
class="breadcrumb-container"
|
:style="{marginLeft:$store.state.settings.menuIsHorizontal?'60px':'40px'}"
|
/>
|
|
<el-tooltip class="item" effect="dark" content="刷新页面" placement="bottom">
|
<div
|
:style="{
|
color:$store.state.settings.headBackgroundColorValue?'#fff':'#000',
|
marginLeft:$store.state.settings.menuIsHorizontal?'10px':'44px',
|
position:'absolute',
|
}"
|
style="padding:0 8px"
|
@click="pageRefreshClick"
|
>
|
<i class="el-icon-refresh-right" style="font-size: 20px;cursor: pointer;line-height:50px" />
|
</div>
|
</el-tooltip>
|
|
<el-menu
|
v-if="$store.state.settings.menuIsHorizontal"
|
router
|
class="menuHorizontal el-menu-demo"
|
mode="horizontal"
|
:default-active="activeMenu"
|
:text-color="$store.state.settings.headBackgroundColorValue?'#fff':'#87909c'"
|
:background-color="$store.state.settings.headBackgroundColorValue?variables.menuBg:'#fff'"
|
:active-text-color="variables.menuActiveText"
|
@select="handleSelect"
|
>
|
<!-- menu-trigger="click"-->
|
<!-- :text-color="variables.menuText"-->
|
<menu-item-ex
|
v-for="route in permission_routes"
|
:key="route.path"
|
:item="route"
|
:base-path="route.path"
|
/>
|
</el-menu>
|
|
<div class="right-menu">
|
|
<!-- <template v-if="device!=='mobile'">-->
|
<template>
|
<el-tooltip class="item" effect="dark" content="菜单搜索" placement="bottom">
|
<search id="header-search" class="right-menu-item" />
|
</el-tooltip>
|
<!-- <error-log class="errLog-container right-menu-item hover-effect" />-->
|
<el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
</el-tooltip>
|
<div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA;padding:0 8px;cursor: pointer">
|
{{ stu_torgname }}
|
</div>
|
<!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
|
<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
|
<!-- </el-tooltip>-->
|
</template>
|
|
<el-dropdown class="avatar-container" trigger="hover">
|
<div class="avatar-wrapper">
|
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
|
<div style="display: flex;align-items: center;margin-top: -5px">
|
|
<i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
|
<div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
|
</div>
|
|
<!-- <i class="el-icon-caret-bottom" />-->
|
</div>
|
<el-dropdown-menu slot="dropdown" class="user-dropdown" style="text-align: center">
|
<!-- <router-link to="/">-->
|
<!-- <el-dropdown-item>-->
|
<!-- Home-->
|
<!-- </el-dropdown-item>-->
|
<!-- </router-link>-->
|
<!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
|
<!-- <el-dropdown-item>Github</el-dropdown-item>-->
|
<!-- </a>-->
|
<!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
|
<!-- <el-dropdown-item>Docs</el-dropdown-item>-->
|
<!-- </a>-->
|
<el-dropdown-item @click.native="editPassword">
|
<span style="display:block;">修改密码</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided @click.native="systemSetting">
|
<span style="display:block;">系统配置</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided @click.native="logout">
|
<span style="display:block;font-weight: bolder">退出</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
|
<el-dialog
|
v-el-drag-dialog
|
title="修改密码"
|
:visible.sync="dialogVisible"
|
width="500px"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
@closed="handleClose"
|
>
|
<el-form ref="dialogForm" :rules="formRules" :model="form" label-width="100px">
|
<!-- <el-form-item label="用户编码：">-->
|
<!-- <div>{{ usercode }}</div>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="用户名称：">-->
|
<!-- <div> {{ username }}</div>-->
|
<!-- </el-form-item>-->
|
<el-form-item label="原密码：" prop="password">
|
<el-input v-model="form.password" style="width: 220px;" />
|
</el-form-item>
|
<el-form-item label="新密码：" prop="newpassword">
|
<el-input v-model="form.newpassword" style="width: 220px;" />
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button @click="dialogVisibleCancel">返回</el-button>
|
<el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
|
</div>
|
|
<right-panel ref="rightPanel">
|
<settings />
|
</right-panel>
|
|
</div>
|
|
</template>
|
|
<script>
|
import elDragDialog from '@/directive/el-drag-dialog'
|
|
const SER_HZ = /^[\u4e00-\u9fa5]+$/
|
import { mapGetters } from 'vuex'
|
import MenuItemEx from './Sidebar/MenuItemEx'
|
import Breadcrumb from '@/components/Breadcrumb'
|
import Hamburger from '@/components/Hamburger'
|
import { getCookie } from '@/utils/auth'
|
import { UpdateUserPassword } from '@/api/user'
|
import Search from '@/components/HeaderSearch'
|
import Screenfull from '@/components/Screenfull'
|
import variables from '@/styles/variables.scss'
|
import RightPanel from '@/components/RightPanel'
|
import Settings from '../components/Settings/index'
|
|
export default {
|
components: {
|
MenuItemEx,
|
Breadcrumb,
|
Hamburger,
|
Search,
|
Screenfull,
|
Settings,
|
RightPanel
|
},
|
directives: { elDragDialog },
|
|
data() {
|
const validatePassword1 = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('请输入原密码！'))
|
} else {
|
if (SER_HZ.test(value)) {
|
return callback(new Error('密码不能为中文！'))
|
} else {
|
callback()
|
}
|
}
|
}
|
const validatePassword2 = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('请输入新密码！'))
|
} else {
|
if (SER_HZ.test(value)) {
|
return callback(new Error('密码不能为中文！'))
|
} else {
|
callback()
|
}
|
}
|
}
|
return {
|
usercode: '',
|
username: '',
|
form: {
|
password: '',
|
newpassword: ''
|
},
|
dialogVisible: false,
|
formRules: {
|
password: [
|
{ required: true, validator: validatePassword1, trigger: ['blur', 'change'] }
|
],
|
newpassword: [
|
{ required: true, validator: validatePassword2, trigger: ['blur', 'change'] }
|
]
|
},
|
stu_torgname: '',
|
show: false
|
}
|
},
|
inject: [
|
'reload'
|
],
|
created() {
|
this.usercode = getCookie('navTabId')
|
this.username = getCookie('username')
|
this.stu_torgname = getCookie('stu_torgname') === '' ? '系统管理员' : getCookie('stu_torgname')
|
},
|
computed: {
|
...mapGetters([
|
'sidebar',
|
'avatar',
|
'permission_routes'
|
]),
|
routes() {
|
return this.$router.options.routes
|
},
|
activeMenu() {
|
const route = this.$route
|
const { meta, path } = route
|
// if set path, the sidebar will highlight the path you set
|
if (meta.activeMenu) {
|
return meta.activeMenu
|
}
|
// const p = '/' + path.split('/')[1]
|
// console.log(p)
|
return path
|
},
|
variables() {
|
// console.log(variables, 2333)
|
// 先输出这个variables值 然后修改其属性值
|
variables.menuActiveText = this.$store.state.settings.theme
|
// background: rgb(48, 65, 86);
|
// variables.menuBg = this.$store.state.settings.headBackgroundColorValue && this.$store.state.settings.menuIsHorizontal ? `rgb(48,65,86)` : '#fff'
|
return variables
|
}
|
},
|
methods: {
|
systemSetting() {
|
this.$refs.rightPanel.show = !this.$refs.rightPanel.show
|
this.$refs.rightPanel.addEventClick()
|
},
|
pageRefreshClick() {
|
this.reload()
|
const tabViews = this.$store.state.tagsView.visitedViews.map(item => {
|
return {
|
fullPath: item.fullPath,
|
hash: item.hash,
|
meta: { ...item.meta },
|
name: item.name,
|
params: { ...item.params },
|
path: item.path,
|
query: { ...item.query },
|
title: item.title
|
}
|
})
|
sessionStorage.setItem('tabViews', JSON.stringify(tabViews))
|
},
|
handleSelect(key, keyPath) {
|
// console.log(key, keyPath)
|
},
|
toggleSideBar() {
|
this.$store.dispatch('app/toggleSideBar')
|
},
|
async logout() {
|
await this.$store.dispatch('user/logout')
|
this.$message.success('退出成功！')
|
this.$router.push(`/login`)
|
},
|
editPassword() {
|
this.dialogVisible = true
|
},
|
dialogVisibleCancel() {
|
this.dialogVisible = false
|
},
|
dialogVisibleConfirm() {
|
this.$refs.dialogForm.validate(valid => {
|
if (valid) {
|
const data = {
|
usercode: this.usercode,
|
username: this.username,
|
password: this.form.password,
|
newpassword: this.form.newpassword
|
}
|
UpdateUserPassword(data).then(res => {
|
if (res.code === '200') {
|
this.$message.success('修改成功！')
|
this.dialogVisible = false
|
}
|
})
|
}
|
})
|
},
|
handleClose() {
|
this.form.password = ''
|
this.form.newpassword = ''
|
this.$refs.dialogForm.clearValidate()
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.display_btw {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.navbar {
|
height: 50px;
|
overflow: hidden;
|
position: relative;
|
//background: #fff;
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
|
//background-color: #f8f8fa;
|
|
.hamburger-container {
|
line-height: 46px;
|
height: 100%;
|
float: left;
|
cursor: pointer;
|
transition: background .3s;
|
-webkit-tap-highlight-color: transparent;
|
|
&:hover {
|
background: rgba(0, 0, 0, .025)
|
}
|
}
|
|
.breadcrumb-container {
|
float: left;
|
width: 200px;
|
}
|
|
.menuHorizontal {
|
display: flex !important;
|
justify-content: center !important;
|
|
::v-deep .svg-icon {
|
margin-right: 8px;
|
//margin-left: 8px !important;
|
}
|
|
::v-deep .el-submenu__title > span {
|
//margin-right: 8px !important;
|
}
|
|
::v-deep .submenu-title-noDropdown > span {
|
//margin-right: 8px !important;
|
}
|
|
::v-deep .el-submenu__icon-arrow {
|
display: none;
|
}
|
|
}
|
|
.right-menu {
|
float: right;
|
height: 100%;
|
line-height: 50px;
|
display: flex;
|
//min-width: 300px;
|
|
&:focus {
|
outline: none;
|
}
|
|
.right-menu-item {
|
display: inline-block;
|
padding: 0 8px;
|
height: 100%;
|
font-size: 18px;
|
color: #5a5e66;
|
vertical-align: text-bottom;
|
|
&.hover-effect {
|
cursor: pointer;
|
transition: background .3s;
|
|
&:hover {
|
background: rgba(0, 0, 0, .025)
|
}
|
}
|
}
|
|
.avatar-container {
|
margin-right: 30px;
|
|
.avatar-wrapper {
|
margin-top: 5px;
|
position: relative;
|
cursor: pointer;
|
|
.user-avatar {
|
cursor: pointer;
|
width: 60px;
|
height: 40px;
|
border-radius: 10px;
|
}
|
|
.el-icon-caret-bottom {
|
cursor: pointer;
|
position: absolute;
|
right: -20px;
|
top: 25px;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
<style>
|
.el-menu--horizontal .el-menu {
|
background-color: transparent !important;
|
margin-top: -2px;
|
}
|
|
</style>
|
