<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>
|
|
<el-tooltip class="item" effect="dark" content="我的消息" placement="bottom">
|
<el-badge :is-dot="$store.state.settings.isDot" class="item right-menu-item hover-effect">
|
<i class="el-icon-bell" @click="$message('点击了我的消息！');$store.state.settings.isDot=false" />
|
</el-badge>
|
</el-tooltip>
|
|
<div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA;cursor: pointer;margin-right:5px">
|
{{ stu_torgname }}
|
|
<!-- <el-dropdown v-if="stu_torgname.toString().length>0" class="avatar-container" trigger="hover">-->
|
<!-- <div class="avatar-wrapper">-->
|
<!-- <div style="display: flex;align-items: center;margin-top: -5px">-->
|
|
<!-- <i class="el-icon-office-building" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />-->
|
<!-- <div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ stu_torgname }}</div>-->
|
<!-- </div>-->
|
|
<!-- </div>-->
|
<!-- <el-dropdown-menu-->
|
<!-- v-if="stu_torgname.toString().length>0"-->
|
<!-- slot="dropdown"-->
|
<!-- class="user-dropdown"-->
|
<!-- style="text-align: center"-->
|
<!-- >-->
|
<!-- <el-dropdown-item-->
|
<!-- v-for="(item,index) in $stu_torg"-->
|
<!-- :key="item.torg_code"-->
|
<!-- :divided="index!==0"-->
|
<!-- >-->
|
<!-- <!– @click.native="changeTrog(item)"–>-->
|
<!-- <span style="display:block;">{{ item.torg_name }}</span>-->
|
<!-- </el-dropdown-item>-->
|
|
<!-- </el-dropdown-menu>-->
|
<!-- </el-dropdown>-->
|
|
</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, setCookie } 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'
|
import * as signalR from '@aspnet/signalr'
|
import { ButtonData } from '@/api/basicSettings'
|
import Vue from 'vue'
|
import store from '@/store'
|
|
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: localStorage.getItem('usercode'),
|
username: localStorage.getItem('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: localStorage.getItem('torg_name'),
|
show: false,
|
signalr: null
|
}
|
},
|
inject: [
|
'reload'
|
],
|
created() {
|
// this.$signalr.start()
|
// Vue.prototype.$ButtonData = JSON.parse(localStorage.getItem('ButtonData'))
|
},
|
mounted() {
|
// this.getHubConnectionBuilder()
|
|
},
|
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: {
|
// changeTrog(val) {
|
// if (val.torg_name !== this.stu_torgname) {
|
// this.stu_torgname = val.torg_name
|
// localStorage.setItem('torg_code', val.torg_code)
|
// localStorage.setItem('torg_name', val.torg_name)
|
//
|
// store.dispatch('user/getMenu')
|
// // this.$store.state.tagsView.visitedViews = this.$store.state.tagsView.visitedViews.filter(i => i.title === '系统首页')
|
// }
|
// },
|
// 建立hub连接
|
async getHubConnectionBuilder() {
|
const url = 'http://121.196.36.24:8019/chatHub'
|
this.signalr = new signalR.HubConnectionBuilder().withUrl(url, {
|
// skipNegotiation: true,
|
// transport: signalR.HttpTransportType.WebSockets
|
}).configureLogging(signalR.LogLevel.Information).build()
|
|
await this.signalr.start().then(() => {
|
if (window.Notification) {
|
if (Notification.permission === 'granted') {
|
console.log('允许通知')
|
} else if (Notification.permission !== 'denied') {
|
console.log('需要通知权限')
|
Notification.requestPermission((permission) => {
|
console.log('权限通知', permission)
|
})
|
} else if (Notification.permission === 'denied') {
|
// console.log('拒绝通知')
|
}
|
} else {
|
console.error('浏览器不支持Notification')
|
}
|
// console.log('连接成功')
|
})
|
|
this.signalr.off('SendCustomUserMessage')
|
this.signalr.on('SendCustomUserMessage', (res) => {
|
this.$notify({ offset: 80, type: 'warning', title: '消息提醒', message: res })
|
this.$store.state.settings.isDot = true
|
})
|
await this.signalr.invoke('AddUser', getCookie('admin'))
|
},
|
|
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.signalr.stop()
|
// this.signalr.off('SendCustomUserMessage')
|
await this.$store.dispatch('user/logout')
|
localStorage.removeItem('token')
|
this.$notify.success('退出成功！')
|
this.$router.push(`/login`)
|
},
|
editPassword() {
|
this.dialogVisible = true
|
},
|
dialogVisibleCancel() {
|
this.dialogVisible = false
|
},
|
dialogVisibleConfirm() {
|
this.$refs.dialogForm.validate(valid => {
|
if (valid) {
|
const data = {
|
password: this.form.password,
|
newpassword: this.form.newpassword
|
}
|
UpdateUserPassword(data).then(res => {
|
if (res.code === '200') {
|
this.$notify.success('修改成功！')
|
this.dialogVisible = false
|
}
|
})
|
}
|
})
|
},
|
handleClose() {
|
this.form.password = ''
|
this.form.newpassword = ''
|
this.$refs.dialogForm.clearValidate()
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
::v-deep .el-badge__content {
|
position: absolute !important;
|
top: 12px !important;
|
right: 10px !important;
|
}
|
|
.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>
|
