完成调查问卷

src/components/Holder/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="residentBox" @click="choiceResidentFun">
+  <slot v-if="$slots.default" />
+
+  <div v-else class="residentBox" @click="choiceResidentFun">
     <div class="defaultbox" v-if="multipleSelection.length === 0">
       <span>请选择</span>
       <el-icon><Search /></el-icon>
@@ -27,7 +29,7 @@
     </nav>
 
     <!-- 关键：去掉 @selection-change，改用 row-click 实现单选，永不报错！ -->
-    <el-table ref="multipleTableRef" :data="tableData" border @row-click="handleRowClick">
+    <el-table ref="multipleTableRef" :data="tableData" border @row-click="handleRowClick" @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="name" />
@@ -63,7 +65,7 @@
         />
         <div>
           <el-button @click="conback">退出</el-button>
-          <el-button type="primary" @click="confim">确定</el-button>
+          <el-button type="primary" @click="confirm">确定</el-button>
         </div>
       </div>
     </template>
@@ -90,14 +92,24 @@ interface tableType extends ResidentVO {
   housePath?: string;
 }
 
-const props = defineProps<{
-  userid: string | number;
-}>();
-const { userid } = toRefs(props);
+// 触发方法
 const emit = defineEmits<{
-  change: [value: string | number];
+  change: [value: string | number | (string | number)[]]; // 支持返回数组
 }>();
 
+// ✅ 正确写法：分开定义，避免类型问题
+const props = defineProps<{
+  userid: string | number | string[] | number[];
+  isMultiple?: boolean;
+  returnvalue?: keyof tableType | '*';
+}>();
+
+// ✅ 手动设置默认值（替代 withDefaults）
+const isMultiple = computed(() => props.isMultiple ?? false);
+const returnvalue = computed(() => props.returnvalue ?? 'userId'); // 👈 默认 userId
+
+const { userid } = toRefs(props);
+
 const dialog = ref({
   dialogVisible: false,
   dialogTitle: '选择住户'
@@ -123,28 +135,65 @@ const total = ref(0);
 const loading = ref(false);
 
 // ==============================================
-// 最佳单选方案：点击行选中，无报错、无循环、最稳定
+// ✅ 新增：处理 selection-change（多选专用）
 // ==============================================
-function handleRowClick(row) {
-  multipleTableRef.value?.clearSelection();
-  multipleTableRef.value?.toggleRowSelection(row, true);
-  multipleSelection.value = [row];
+function handleSelectionChange(selection: tableType[]) {
+  if (isMultiple.value) {
+    multipleSelection.value = selection;
+  }
 }
 
 // ==============================================
-// 自动回显 userid
+// 最佳单选方案：点击行选中，无报错、无循环、最稳定
+// ==============================================
+function handleRowClick(row) {
+  if (isMultiple.value) {
+    // 多选：点击行切换选中状态
+    const isSelected = multipleSelection.value.some((item) => item.id === row.id);
+    if (isSelected) {
+      multipleSelection.value = multipleSelection.value.filter((item) => item.id !== row.id);
+      multipleTableRef.value?.toggleRowSelection(row, false);
+    } else {
+      multipleSelection.value.push(row);
+      multipleTableRef.value?.toggleRowSelection(row, true);
+    }
+  } else {
+    // 单选：原有逻辑保持不变
+    multipleTableRef.value?.clearSelection();
+    multipleTableRef.value?.toggleRowSelection(row, true);
+    multipleSelection.value = [row];
+  }
+}
+
+// ==============================================
+// ✅ 修改：支持多选回显
 // ==============================================
 const handleUserSelection = () => {
   if (!userid.value || !tableData.value.length) return;
 
-  const findItem = tableData.value.find((item) => item.id == userid.value);
-  if (findItem) {
-    multipleSelection.value = [findItem];
-    nextTick(() => {
-      multipleTableRef.value?.clearSelection();
-      multipleTableRef.value?.toggleRowSelection(findItem, true);
-    });
-  }
+  nextTick(() => {
+    multipleTableRef.value?.clearSelection();
+
+    if (isMultiple.value && Array.isArray(userid.value)) {
+      // 多选回显
+      const selectedItems: tableType[] = [];
+      userid.value.forEach((id) => {
+        const findItem = tableData.value.find((item) => item.userId == id);
+        if (findItem) {
+          selectedItems.push(findItem);
+          multipleTableRef.value?.toggleRowSelection(findItem, true);
+        }
+      });
+      multipleSelection.value = selectedItems;
+    } else {
+      // 单选回显（原有逻辑）
+      const findItem = tableData.value.find((item) => item.id == userid.value);
+      if (findItem) {
+        multipleSelection.value = [findItem];
+        multipleTableRef.value?.toggleRowSelection(findItem, true);
+      }
+    }
+  });
 };
 
 watch(userid, handleUserSelection, { immediate: true });
@@ -178,7 +227,6 @@ function resetQuery() {
     pageSize: 10,
     ownerRelationship: '', // 👈 这里也改
     name: '',
-    date: null,
     type: '', // 👈 这里也改
     status: '', // 👈 这里也改
     houseId: null,
@@ -195,16 +243,44 @@ function conback() {
   resetQuery();
 }
 
-// 确定
-function confim() {
+// ==============================================
+// ✅ 核心修改：根据 returnvalue 返回对应的值
+// ==============================================
+function confirm() {
   dialog.value.dialogVisible = false;
   if (multipleSelection.value.length > 0) {
-    emit('change', multipleSelection.value[0].id);
+    if (isMultiple.value) {
+      // 多选
+      if (returnvalue.value === '*') {
+        // ✅ 返回整个对象数组
+        emit('change', multipleSelection.value);
+      } else {
+        // 返回指定字段数组
+        emit(
+          'change',
+          multipleSelection.value.map((item) => item[returnvalue.value as keyof tableType])
+        );
+      }
+    } else {
+      // 单选
+      if (returnvalue.value === '*') {
+        // ✅ 返回整个对象
+        emit('change', multipleSelection.value[0]);
+      } else {
+        // 返回指定字段
+        emit('change', multipleSelection.value[0][returnvalue.value as keyof tableType]);
+      }
+    }
   }
 }
-
 // 初始化
 getlist();
+
+defineExpose({
+  open: () => {
+    dialog.value.dialogVisible = true;
+  }
+});
 </script>
 
 <style scoped lang="scss">