完成访客搭建，完善之前审核界面

src/components/Holder/repairUser.vue

@@ -5,41 +5,32 @@
       <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].name }}</span>
+      <span>姓名：{{ multipleSelection[0] && multipleSelection[0].nickName }}</span>
+      <span class="ml-20px">联系方式：{{ multipleSelection[0] && multipleSelection[0].phonenumber }}</span>
     </div>
   </div>
 
   <el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1050">
-    <nav class="flex flex-items-center mb-8">
-      <div class="flex flex-items-center mr-5 flex-1">
-        <div style="width: 120px">选择员工</div>
-        <el-select v-model="queryParams.ownerRelationship" placeholder="请选择" clearable>
-          <el-option v-for="dict in com_resident_relationship" :key="dict.value" :label="dict.label" :value="dict.value" />
-        </el-select>
-      </div>
-      <div class="mr-5 flex-1">
-        <el-input clearable v-model.number="queryParams.name" placeholder="请输入员工姓名" />
-      </div>
-      <div>
-        <el-button type="primary" @click="getlist">查询</el-button>
-        <el-button>重置</el-button>
-      </div>
-    </nav>
-    <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="tableData" border>
+    <el-table @row-click="handleRowClick" ref="multipleTableRef" :data="tableData" border>
       <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" />
-      <el-table-column label="角色" align="center" width="85" prop="type">
+      <el-table-column label="姓名" align="center" prop="nickName" />
+      <el-table-column label="性别" align="center" width="85" prop="sex">
+        <template #default="{ row }">
+          <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" 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-column label="手机号码" align="center" prop="phone" />
     </el-table>
 
     <template #footer>
@@ -63,41 +54,38 @@
 </template>
 
 <script setup lang="ts">
-import { getCommunitylistAPI } from '@/api/system/community';
-import { getVillageTree } from '@/api/system/house';
-import { listResident } from '@/api/system/resident';
 import { ResidentVO } from '@/api/system/resident/type';
-import { convertBuildingToTree, getHousePathById } from '@/utils/house';
-import { ref } from 'vue';
+import { getUserByRoleKey } from '@/api/system/user';
+import { ref, watch, nextTick, getCurrentInstance, ComponentInternalInstance, toRefs } from 'vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_resident_type } = toRefs<any>(proxy?.useDict('com_resident_type'));
 const { com_certification_status } = toRefs<any>(proxy?.useDict('com_certification_status'));
-const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
+const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
 
 interface tableType extends ResidentVO {
   housePath?: string;
 }
+
 const props = defineProps<{
-  userid: string;
+  userid: string | number;
 }>();
-// 2. 转成 ref（更安全，可选，但推荐）
 const { userid } = toRefs(props);
 const emit = defineEmits<{
   change: [value: string | number];
 }>();
+
 const dialog = ref({
   dialogVisible: false,
-  dialogTitle: '选择住户'
+  dialogTitle: '选择维修人员'
 });
 
 const queryParams = ref({
   pageNum: 1,
   pageSize: 10,
-
   date: null,
   type: null,
-  status: null,
+  status: '',
   ownerRelationship: null,
   name: null,
   houseId: null,
@@ -105,48 +93,59 @@ const queryParams = ref({
   buildingId: null,
   unitNo: null
 });
+
 const multipleTableRef = ref();
 const tableData = ref<tableType[]>([]);
-const multipleSelection = ref([]);
-const total = ref(100);
+const total = ref(0);
 const loading = ref(false);
+const treedata = ref([]);
 
-getlist();
+// 存储选中项
+const multipleSelection = ref([]);
 
-watch(
-  userid,
-  (newval) => {
-    if (newval !== null && newval !== undefined && newval.length > 0) {
-      const find = tableData.value.find((item) => item.id == newval);
-      if (find) {
-        multipleSelection.value = [find];
-      }
-    }
-  },
-  {
-    deep: true,
-    immediate: true
+// 单选点击事件（完全替代 selection-change）
+const handleRowClick = (row) => {
+  multipleTableRef.value?.clearSelection();
+  multipleTableRef.value?.toggleRowSelection(row, true);
+  multipleSelection.value = [row];
+};
+
+// 统一回显 userid 选中（安全版）
+const handleUserSelection = () => {
+  if (!userid.value || !tableData.value.length) return;
+
+  const target = tableData.value.find((item) => item.id == userid.value);
+  if (target) {
+    multipleSelection.value = [target];
+    nextTick(() => {
+      multipleTableRef.value?.clearSelection();
+      multipleTableRef.value?.toggleRowSelection(target, true);
+    });
   }
-);
+};
 
-//
+// 监听
+watch(userid, handleUserSelection, { immediate: true });
+watch(tableData, handleUserSelection);
+
+// ====================== 方法 ======================
+// 打开选择框
 function choiceResidentFun() {
   dialog.value.dialogVisible = true;
 }
-// 获取表格
+
+// 获取列表
 function getlist() {
-  // 查询住户
   loading.value = true;
-  listResident(queryParams.value).then((res) => {
-    tableData.value = res.rows;
+  getUserByRoleKey().then((res) => {
+    tableData.value = res.data;
     total.value = res.total;
     loading.value = false;
   });
 }
 
-// 返回
-function conback() {
-  dialog.value.dialogVisible = false;
+// 重置查询
+function resetQuery() {
   queryParams.value = {
     pageNum: 1,
     pageSize: 10,
@@ -154,37 +153,31 @@ function conback() {
     name: null,
     date: null,
     type: null,
-    status: null,
+    status: '',
     houseId: null,
     villageId: null,
     buildingId: null,
     unitNo: null
   };
+  getlist();
 }
+
+// 退出
+function conback() {
+  dialog.value.dialogVisible = false;
+  resetQuery();
+}
+
 // 确定
 function confim() {
   dialog.value.dialogVisible = false;
   if (multipleSelection.value.length > 0) {
-    const pop = multipleSelection.value.pop();
-    multipleSelection.value = [pop];
-    emit('change', pop.id);
+    emit('change', multipleSelection.value[0].id);
   }
 }
 
-// 单选
-function handleSelectionChange(val) {
-  if (val && val.length > 0) {
-    const lastoptions = val.pop();
-    val.forEach((row) => {
-      multipleTableRef.value!.toggleRowSelection(row, false);
-    });
-    multipleTableRef.value!.toggleRowSelection(lastoptions, true);
-    multipleSelection.value = [lastoptions];
-  } else {
-    multipleTableRef.value!.clearSelection();
-    multipleSelection.value = [];
-  }
-}
+// 初始化
+getlist();
 </script>
 
 <style scoped lang="scss">