fix(20240703_mesCenter): 消息中心

- 优化了前端index和crud
- 修复“我的接收”在点击查看，不显示目标内容bug

backend/dvadmin/system/views/message_center.py

@@ -80,6 +80,9 @@ class MessageCenterTargetUserListSerializer(CustomModelSerializer):
     """
     目标用户序列化器-序列化器
     """
+    role_info = DynamicSerializerMethodField()
+    user_info = DynamicSerializerMethodField()
+    dept_info = DynamicSerializerMethodField()
     is_read = serializers.SerializerMethodField()
 
     def get_is_read(self, instance):
@@ -90,6 +93,42 @@ class MessageCenterTargetUserListSerializer(CustomModelSerializer):
             return queryset.is_read
         return False
 
+    def get_role_info(self, instance, parsed_query):
+        roles = instance.target_role.all()
+        # You can do what ever you want in here
+        # `parsed_query` param is passed to BookSerializer to allow further querying
+        from dvadmin.system.views.role import RoleSerializer
+        serializer = RoleSerializer(
+            roles,
+            many=True,
+            parsed_query=parsed_query
+        )
+        return serializer.data
+
+    def get_user_info(self, instance, parsed_query):
+        users = instance.target_user.all()
+        # You can do what ever you want in here
+        # `parsed_query` param is passed to BookSerializer to allow further querying
+        from dvadmin.system.views.user import UserSerializer
+        serializer = UserSerializer(
+            users,
+            many=True,
+            parsed_query=parsed_query
+        )
+        return serializer.data
+
+    def get_dept_info(self, instance, parsed_query):
+        dept = instance.target_dept.all()
+        # You can do what ever you want in here
+        # `parsed_query` param is passed to BookSerializer to allow further querying
+        from dvadmin.system.views.dept import DeptSerializer
+        serializer = DeptSerializer(
+            dept,
+            many=True,
+            parsed_query=parsed_query
+        )
+        return serializer.data
+
     class Meta:
         model = MessageCenter
         fields = "__all__"

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

@@ -1,39 +1,32 @@
 import * as api from './api';
-import {dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions} from '@fast-crud/fast-crud';
+import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import tableSelector from '/@/components/tableSelector/index.vue';
-import {shallowRef, computed, ref, inject} from 'vue';
+import { shallowRef, computed } from 'vue';
 import manyToMany from '/@/components/manyToMany/index.vue';
-import {auth} from '/@/utils/authFunction'
+import { auth } from '/@/utils/authFunction';
-import  {createCrudOptions as userCrudOptions } from "/@/views/system/user/crud";
+const { compute } = useCompute();
-import {request} from '/@/utils/service'
-const {compute} = useCompute();
 
-interface CreateCrudOptionsTypes {
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-    crudOptions: CrudOptions;
+	const { tabActivted } = context; //从context中获取tabActivted
-}
 
