<template>
|
<div style="display: inline-block" class="message-content">
|
<Dropdown trigger="click" placement="bottom-end">
|
<div style="display: inline-block">
|
<div class="header-right-icon header-action">
|
<Badge :count="messageCount">
|
<Icon type="md-notifications" :size="20" style="margin-top: 3px" />
|
</Badge>
|
</div>
|
</div>
|
<div slot="list" class="message-tip">
|
<div class="title-content">
|
<div class="title">{{ $t("Notifications") }}</div>
|
<a class="mark" v-if="messageList.length > 0" @click="markAll">{{
|
$t("markAll")
|
}}</a>
|
<a class="mark" v-else @click="getData">{{
|
$t("refresh")
|
}}</a>
|
</div>
|
<div class="mes-list">
|
<div v-if="messageList.length == 0" class="empty-message">
|
<Icon type="ios-mail-open-outline" size="70" color="#e4e4e4" />
|
<p>{{ $t("noNewMes") }}</p>
|
</div>
|
<div v-else>
|
<div
|
v-for="(item, index) in messageList"
|
:key="index"
|
:class="{
|
'mes-item': item.status == 0,
|
'mes-item opacity': item.status == 1,
|
}"
|
@click="messageDetail(item)"
|
>
|
<div class="icon">
|
<Avatar
|
v-if="item.type == '通知'"
|
style="background-color: #ff9900"
|
icon="md-send"
|
class="icon"
|
/>
|
<Avatar
|
v-else-if="item.type == '提醒'"
|
style="background-color: #ed4014"
|
icon="md-alarm"
|
class="icon"
|
/>
|
<Avatar
|
v-else-if="item.type == '私信'"
|
style="background-color: #87d068"
|
icon="md-person"
|
class="icon"
|
/>
|
<Avatar
|
v-else-if="item.type == '工作流'"
|
style="background-color: #2db7f5"
|
icon="md-briefcase"
|
class="icon"
|
/>
|
<Avatar
|
v-else-if="item.type == '系统公告'"
|
style="background-color: #2d8cf0"
|
icon="md-mail"
|
class="icon"
|
/>
|
<Avatar v-else icon="ios-mail" class="icon" />
|
</div>
|
<div class="detail">
|
<div class="mes-title">{{ item.title }}</div>
|
<div class="mes-time">
|
<Icon type="md-time" style="margin-right: 3px" /><Time
|
:time="item.createTime"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
<Spin fix v-if="loading" />
|
</div>
|
<a class="show-more" @click="showMessage">
|
<Icon
|
type="ios-arrow-dropright-circle"
|
size="16"
|
style="margin: 0 5px 2px 0"
|
/>{{ $t("showMore") }}
|
</a>
|
</div>
|
</Dropdown>
|
</div>
|
</template>
|
|
<script>
|
import { ws, getMessageSendData, allMessageSend } from "@/api/index";
|
import SockJS from "sockjs-client";
|
import Stomp from "stompjs";
|
import util from "@/libs/util.js";
|
import Cookies from "js-cookie";
|
export default {
|
name: "messageTip",
|
props: {},
|
data() {
|
return {
|
loading: false,
|
userId: "",
|
messageList: [],
|
client: null,
|
};
|
},
|
computed: {
|
messageCount() {
|
return this.$store.state.app.messageCount;
|
},
|
},
|
stompClient: {
|
monitorIntervalTime: 100,
|
stompReconnect: true,
|
timeout(orgCmd) {},
|
},
|
methods: {
|
init() {
|
let userInfo = JSON.parse(Cookies.get("userInfo"));
|
this.userId = userInfo.id;
|
this.getData();
|
// 消息开关 websocket
|
let messageOpen = this.getStore("messageOpen");
|
if (messageOpen != "0") {
|
this.connect();
|
}
|
},
|
getData() {
|
// 读取未读消息
|
this.loading = true;
|
getMessageSendData({
|
userId: this.userId,
|
status: 0,
|
pageSize: 5,
|
sort: "createTime",
|
order: "desc",
|
}).then((res) => {
|
if (res.success) {
|
this.loading = false;
|
this.messageList = res.result.content;
|
this.$store.commit("setMessageCount", res.result.totalElements);
|
}
|
});
|
},
|
showMessage() {
|
util.openNewPage(this, "message_index");
|
if (this.$route.name == "message_index") {
|
return;
|
}
|
this.$router.push({
|
name: "message_index",
|
});
|
},
|
connect() {
|
let headers = {};
|
this.client = Stomp.over(new SockJS(ws));
|
this.client.connect(headers, this.onConnected, this.onFailed);
|
},
|
onConnected(frame) {
|
console.log("连接ws成功: " + frame);
|
let topicSubscription = this.client.subscribe(
|
"/topic/subscribe",
|
this.responseCallback
|
);
|
let queueSubscription = this.client.subscribe(
|
"/user/" + this.userId + "/queue/subscribe",
|
this.responseCallback
|
);
|
},
|
onFailed(frame) {
|
console.log("连接ws失败： " + JSON.stringify(frame));
|
},
|
responseCallback(frame) {
|
console.log("收到消息：" + frame.body);
|
this.getData();
|
},
|
messageDetail(v) {
|
if (v.status == 1) {
|
return;
|
}
|
util.openNewPage(this, "message_index");
|
this.$router.push({
|
name: "message_index",
|
query: { count: this.messageCount, content: v },
|
});
|
v.status = 1;
|
},
|
markAll() {
|
allMessageSend(0).then((res) => {
|
if (res.success) {
|
this.getData();
|
}
|
});
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.message-content .ivu-select-dropdown {
|
padding: 0;
|
}
|
.message-tip {
|
display: flex;
|
flex-direction: column;
|
width: 320px;
|
.title-content {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px;
|
.title {
|
color: #515a6e;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
.mark {
|
font-size: 12px;
|
}
|
}
|
.empty-message {
|
height: 220px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
color: #a7a7a7;
|
p {
|
margin-top: 10px;
|
}
|
}
|
.mes-list {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
max-height: 261px;
|
overflow: auto;
|
.mes-item {
|
display: flex;
|
height: 87px;
|
padding: 12px 16px 12px 16px;
|
cursor: pointer;
|
transition: all 0.2s ease-in-out;
|
&:hover {
|
background-color: #f6f6f6;
|
}
|
.icon {
|
margin: 1px 16px 0 0;
|
width: 32px;
|
}
|
.detail {
|
.mes-title {
|
color: #515a6e;
|
min-height: 42px;
|
margin-bottom: 5px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.mes-time {
|
font-size: 12px;
|
color: #869ac0;
|
}
|
}
|
}
|
.opacity {
|
opacity: 0.4;
|
}
|
}
|
.mes-list::-webkit-scrollbar {
|
width: 6px;
|
height: 6px;
|
}
|
|
.mes-list::-webkit-scrollbar-thumb {
|
border-radius: 4px;
|
-webkit-box-shadow: inset 0 0 2px #d1d1d1;
|
background: #e4e4e4;
|
}
|
.show-more {
|
border-top: 1px solid #eff2f7;
|
padding: 16px;
|
display: flex;
|
align-content: center;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
</style>
|
