feat(消息通知): ✨ 消息通知

消息中心完成

backend/dvadmin/system/views/dept.py

@@ -7,6 +7,7 @@
 """
 from rest_framework import serializers
 from rest_framework.decorators import action
+from rest_framework.permissions import IsAuthenticated
 
 from dvadmin.system.models import Dept
 from dvadmin.utils.json_response import DetailResponse, SuccessResponse
@@ -140,7 +141,7 @@ class DeptViewSet(CustomModelViewSet):
         return DetailResponse(data=queryset, msg="获取成功")
 
 
-    @action(methods=["GET"], detail=False, permission_classes=[AnonymousUserPermission],extra_filter_class=[])
+    @action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated],extra_filter_class=[])
     def all_dept(self, request, *args, **kwargs):
         queryset = self.filter_queryset(self.get_queryset())
         data = queryset.filter(status=True).order_by('sort').values('name', 'id', 'parent')

backend/dvadmin/system/views/message_center.py

@@ -86,7 +86,9 @@ class MessageCenterTargetUserListSerializer(CustomModelSerializer):
         user_id = self.request.user.id
         message_center_id = instance.id
         queryset = MessageCenterTargetUser.objects.filter(messagecenter__id=message_center_id,users_id=user_id).first()
+        if queryset:
             return queryset.is_read
+        return False
 
     class Meta:
         model = MessageCenter
@@ -160,7 +162,7 @@ class MessageCenterViewSet(CustomModelViewSet):
     queryset = MessageCenter.objects.order_by('create_datetime')
     serializer_class = MessageCenterSerializer
     create_serializer_class = MessageCenterCreateSerializer
-    extra_filter_class = []
+    extra_filter_backends = []
 
     def get_queryset(self):
         if self.action == 'list':
@@ -211,6 +213,6 @@ class MessageCenterViewSet(CustomModelViewSet):
         queryset = MessageCenterTargetUser.objects.filter(users__id=self_user_id).order_by('create_datetime').last()
         data = None
         if queryset:
-            serializer = MessageCenterTargetUserListSerializer(queryset, many=False, request=request)
+            serializer = MessageCenterTargetUserListSerializer(queryset.messagecenter, many=False, request=request)
             data = serializer.data
         return DetailResponse(data=data, msg="获取成功")

web/src/theme/element.scss

@@ -29,7 +29,7 @@
 .el-form {
 	// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
 	.el-form-item:last-of-type {
-		margin-bottom: 0 !important;
+		margin-bottom: 22px !important;
 	}
 	// 修复行内表单最后一个 el-form-item 位置下移问题
 	&.el-form--inline {

web/src/views/system/menu/crud.tsx

@@ -78,7 +78,7 @@ export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crud
 			actionbar: {
 				buttons: {
 					add: {
-						show: hasPermissions('Menu:Create'),
+						show: hasPermissions('menu:Create'),
 					},
 				},
 			},

web/src/views/system/messageCenter/api.ts

@@ -13,11 +13,25 @@ export function GetList(query: PageQuery) {
 
 export function GetObj(id: InfoReq) {
     return request({
-        url: apiPrefix + id,
+        url: apiPrefix + id + '/',
         method: 'get',
     });
 }
 
+/**
+ * 获取自己接收的消息
+ * @param query
+ * @returns {*}
+ * @constructor
+ */
+export function GetSelfReceive (query:PageQuery) {
+    return request({
+        url: apiPrefix + 'get_self_receive/',
+        method: 'get',
+        params: query
+    })
+}
+
 export function AddObj(obj: AddReq) {
     return request({
         url: apiPrefix,
@@ -26,6 +40,9 @@ export function AddObj(obj: AddReq) {
     });
 }
 
+
+
+
 export function UpdateObj(obj: EditReq) {
     return request({
         url: apiPrefix + obj.id + '/',

web/src/views/system/messageCenter/crud.tsx

@@ -1,17 +1,24 @@
 import * as api from "./api";
-import {dict, compute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
+import {dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
-import {request} from "/@/utils/service";
-import {dictionary} from "/@/utils/dictionary";
 import tableSelector from "/@/components/tableSelector/index.vue"
-import {shallowRef} from "vue";
+import {shallowRef, computed, ref} from "vue";
 import manyToMany from "/@/components/manyToMany/index.vue"
 
+const {compute} = useCompute()
+
 interface CreateCrudOptionsTypes {
     crudOptions: CrudOptions;
 }
 
-export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
+
+export const createCrudOptions = function ({
+                                               crudExpose,
+                                               tabActivted
+                                           }: { crudExpose: CrudExpose, tabActivted: any }): CreateCrudOptionsTypes {
     const pageRequest = async (query: PageQuery) => {
+        if (tabActivted.value === 'receive') {
+            return await api.GetSelfReceive(query);
+        }
         return await api.GetList(query);
     };
     const editRequest = async ({form, row}: EditReq) => {
@@ -24,6 +31,15 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
     const addRequest = async ({form}: AddReq) => {
         return await api.AddObj(form);
     };
+
+    const viewRequest = async ({row}: { row: any }) => {
+        return await api.GetObj(row.id);
+    }
+
+    const IsReadFunc = computed(() => {
+        return tabActivted.value === 'receive'
+    })
+
     return {
         crudOptions: {
             request: {
@@ -32,18 +48,33 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                 editRequest,
                 delRequest
             },
+            rowHandle: {
+                buttons: {
+                    edit: {
+                        show: false
+                    },
+                    view: {
+                        click({index,row}) {
+                            crudExpose.openView({index,row})
+                            if(tabActivted.value === 'receive'){
+                                viewRequest({row})
+                                crudExpose.doRefresh()
+                            }
+                        }
+                    }
+                }
+            },
             columns: {
                 id: {
                     title: 'id',
                     form: {
-                        show: false
+                        show: false,
                     }
-
                 },
                 title: {
                     title: '标题',
                     search: {
-                        disabled: false
+                        show: true,
                     },
                     type: ["text", "colspan"],
                     form: {
@@ -60,7 +91,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                     title: '是否已读',
                     type: 'dict-select',
                     column: {
-                        show: false
+                        show: IsReadFunc,
                     },
                     dict: dict({
                         data: [
@@ -76,9 +107,6 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                     title: '目标类型',
                     type: ['dict-radio', 'colspan'],
                     width: 120,
-                    // show() {
-                    //     return vm.tabActivted === 'send'
-                    // },
                     dict: dict({
                         data: [{value: 0, label: '按用户'}, {value: 1, label: '按角色'}, {
                             value: 2,
@@ -104,7 +132,6 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                         disabled: true
                     },
                     width: 130,
-                    disabled: true,
                     form: {
                         component: {
                             name: shallowRef(tableSelector),
@@ -142,10 +169,13 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                         ]
                     },
                     column: {
+                        show: false,
                         component: {
                             name: shallowRef(manyToMany),
                             vModel: "modelValue",
-                            bindValue:compute(({row}) => {return row.user_info}),
+                            bindValue: compute(({row}) => {
+                                return row.user_info
+                            }),
                             displayLabel: 'name'
                         }
                     }
@@ -155,7 +185,6 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                     search: {
                         disabled: true
                     },
-                    disabled: true,
                     width: 130,
                     form: {
                         component: {
@@ -193,10 +222,13 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                         ]
                     },
                     column: {
+                        show: false,
                         component: {
                             name: shallowRef(manyToMany),
                             vModel: "modelValue",
-                            bindValue:compute(({row}) => {return row.role_info}),
+                            bindValue: compute(({row}) => {
+                                return row.role_info
+                            }),
                             displayLabel: 'name'
                         }
                     }
@@ -246,10 +278,13 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                         ]
                     },
                     column: {
+                        show: false,
                         component: {
                             name: shallowRef(manyToMany),
                             vModel: "modelValue",
-                            bindValue:compute(({row}) => {return row.dept_info}),
+                            bindValue: compute(({row}) => {
+                                return row.dept_info
+                            }),
                             displayLabel: 'name'
                         }
                     }
@@ -269,11 +304,18 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                             }
                         ],
                         component: {
-                            // disabled: compute(({form}) => {
+                            disabled: true,
-                            //     return form.disabled;
-                            // }),
                             id: "1", // 当同一个页面有多个editor时，需要配置不同的id
-                            config: {},
+                            editorConfig: {
+                                // 是否只读
+                                readOnly: compute((context) => {
+                                    const {mode} = context
+                                    if (mode === 'add') {
+                                        return false
+                                    }
+                                    return true;
+                                }),
+                            },
                             uploader: {
                                 type: "form",
                                 buildUrl(res: any) {

web/src/views/system/messageCenter/index.vue

@@ -1,6 +1,14 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
+
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #header-middle>
+        <el-tabs v-model="tabActivted" @tab-click="onTabClick">
+          <el-tab-pane label="我的发布" name="send"></el-tab-pane>
+          <el-tab-pane label="我的接收" name="receive"></el-tab-pane>
+        </el-tabs>
+      </template>
+    </fs-crud>
   </fs-page>
 </template>
 
@@ -14,8 +22,15 @@ const crudRef = ref();
 const crudBinding = ref();
 // 暴露的方法
 const {crudExpose} = useExpose({crudRef, crudBinding});
+//tab选择
+const  tabActivted = ref('send')
+const onTabClick= (tab:any)=> {
+  const { paneName } = tab
+  tabActivted.value = paneName
+  crudExpose.doRefresh();
+}
 // 你的crud配置
-const {crudOptions} = createCrudOptions({crudExpose});
+const {crudOptions} = createCrudOptions({crudExpose,tabActivted});
 // 初始化crud配置
 const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
 
@@ -23,4 +38,6 @@ const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
 onMounted(() => {
   crudExpose.doRefresh();
 });
+
+
 </script>