同步6/16

src/components/Holder/repairUser.vue

@@ -2,12 +2,12 @@
   <slot v-if="$slots.default" />
 
   <div v-else class="residentBox" @click="choiceResidentFun">
-    <div class="defaultbox" v-if="multipleSelection.length === 0">
+    <div class="defaultbox" v-if="multipleSelection.length === 0 && props.username === null">
       <span>请选择</span>
       <el-icon><Search /></el-icon>
     </div>
     <div v-else class="overflow-auto overflow-hidden w-full text-ellipsis text-nowrap">
-      <span>姓名：{{ multipleSelection[0]?.name }}</span>
+      <span>姓名：{{ multipleSelection[0]?.nickName ?? props.username }}</span>
     </div>
   </div>
 
@@ -30,7 +30,7 @@
         <el-button @click="resetQuery">重置</el-button>
       </div>
     </nav>
-    <el-table @row-click="handleRowClick" ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
+    <el-table ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="序号" align="center" width="55" type="index" />
       <el-table-column label="姓名" align="center" prop="nickName" />
@@ -80,9 +80,13 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  username: {
+    type: String,
+    default: null
+  },
   returnvalue: {
     type: String,
-    default: 'id'
+    default: 'userId'
   },
   titleName: {
     type: String,
@@ -121,6 +125,7 @@ const multipleTableRef = ref();
 const tableData = ref<tableType[]>([]);
 const total = ref(0);
 const loading = ref(false);
+const isFetching = ref(false); // 加锁，防止重复触发 selection-change
 
 // 存储选中项
 const multipleSelection = ref<tableType[]>([]);
@@ -129,29 +134,31 @@ const isMultiple = computed(() => props.isMultiple ?? false);
 
 // 优化 handleUserSelection，避免重复查找
 const handleUserSelection = () => {
-  if (!userid.value || !tableData.value.length) return;
-
-  multipleSelection.value = [];
-  if (userid.value.trim() !== '') {
-    const arr = userid.value.split(',');
-    arr.forEach((item) => {
-      const target = tableData.value.find((row) => row.userId == item);
-      target && multipleSelection.value.push(target);
-    });
+  isFetching.value = true;
+  console.log('获取列表');
+  if (tableData.value.length <= 0 || !multipleTableRef.value) {
+    isFetching.value = false;
+    return;
+  }
+  const rowsToSelect = tableData.value.filter((row) => {
+    return multipleSelection.value.some((selected) => selected.userId === row.userId);
+  });
+  multipleTableRef.value.clearSelection();
+  if (rowsToSelect.length > 0) {
     nextTick(() => {
-      if (multipleTableRef.value) {
-        multipleTableRef.value.clearSelection();
-        multipleSelection.value.forEach((item) => {
-          multipleTableRef.value.toggleRowSelection(item, true);
-        });
-      }
+      rowsToSelect.forEach((row) => {
+        multipleTableRef.value?.toggleRowSelection(row, true);
+      });
+      isFetching.value = false;
     });
+  } else {
+    isFetching.value = false;
   }
 };
 
 // 监听
 // 监听优化：只在 userid 变化时触发
-// watch(userid, handleUserSelection, { immediate: true });
+watch(userid, handleUserSelection, { immediate: true });
 // watch(tableData, () => {
 //   if (userid.value) handleUserSelection(); // 仅在有 userid 时重新处理
 // });
@@ -160,6 +167,17 @@ const handleUserSelection = () => {
 // 打开选择框
 function choiceResidentFun() {
   dialog.value.dialogVisible = true;
+  multipleSelection.value = []; // 打开时清空之前的选择
+  if (typeof props.userid === 'string' && props.userid.trim() !== '') {
+    multipleSelection.value = [
+      {
+        userId: props.userid
+      } as ResidentVO
+    ];
+  } else if (Array.isArray(props.userid)) {
+    multipleSelection.value = props.userid.map((id) => ({ userId: id })) as tableType[];
+  }
+  getlist();
 }
 
 // 获取列表
@@ -167,8 +185,9 @@ function getlist() {
   loading.value = true;
   getUserByRoleKey(userType.value)
     .then((res) => {
-      tableData.value = res.data;
+      tableData.value = res.rows;
       total.value = res.total;
+      handleUserSelection();
     })
     .catch((error) => {
       console.error('获取用户列表失败:', error);
@@ -177,40 +196,45 @@ function getlist() {
       loading.value = false;
     });
 }
-
 // ==============================================
 // ✅ 新增：处理 selection-change（多选专用）
 // ==============================================
 function handleSelectionChange(selection: tableType[]) {
+  if (isFetching.value) return;
   if (isMultiple.value) {
-    multipleSelection.value = selection;
-  }
-}
-// ==============================================
-// 最佳单选方案：点击行选中，无报错、无循环、最稳定
-// ==============================================
-// 优化 handleRowClick，避免重复
-function handleRowClick(row: tableType) {
-  if (!multipleTableRef.value) return;
-
-  if (isMultiple.value) {
-    const index = multipleSelection.value.findIndex((item) => item.id === row.id);
-    if (index > -1) {
-      // 取消选中
-      multipleSelection.value.splice(index, 1);
-      multipleTableRef.value?.toggleRowSelection(row, false);
-    } else {
-      // 选中
-      multipleSelection.value.push(row);
-      multipleTableRef.value?.toggleRowSelection(row, true);
-    }
+    const currentSelectedIds = new Set(selection.map((item) => item.id));
+    const otherPageSelections = multipleSelection.value.filter((item) => {
+      const isCurrentPageItem = tableData.value.some((row) => row.id === item.id);
+      if (isCurrentPageItem) {
+        return currentSelectedIds.has(item.id);
+      } else {
+        return true;
+      }
+    });
+    // 3. 合并：其他页保留的 + 当前页新选中的
+    const finalSelection = [...otherPageSelections, ...selection];
+    // 4. 去重（以防万一）
+    const uniqueMap = new Map();
+    finalSelection.forEach((item) => uniqueMap.set(item.id, item));
+    multipleSelection.value = Array.from(uniqueMap.values());
+    console.log(multipleSelection.value.map((item) => item.id));
   } else {
-    // 【单选模式】先清空，再选中当前行
-    multipleSelection.value = [];
-    multipleTableRef.value.clearSelection();
-    multipleSelection.value = [row];
-    multipleTableRef.value.toggleRowSelection(row, true);
+    // --- 单选逻辑 ---
+    if (selection.length > 0) {
+      const lastSelected = selection[selection.length - 1];
+      multipleSelection.value = [lastSelected];
+      nextTick(() => {
+        if (selection.length > 1) {
+          multipleTableRef.value?.clearSelection();
+          multipleTableRef.value?.toggleRowSelection(lastSelected, true);
+        }
+      });
+    } else {
+      multipleSelection.value = [];
+    }
   }
+
+  console.log('handleSelectionChange', selection);
 }
 // 重置查询
 function resetQuery() {
@@ -250,23 +274,21 @@ function confirm() {
     // 单选
     if (returnvalue.value === '*') {
       // ✅ 返回整个对象
-      emit('change', multipleSelection.value[0]);
+      emit('change', multipleSelection.value[multipleSelection.value.length - 1]);
     } else {
       // 返回指定字段
-      emit('change', multipleSelection.value[0][returnvalue.value as keyof tableType]);
+      emit('change', multipleSelection.value[multipleSelection.value.length - 1][returnvalue.value as keyof tableType]);
     }
   }
-
-  multipleSelection.value = [];
-  multipleTableRef.value.clearSelection();
 }
-// 初始化
-getlist();
+onMounted(() => {
+  // 初始化
+});
 
 defineExpose({
   open: () => {
     dialog.value.dialogVisible = true;
-    handleUserSelection();
+    getlist();
   }
 });
 </script>