!56 消息中心

Merge pull request !56 from 木子-李/20240703_mesCenter

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,21 +1,14 @@
 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";
-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);
@@ -41,7 +34,6 @@ export const createCrudOptions = function ({
 		return tabActivted.value === 'receive';
 	});
 
-
 	return {
 		crudOptions: {
 			request: {
@@ -55,9 +47,9 @@ export const createCrudOptions = function ({
 					add: {
 						show: computed(() => {
 							return tabActivted.value !== 'receive' && auth('messageCenter:Create');
-						})
+						}),
+					},
 				},
-				}
 			},
 			rowHandle: {
 				fixed: 'right',
@@ -67,10 +59,10 @@ export const createCrudOptions = function ({
 						show: false,
 					},
 					view: {
-						text:"查看",
+						text: '查看',
 						type: 'text',
 						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'),
 					},
 				},
 			},
@@ -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">
@@ -14,30 +13,23 @@
 
 <script lang="ts" setup name="messageCenter">
 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 { 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>