-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) => {
+	const editRequest = async ({ form, row }: EditReq) => {
 		form.id = row.id;
 		return await api.UpdateObj(form);
 	};
-    const delRequest = async ({row}: DelReq) => {
+	const delRequest = async ({ row }: DelReq) => {
 		return await api.DelObj(row.id);
 	};
-    const addRequest = async ({form}: AddReq) => {
+	const addRequest = async ({ form }: AddReq) => {
 		return await api.AddObj(form);
 	};
 
-    const viewRequest = async ({row}: { row: any }) => {
+	const viewRequest = async ({ row }: { row: any }) => {
 		return await api.GetObj(row.id);
 	};
 
@@ -41,7 +34,6 @@ export const createCrudOptions = function ({
 		return tabActivted.value === 'receive';
 	});
 
-
 	return {
 		crudOptions: {
 			request: {
@@ -50,27 +42,27 @@ export const createCrudOptions = function ({
 				editRequest,
 				delRequest,
 			},
-			actionbar:{
+			actionbar: {
-				buttons:{
+				buttons: {
-					add:{
+					add: {
-						show:computed(() =>{
+						show: computed(() => {
 							return tabActivted.value !== 'receive' && auth('messageCenter:Create');
-						})
+						}),
+					},
 				},
-				}
 			},
 			rowHandle: {
-				fixed:'right',
+				fixed: 'right',
-				width:150,
+				width: 150,
 				buttons: {
 					edit: {
 						show: false,
 					},
 					view: {
-						text:"查看",
+						text: '查看',
-						type:'text',
+						type: 'text',
-						iconRight:'View',
+						iconRight: 'View',
-						show:auth("messageCenter:Search"),
+						show: auth('messageCenter:Search'),
 						click({ index, row }) {
 							crudExpose.openView({ index, row });
 							if (tabActivted.value === 'receive') {
@@ -82,7 +74,7 @@ export const createCrudOptions = function ({
 					remove: {
 						iconRight: 'Delete',
 						type: 'text',
-						show:auth('messageCenter:Delete')
+						show: auth('messageCenter:Delete'),
 					},
 				},
 			},
@@ -99,7 +91,7 @@ export const createCrudOptions = function ({
 						show: true,
 					},
 					type: ['text', 'colspan'],
-					column:{
+					column: {
 						minWidth: 120,
 					},
 					form: {
@@ -132,7 +124,7 @@ export const createCrudOptions = function ({
 				target_type: {
 					title: '目标类型',
 					type: ['dict-radio', 'colspan'],
-					column:{
+					column: {
 						minWidth: 120,
 					},
 					dict: dict({
@@ -285,7 +277,7 @@ export const createCrudOptions = function ({
 							name: shallowRef(tableSelector),
 							vModel: 'modelValue',
 							displayLabel: compute(({ form }) => {
-								return form.target_dept_name;
+								return form.dept_info;
 							}),
 							tableConfig: {
 								url: '/api/system/dept/all_dept/',
@@ -349,7 +341,7 @@ export const createCrudOptions = function ({
 							},
 						],
 						component: {
-							disabled: true,
+							disabled: false,
 							id: '1', // 当同一个页面有多个editor时，需要配置不同的id
 							editorConfig: {
 								// 是否只读
@@ -373,4 +365,4 @@ export const createCrudOptions = function ({
 			},
 		},
 	};
-};
+}

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

@@ -1,6 +1,5 @@
 <template>
 	<fs-page>
-
 		<fs-crud ref="crudRef" v-bind="crudBinding">
 			<template #header-middle>
 				<el-tabs v-model="tabActivted" @tab-click="onTabClick">
@@ -13,31 +12,24 @@
 </template>
 
 <script lang="ts" setup name="messageCenter">
-import {ref, onMounted} from 'vue';
+import { ref, onMounted } from 'vue';
-import {useExpose, useCrud} from '@fast-crud/fast-crud';
+import { useFs } from '@fast-crud/fast-crud';
-import {createCrudOptions} from './crud';
+import createCrudOptions from './crud';
-// crud组件的ref
+
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const {crudExpose} = useExpose({crudRef, crudBinding});
 //tab选择
-const  tabActivted = ref('send')
+const tabActivted = ref('send');
-const onTabClick= (tab:any)=> {
+const onTabClick = (tab: any) => {
-  const { paneName } = tab
+	const { paneName } = tab;
-  tabActivted.value = paneName
+	tabActivted.value = paneName;
 	crudExpose.doRefresh();
-}
+};
-// 你的crud配置
+
-const {crudOptions} = createCrudOptions({crudExpose,tabActivted});
+const context: any = { tabActivted }; //将 tabActivted 通过context传递给crud.tsx
 // 初始化crud配置
-const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
+const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, context });
 
 // 页面打开后获取列表数据
 onMounted(() => {
 	crudExpose.doRefresh();
 });
-
-
 </script>