You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
9.3 KiB
318 lines
9.3 KiB
<template>
|
|
<div class="navbar">
|
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
|
|
|
<div class="right-menu">
|
|
<!-- 主题切换 -->
|
|
<div class="themeBox" style="font-size:12px; margin-right:20px; cursor: pointer;">
|
|
<span @click="changetheme('dark')">深色主题</span>
|
|
<span @click="changetheme('light')">浅色主题</span>
|
|
</div>
|
|
<div style="font-size: 18px; color: #1C1C1C; margin-right: 30px; cursor: pointer;" class="iconfont icon-jieyueche-ding" />
|
|
<!-- 消息中心 -->
|
|
<el-dropdown ref="messageDrop" class="message-center right-menu-item hover-effect" trigger="click">
|
|
<div class="message-icon">
|
|
<span class="iconfont icon-xiaoxi" />
|
|
<i v-if="msgList.length > 0" class="message-num">{{ msgList.length }}</i>
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown" class="message-dropdown" style="width: 420px;">
|
|
<div style="display: flex; justify-content: flex-end; padding: 0 20px; height: 40px; line-height: 40px; color: #339CFF; font-size: 14px; border-bottom: 1px solid #339CFF;">
|
|
<span style="cursor: pointer;" @click="handleAllRead">全部标记为已读</span>
|
|
<!-- 消息中心router -->
|
|
<span style="color:#fff; margin-left: 10px; cursor: pointer;" @click="toAllMessage">去查看</span>
|
|
</div>
|
|
<div style="max-height: 450px; overflow: hidden; overflow-y: scroll;">
|
|
<el-dropdown-item v-if="msgList.length===0" class="message-list-item">
|
|
<div style="text-align:center">暂无最新消息</div>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item v-for="(item,index) in msgList" :key="index" class="message-list-item">
|
|
<router-link :to="{ path: '/user/center', query: { activeIndex: 1 }}">
|
|
<p>{{ item.noticeContent }}</p>
|
|
<span>{{ item.create_time | parseTime }}</span>
|
|
<i class="el-icon-arrow-right" />
|
|
</router-link>
|
|
</el-dropdown-item>
|
|
</div>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
<div class="avatar-wrapper">
|
|
<div class="user-img-cover">
|
|
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar" :onerror="defaultImg">
|
|
</div>
|
|
<div class="user-name">{{ user.username }}</div>
|
|
<i class="el-icon-caret-bottom" />
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<router-link :to="{ path: '/user/center', query: { activeIndex: 0 }}">
|
|
<el-dropdown-item>
|
|
个人中心
|
|
</el-dropdown-item>
|
|
</router-link>
|
|
<router-link :to="{ path: '/user/center', query: { activeIndex: 1 }}">
|
|
<el-dropdown-item>
|
|
我的消息
|
|
</el-dropdown-item>
|
|
</router-link>
|
|
<span style="display:block;" @click="open">
|
|
<el-dropdown-item>
|
|
退出登录
|
|
</el-dropdown-item>
|
|
</span>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import Logo from '@/layout/components/Sidebar/Logo'
|
|
// import Breadcrumb from '@/components/Breadcrumb'
|
|
// import Hamburger from '@/components/Hamburger'
|
|
// import Doc from '@/components/Doc'
|
|
// import Screenfull from '@/components/Screenfull'
|
|
// import SizeSelect from '@/components/SizeSelect'
|
|
// import Search from '@/components/HeaderSearch'
|
|
import Avatar from '@/assets/images/avatar.png'
|
|
import { getUserNotice, isread } from '@/api/system/logs'
|
|
|
|
export default {
|
|
inject: ['reload'],
|
|
components: {
|
|
// Breadcrumb,
|
|
// Hamburger,
|
|
// Screenfull,
|
|
// SizeSelect,
|
|
// Search,
|
|
// Doc,
|
|
Logo
|
|
},
|
|
data() {
|
|
return {
|
|
Avatar: Avatar,
|
|
defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
|
|
msgList: [],
|
|
themeValue: localStorage.getItem('themeValue') ? localStorage.getItem('themeValue') : 'dark'
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters([
|
|
'sidebar',
|
|
'device',
|
|
'user',
|
|
'baseApi'
|
|
]),
|
|
show: {
|
|
get() {
|
|
return this.$store.state.settings.showSettings
|
|
},
|
|
set(val) {
|
|
this.$store.dispatch('settings/changeSetting', {
|
|
key: 'showSettings',
|
|
value: val
|
|
})
|
|
}
|
|
},
|
|
showLogo() {
|
|
return this.$store.state.settings.sidebarLogo
|
|
},
|
|
isCollapse() {
|
|
return !this.sidebar.opened
|
|
}
|
|
},
|
|
created() {
|
|
this.getMsgList()
|
|
if (!localStorage.getItem('themeValue')) {
|
|
this.changetheme('dark')
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取未读消息
|
|
async getMsgList() {
|
|
const params = {
|
|
page: 0,
|
|
size: 10,
|
|
sort: 'createTime,desc'
|
|
}
|
|
const list = []
|
|
const allList = await this.getAllNoRead(params, list)
|
|
allList.forEach(item => {
|
|
item.pushUserName = item.noticeUsers[0].pushUserName
|
|
item.isRead = item.noticeUsers[0].isRead
|
|
})
|
|
const arr = allList.filter(item => { return !item.isRead })
|
|
if (arr.length > 20) {
|
|
this.msgList = arr.slice(0, 20)
|
|
} else {
|
|
this.msgList = arr
|
|
}
|
|
},
|
|
// 全部已读
|
|
async handleAllRead() {
|
|
const params = {
|
|
page: 0,
|
|
size: 10,
|
|
sort: 'createTime,desc'
|
|
}
|
|
const list = []
|
|
const ids = []
|
|
const allList = await this.getAllNoRead(params, list)
|
|
allList.forEach(item => {
|
|
item.noticeUsers.forEach(i => {
|
|
ids.push(i.id)
|
|
})
|
|
})
|
|
isread(ids).then(res => {
|
|
if (res) {
|
|
this.msgList = []
|
|
if (this.$route.path.includes('user/center') || this.$route.path.includes('system/notifyManage')) {
|
|
this.reload()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 递归获取所有消息列表
|
|
async getAllNoRead(params, list) {
|
|
const allList = await getUserNotice(params).then(res => {
|
|
list = list.concat(res.content)
|
|
if ((list.length) < res.totalElements) {
|
|
params.page++
|
|
return this.getAllNoRead(params, list)
|
|
} else {
|
|
return list
|
|
}
|
|
})
|
|
return allList
|
|
},
|
|
toggleSideBar() {
|
|
this.$store.dispatch('app/toggleSideBar')
|
|
},
|
|
toAllMessage() {
|
|
this.$router.push({ path: '/user/center', query: { activeIndex: 1 }})
|
|
this.$refs.messageDrop.hide()
|
|
},
|
|
open() {
|
|
this.$confirm('确定注销并退出系统吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.logout()
|
|
})
|
|
},
|
|
logout() {
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
location.reload()
|
|
})
|
|
},
|
|
handleClose(done) {
|
|
done()
|
|
},
|
|
changetheme(theme) {
|
|
window.document.documentElement.setAttribute('data-theme', theme)
|
|
localStorage.setItem('themeValue', theme)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "~@/assets/styles/mixin.scss";
|
|
@import "~@/assets/styles/variables.scss";
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: $headerHeight;
|
|
overflow: hidden;
|
|
position: relative;
|
|
@include shadow-set;
|
|
.errLog-container {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.right-menu {
|
|
display: flex;
|
|
line-height: 64px;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.right-menu-item {
|
|
display: inline-block;
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
.message-center{
|
|
margin-right: 40px;
|
|
.message-icon{
|
|
position: relative;
|
|
.icon-xiaoxi{
|
|
font-size: 20px;
|
|
@include icon_color;
|
|
}
|
|
.message-num{
|
|
position: absolute;
|
|
top: 0;
|
|
right: -8px;
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
border-radius: 50%;
|
|
background-color: #F91832;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 40px;
|
|
.avatar-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
@include icon_color;
|
|
.user-img-cover{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.user-avatar {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
// border: 1px solid red;
|
|
cursor: pointer;
|
|
}
|
|
.user-name{
|
|
margin: 0 37px 0 8px;
|
|
flex: 1;
|
|
font-size: 14px;
|
|
}
|
|
.el-icon-caret-bottom {
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|