修改消息推送
This commit is contained in:
lccsw
@@ -36,17 +36,17 @@
|
||||
<div class="ele-text-secondary ele-elip">{{ item.c_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="notice.length" class="ele-cell ele-notice-actions">
|
||||
<div class="ele-cell-content" @click="clearNotice">清空通知</div>
|
||||
<el-divider direction="vertical" class="line-color-light" />
|
||||
<el-divider direction="vertical" class="line-color-light"/>
|
||||
<router-link to="/user/notice?type=notice" class="ele-cell-content">
|
||||
查看更多
|
||||
</router-link>
|
||||
</div>
|
||||
<ele-empty v-if="!notice.length" text="已查看所有通知" />
|
||||
<ele-empty v-if="!notice.length" text="已查看所有通知"/>
|
||||
</el-tab-pane>
|
||||
<!--
|
||||
<el-tab-pane name="letter" :label="letterTitle">
|
||||
@@ -117,241 +117,242 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pageNotice, setRead } from '@/api/user/notice';
|
||||
// import websocket from '@/utils/websocket';
|
||||
import { pageNotice, setRead } from '@/api/user/notice'
|
||||
// import websocket from '@/utils/websocket';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 是否显示
|
||||
visible: false,
|
||||
// 选项卡选中
|
||||
active: 'notice',
|
||||
// 通知数据
|
||||
notice: [],
|
||||
noticeCount: 0,
|
||||
// 私信数据
|
||||
letter: [],
|
||||
letterCount: 0,
|
||||
// 待办数据
|
||||
todo: [],
|
||||
todCount: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 监听 WebSocket 连接状态
|
||||
window.EventBus.$on('ws:connected', (status) => {
|
||||
console.log('WebSocket 连接状态:', status);
|
||||
});
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 是否显示
|
||||
visible: false,
|
||||
// 选项卡选中
|
||||
active: 'notice',
|
||||
// 通知数据
|
||||
notice: [],
|
||||
noticeCount: 0,
|
||||
// 私信数据
|
||||
letter: [],
|
||||
letterCount: 0,
|
||||
// 待办数据
|
||||
todo: [],
|
||||
todCount: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 监听 WebSocket 连接状态
|
||||
window.EventBus.$on('ws:connected', (status) => {
|
||||
console.log('WebSocket 连接状态:', status)
|
||||
})
|
||||
|
||||
// 监听 WebSocket 消息
|
||||
window.EventBus.$on('ws:message', (message) => {
|
||||
console.log('收到 WebSocket 消息:', message);
|
||||
if (message.type === 'notice') {
|
||||
this.notice = [message.data].concat(this.notice);
|
||||
this.noticeCount++;
|
||||
//弹窗通知有新消息
|
||||
this.$notify({
|
||||
title: '消息提醒', // 消息标题
|
||||
message: message.data.content ? message.data.content: '您收到一条新的系统通知，请及时查看', // 消息内容
|
||||
type: 'warning', // 类型：info/success/warning/error
|
||||
duration: 5000, // 5秒后自动关闭，0则不自动关闭
|
||||
position: 'top-left', // 弹窗位置，可选top-left/bottom-left/bottom-right
|
||||
showClose: true, // 显示关闭按钮
|
||||
onClick: () => {}
|
||||
});
|
||||
//提醒声音
|
||||
this.playNotificationSound();
|
||||
}
|
||||
});
|
||||
// 监听 WebSocket 消息
|
||||
window.EventBus.$on('ws:message', (message) => {
|
||||
console.log('收到 WebSocket 消息:', message)
|
||||
if (message.type === 'notice') {
|
||||
this.notice = [message.data].concat(this.notice)
|
||||
this.noticeCount++
|
||||
//弹窗通知有新消息
|
||||
this.$notify({
|
||||
title: '消息提醒', // 消息标题
|
||||
message: message.data.content ? message.data.content : '您收到一条新的系统通知，请及时查看', // 消息内容
|
||||
type: 'warning', // 类型：info/success/warning/error
|
||||
duration: 5000, // 5秒后自动关闭，0则不自动关闭
|
||||
position: 'top-left', // 弹窗位置，可选top-left/bottom-left/bottom-right
|
||||
showClose: true, // 显示关闭按钮
|
||||
onClick: () => {
|
||||
}
|
||||
})
|
||||
//提醒声音
|
||||
this.playNotificationSound()
|
||||
}
|
||||
})
|
||||
|
||||
// 监听 WebSocket 错误
|
||||
window.EventBus.$on('ws:error', (error) => {
|
||||
console.error('WebSocket 错误:', error);
|
||||
});
|
||||
// 监听 WebSocket 错误
|
||||
window.EventBus.$on('ws:error', (error) => {
|
||||
console.error('WebSocket 错误:', error)
|
||||
})
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.query()
|
||||
},
|
||||
methods: {
|
||||
// 播放提示音
|
||||
playNotificationSound() {
|
||||
const audio = this.$refs.notificationSound
|
||||
audio.currentTime = 0 // 重置播放位置（支持连续多次播放）
|
||||
audio.play().catch((err) => {
|
||||
console.log('提示音播放失败（浏览器限制）：', err)
|
||||
})
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.query();
|
||||
/* 查询数据 */
|
||||
query() {
|
||||
// getUnreadNotice()
|
||||
// .then((result) => {
|
||||
// this.notice = result.notice;
|
||||
// this.letter = result.letter;
|
||||
// this.todo = result.todo;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// this.$message.error(e.message);
|
||||
// });
|
||||
pageNotice({ read: 0 }).then((result) => {
|
||||
this.notice = result.list
|
||||
this.noticeCount = result.count
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 播放提示音
|
||||
playNotificationSound() {
|
||||
const audio = this.$refs.notificationSound;
|
||||
audio.currentTime = 0; // 重置播放位置（支持连续多次播放）
|
||||
audio.play().catch((err) => {
|
||||
console.log("提示音播放失败（浏览器限制）：", err);
|
||||
});
|
||||
},
|
||||
/* 查询数据 */
|
||||
query() {
|
||||
// getUnreadNotice()
|
||||
// .then((result) => {
|
||||
// this.notice = result.notice;
|
||||
// this.letter = result.letter;
|
||||
// this.todo = result.todo;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// this.$message.error(e.message);
|
||||
// });
|
||||
pageNotice({ read: 0 }).then((result) => {
|
||||
this.notice = result.list;
|
||||
this.noticeCount = result.count;
|
||||
});
|
||||
},
|
||||
/* 清空通知 */
|
||||
clearNotice() {
|
||||
setRead({ type: 'all' })
|
||||
.then(() => {
|
||||
this.query();
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
goDetail(row) {
|
||||
let btn = {
|
||||
/* 清空通知 */
|
||||
clearNotice() {
|
||||
setRead({ type: 'all' })
|
||||
.then(() => {
|
||||
this.query()
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message)
|
||||
})
|
||||
},
|
||||
goDetail(row) {
|
||||
let btn = {
|
||||
showCancelButton: false,
|
||||
type: 'warning'
|
||||
}
|
||||
if (row.url) {
|
||||
btn = {
|
||||
confirmButtonText: '查看详情',
|
||||
showCancelButton: false,
|
||||
type: 'warning'
|
||||
};
|
||||
if (row.url) {
|
||||
btn = {
|
||||
confirmButtonText: '查看详情',
|
||||
showCancelButton: false,
|
||||
type: 'warning'
|
||||
};
|
||||
}
|
||||
setRead({ ids: [row.id] })
|
||||
.then(() => {
|
||||
this.query();
|
||||
this.$confirm(row.content, '提示', btn)
|
||||
.then(() => {
|
||||
let path = row.url;
|
||||
if (path) {
|
||||
this.$router.push({
|
||||
path
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前移除事件监听
|
||||
window.EventBus.$off('ws:connected');
|
||||
window.EventBus.$off('ws:message');
|
||||
window.EventBus.$off('ws:error');
|
||||
setRead({ ids: [row.id], isRead: 1 })
|
||||
.then(() => {
|
||||
this.query()
|
||||
this.$confirm(row.content, '提示', btn)
|
||||
.then(() => {
|
||||
let path = row.url
|
||||
if (path) {
|
||||
this.$router.push({
|
||||
path
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消
|
||||
})
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message)
|
||||
})
|
||||
}
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前移除事件监听
|
||||
window.EventBus.$off('ws:connected')
|
||||
window.EventBus.$off('ws:message')
|
||||
window.EventBus.$off('ws:error')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ele-notice-group {
|
||||
.ele-notice-group {
|
||||
display: block;
|
||||
|
||||
.el-badge {
|
||||
line-height: 1;
|
||||
display: block;
|
||||
|
||||
.el-badge {
|
||||
line-height: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 消息通知pop */
|
||||
.ele-notice-pop {
|
||||
padding: 0 !important;
|
||||
/* 消息通知pop */
|
||||
.ele-notice-pop {
|
||||
padding: 0 !important;
|
||||
|
||||
/* tab */
|
||||
.el-tabs__nav-scroll {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-tabs__nav {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
/* 空视图 */
|
||||
.ele-empty {
|
||||
padding: 100px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.ele-notice-list {
|
||||
padding-top: 8px;
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ele-notice-item {
|
||||
.ele-notice-item-wrapper {
|
||||
padding: 12px 15px;
|
||||
transition: background-color 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 60%, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.ele-text-secondary {
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ele-cell-desc {
|
||||
margin-top: 3px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-notice-item-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px !important;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background-color: #60b2fc;
|
||||
border-radius: 50%;
|
||||
/* tab */
|
||||
.el-tabs__nav-scroll {
|
||||
text-align: center;
|
||||
|
||||
&.el-icon-s-check {
|
||||
background-color: #f5686f;
|
||||
}
|
||||
|
||||
&.el-icon-video-camera {
|
||||
background-color: #7cd734;
|
||||
}
|
||||
|
||||
&.el-icon-s-claim {
|
||||
background-color: #faad14;
|
||||
}
|
||||
|
||||
&.el-icon-message-solid {
|
||||
background-color: #2bcacd;
|
||||
}
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.ele-notice-actions > .ele-cell-content {
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
.el-tabs__nav {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
/* 空视图 */
|
||||
.ele-empty {
|
||||
padding: 100px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.ele-notice-list {
|
||||
padding-top: 8px;
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ele-notice-item {
|
||||
.ele-notice-item-wrapper {
|
||||
padding: 12px 15px;
|
||||
transition: background-color 0.2s;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 60%, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.ele-text-secondary {
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ele-cell-desc {
|
||||
margin-top: 3px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-notice-item-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px !important;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background-color: #60b2fc;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
|
||||
&.el-icon-s-check {
|
||||
background-color: #f5686f;
|
||||
}
|
||||
|
||||
&.el-icon-video-camera {
|
||||
background-color: #7cd734;
|
||||
}
|
||||
|
||||
&.el-icon-s-claim {
|
||||
background-color: #faad14;
|
||||
}
|
||||
|
||||
&.el-icon-message-solid {
|
||||
background-color: #2bcacd;
|
||||
}
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.ele-notice-actions > .ele-cell-content {
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 60%, 0.05);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,8 +7,11 @@
|
||||
tool-class="ele-toolbar-actions"
|
||||
>
|
||||
<template v-slot:toolbar>
|
||||
<el-button size="small" type="primary" @click="read">
|
||||
批量已读
|
||||
<el-button size="small" type="primary" @click="read(1)">
|
||||
标记已读
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="read(0)">
|
||||
标记未读
|
||||
</el-button>
|
||||
<!--
|
||||
<el-button size="small" type="danger" @click="removeBatch">
|
||||
@@ -23,6 +26,7 @@
|
||||
</template>
|
||||
<template v-slot:action="{ row }">
|
||||
<el-link
|
||||
v-if="row.url"
|
||||
type="primary"
|
||||
:underline="false"
|
||||
icon="el-icon-view"
|
||||
@@ -48,111 +52,135 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { pageNotices } from '@/api/user/message';
|
||||
import { pageNotice, setRead } from '@/api/user/notice';
|
||||
// import { pageNotices } from '@/api/user/message';
|
||||
import { pageNotice, setRead } from '@/api/user/notice'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
columnKey: 'selection',
|
||||
type: 'selection',
|
||||
width: 45,
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '通知内容',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 110
|
||||
},
|
||||
{
|
||||
prop: 'c_time',
|
||||
label: '通知时间',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
prop: 'readCn',
|
||||
label: '状态',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
width: 80,
|
||||
slot: 'readCn'
|
||||
},
|
||||
{
|
||||
columnKey: 'action',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
width: 140,
|
||||
resizable: false,
|
||||
slot: 'action'
|
||||
}
|
||||
],
|
||||
// 列表选中数据
|
||||
selection: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 表格数据源 */
|
||||
datasource({ page, limit, where, order }) {
|
||||
return pageNotice({ ...where, ...order, page, limit });
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload(where) {
|
||||
this.$refs.table.reload({ page: 1, where: where });
|
||||
},
|
||||
/* 查看 */
|
||||
view(row) {
|
||||
this.$message.info(row.content);
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
console.log(row);
|
||||
this.$message.info('点击了删除');
|
||||
this.updateUnReadNum();
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
columnKey: 'selection',
|
||||
type: 'selection',
|
||||
width: 45,
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '通知内容',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 110
|
||||
},
|
||||
{
|
||||
prop: 'c_time',
|
||||
label: '通知时间',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
prop: 'readCn',
|
||||
label: '状态',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
width: 80,
|
||||
slot: 'readCn'
|
||||
},
|
||||
{
|
||||
columnKey: 'action',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
width: 140,
|
||||
resizable: false,
|
||||
slot: 'action'
|
||||
}
|
||||
this.$message.info('点击了删除');
|
||||
this.updateUnReadNum();
|
||||
},
|
||||
/* 标记已读 */
|
||||
read() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
let ids = [];
|
||||
this.selection.forEach((d) => {
|
||||
ids.push(d.id);
|
||||
});
|
||||
setRead({ ids: ids })
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
this.selection.forEach((d) => {
|
||||
d.read = 1;
|
||||
d.readCn = '已读';
|
||||
});
|
||||
this.updateUnReadNum();
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 触发更新未读数量事件 */
|
||||
updateUnReadNum() {
|
||||
this.$emit('update-data');
|
||||
}
|
||||
],
|
||||
// 列表选中数据
|
||||
selection: []
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 表格数据源 */
|
||||
datasource({ page, limit, where, order }) {
|
||||
return pageNotice({ ...where, ...order, page, limit })
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload(where) {
|
||||
this.$refs.table.reload({ page: 1, where: where })
|
||||
},
|
||||
/* 查看 */
|
||||
view(row) {
|
||||
let path = row.url
|
||||
if (path) {
|
||||
this.$router.push({ path })
|
||||
} else {
|
||||
this.$message.info(row.content)
|
||||
}
|
||||
// setRead({ ids: [row.id], isRead: 1 })
|
||||
// .then(() => {
|
||||
// if (path) {
|
||||
// this.$router.push({ path })
|
||||
// } else {
|
||||
// this.$message.info(row.content)
|
||||
// }
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// this.$message.error(e.message)
|
||||
// })
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
console.log(row)
|
||||
this.$message.info('点击了删除')
|
||||
this.updateUnReadNum()
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据')
|
||||
return
|
||||
}
|
||||
this.$message.info('点击了删除')
|
||||
this.updateUnReadNum()
|
||||
},
|
||||
/* 标记已读 */
|
||||
read(isRead) {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据')
|
||||
return
|
||||
}
|
||||
let ids = []
|
||||
this.selection.forEach((d) => {
|
||||
ids.push(d.id)
|
||||
})
|
||||
setRead({ ids: ids, isRead: isRead })
|
||||
.then((result) => {
|
||||
console.log(result)
|
||||
if (isRead) {
|
||||
this.selection.forEach((d) => {
|
||||
d.read = 1
|
||||
d.readCn = '已读'
|
||||
})
|
||||
} else {
|
||||
this.selection.forEach((d) => {
|
||||
d.read = 0
|
||||
d.readCn = '未读'
|
||||
})
|
||||
}
|
||||
|
||||
this.updateUnReadNum()
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message)
|
||||
})
|
||||
},
|
||||
/* 触发更新未读数量事件 */
|
||||
updateUnReadNum() {
|
||||
this.$emit('update-data')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user