完成巡检计划

src/components/Holder/repairUser.vue

@@ -1,17 +1,18 @@
 <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>
     </div>
     <div v-else class="overflow-auto overflow-hidden w-full text-ellipsis text-nowrap">
-      <span>姓名：{{ multipleSelection[0] && multipleSelection[0].nickName }}</span>
-      <span v-show="multipleSelection[0] && multipleSelection[0].phonenumber" class="ml-20px">联系方式：{{ multipleSelection[0].phonenumber }}</span>
+      <span>姓名：{{ multipleSelection[0]?.name }}</span>
     </div>
   </div>
 
   <el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1050">
-    <el-table @row-click="handleRowClick" ref="multipleTableRef" :data="tableData" border>
+    <el-table @row-click="handleRowClick" 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" />
@@ -20,17 +21,8 @@
           <dict-tag :options="sys_user_sex" :value="row.sex" />
         </template>
       </el-table-column>
-      <el-table-column label="角色" align="center" width="85" prop="userType">
-        <template #default="{ row }">
-          <dict-tag :options="com_resident_type" :value="row.type" />
-        </template>
-      </el-table-column>
+      <el-table-column label="角色" align="center" width="85" prop="roleName" />
       <el-table-column label="手机号码" align="center" prop="phonenumber" />
-      <el-table-column label="状态" align="center" width="85" prop="status">
-        <template #default="{ row }">
-          <dict-tag :options="com_certification_status" :value="row.status" />
-        </template>
-      </el-table-column>
     </el-table>
 
     <template #footer>
@@ -75,16 +67,31 @@ const props = defineProps({
   returnvalue: {
     type: String,
     default: 'id'
+  },
+  titleName: {
+    type: String,
+    default: '选择维修人员'
+  },
+  userType: {
+    type: String,
+    default: 'repair'
+  },
+  isMultiple: {
+    type: Boolean,
+    default: false
   }
 });
-const { userid } = toRefs(props);
+
+const { userid, titleName, userType, returnvalue } = toRefs(props);
+
+// ✅ 手动设置默认值（替代 withDefaults）
 const emit = defineEmits<{
-  change: [value: string | number | tableType];
+  change: [value: string | number | (string | number)[] | tableType | tableType[]]; // 支持返回数组
 }>();
 
 const dialog = ref({
   dialogVisible: false,
-  dialogTitle: '选择维修人员'
+  dialogTitle: titleName.value
 });
 
 const queryParams = ref({
@@ -105,35 +112,30 @@ const multipleTableRef = ref();
 const tableData = ref<tableType[]>([]);
 const total = ref(0);
 const loading = ref(false);
-const treedata = ref([]);
 
 // 存储选中项
 const multipleSelection = ref<tableType[]>([]);
 
-// 单选点击事件（完全替代 selection-change）
-const handleRowClick = (row: tableType) => {
-  multipleTableRef.value?.clearSelection();
-  multipleTableRef.value?.toggleRowSelection(row, true);
-  multipleSelection.value = [row];
-};
+const isMultiple = computed(() => props.isMultiple ?? false);
 
-// 统一回显 userid 选中（安全版）
+// 优化 handleUserSelection，避免重复查找
 const handleUserSelection = () => {
   if (!userid.value || !tableData.value.length) return;
-
   const target = tableData.value.find((item) => item.userId == userid.value);
-  if (target) {
+  if (target && !multipleSelection.value.some((sel) => sel.id === target.id)) {
     multipleSelection.value = [target];
     nextTick(() => {
-      multipleTableRef.value?.clearSelection();
-      multipleTableRef.value?.toggleRowSelection(target, true);
+      multipleTableRef.value?.setSelection([target]);
     });
   }
 };
 
 // 监听
+// 监听优化：只在 userid 变化时触发
 watch(userid, handleUserSelection, { immediate: true });
-watch(tableData, handleUserSelection);
+watch(tableData, () => {
+  if (userid.value) handleUserSelection(); // 仅在有 userid 时重新处理
+});
 
 // ====================== 方法 ======================
 // 打开选择框
@@ -144,13 +146,46 @@ function choiceResidentFun() {
 // 获取列表
 function getlist() {
   loading.value = true;
-  getUserByRoleKey().then((res) => {
-    tableData.value = res.data;
-    total.value = res.total;
-    loading.value = false;
-  });
+  getUserByRoleKey(userType.value)
+    .then((res) => {
+      tableData.value = res.data;
+      total.value = res.total;
+    })
+    .catch((error) => {
+      console.error('获取用户列表失败:', error);
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 }
 
+// ==============================================
+// ✅ 新增：处理 selection-change（多选专用）
+// ==============================================
+function handleSelectionChange(selection: tableType[]) {
+  if (isMultiple.value) {
+    multipleSelection.value = selection;
+  }
+}
+// ==============================================
+// 最佳单选方案：点击行选中，无报错、无循环、最稳定
+// ==============================================
+// 优化 handleRowClick，避免重复
+function handleRowClick(row: tableType) {
+  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);
+    }
+  } else {
+    multipleSelection.value = [row];
+    multipleTableRef.value?.setSelection([row]);
+  }
+}
 // 重置查询
 function resetQuery() {
   queryParams.value = {
@@ -175,21 +210,45 @@ function conback() {
   resetQuery();
 }
 
-// 确定
+// ==============================================
+// ✅ 核心修改：根据 returnvalue 返回对应的值
+// ==============================================
 function confirm() {
   dialog.value.dialogVisible = false;
-  console.log(multipleSelection.value, props.returnvalue);
   if (multipleSelection.value.length > 0) {
-    if (props.returnvalue === 'id') {
-      emit('change', multipleSelection.value[0].userId);
-    } else if (props.returnvalue === 'value') {
-      emit('change', multipleSelection.value[0]);
+    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 {
+        console.log(multipleSelection.value[0], returnvalue.value);
+        // 返回指定字段
+        emit('change', multipleSelection.value[0][returnvalue.value as keyof tableType]);
+      }
     }
   }
 }
-
 // 初始化
 getlist();
+
+defineExpose({
+  open: () => {
+    dialog.value.dialogVisible = true;
+  }
+});
 </script>
 
 <style scoped lang="scss">