feat(组件): 🎉 组件新增

新增一对多组件和多对多组件

backend/dvadmin/system/views/message_center.py

@@ -121,12 +121,12 @@ class MessageCenterCreateSerializer(CustomModelSerializer):
         users = initial_data.get('target_user', [])
         if target_type in [1]:  # 按角色
             target_role = initial_data.get('target_role',[])
-            users = Users.objects.exclude(is_deleted=True).filter(role__id__in=target_role).values_list('id', flat=True)
+            users = Users.objects.filter(role__id__in=target_role).values_list('id', flat=True)
         if target_type in [2]:  # 按部门
             target_dept = initial_data.get('target_dept',[])
-            users = Users.objects.exclude(is_deleted=True).filter(dept__id__in=target_dept).values_list('id', flat=True)
+            users = Users.objects.filter(dept__id__in=target_dept).values_list('id', flat=True)
         if target_type in [3]:  # 系统通知
-            users = Users.objects.exclude(is_deleted=True).values_list('id', flat=True)
+            users = Users.objects.values_list('id', flat=True)
         targetuser_data = []
         for user in users:
             targetuser_data.append({

web/src/components/foreignKey/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <!--   你的自定义受控组件-->
+  <div>
+    <el-tag :type="randomType">{{ data }}</el-tag>
+  </div>
+</template>
+<script lang="ts" setup>
+import {watch, ref} from "vue";
+
+const props = defineProps({
+  modelValue: String || Object,
+  displayLabel: {
+    type:String,
+    default: ""
+  }
+})
+
+// template上使用data
+const data = ref()
+watch(() => {
+      return props.modelValue
+    }, // 监听modelValue的变化，
+    (value) => {
+      if (typeof value === "string") {
+        data.value = value
+      } else if (typeof value === "object") {
+        const {displayLabel} = props
+        data.value = value ? value[displayLabel] : null
+      } else {
+        data.value = null
+      }
+
+    }, // 当modelValue值触发后，同步修改data.value的值
+    {immediate: true} // 立即触发一次，给data赋值初始值
+)
+
+const tagType = ['success', 'info', 'warning', 'danger']
+const randomType = (): string => {
+  return tagType[Math.floor(Math.random() * tagType.length)];
+}
+</script>

web/src/components/manyToMany/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <!--   你的自定义受控组件-->
+  <div>
+    <el-tag class="many-to-many-tag" :type="randomType" v-for="(item,index) in data" :key="index">{{item}}</el-tag>
+  </div>
+</template>
+<script lang="ts" setup>
+import {watch, ref} from "vue";
+
+const props = defineProps({
+  modelValue: Array,
+  bindValue: Array,
+  displayLabel: {
+    type:String,
+    default: ""
+  }
+})
+
+// template上使用data
+const data = ref()
+watch(() => {
+      return props.bindValue
+    }, // 监听modelValue的变化，
+    (value) => {
+      const {displayLabel} = props
+      const result = value ? value.map((item: any) => {
+        return item[displayLabel]
+      }) : null
+      data.value = result
+    }, // 当modelValue值触发后，同步修改data.value的值
+    {immediate: true} // 立即触发一次，给data赋值初始值
+)
+
+const tagType = ['success', 'info', 'warning', 'danger']
+const randomType = (): string => {
+  return tagType[Math.floor(Math.random() * tagType.length)];
+}
+</script>
+<style scoped>
+.many-to-many-tag{
+  margin-right: 5px;
+}
+.many-to-many-tag:last-child {
+  margin-right: 0;
+}
+</style>

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

@@ -4,6 +4,7 @@ import {request} from "/@/utils/service";
 import {dictionary} from "/@/utils/dictionary";
 import tableSelector from "/@/components/tableSelector/index.vue"
 import {shallowRef} from "vue";
+import manyToMany from "/@/components/manyToMany/index.vue"
 
 interface CreateCrudOptionsTypes {
     crudOptions: CrudOptions;
@@ -139,13 +140,15 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                                 required: true,
                                 message: '必填项'
                             }
-                        ],
+                        ]
-
                     },
+                    column:{
                         component: {
-                        name: 'manyToMany',
+                            name: shallowRef(manyToMany),
-                        valueBinding: 'user_info',
+                            vModel: "modelValue",
-                        children: 'name'
+                            bindValue:compute(({row}) => {return row.user_info}),
+                            displayLabel: 'name'
+                        }
                     }
                 },
                 target_role: {
@@ -159,6 +162,12 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                         component: {
                             name: shallowRef(tableSelector),
                             vModel: "modelValue",
+                            displayLabel:compute(({row}) => {
+                                if(row){
+                                    return row.role_info;
+                                }
+                                return null
+                            }),
                             tableConfig: {
                                 url: '/api/system/role/',
                                 label: 'name',
@@ -184,10 +193,13 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                             }
                         ]
                     },
+                    column:{
                         component: {
-                        name: 'manyToMany',
+                            name: shallowRef(manyToMany),
-                        valueBinding: 'role_info',
+                            vModel: "modelValue",
-                        children: 'name'
+                            bindValue:compute(({row}) => {return row.role_info}),
+                            displayLabel: 'name'
+                        }
                     }
                 },
                 target_dept: {
@@ -233,6 +245,14 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                                 message: '必填项'
                             }
                         ]
+                    },
+                    column:{
+                        component: {
+                            name: shallowRef(manyToMany),
+                            vModel: "modelValue",
+                            bindValue:compute(({row}) => {return row.dept_info}),
+                            displayLabel: 'name'
+                        }
                     }
                 },
                 content: {