hi-ucs/back/src/views/main-navbar.vue

240 lines
6.9 KiB
Vue
Raw Normal View History

2022-06-14 09:32:49 +08:00
<template>
2022-06-20 19:34:41 +08:00
<nav
class="aui-navbar"
:class="`aui-navbar--${$store.state.navbarLayoutType}`"
>
2022-06-14 09:32:49 +08:00
<div class="aui-navbar__header">
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
2022-06-20 19:34:41 +08:00
<a class="aui-navbar__brand-mini" href="javascript:;">{{
$t("brand.mini")
}}</a>
<a class="aui-navbar__brand-lg" href="javascript:;">{{
$t("brand.lg")
}}</a>
<span></span>
<span class="back-title-text">后台管理系统</span>
2022-06-14 09:32:49 +08:00
</h1>
</div>
<div class="aui-navbar__body">
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
2022-06-20 19:34:41 +08:00
<!-- <el-menu-item
index="1"
@click="$store.state.sidebarFold = !$store.state.sidebarFold"
>
<svg
class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
aria-hidden="true"
>
<use xlink:href="#icon-outdent"></use>
</svg>
2022-06-14 09:32:49 +08:00
</el-menu-item>
<el-menu-item index="2" @click="refresh()">
2022-06-20 19:34:41 +08:00
<svg
class="
icon-svg
aui-navbar__icon-menu aui-navbar__icon-menu--refresh
"
aria-hidden="true"
>
<use xlink:href="#icon-sync"></use>
</svg>
</el-menu-item> -->
2022-06-14 09:32:49 +08:00
</el-menu>
<el-menu class="aui-navbar__menu" mode="horizontal">
<el-menu-item index="1">
<el-dropdown placement="bottom" :show-timeout="0">
2022-06-20 19:34:41 +08:00
<el-button size="mini">{{ $t("_lang") }}</el-button>
2022-06-14 09:32:49 +08:00
<el-dropdown-menu slot="dropdown">
2022-06-20 19:34:41 +08:00
<el-dropdown-item
v-for="(val, key) in i18nMessages"
:key="key"
@click.native="$i18n.locale = key"
>{{ val._lang }}</el-dropdown-item
>
2022-06-14 09:32:49 +08:00
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
<el-menu-item index="2">
<a href="//115.28.200.119:9091" target="_blank">
2022-06-20 19:34:41 +08:00
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
<use xlink:href="#icon-earth"></use>
</svg>
2022-06-14 09:32:49 +08:00
</a>
</el-menu-item>
<el-menu-item index="3" v-if="$hasPermission('sys:notice:all')">
<el-badge :is-dot="messageTip">
2022-06-20 19:34:41 +08:00
<a href="#" @click="myNoticeRouter()"
><i class="el-icon-bell"></i
></a>
2022-06-14 09:32:49 +08:00
</el-badge>
</el-menu-item>
<el-menu-item index="4" @click="fullscreenHandle()">
2022-06-20 19:34:41 +08:00
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
<use xlink:href="#icon-fullscreen"></use>
</svg>
2022-06-14 09:32:49 +08:00
</el-menu-item>
<el-menu-item index="5" class="aui-navbar__avatar">
<el-dropdown placement="bottom" :show-timeout="0">
<span class="el-dropdown-link">
2022-06-20 19:34:41 +08:00
<img src="~@/assets/img/avatar.png" />
2022-06-14 09:32:49 +08:00
<span>{{ $store.state.user.name }}</span>
<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
2022-06-20 19:34:41 +08:00
<el-dropdown-item @click.native="updatePasswordHandle()">{{
$t("updatePassword.title")
}}</el-dropdown-item>
<el-dropdown-item @click.native="logoutHandle()">{{
$t("logout")
}}</el-dropdown-item>
2022-06-14 09:32:49 +08:00
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
</el-menu>
</div>
<!-- 弹窗, 修改密码 -->
2022-06-20 19:34:41 +08:00
<update-password
v-if="updatePasswordVisible"
ref="updatePassword"
></update-password>
2022-06-14 09:32:49 +08:00
</nav>
</template>
<script>
2022-07-26 18:08:24 +08:00
import { messages } from '@/i18n'
import screenfull from 'screenfull'
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
2022-06-14 09:32:49 +08:00
// import Cookies from 'js-cookie'
// var socket = null
export default {
2022-07-26 18:08:24 +08:00
inject: ['refresh'],
data () {
2022-06-14 09:32:49 +08:00
return {
i18nMessages: messages,
updatePasswordVisible: false,
2022-07-26 18:08:24 +08:00
messageTip: false
}
2022-06-14 09:32:49 +08:00
},
components: {
2022-07-26 18:08:24 +08:00
UpdatePassword
2022-06-14 09:32:49 +08:00
},
2022-07-26 18:08:24 +08:00
created () {
2022-06-14 09:32:49 +08:00
// var vue = this
// socket = new WebSocket(`${window.SITE_CONFIG['socketURL']}?token=${Cookies.get('token')}`)
// socket.onopen = function () {}
// socket.onerror = function () {
// vue.$notify.error({
// title: vue.$t('notice.disconnect'),
// message: vue.$t('notice.disconnectMessage')
// })
// }
// socket.onmessage = function (evt) {
// const result = JSON.parse(evt.data)
// // 如果是有新文本通知,则提示有新通知
// if (result.type === 0) {
// vue.messageTip = true
// vue.$notify({
// title: vue.$t('notice.new'),
// message: result.msg,
// type: 'info',
// duration: 5000
// })
// }
// }
// 未读通知数
2022-07-26 18:08:24 +08:00
this.getUnReadCount()
2022-06-14 09:32:49 +08:00
},
methods: {
2022-07-26 18:08:24 +08:00
myNoticeRouter () {
this.$router.replace('notice-notice-user')
2022-06-14 09:32:49 +08:00
},
2022-07-26 18:08:24 +08:00
getUnReadCount () {
2022-06-20 19:34:41 +08:00
this.$http
2022-07-26 18:08:24 +08:00
.get('/sys/notice/mynotice/unread')
2022-06-20 19:34:41 +08:00
.then(({ data: res }) => {
if (res.code !== 0) {
2022-07-26 18:08:24 +08:00
return this.$message.error(res.msg)
2022-06-20 19:34:41 +08:00
}
if (res.data > 0) {
2022-07-26 18:08:24 +08:00
this.messageTip = true
2022-06-20 19:34:41 +08:00
}
})
2022-07-26 18:08:24 +08:00
.catch(() => {})
2022-06-14 09:32:49 +08:00
},
// 全屏
2022-07-26 18:08:24 +08:00
fullscreenHandle () {
2022-06-14 09:32:49 +08:00
if (!screenfull.enabled) {
return this.$message({
2022-07-26 18:08:24 +08:00
message: this.$t('fullscreen.prompt'),
type: 'warning',
duration: 500
})
2022-06-14 09:32:49 +08:00
}
2022-07-26 18:08:24 +08:00
screenfull.toggle()
2022-06-14 09:32:49 +08:00
},
// 修改密码
2022-07-26 18:08:24 +08:00
updatePasswordHandle () {
this.updatePasswordVisible = true
2022-06-14 09:32:49 +08:00
this.$nextTick(() => {
2022-07-26 18:08:24 +08:00
this.$refs.updatePassword.init()
})
2022-06-14 09:32:49 +08:00
},
// 退出
2022-07-26 18:08:24 +08:00
logoutHandle () {
2022-06-20 19:34:41 +08:00
this.$confirm(
2022-07-26 18:08:24 +08:00
this.$t('prompt.info', { handle: this.$t('logout') }),
this.$t('prompt.title'),
2022-06-20 19:34:41 +08:00
{
2022-07-26 18:08:24 +08:00
confirmButtonText: this.$t('confirm'),
cancelButtonText: this.$t('cancel'),
type: 'warning'
2022-06-20 19:34:41 +08:00
}
)
.then(() => {
this.$http
2022-07-26 18:08:24 +08:00
.post('/logout')
2022-06-20 19:34:41 +08:00
.then(({ data: res }) => {
if (res.code !== 0) {
2022-07-26 18:08:24 +08:00
return this.$message.error(res.msg)
2022-06-20 19:34:41 +08:00
}
2022-07-26 18:08:24 +08:00
clearLoginInfo()
this.$router.push({ name: 'login' })
2022-06-20 19:34:41 +08:00
})
2022-07-26 18:08:24 +08:00
.catch(() => {})
2022-06-20 19:34:41 +08:00
})
2022-07-26 18:08:24 +08:00
.catch(() => {})
}
}
}
2022-06-20 19:34:41 +08:00
</script>
<style scoped lang="scss">
@font-face {
font-family: "header-typeface";
src: url("~@/assets/font/header-typeface.ttf");
}
.aui-navbar {
width: 100%;
height: 50px;
background-image: url("~@/assets/img/activitiMyWorkDynamics/header-bak.png");
.aui-navbar__header {
width: 25%;
.aui-navbar__brand {
margin-left: 20px;
a {
font-size: 22px;
color: #ffffff;
}
.aui-navbar__brand-mini {
display: block;
}
.back-title-text {
margin-top: 5px;
font-family: header-typeface;
}
2022-06-14 09:32:49 +08:00
}
}
}
2022-06-20 19:34:41 +08:00
</style>