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.
411 lines
12 KiB
411 lines
12 KiB
<template>
|
|
<div class="navbar">
|
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
|
<div class="right-menu">
|
|
<!-- 主题切换 -->
|
|
<el-dropdown trigger="click">
|
|
<div class="message-icon cart-main" style="cursor: pointer;">
|
|
<span class="iconfont icon-zhuti" />
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown" class="message-dropdown">
|
|
<el-dropdown-item @click.native="changetheme('light')">
|
|
浅色主题
|
|
<i class="el-icon-check" :style="{display: themeValue === 'light'?'':'none'}" />
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click.native="changetheme('dark')">
|
|
深色主题
|
|
<i class="el-icon-check" :style="{display: themeValue === 'dark'?'':'none'}" />
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<!-- 借阅车 -->
|
|
<router-link :to="{ path: '/user/cart'}">
|
|
<!-- 借阅车 -小红点数量 -->
|
|
<div class="message-icon cart-main">
|
|
<span class="iconfont icon-jieyueche-ding" />
|
|
<i v-if="cartCount.length > 0" class="message-num">{{ cartCount.length }}</i>
|
|
</div>
|
|
</router-link>
|
|
<!-- 消息中心 -->
|
|
<el-dropdown ref="messageDrop" class="message-center right-menu-item hover-effect" trigger="click">
|
|
<!-- 消息中心 -小红点数量 -->
|
|
<div class="message-icon" style="margin: 0 15px;">
|
|
<span class="iconfont icon-xiaoxi" />
|
|
<i v-if="messageAll.length > 0" class="message-num">{{ messageAll.length }}</i>
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown" class="message-dropdown" style="width: 420px; padding: 17px 0 0 0;">
|
|
<div style="display: flex; justify-content: space-between; padding: 0 20px; height: 40px; line-height: 40px; color: #A6ADB6; font-size: 14px; border-bottom: 1px solid #E6E8ED;">
|
|
<h3 style="font-size: 16px; color: #0C0E1E;">消息</h3>
|
|
<span style="cursor: pointer;" @click="handleAllRead">全部标记为已读</span>
|
|
</div>
|
|
<div style="max-height: 450px; overflow: hidden; padding: 10px 0; overflow-y: scroll;">
|
|
<el-dropdown-item v-if="messageAll.length===0" class="message-list-item">
|
|
<div style="text-align:center">暂无最新消息</div>
|
|
</el-dropdown-item>
|
|
<!-- 消息中心 - 列表 -->
|
|
<el-dropdown-item v-for="(item,index) in messageAll" :key="index" class="message-list-item" style="padding: 0 14px;">
|
|
<div class="messsage-item" @click="toMessage(item)">
|
|
<span :class="setIconClass(item)" />
|
|
<div class="message-top-cont">
|
|
<h4>{{ setNoticeTitle(item) }}</h4>
|
|
<p>{{ item.noticeContext }}</p>
|
|
<span>{{ item.createTime | parseTime }}</span>
|
|
</div>
|
|
</div>
|
|
</el-dropdown-item>
|
|
<div v-if="messageAll.length!==0" class="all-message-btn" @click="toAllMessage">查看全部<i class="iconfont icon-chakan" /></div>
|
|
</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 Avatar from '@/assets/images/avatar.png'
|
|
import { FetchReadedAll } from '@/api/system/new'
|
|
import store from '@/store'
|
|
|
|
export default {
|
|
inject: ['reload'],
|
|
components: {
|
|
Logo
|
|
},
|
|
data() {
|
|
return {
|
|
Avatar: Avatar,
|
|
defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
|
|
themeValue: localStorage.getItem('themeValue') ? localStorage.getItem('themeValue') : 'light'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'sidebar',
|
|
'device',
|
|
'user',
|
|
'baseApi',
|
|
'cartCount',
|
|
'messageAll'
|
|
]),
|
|
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() {
|
|
// store.dispatch('initborrowCar').then(() => {})
|
|
store.dispatch('initMySystemNotice').then(() => { })
|
|
if (!localStorage.getItem('themeValue')) {
|
|
this.changetheme('light')
|
|
} else {
|
|
this.changetheme(localStorage.getItem('themeValue'))
|
|
}
|
|
},
|
|
methods: {
|
|
setIconClass(item) {
|
|
if (item.noticeType === 1) {
|
|
return 'message-type-title type-title1'
|
|
} else if (item.noticeType === 2) {
|
|
return 'message-type-title type-title2'
|
|
} else if (item.noticeType === 3) {
|
|
return 'message-type-title type-title3'
|
|
} else if (item.noticeType === 4) {
|
|
if (item.noticeContext.includes('到期')) {
|
|
return 'message-type-title type-title5'
|
|
} else if (item.noticeContext.includes('逾期')) {
|
|
return 'message-type-title type-title4'
|
|
}
|
|
}
|
|
},
|
|
setNoticeTitle(item) {
|
|
switch (item.noticeType) {
|
|
case 1 :
|
|
return '系统通知'
|
|
case 2 :
|
|
return '有流程达到'
|
|
case 3:
|
|
return '流程完成提醒'
|
|
case 4:
|
|
if (item.noticeContext.includes('到期')) {
|
|
return '赋权到期提醒'
|
|
} else if (item.noticeContext.includes('逾期')) {
|
|
return '赋权逾期提醒'
|
|
}
|
|
return '赋权提醒'
|
|
}
|
|
},
|
|
// 全部已读
|
|
async handleAllRead() {
|
|
if (this.messageAll.length === 0) {
|
|
this.$message({ message: '暂无需要处理得未读消息', type: 'error', offset: 8 })
|
|
} else {
|
|
const params = {
|
|
'newsType': null
|
|
}
|
|
FetchReadedAll(params).then(res => {
|
|
if (res) {
|
|
store.dispatch('initMySystemNotice').then(() => {})
|
|
if (this.$route.path.includes('user/center') || this.$route.path.includes('system/notifyManage')) {
|
|
this.reload()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
toggleSideBar() {
|
|
this.$store.dispatch('app/toggleSideBar')
|
|
},
|
|
toMessage(item) {
|
|
this.$router.push({ path: '/user/center', query: { activeIndex: 1, noticeType: item.noticeType }})
|
|
this.reload()
|
|
},
|
|
toAllMessage() {
|
|
this.$router.push({ path: '/user/center', query: { activeIndex: 1, noticeType: 1 }})
|
|
this.reload()
|
|
this.$refs.messageDrop.hide()
|
|
},
|
|
open() {
|
|
this.$confirm('确定注销并退出系统吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.logout()
|
|
})
|
|
},
|
|
logout() {
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
location.reload()
|
|
localStorage.clear()
|
|
})
|
|
},
|
|
handleClose(done) {
|
|
done()
|
|
},
|
|
changetheme(theme) {
|
|
this.themeValue = 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: 12px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cart-main{
|
|
cursor: pointer;
|
|
span{
|
|
display: block;
|
|
padding: 0 15px;
|
|
}
|
|
& :hover{
|
|
background-color: rgba(249,249,249,1);
|
|
}
|
|
& .message-num{
|
|
right: 6px !important;
|
|
}
|
|
}
|
|
.icon-jieyueche-ding{
|
|
font-size: 20px;
|
|
@include icon_color;
|
|
}
|
|
.icon-zhuti{
|
|
font-size: 22px;
|
|
@include icon_color;
|
|
}
|
|
::v-deep .el-dropdown-menu__item.is-active {
|
|
color: #409EFF;
|
|
background-color: red;
|
|
}
|
|
|
|
.message-type-title{
|
|
width: 32px;
|
|
height: auto;
|
|
margin-right: 12px;
|
|
margin-bottom: 0;
|
|
&.type-title1{
|
|
background-size: 33px 33px;
|
|
}
|
|
&.type-title2{
|
|
background-size: 33px 33px;
|
|
}
|
|
&.type-title3{
|
|
background-size: 33px 33px;
|
|
}
|
|
&.type-title4{
|
|
background-size: 33px 33px;
|
|
}
|
|
&.type-title5{
|
|
background-size: 33px 33px;
|
|
}
|
|
}
|
|
.message-top-cont{
|
|
position: relative;
|
|
color: #A6ADB6;
|
|
flex: 1;
|
|
font-size: 12px;
|
|
& h4{
|
|
color: #545B65;
|
|
font-size: 14px;
|
|
}
|
|
& span{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.all-message-btn{
|
|
font-size: 14px;
|
|
color: #545B65;
|
|
text-align: center;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-top: 1px solid #E6E8ED;
|
|
margin-top: 12px;
|
|
cursor: pointer;
|
|
i{
|
|
font-size: 12px;
|
|
padding-left: 10px;
|
|
color: #888D94;
|
|
}
|
|
}
|
|
</style>
|