前端-消息通知完成

dvadmin-backend/apps/system/filters.py

@@ -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__'

dvadmin-backend/apps/system/urls.py

@@ -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

dvadmin-backend/apps/system/views.py

@@ -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):
         """
-            获取用户未读消息数量
+        修改为已读
         """
-
+        instance, _ = MessagePushUser.objects.get_or_create(message_push_id=kwargs.get('pk'), user=request.user)
-        pass
+        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'))

dvadmin-ui/src/api/system/message.js

@@ -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',
+  })
+}

dvadmin-ui/src/views/system/message/Mymessage.vue

@@ -1,79 +1,183 @@
 <template>
   <div class="app-container">
-    <el-row>
+    <el-card shadow="never">
-      <el-col :span="6" :xs="24">
+      <div class="message-page-con message-category-con">
-        <el-card class="box-card">
+        <el-menu
-          <div slot="header" class="clearfix">
+          default-active="1"
-            <span>消息通知</span>
+          class="el-menu-vertical-demo"
-          </div>
+          @select="handleSelect">
-          <div>
+          <el-menu-item index="1">
-            <ul class="list-group list-group-striped">
+            <template slot="title">
-              <li class="list-group-item">
+              <span class="category-title">未读消息</span>
-                <svg-icon icon-class="user"/>
+              <el-badge style="margin-bottom: 3px" :value="countUnread" :hidden="countUnread===0"></el-badge>
-                用户名称
+            </template>
-                <div class="pull-right">{{ user.username }}</div>
+          </el-menu-item>
-              </li>
+          <el-menu-item index="2">
-              <li class="list-group-item">
+            <span class="category-title">已读消息</span>
-                <svg-icon icon-class="phone"/>
+            <el-badge style="margin-bottom: 3px" type="info" :value="countReaded"></el-badge>
-                手机号码
+          </el-menu-item>
-                <div class="pull-right">{{ user.mobile }}</div>
+        </el-menu>
-              </li>
+      </div>
-              <li class="list-group-item">
+      <div class="message-page-con message-list-con">
-                <svg-icon icon-class="email"/>
+        <el-menu
-                用户邮箱
+          default-active="2"
-                <div class="pull-right">{{ user.email }}</div>
+          class="el-menu-vertical-demo"
-              </li>
+          @select="handleListSelect">
-              <li class="list-group-item">
+          <el-menu-item v-for="(item,index) in messageList" :key="index" :index="index.toString()">
-                <svg-icon icon-class="tree"/>
+            <template slot="title">
-                所属部门
+              <div style="line-height: 10px!important;height: 20px;">
-                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
+                <p class="msg-title">{{ item.title }}</p>
-              </li>
+                <el-badge is-dot class="item" :type="badgeType"></el-badge>
-              <li class="list-group-item">
+                {{item.create_datetime}}
-                <svg-icon icon-class="peoples"/>
+
-                所属角色
+              </div>
-                <div class="pull-right">{{ roleGroup }}</div>
+            </template>
-              </li>
+          </el-menu-item>
-              <li class="list-group-item">
+        </el-menu>
-                <svg-icon icon-class="date"/>
+      </div>
-                创建日期
+      <div class="message-page-con message-view-con">
-                <div class="pull-right">{{ user.create_datetime }}</div>
+        <div class="message-view-header">
-              </li>
+          <h2 class="message-view-title">{{ showingMsgItem.title }}</h2>
-            </ul>
+          <time class="message-view-time">{{ showingMsgItem.create_datetime }}</time>
-          </div>
+        </div>
-        </el-card>
+        <div v-html="showingMsgItem.content"></div>
-      </el-col>
+      </div>
-    </el-row>
+    </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: {},
+        queryParams: {
-        postGroup: {},
+          pageNum: 1,
-        activeTab: "userinfo"
+          pageSize: 10,
+        },
+        messageList: [],
+        // 已读通知
+        countReaded: 0,
+        messageReadedList: [],
+        // 未读消息列表
+        messageUnreadList: [],
+        countUnread: 0,
+        badgeType: 'danger',
+        // 选中查询后的详细信息
+        showingMsgItem: {}
       };
     },
     created() {
-      this.getUser();
+      this.getList()
+
     },
     methods: {
-      getUser() {
+      /** 查询通知列表 */
-        getUserProfile().then(response => {
+      getList() {
-          this.user = response.data;
+        // 已读通知列表
-          this.roleGroup = response.data.role.map(val => {
+        userMessage(this.addDateRange({...this.queryParams, is_read: 'True'})).then(response => {
-            return val.roleName
+            this.messageReadedList = response.data.results;
-          }).toString();
+            this.countReaded = response.data.count;
-          this.postGroup = response.data.post.map(val => {
+
-            return val.postName
+          }
-          }).toString();
+        );
-        });
+        // 未读通知列表
+        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>

dvadmin-ui/src/views/system/message/index.vue

@@ -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"