129 lines
3.4 KiB
Vue
129 lines
3.4 KiB
Vue
<template>
|
|
<el-popover
|
|
placement="top-end"
|
|
width="450"
|
|
trigger="manual"
|
|
v-model="visible">
|
|
<div style="margin: 5px" v-loading="loading">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane :label="d.label" :name="d.value" v-for="d in dict.notice_type" :key="d.id">
|
|
<el-empty v-show="notReadMsgList[d.value-1].length == 0" description="暂无信息" ></el-empty>
|
|
<div v-for="o in notReadMsgList[d.value-1]" :key="o.notice_id">
|
|
<a href="javascript:" @click="showMessage(o)">
|
|
<el-row @click="showMessage">
|
|
<el-col :span="6">
|
|
<el-tag type="danger">{{ dict.label.notice_type[o.notice_type] }}</el-tag>
|
|
</el-col>
|
|
<el-col :span="9" style="font-weight: bolder">{{o.notice_title}}</el-col>
|
|
<el-col :span="9" style="color: #cccccc">{{o.create_time}}</el-col>
|
|
</el-row>
|
|
<el-divider ></el-divider>
|
|
</a>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<div style="text-align: right">
|
|
<el-button type="text" @click="visible = !visible">取消</el-button>
|
|
<el-button type="text" @click="toSiteMessage" >查看更多>></el-button>
|
|
</div>
|
|
</div>
|
|
<span slot="reference" @click="fetchNotice">
|
|
<el-badge :value="notReadMsgCount" :hidden="notReadMsgCount==0">
|
|
<el-icon class="el-icon-bell" style="font-size: 22px;"></el-icon>
|
|
</el-badge>
|
|
</span>
|
|
</el-popover>
|
|
</template>
|
|
|
|
<script>
|
|
import crudNotice from './sysNotice'
|
|
import { NOTICE_MESSAGE_UPDATE, NOTICE_SHOW_MESSAGE } from './VueBaseCode'
|
|
export default {
|
|
dicts: ['deal_status', 'have_read_type', 'notice_type'],
|
|
name: 'NoticeIcon',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
visible: false,
|
|
activeName: '1',
|
|
// 未读消息数量
|
|
notReadMsgCount: 0,
|
|
// 消息内容
|
|
notReadMsgList: []
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 打开列表页
|
|
*/
|
|
fetchNotice() {
|
|
if (this.visible) {
|
|
this.visible = false
|
|
this.loading = false
|
|
} else {
|
|
this.visible = true
|
|
this.loading = true
|
|
// 消息列表
|
|
this.getMessage()
|
|
}
|
|
},
|
|
getMessage() {
|
|
crudNotice.pageByReceive().then(res => {
|
|
this.notReadMsgList = res
|
|
this.loading = false
|
|
})
|
|
},
|
|
/**
|
|
* 未读的消息数量
|
|
*/
|
|
receivedCount() {
|
|
// 查询当前用户的未读消息数量
|
|
crudNotice.countByReceiveNotRead().then(res => {
|
|
this.notReadMsgCount = res
|
|
})
|
|
},
|
|
/**
|
|
* 查看消息
|
|
*/
|
|
showMessage(message) {
|
|
// 标记已读
|
|
crudNotice.read(message.notice_id).then(() => {
|
|
this.receivedCount()
|
|
})
|
|
this.$bus.emit(NOTICE_SHOW_MESSAGE, message)
|
|
this.visible = false
|
|
},
|
|
/**
|
|
* 跳转到站内信界面
|
|
*/
|
|
toSiteMessage() {
|
|
this.$router.push({
|
|
path: '/monitor/notice'
|
|
})
|
|
this.visible = false
|
|
},
|
|
handleClick(tab, event) {
|
|
// console.log(this.dict.notice_type)
|
|
// console.log(tab, event)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getMessage()
|
|
this.receivedCount()
|
|
this.$bus.on(NOTICE_MESSAGE_UPDATE, this.receivedCount) // 监听事件
|
|
},
|
|
destroyed() {
|
|
this.$bus.off(NOTICE_MESSAGE_UPDATE)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/deep/.el-badge__content.is-fixed {
|
|
top: 10px;
|
|
}
|
|
.el-divider{
|
|
margin: 8px 0;
|
|
}
|
|
</style>
|