src/components/MultiplePopup/src/components/MultipleSelect.vue

@@ -79,15 +79,16 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, watch, reactive, computed, inject, ref } from 'vue';
+  import { computed, inject, nextTick, onMounted, reactive, ref, watch } from 'vue';
   import { cloneDeep } from 'lodash-es';
   import { Icon } from '/@/components/Icon';
   import { getDatasourceById } from '/@/api/system/datasource';
   import { getDicDetailPageList } from '/@/api/system/dic';
   import { isFunction } from '/@/utils/is';
   import type { ColumnProps } from 'ant-design-vue/lib/table';
-  import { camelCaseString, apiConfigFunc } from '/@/utils/event/design';
+  import { apiConfigFunc, camelCaseString } from '/@/utils/event/design';
   import { useI18n } from '/@/hooks/web/useI18n';
+
   const { t } = useI18n();
   const props = defineProps({
     multipleDialog: { type: Boolean },
@@ -136,6 +137,9 @@
     if (props.isSubFormUse) {
       await getDatasourceList(1);
     }
+    await nextTick(() => {
+      console.log(props.selectedDataSource);
+    });
   });
 
   const state = reactive({
@@ -209,44 +213,66 @@
       immediate: true,
     },
   );
-
+  watch(
+    () => props.multipleDialog,
+    () => {
+      if (props.multipleDialog) {
+        selectedList.value = [];
+        state.selectedRowKeys = [];
+        initData();
+      } else {
+        selectedList.value = [];
+        state.selectedRowKeys = [];
+      }
+    },
+  );
   watch(
     () => [state.dataSourceList, props.selectedDataSource, props.value],
     () => {
       emit('getList', state.dataSourceList);
       if (!state.dataSourceList.length) return;
-      selectedList.value = [];
-      state.selectedRowKeys = [];
-      if (!props.isSubFormUse) {
-        state.dataSourceList.map((data: any, index: number) => {
-          data.key = index + 1;
-          if (props.value) {
-            props.selectedDataSource.map((select: any) => {
-              if (data.key === select.key) {
-                selectedList.value.push(data);
-                state.selectedRowKeys.push(data.key);
-              }
-            });
-          }
-        });
-      }
-      if (props.isSubFormUse) {
-        state.dataSourceList.map((data: any, index: number) => {
-          data.key = index + 1;
+      initData();
+      const seenIds = new Map();
+      selectedList.value = selectedList.value.filter((item) => {
+        const id = item[props.valueField!] || item[props.uniqueKey!];
+        if (!seenIds.has(id)) {
+          seenIds.set(id, true);
+          return true;
+        }
+        return false;
+      });
+      state.selectedRowKeys = [...new Set(state.selectedRowKeys)];
+    },
+    {
+      deep: true,
+    },
+  );
+  const initData = () => {
+    if (!props.isSubFormUse) {
+      state.dataSourceList.map((data: any, index: number) => {
+        data.key = index + 1;
+        if (props.value) {
           props.selectedDataSource.map((select: any) => {
-            if (select[props.uniqueKey!] === data[props.valueField!]) {
+            if (data.key === select.key) {
               selectedList.value.push(data);
               state.selectedRowKeys.push(data.key);
             }
           });
+        }
+      });
+    }
+    if (props.isSubFormUse) {
+      state.dataSourceList.map((data: any, index: number) => {
+        data.key = index + 1;
+        props.selectedDataSource.map((select: any) => {
+          if (select[props.uniqueKey!] === data[props.valueField!]) {
+            selectedList.value.push(data);
+            state.selectedRowKeys.push(data.key);
+          }
         });
-      }
-    },
-    {
-      deep: true,
-    },
-  );
-
+      });
+    }
+  };
   const resetSearch = () => {
     state.searchText = '';
     getDatasourceList(1);

src/views/form/template/index.vue

@@ -333,6 +333,7 @@
         },
         schemas: searchFormSchema,
       },
+      bordered: true,
       beforeFetch: (pageParams) => {
         //发送请求默认新增  左边树结构所选机构id
         const newParams = {
@@ -927,8 +928,6 @@
 
       return handleSearchForm(option, schema, config, isNeedTrans, false) as FormSchema;
     });
-    console.log(searchFormSchema);
-
     return [searchFormSchema, searchDate];
   }