115 lines
3.5 KiB
Vue
115 lines
3.5 KiB
Vue
<template>
|
|
<div class="ele-notice-group">
|
|
<el-popover v-model="msgPopover" placement="bottom" width="300" trigger="click" popper-class="ele-notice-pop" style="width: 300px">
|
|
<div class="ele-notice-list ele-scrollbar-mini">
|
|
<div class="ele-notice-item">
|
|
<div
|
|
v-if="messages.length > 0"
|
|
class="ele-cell ele-notice-item-wrapper"
|
|
v-for="msg in messages"
|
|
:key="msg.id"
|
|
@click="readMsg(msg, 'system')"
|
|
>
|
|
<i class="el-icon-s-comment ele-notice-item-icon"></i>
|
|
<div class="ele-cell-content">
|
|
<div class="ele-elip">{{ msg.title }}</div>
|
|
<div class="ele-text-secondary ele-elip">
|
|
{{ $moment(msg.sendAt).format("YYYY-MM-DD HH:mm") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-empty v-if="messages.length === 0" description="暂无数据"></el-empty>
|
|
<div class="el-divider el-divider--horizontal"><!----></div>
|
|
</div>
|
|
</div>
|
|
<div class="ele-cell ele-notice-actions">
|
|
<a @click.prevent="viewMore" class="ele-cell-content">查看更多</a>
|
|
</div>
|
|
<el-badge :value="messages.length" slot="reference" :style="{ animation: messages.length > 0 ? 'bell-shake 0.5s infinite' : '' }">
|
|
<i class="el-icon-bell" style="color: var(--color-white)"></i>
|
|
</el-badge>
|
|
</el-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "HeaderMessage",
|
|
store,
|
|
data() {
|
|
return {
|
|
tabActive: "system",
|
|
unReadNum: {},
|
|
msgPopover: false,
|
|
messages: []
|
|
}
|
|
},
|
|
computed: {
|
|
totalMsgNum() {
|
|
// return Object.keys(this.unReadNum).reduce((accumulator, key) => {
|
|
// return accumulator + this.unReadNum[key]
|
|
// }, 0)
|
|
return 0
|
|
}
|
|
// messages() {
|
|
// return this.$store.state.messages
|
|
// }
|
|
},
|
|
methods: {
|
|
removeSystemMsg() {
|
|
this.$message.warning("暂不支持清空消息")
|
|
},
|
|
//获取未读消息
|
|
getUnReadNum() {
|
|
this.$axios.post("/platform/sys/msg/user/unread_num").then((resp) => {
|
|
if (resp.code === 0) {
|
|
this.unReadNum = resp.data
|
|
}
|
|
})
|
|
},
|
|
//读取消息
|
|
readMsg(msg, type) {
|
|
this.msgPopover = false
|
|
this.$store.dispatch("pjaxRoute", "/platform/sys/msg/user/all")
|
|
},
|
|
viewMore() {
|
|
this.msgPopover = false
|
|
this.$store.dispatch("pjaxRoute", "/platform/sys/msg/user/all")
|
|
}
|
|
},
|
|
created() {
|
|
webSocketPubSub.subscribe("innerMsg", (data) => {
|
|
console.info("ws:收到系统提醒消息:", data)
|
|
this.messages = data.list
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.ele-notice-group .el-empty {
|
|
padding: 0 !important;
|
|
}
|
|
.ele-notice-group .el-empty__image {
|
|
width: 116px !important;
|
|
}
|
|
|
|
@keyframes bell-shake {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: rotate(5deg);
|
|
}
|
|
50% {
|
|
transform: rotate(0deg);
|
|
}
|
|
75% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
</style>
|