前端-消息通知完成
李强
parent
e56d0d2316
commit
eb9e063f94
|
|
@ -48,7 +48,7 @@ class MessagePushFilter(django_filters.rest_framework.FilterSet):
|
|||
"""
|
||||
消息通知 简单过滤器
|
||||
"""
|
||||
|
||||
# is_read = django_filters.CharFilter(field_name='messagepushuser_message_push__is_read')
|
||||
class Meta:
|
||||
model = MessagePush
|
||||
fields = '__all__'
|
||||
|
|
|
|||
|
|
@ -25,7 +25,9 @@ urlpatterns = [
|
|||
re_path('message/receive/', MessagePushModelViewSet.as_view({"get": "get_received_messages"})),
|
||||
# 消息通知导出
|
||||
re_path('message/export/', MessagePushModelViewSet.as_view({'get': 'export',})),
|
||||
# 消息已读
|
||||
re_path('message/export/', MessagePushModelViewSet.as_view({'get': 'export',})),
|
||||
# 用户个人消息列表
|
||||
re_path('message/user_messages/', MessagePushModelViewSet.as_view({'get': 'get_user_messages',})),
|
||||
# 改为已读
|
||||
re_path('message/is_read/(?P<pk>.*)/', MessagePushModelViewSet.as_view({'put': 'update_is_read',})),
|
||||
]
|
||||
urlpatterns += router.urls
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
from django.db.models import Q
|
||||
from rest_framework.request import Request
|
||||
|
||||
from apps.op_drf.filters import DataLevelPermissionsFilter
|
||||
|
|
@ -5,6 +6,7 @@ from apps.op_drf.viewsets import CustomModelViewSet
|
|||
from apps.system.filters import DictDetailsFilter, DictDataFilter, ConfigSettingsFilter, MessagePushFilter, \
|
||||
SaveFileFilter
|
||||
from apps.system.models import DictData, DictDetails, ConfigSettings, SaveFile, MessagePush
|
||||
from apps.system.models import MessagePushUser
|
||||
from apps.system.serializers import DictDataSerializer, DictDataCreateUpdateSerializer, DictDetailsSerializer, \
|
||||
DictDetailsCreateUpdateSerializer, DictDetailsListSerializer, ConfigSettingsSerializer, \
|
||||
ConfigSettingsCreateUpdateSerializer, SaveFileSerializer, SaveFileCreateUpdateSerializer, \
|
||||
|
|
@ -164,13 +166,19 @@ class MessagePushModelViewSet(CustomModelViewSet):
|
|||
data = MessagePushSerializer(messages, many=True)
|
||||
return SuccessResponse(msg="返回", data=data)
|
||||
|
||||
def get_received_messages(self, request: Request, *args, **kwargs):
|
||||
def get_user_messages(self, request: Request, *args, **kwargs):
|
||||
"""
|
||||
用户获取未读消息通知列表
|
||||
获取用户自己消息列表
|
||||
"""
|
||||
|
||||
queryset = self.filter_queryset(self.get_queryset())
|
||||
queryset = queryset.filter(recipient_id=request.user.id, is_read=0)
|
||||
is_read = request.query_params.get('is_read', None)
|
||||
if is_read:
|
||||
if is_read == 'False':
|
||||
queryset = queryset.filter(Q(messagepushuser_message_push__is_read=is_read) | Q(user=None))
|
||||
else:
|
||||
queryset = queryset.filter(messagepushuser_message_push__is_read=is_read)
|
||||
|
||||
queryset = queryset.filter(is_reviewed=True)
|
||||
page = self.paginate_queryset(queryset)
|
||||
if hasattr(self, 'handle_logging'):
|
||||
self.handle_logging(request, *args, **kwargs)
|
||||
|
|
@ -184,12 +192,14 @@ class MessagePushModelViewSet(CustomModelViewSet):
|
|||
serializer = self.get_serializer(queryset, many=True)
|
||||
return SuccessResponse(serializer.data)
|
||||
|
||||
def get_received_messages_count(self, request: Request, *args, **kwargs):
|
||||
def update_is_read(self, request: Request, *args, **kwargs):
|
||||
"""
|
||||
获取用户未读消息数量
|
||||
修改为已读
|
||||
"""
|
||||
|
||||
pass
|
||||
instance, _ = MessagePushUser.objects.get_or_create(message_push_id=kwargs.get('pk'), user=request.user)
|
||||
instance.is_read = True
|
||||
instance.save()
|
||||
return SuccessResponse()
|
||||
|
||||
def export(self, request: Request, *args, **kwargs):
|
||||
"""
|
||||
|
|
@ -199,6 +209,6 @@ class MessagePushModelViewSet(CustomModelViewSet):
|
|||
:param kwargs:
|
||||
:return:
|
||||
"""
|
||||
field_data = ['消息序号', '标题', '内容', '消息类型', '是否审核', '消息状态','通知接收消息用户', '创建者', '修改者', '修改时间', '创建时间']
|
||||
field_data = ['消息序号', '标题', '内容', '消息类型', '是否审核', '消息状态', '通知接收消息用户', '创建者', '修改者', '修改时间', '创建时间']
|
||||
data = ExportMessagePushSerializer(MessagePush.objects.all(), many=True).data
|
||||
return SuccessResponse(export_excel_save_model(request, field_data, data, '导出岗位数据.xls'))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询参数列表
|
||||
// 查询通知列表
|
||||
export function listMessage(query) {
|
||||
return request({
|
||||
url: '/system/message/',
|
||||
|
|
@ -9,7 +9,7 @@ export function listMessage(query) {
|
|||
})
|
||||
}
|
||||
|
||||
// 查询参数详细
|
||||
// 查询通知详细
|
||||
export function getMessage(messageId) {
|
||||
return request({
|
||||
url: '/system/message/' + messageId + '/',
|
||||
|
|
@ -17,7 +17,7 @@ export function getMessage(messageId) {
|
|||
})
|
||||
}
|
||||
|
||||
// 新增参数配置
|
||||
// 新增通知配置
|
||||
export function addMessage(data) {
|
||||
return request({
|
||||
url: '/system/message/',
|
||||
|
|
@ -26,7 +26,7 @@ export function addMessage(data) {
|
|||
})
|
||||
}
|
||||
|
||||
// 修改参数配置
|
||||
// 修改通知配置
|
||||
export function updateMessage(data) {
|
||||
return request({
|
||||
url: '/system/message/' + data.id + '/',
|
||||
|
|
@ -35,7 +35,7 @@ export function updateMessage(data) {
|
|||
})
|
||||
}
|
||||
|
||||
// 删除参数配置
|
||||
// 删除通知配置
|
||||
export function delMessage(messageId) {
|
||||
return request({
|
||||
url: '/system/message/' + messageId + '/',
|
||||
|
|
@ -44,7 +44,7 @@ export function delMessage(messageId) {
|
|||
}
|
||||
|
||||
|
||||
// 导出参数
|
||||
// 导出通知
|
||||
export function exportMessage(query) {
|
||||
return request({
|
||||
url: '/system/message/export/',
|
||||
|
|
@ -52,3 +52,20 @@ export function exportMessage(query) {
|
|||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户通知列表
|
||||
export function userMessage(query) {
|
||||
return request({
|
||||
url: '/system/message/user_messages/',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 修改通知为已读
|
||||
export function updateIsRead(data) {
|
||||
return request({
|
||||
url: '/system/message/is_read/'+ data.id + '/',
|
||||
method: 'put',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,183 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-col :span="6" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="list-group list-group-striped">
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="user"/>
|
||||
用户名称
|
||||
<div class="pull-right">{{ user.username }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="phone"/>
|
||||
手机号码
|
||||
<div class="pull-right">{{ user.mobile }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="email"/>
|
||||
用户邮箱
|
||||
<div class="pull-right">{{ user.email }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="tree"/>
|
||||
所属部门
|
||||
<div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="peoples"/>
|
||||
所属角色
|
||||
<div class="pull-right">{{ roleGroup }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="date"/>
|
||||
创建日期
|
||||
<div class="pull-right">{{ user.create_datetime }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card shadow="never">
|
||||
<div class="message-page-con message-category-con">
|
||||
<el-menu
|
||||
default-active="1"
|
||||
class="el-menu-vertical-demo"
|
||||
@select="handleSelect">
|
||||
<el-menu-item index="1">
|
||||
<template slot="title">
|
||||
<span class="category-title">未读消息</span>
|
||||
<el-badge style="margin-bottom: 3px" :value="countUnread" :hidden="countUnread===0"></el-badge>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<span class="category-title">已读消息</span>
|
||||
<el-badge style="margin-bottom: 3px" type="info" :value="countReaded"></el-badge>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="message-page-con message-list-con">
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@select="handleListSelect">
|
||||
<el-menu-item v-for="(item,index) in messageList" :key="index" :index="index.toString()">
|
||||
<template slot="title">
|
||||
<div style="line-height: 10px!important;height: 20px;">
|
||||
<p class="msg-title">{{ item.title }}</p>
|
||||
<el-badge is-dot class="item" :type="badgeType"></el-badge>
|
||||
{{item.create_datetime}}
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="message-page-con message-view-con">
|
||||
<div class="message-view-header">
|
||||
<h2 class="message-view-title">{{ showingMsgItem.title }}</h2>
|
||||
<time class="message-view-time">{{ showingMsgItem.create_datetime }}</time>
|
||||
</div>
|
||||
<div v-html="showingMsgItem.content"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getUserProfile} from "@/api/permission/user";
|
||||
import {updateIsRead, userMessage} from "@/api/system/message";
|
||||
import store from "@/store";
|
||||
|
||||
export default {
|
||||
name: "Profile",
|
||||
name: "Mymessage",
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
roleGroup: {},
|
||||
postGroup: {},
|
||||
activeTab: "userinfo"
|
||||
// 查询通知
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
messageList: [],
|
||||
// 已读通知
|
||||
countReaded: 0,
|
||||
messageReadedList: [],
|
||||
// 未读消息列表
|
||||
messageUnreadList: [],
|
||||
countUnread: 0,
|
||||
badgeType: 'danger',
|
||||
// 选中查询后的详细信息
|
||||
showingMsgItem: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getUser();
|
||||
this.getList()
|
||||
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
this.user = response.data;
|
||||
this.roleGroup = response.data.role.map(val => {
|
||||
return val.roleName
|
||||
}).toString();
|
||||
this.postGroup = response.data.post.map(val => {
|
||||
return val.postName
|
||||
}).toString();
|
||||
});
|
||||
/** 查询通知列表 */
|
||||
getList() {
|
||||
// 已读通知列表
|
||||
userMessage(this.addDateRange({...this.queryParams, is_read: 'True'})).then(response => {
|
||||
this.messageReadedList = response.data.results;
|
||||
this.countReaded = response.data.count;
|
||||
|
||||
}
|
||||
);
|
||||
// 未读通知列表
|
||||
userMessage(this.addDateRange({...this.queryParams, is_read: 'False'})).then(response => {
|
||||
this.messageUnreadList = response.data.results;
|
||||
this.countUnread = response.data.count;
|
||||
this.messageList = this.messageUnreadList
|
||||
}
|
||||
);
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
this.messageList = key[0] === "1" ? this.messageUnreadList : this.messageReadedList
|
||||
this.badgeType = key[0] === "1" ? 'danger' : 'info'
|
||||
},
|
||||
// 通知列表激活后
|
||||
handleListSelect(key, keyPath) {
|
||||
this.showingMsgItem = this.messageList[key[0]]
|
||||
// 修改通知查询状态
|
||||
if (this.badgeType === "danger") {
|
||||
updateIsRead(this.showingMsgItem).then(response => {
|
||||
store.getters.unread_msg_count
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.app-container {
|
||||
background-color: #f5f7f9;
|
||||
}
|
||||
|
||||
.message-category-con {
|
||||
border-right: 1px solid #e6e6e6;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.message-page-con {
|
||||
height: calc(100vh - 176px);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: inline-block;
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
|
||||
.message-list-con {
|
||||
border-right: 1px solid #e6e6e6;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.msg-title {
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
line-height: 15px;
|
||||
color: rgb(170, 169, 169);
|
||||
}
|
||||
|
||||
.message-list-con .el-menu-item {
|
||||
height: 80px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.message-view-con {
|
||||
position: absolute;
|
||||
left: 486px;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
overflow: auto;
|
||||
padding: 12px 20px 0;
|
||||
|
||||
}
|
||||
|
||||
.message-view-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.message-view-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.message-view-time {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@
|
|||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<!-- 添加或修改通知配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 参数表格数据
|
||||
// 通知表格数据
|
||||
configList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
StatusOptions: [],
|
||||
// 消息类型字典
|
||||
MessagePushStatusOptions: [],
|
||||
// 查询参数
|
||||
// 查询通知
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
is_reviewed: undefined,
|
||||
status: undefined
|
||||
},
|
||||
// 表单参数
|
||||
// 表单通知
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询参数列表 */
|
||||
/** 查询通知列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listMessage(this.addDateRange(this.queryParams)).then(response => {
|
||||
|
|
@ -341,7 +341,7 @@
|
|||
getMessage(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改参数";
|
||||
this.title = "修改通知";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
|
|
@ -367,7 +367,7 @@
|
|||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const configIds = row.id || this.ids;
|
||||
this.$confirm('是否确认删除参数编号为"' + configIds + '"的数据项?', "警告", {
|
||||
this.$confirm('是否确认删除通知编号为"' + configIds + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
|
|
|
|||
Loading…
Reference in New Issue