✨ feat(system): 更新用户选择组件为 UserSelectV2 并添加部门树选择

2026-04-07 14:00:08 +08:00 · 2026-04-07 14:00:08 +08:00 · 917b2102bd
parent a5122b58c4
commit 917b2102bd
30 changed files with 660 additions and 146 deletions
--- a/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
@ -5,7 +5,7 @@
      <!-- 左侧部门树 -->
      <el-col :span="4" :xs="24">
        <ContentWrap class="h-1/1">
-          <DeptTree @node-click="handleDeptNodeClick" />
+          <DeptTreeSelect @node-click="handleDeptNodeClick" />
        </ContentWrap>
      </el-col>
      <el-col :span="20" :xs="24">
@ -137,7 +137,7 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as UserApi from '@/api/system/user'
-import DeptTree from '@/views/system/user/DeptTree.vue'
+import DeptTreeSelect from '@/views/system/dept/components/DeptTreeSelect.vue'

 // 是否全选
 const isCheckAll = ref(false)
@ -189,8 +189,8 @@ const resetQuery = () => {
 }

 /** 处理部门被点击 */
-const handleDeptNodeClick = async (row) => {
-  queryParams.deptId = row.id
+const handleDeptNodeClick = async (deptId: number | undefined) => {
+  queryParams.deptId = deptId
  await getList()
 }

--- a/src/views/mes/cal/calendar/UserView.vue
+++ b/src/views/mes/cal/calendar/UserView.vue
@ -4,7 +4,7 @@
    <!-- 顶部：人员选择 -->
    <el-form :inline="true" label-width="80px" class="mb-10px">
      <el-form-item label="人员">
-        <UserSelect
+        <UserSelectV2
          v-model="userId"
          placeholder="请输入人员姓名搜索"
          class="!w-200px"
@ -33,7 +33,7 @@
 </template>

 <script setup lang="ts">
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import CalendarDateCell from './CalendarDateCell.vue'
 import CalendarLegend from './CalendarLegend.vue'
 import { useCalendar } from './useCalendar'
--- a/src/views/mes/dv/checkrecord/CheckRecordForm.vue
+++ b/src/views/mes/dv/checkrecord/CheckRecordForm.vue
@ -21,7 +21,7 @@
        </el-col>
        <el-col :span="8">
          <el-form-item label="点检人" prop="userId">
-            <UserSelect v-model="formData.userId" placeholder="请选择点检人" />
+            <UserSelectV2 v-model="formData.userId" placeholder="请选择点检人" />
          </el-form-item>
        </el-col>
      </el-row>
@ -71,7 +71,7 @@
 import { DvCheckRecordApi } from '@/api/mes/dv/checkrecord'
 import DvMachinerySelect from '@/views/mes/dv/machinery/components/DvMachinerySelect.vue'
 import DvCheckPlanSelect from '@/views/mes/dv/checkplan/components/DvCheckPlanSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import CheckRecordLineList from './CheckRecordLineList.vue'
 import { MesDvCheckRecordStatusEnum } from '@/views/mes/utils/constants'

--- a/src/views/mes/dv/checkrecord/index.vue
+++ b/src/views/mes/dv/checkrecord/index.vue
@ -15,7 +15,7 @@
        <DvMachinerySelect v-model="queryParams.machineryId" class="!w-240px" />
      </el-form-item>
      <el-form-item label="点检人" prop="userId">
-        <UserSelect v-model="queryParams.userId" placeholder="请选择点检人" class="!w-240px" />
+        <UserSelectV2 v-model="queryParams.userId" placeholder="请选择点检人" class="!w-240px" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
@ -135,7 +135,7 @@ import { DvCheckRecordApi } from '@/api/mes/dv/checkrecord'
 import CheckRecordForm from './CheckRecordForm.vue'
 import DvMachinerySelect from '@/views/mes/dv/machinery/components/DvMachinerySelect.vue'
 import DvCheckPlanSelect from '@/views/mes/dv/checkplan/components/DvCheckPlanSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import { MesDvCheckRecordStatusEnum } from '@/views/mes/utils/constants'

 defineOptions({ name: 'MesDvCheckRecord' })
--- a/src/views/mes/dv/maintenrecord/MaintenRecordForm.vue
+++ b/src/views/mes/dv/maintenrecord/MaintenRecordForm.vue
@ -21,7 +21,7 @@
        </el-col>
        <el-col :span="8">
          <el-form-item label="保养人" prop="userId">
-            <UserSelect v-model="formData.userId" placeholder="请选择保养人" />
+            <UserSelectV2 v-model="formData.userId" placeholder="请选择保养人" />
          </el-form-item>
        </el-col>
      </el-row>
@ -70,7 +70,7 @@
 import { DvMaintenRecordApi } from '@/api/mes/dv/maintenrecord'
 import DvMachinerySelect from '@/views/mes/dv/machinery/components/DvMachinerySelect.vue'
 import DvCheckPlanSelect from '@/views/mes/dv/checkplan/components/DvCheckPlanSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import MaintenRecordLineList from './MaintenRecordLineList.vue'
 import { useUserStore } from '@/store/modules/user'
 import { MesDvMaintenRecordStatusEnum } from '@/views/mes/utils/constants'
--- a/src/views/mes/dv/maintenrecord/index.vue
+++ b/src/views/mes/dv/maintenrecord/index.vue
@ -15,7 +15,7 @@
        <DvMachinerySelect v-model="queryParams.machineryId" class="!w-240px" />
      </el-form-item>
      <el-form-item label="保养人" prop="userId">
-        <UserSelect v-model="queryParams.userId" placeholder="请选择保养人" class="!w-240px" />
+        <UserSelectV2 v-model="queryParams.userId" placeholder="请选择保养人" class="!w-240px" />
      </el-form-item>
      <el-form-item label="保养时间" prop="maintenTime">
        <el-date-picker
@ -123,7 +123,7 @@ import download from '@/utils/download'
 import { DvMaintenRecordApi } from '@/api/mes/dv/maintenrecord'
 import DvMachinerySelect from '@/views/mes/dv/machinery/components/DvMachinerySelect.vue'
 import DvCheckPlanSelect from '@/views/mes/dv/checkplan/components/DvCheckPlanSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import MaintenRecordForm from './MaintenRecordForm.vue'
 import { MesDvMaintenRecordStatusEnum } from '@/views/mes/utils/constants'

--- a/src/views/mes/dv/repair/RepairForm.vue
+++ b/src/views/mes/dv/repair/RepairForm.vue
@ -62,7 +62,7 @@
        </el-col>
        <el-col :span="8" v-if="showConfirmFields">
          <el-form-item label="维修人" prop="acceptedUserId">
-            <UserSelect v-model="formData.acceptedUserId" placeholder="请选择维修人" disabled />
+            <UserSelectV2 v-model="formData.acceptedUserId" placeholder="请选择维修人" disabled />
          </el-form-item>
        </el-col>
      </el-row>
@ -92,7 +92,7 @@
        </el-col>
        <el-col :span="8" v-if="showDetailFields">
          <el-form-item label="验收人" prop="confirmUserId">
-            <UserSelect v-model="formData.confirmUserId" placeholder="请选择验收人" disabled />
+            <UserSelectV2 v-model="formData.confirmUserId" placeholder="请选择验收人" disabled />
          </el-form-item>
        </el-col>
      </el-row>
@ -154,7 +154,7 @@
 import { DvRepairApi } from '@/api/mes/dv/repair'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import DvMachinerySelect from '@/views/mes/dv/machinery/components/DvMachinerySelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import RepairLineList from './RepairLineList.vue'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import {
--- a/src/views/mes/pro/andon/config/AndonConfigForm.vue
+++ b/src/views/mes/pro/andon/config/AndonConfigForm.vue
@ -49,7 +49,7 @@
      </el-table-column>
      <el-table-column label="处置人" align="center" width="180">
        <template #default="scope">
-          <UserSelect
+          <UserSelectV2
            v-if="scope.row.editing"
            v-model="scope.row.handlerUserId"
            placeholder="请选择处置人"
@ -100,7 +100,7 @@
 import { ProAndonConfigApi, ProAndonConfigVO } from '@/api/mes/pro/andon/config'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { MesProAndonLevelEnum } from '@/views/mes/utils/constants'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import RoleSelect from '@/views/system/role/components/RoleSelect.vue'

 /** 安灯呼叫配置弹窗（内联编辑表格） */
--- a/src/views/mes/pro/andon/record/AndonRecordForm.vue
+++ b/src/views/mes/pro/andon/record/AndonRecordForm.vue
@ -18,7 +18,7 @@
        <el-input v-else :model-value="formData.workstationName" disabled />
      </el-form-item>
      <el-form-item label="发起人" prop="userId">
-        <UserSelect v-if="formType === 'create'" v-model="formData.userId" />
+        <UserSelectV2 v-if="formType === 'create'" v-model="formData.userId" />
        <el-input v-else :model-value="formData.userNickname" disabled />
      </el-form-item>
      <el-form-item label="生产工单" prop="workOrderId">
@ -75,7 +75,7 @@
          <el-input v-else :model-value="formData.handleTime || '-'" disabled />
        </el-form-item>
        <el-form-item label="处置人">
-          <UserSelect v-if="formType === 'update'" v-model="formData.handlerUserId" />
+          <UserSelectV2 v-if="formType === 'update'" v-model="formData.handlerUserId" />
          <el-input v-else :model-value="formData.handlerUserNickname || '-'" disabled />
        </el-form-item>
      </template>
@ -123,7 +123,7 @@ import { MesProAndonStatusEnum } from '@/views/mes/utils/constants'
 import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorkstationSelect.vue'
 import ProWorkOrderSelect from '@/views/mes/pro/workorder/components/ProWorkOrderSelect.vue'
 import ProProcessSelect from '@/views/mes/pro/process/components/ProProcessSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import AndonConfigSelect from '../config/components/AndonConfigSelect.vue'

 defineOptions({ name: 'AndonRecordForm' })
--- a/src/views/mes/pro/andon/record/index.vue
+++ b/src/views/mes/pro/andon/record/index.vue
@ -17,10 +17,10 @@
        />
      </el-form-item>
      <el-form-item label="发起人" prop="userId">
-        <UserSelect v-model="queryParams.userId" class="!w-240px" />
+        <UserSelectV2 v-model="queryParams.userId" class="!w-240px" />
      </el-form-item>
      <el-form-item label="处置人" prop="handlerUserId">
-        <UserSelect v-model="queryParams.handlerUserId" class="!w-240px" />
+        <UserSelectV2 v-model="queryParams.handlerUserId" class="!w-240px" />
      </el-form-item>
      <el-form-item label="处理状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
@ -164,7 +164,7 @@ import AndonConfigDialog from '../config/AndonConfigForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { MesProAndonStatusEnum } from '@/views/mes/utils/constants'
 import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorkstationSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'

 defineOptions({ name: 'MesProAndon' })

--- a/src/views/mes/pro/card/CardProcessList.vue
+++ b/src/views/mes/pro/card/CardProcessList.vue
@ -135,7 +135,7 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作人" prop="userId">
-              <UserSelect v-model="processFormData.userId" />
+              <UserSelectV2 v-model="processFormData.userId" />
            </el-form-item>
          </el-col>
        </el-row>
@ -162,7 +162,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import { ProCardProcessApi, ProCardProcessVO } from '@/api/mes/pro/card/process'
 import ProProcessSelect from '@/views/mes/pro/process/components/ProProcessSelect.vue'
 import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorkstationSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'

 defineOptions({ name: 'CardProcessList' })

--- a/src/views/mes/pro/feedback/FeedbackForm.vue
+++ b/src/views/mes/pro/feedback/FeedbackForm.vue
@ -189,7 +189,7 @@
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="报工人" prop="feedbackUserId">
-            <UserSelect
+            <UserSelectV2
              v-model="formData.feedbackUserId"
              :disabled="isHeaderReadonly"
              placeholder="请选择报工人"
@ -210,7 +210,7 @@
        </el-col>
        <el-col :span="8">
          <el-form-item label="审核人" prop="approveUserId">
-            <UserSelect
+            <UserSelectV2
              v-model="formData.approveUserId"
              :disabled="isHeaderReadonly"
              placeholder="请选择审核人"
@ -290,7 +290,7 @@ import { ProRouteProcessApi } from '@/api/mes/pro/route/process'
 import ProWorkOrderSelect from '@/views/mes/pro/workorder/components/ProWorkOrderSelect.vue'
 import ProTaskSelect from '@/views/mes/pro/task/components/ProTaskSelect.vue'
 import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorkstationSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import ItemConsumeList from './ItemConsumeList.vue'
 import ProductProduceList from './ProductProduceList.vue'
 import { useUserStore } from '@/store/modules/user'
--- a/src/views/mes/pro/feedback/index.vue
+++ b/src/views/mes/pro/feedback/index.vue
@ -44,14 +44,14 @@
        <MdItemSelect v-model="queryParams.itemId" placeholder="请选择产品物料" class="!w-240px" />
      </el-form-item>
      <el-form-item label="报工人" prop="feedbackUserId">
-        <UserSelect
+        <UserSelectV2
          v-model="queryParams.feedbackUserId"
          placeholder="请选择报工人"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="记录人" prop="creator">
-        <UserSelect v-model="queryParams.creator" placeholder="请选择记录人" class="!w-240px" />
+        <UserSelectV2 v-model="queryParams.creator" placeholder="请选择记录人" class="!w-240px" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
@ -207,7 +207,7 @@ import download from '@/utils/download'
 import { ProFeedbackApi, ProFeedbackVO } from '@/api/mes/pro/feedback'
 import ProWorkOrderSelect from '@/views/mes/pro/workorder/components/ProWorkOrderSelect.vue'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import FeedbackForm from './FeedbackForm.vue'
 import { MesProFeedbackStatusEnum } from '@/views/mes/utils/constants'
 import { useUserStore } from '@/store/modules/user'
--- a/src/views/mes/pro/workrecord/index.vue
+++ b/src/views/mes/pro/workrecord/index.vue
@ -12,7 +12,7 @@
      label-width="100px"
    >
      <el-form-item label="用户" prop="userId">
-        <UserSelect v-model="queryParams.userId" placeholder="请选择用户" class="!w-240px" />
+        <UserSelectV2 v-model="queryParams.userId" placeholder="请选择用户" class="!w-240px" />
      </el-form-item>
      <el-form-item label="工作站" prop="workstationId">
        <MdWorkstationSelect
@ -105,7 +105,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import download from '@/utils/download'
 import { ProWorkRecordApi, type ProWorkRecordLogVO } from '@/api/mes/pro/workrecord'
 import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorkstationSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import WorkRecordStatusBar from './WorkRecordStatusBar.vue'

 defineOptions({ name: 'MesProWorkRecordLog' })
--- a/src/views/mes/qc/ipqc/IpqcForm.vue
+++ b/src/views/mes/qc/ipqc/IpqcForm.vue
@ -174,7 +174,7 @@
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="检测人员" prop="inspectorUserId">
-            <UserSelect
+            <UserSelectV2
              v-model="formData.inspectorUserId"
              placeholder="请选择检测人员"
              class="!w-1/1"
@ -293,7 +293,7 @@ import { QcIpqcApi, QcIpqcVO } from '@/api/mes/qc/ipqc'
 import ProWorkOrderSelect from '@/views/mes/pro/workorder/components/ProWorkOrderSelect.vue'
 import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorkstationSelect.vue'
 import ProTaskSelect from '@/views/mes/pro/task/components/ProTaskSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import IpqcLineList from './IpqcLineList.vue'
 import QcIndicatorResultList from '@/views/mes/qc/indicatorresult/components/QcIndicatorResultList.vue'
 import { MesQcTypeEnum, MesQcStatusEnum, MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
--- a/src/views/mes/qc/iqc/IqcForm.vue
+++ b/src/views/mes/qc/iqc/IqcForm.vue
@ -125,7 +125,7 @@
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="检测人员" prop="inspectorUserId">
-            <UserSelect
+            <UserSelectV2
              v-model="formData.inspectorUserId"
              placeholder="请选择检测人员"
              class="!w-1/1"
@ -245,7 +245,7 @@ import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
 import IqcLineList from './IqcLineList.vue'
 import QcIndicatorResultList from '@/views/mes/qc/indicatorresult/components/QcIndicatorResultList.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import { MesQcTypeEnum, MesQcStatusEnum, MesAutoCodeRuleCode } from '@/views/mes/utils/constants'

 defineOptions({ name: 'IqcForm' })
--- a/src/views/mes/qc/iqc/index.vue
+++ b/src/views/mes/qc/iqc/index.vue
@ -81,7 +81,7 @@
        />
      </el-form-item>
      <el-form-item label="检测人员" prop="inspectorUserId">
-        <UserSelect
+        <UserSelectV2
          v-model="queryParams.inspectorUserId"
          placeholder="请选择检测人员"
          clearable
@ -200,7 +200,7 @@ import IqcForm from './IqcForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import { MesQcStatusEnum } from '@/views/mes/utils/constants'

 defineOptions({ name: 'MesQcIqc' })
--- a/src/views/mes/qc/oqc/OqcForm.vue
+++ b/src/views/mes/qc/oqc/OqcForm.vue
@ -124,7 +124,7 @@
        </el-col>
        <el-col :span="8">
          <el-form-item label="检测人员" prop="inspectorUserId">
-            <UserSelect
+            <UserSelectV2
              v-model="formData.inspectorUserId"
              placeholder="请选择检测人员"
              class="!w-1/1"
@ -253,7 +253,7 @@ import { QcOqcApi, QcOqcVO } from '@/api/mes/qc/oqc'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import OqcLineList from './OqcLineList.vue'
 import QcIndicatorResultList from '@/views/mes/qc/indicatorresult/components/QcIndicatorResultList.vue'
 import { MesQcTypeEnum, MesQcStatusEnum, MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
--- a/src/views/mes/qc/rqc/RqcForm.vue
+++ b/src/views/mes/qc/rqc/RqcForm.vue
@ -133,7 +133,7 @@
        </el-col>
        <el-col :span="8">
          <el-form-item label="检测人员" prop="inspectorUserId">
-            <UserSelect
+            <UserSelectV2
              v-model="formData.inspectorUserId"
              placeholder="请选择检测人员"
              class="!w-1/1"
@ -239,7 +239,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { QcRqcApi, QcRqcVO } from '@/api/mes/qc/rqc'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import RqcLineList from './RqcLineList.vue'
 import QcIndicatorResultList from '@/views/mes/qc/indicatorresult/components/QcIndicatorResultList.vue'
 import { MesQcTypeEnum, MesQcStatusEnum, MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
--- a/src/views/mes/qc/rqc/index.vue
+++ b/src/views/mes/qc/rqc/index.vue
@ -80,7 +80,7 @@
        </el-select>
      </el-form-item>
      <el-form-item label="检测人员" prop="inspectorUserId">
-        <UserSelect
+        <UserSelectV2
          v-model="queryParams.inspectorUserId"
          placeholder="请选择检测人员"
          clearable
@ -196,7 +196,7 @@ import { QcRqcApi, QcRqcVO } from '@/api/mes/qc/rqc'
 import RqcForm from './RqcForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import { MesQcStatusEnum, MesQcSourceDocTypeEnum } from '@/views/mes/utils/constants'

 defineOptions({ name: 'MesQcRqc' })
--- a/src/views/mes/wm/barcode/BarcodeForm.vue
+++ b/src/views/mes/wm/barcode/BarcodeForm.vue
@ -121,7 +121,7 @@
        label="人员"
        prop="bizId"
      >
-        <UserSelect v-model="formData.bizId" @change="handleBizSelect" class="!w-1/1" />
+        <UserSelectV2 v-model="formData.bizId" @change="handleBizSelect" class="!w-1/1" />
      </el-form-item>
      <el-form-item
        v-else-if="formData.bizType === BarcodeBizTypeEnum.CLIENT"
@ -221,7 +221,7 @@ import MdWorkstationSelect from '@/views/mes/md/workstation/components/MdWorksta
 import MdWorkshopSelect from '@/views/mes/md/workstation/components/MdWorkshopSelect.vue'
 import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
 import TmToolSelect from '@/views/mes/tm/tool/components/TmToolSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import WmPackageSelect from '@/views/mes/wm/packages/components/WmPackageSelect.vue'
 import WmMaterialStockSelect from '@/views/mes/wm/materialstock/components/WmMaterialStockSelect.vue'
 import WmBatchSelect from '@/views/mes/wm/batch/components/WmBatchSelect.vue'
--- a/src/views/mes/wm/packages/PackageForm.vue
+++ b/src/views/mes/wm/packages/PackageForm.vue
@ -36,7 +36,7 @@
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查员" prop="inspectorUserId">
-            <UserSelect v-model="formData.inspectorUserId" :disabled="isHeaderReadonly" />
+            <UserSelectV2 v-model="formData.inspectorUserId" :disabled="isHeaderReadonly" />
          </el-form-item>
        </el-col>
      </el-row>
@ -183,7 +183,7 @@ import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import { WmPackageApi, WmPackageVO } from '@/api/mes/wm/packages'
 import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
 import MdUnitMeasureSelect from '@/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import SubPackageList from './SubPackageList.vue'
 import PackageLineList from './PackageLineList.vue'
 import { MesAutoCodeRuleCode, MesWmPackageStatusEnum } from '@/views/mes/utils/constants'
--- a/src/views/mes/wm/packages/components/WmPackageSelectDialog.vue
+++ b/src/views/mes/wm/packages/components/WmPackageSelectDialog.vue
@ -34,7 +34,7 @@
          <MdClientSelect v-model="queryParams.clientId" class="!w-220px" />
        </el-form-item>
        <el-form-item label="检查员">
-          <UserSelect v-model="queryParams.inspectorUserId" class="!w-220px" />
+          <UserSelectV2 v-model="queryParams.inspectorUserId" class="!w-220px" />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
@ -124,7 +124,7 @@ import { dateFormatter2 } from '@/utils/formatTime'
 import { DICT_TYPE } from '@/utils/dict'
 import { WmPackageApi, WmPackageVO } from '@/api/mes/wm/packages'
 import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import { MesWmPackageStatusEnum } from '@/views/mes/utils/constants'

 defineOptions({ name: 'WmPackageSelectDialog' })
--- a/src/views/mes/wm/packages/index.vue
+++ b/src/views/mes/wm/packages/index.vue
@ -29,7 +29,7 @@
        <MdClientSelect v-model="queryParams.clientId" class="!w-240px" />
      </el-form-item>
      <el-form-item label="检查员" prop="inspectorUserId">
-        <UserSelect v-model="queryParams.inspectorUserId" class="!w-240px" />
+        <UserSelectV2 v-model="queryParams.inspectorUserId" class="!w-240px" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
@ -128,7 +128,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import { handleTree } from '@/utils/tree'
 import { WmPackageApi, WmPackageVO } from '@/api/mes/wm/packages'
 import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import PackageForm from './PackageForm.vue'
 import { MesWmPackageStatusEnum } from '@/views/mes/utils/constants'

--- a/src/views/mes/wm/stocktaking/task/StockTakingForm.vue
+++ b/src/views/mes/wm/stocktaking/task/StockTakingForm.vue
@ -97,7 +97,7 @@
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点人" prop="userId">
-            <UserSelect v-model="formData.userId" :disabled="isDetail" />
+            <UserSelectV2 v-model="formData.userId" :disabled="isDetail" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
@ -155,7 +155,7 @@ import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import { StockTakingApi, type StockTakingTaskVO } from '@/api/mes/wm/stocktaking/task/index'
 import { type StockTakingPlanVO } from '@/api/mes/wm/stocktaking/plan/index'
 import StockTakingPlanSelect from '@/views/mes/wm/stocktaking/plan/components/StockTakingPlanSelect.vue'
-import UserSelect from '@/views/system/user/components/UserSelect.vue'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import StockTakingTaskLineList from './StockTakingTaskLineList.vue'
 import StockTakingTaskResultList from './StockTakingTaskResultList.vue'
 import {
--- a/src/views/system/dept/components/DeptTreeSelect.vue
+++ b/src/views/system/dept/components/DeptTreeSelect.vue
@ -0,0 +1,107 @@
+<!--
+  部门树选择组件（通用复用）
+
+  功能：搜索输入框 + 部门树，支持点击同一节点取消选中
+  Props:
+    filterPlaceholder — 搜索输入框占位文字（默认 '请输入部门名称'）
+  Events:
+    node-click(deptId: number | undefined) — 点击节点后触发，取消选中时传 undefined
+  Expose:
+    reset() — 清空选中状态（供外部重置按钮调用）
+-->
+<template>
+  <div>
+    <el-input
+      v-model="filterText"
+      class="mb-15px"
+      clearable
+      :placeholder="filterPlaceholder"
+    >
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+    <el-tree
+      ref="treeRef"
+      :data="deptList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      default-expand-all
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElTree } from 'element-plus'
+import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'DeptTreeSelect' })
+
+withDefaults(
+  defineProps<{
+    filterPlaceholder?: string // 搜索输入框占位文字
+  }>(),
+  {
+    filterPlaceholder: '请输入部门名称'
+  }
+)
+
+const emit = defineEmits<{
+  'node-click': [deptId: number | undefined]
+}>()
+
+const filterText = ref('') // 过滤关键字
+const deptList = ref<Tree[]>([]) // 部门树数据
+const treeRef = ref<InstanceType<typeof ElTree>>() // 树 Ref
+let currentNodeId: number | null = null // 当前选中的节点 ID
+
+/** 加载部门树 */
+const loadTree = async () => {
+  const res = await DeptApi.getSimpleDeptList()
+  deptList.value = handleTree(res)
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 监听过滤关键字 */
+watch(filterText, (val) => {
+  treeRef.value?.filter(val)
+})
+
+/** 处理节点点击：支持点击同一节点取消选中 */
+const handleNodeClick = (row: { [key: string]: any }) => {
+  if (currentNodeId === row.id) {
+    // 再次点击同一节点 → 取消选中
+    treeRef.value?.setCurrentKey(undefined)
+    currentNodeId = null
+    emit('node-click', undefined)
+  } else {
+    // 选中新节点
+    currentNodeId = row.id
+    emit('node-click', row.id)
+  }
+}
+
+/** 清空选中状态（供外部重置按钮调用） */
+const reset = () => {
+  currentNodeId = null
+  filterText.value = ''
+  treeRef.value?.setCurrentKey(undefined)
+}
+
+defineExpose({ reset })
+
+/** 初始化 */
+onMounted(async () => {
+  await loadTree()
+})
+</script>
--- a/src/views/system/user/DeptTree.vue
+++ b/src/views/system/user/DeptTree.vue
@ -1,79 +0,0 @@
-<template>
-  <div class="head-container">
-    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
-      <template #prefix>
-        <Icon icon="ep:search" />
-      </template>
-    </el-input>
-  </div>
-  <div class="head-container">
-    <el-tree
-      ref="treeRef"
-      :data="deptList"
-      :expand-on-click-node="false"
-      :filter-node-method="filterNode"
-      :props="defaultProps"
-      default-expand-all
-      highlight-current
-      node-key="id"
-      @node-click="handleNodeClick"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ElTree } from 'element-plus'
-import * as DeptApi from '@/api/system/dept'
-import { defaultProps, handleTree } from '@/utils/tree'
-
-defineOptions({ name: 'SystemUserDeptTree' })
-
-const deptName = ref('')
-const deptList = ref<Tree[]>([]) // 树形结构
-const treeRef = ref<InstanceType<typeof ElTree>>()
-
-/** 获得部门树 */
-const getTree = async () => {
-  const res = await DeptApi.getSimpleDeptList()
-  deptList.value = []
-  deptList.value.push(...handleTree(res))
-}
-
-/** 基于名字过滤 */
-const filterNode = (name: string, data: Tree) => {
-  if (!name) return true
-  return data.name.includes(name)
-}
-
-/** 处理部门被点击 */
-let currentNode: any = {}
-const handleNodeClick = async (row: { [key: string]: any }, treeNode: any) => {
-  // 判断选中状态
-  if (currentNode && currentNode.name === row.name) {
-    treeNode.checked = !treeNode.checked
-  } else {
-    treeNode.checked = true
-  }
-  if (treeNode.checked) {
-    // 选中
-    currentNode = row
-    emits('node-click', row)
-  } else {
-    // 取消选中
-    treeRef.value!.setCurrentKey(undefined)
-    emits('node-click', undefined)
-    currentNode = null
-  }
-}
-const emits = defineEmits(['node-click'])
-
-/** 监听deptName */
-watch(deptName, (val) => {
-  treeRef.value!.filter(val)
-})
-
-/** 初始化 */
-onMounted(async () => {
-  await getTree()
-})
-</script>
--- a/src/views/system/user/components/UserSelectDialogV2.vue
+++ b/src/views/system/user/components/UserSelectDialogV2.vue
@ -0,0 +1,319 @@
+<!--
+  系统用户弹窗选择器（V2，支持单选/多选）
+
+  对齐 MdVendorSelectDialog 架构模式 + KTG userSelect 左侧部门树
+  搜索字段 & 展示字段对齐 KTG userSelect：用户名称、用户昵称、部门、手机号码
+
+  Props:
+    multiple — true 多选（checkbox），false 单选（radio）；默认 true
+  Events:
+    selected(rows: UserVO[]) — 确认选择后触发，单选时数组长度为 1
+  Expose:
+    open(selectedIds?: number[]) — 打开弹窗，可传入已选 ID 用于预选高亮
+-->
+<template>
+  <Dialog title="人员选择" v-model="dialogVisible" width="80%">
+    <el-row :gutter="20">
+      <!-- 左侧部门树 -->
+      <el-col :span="5" :xs="24">
+        <ContentWrap class="h-full">
+          <DeptTreeSelect ref="deptTreeRef" @node-click="handleDeptNodeClick" />
+        </ContentWrap>
+      </el-col>
+      <!-- 右侧：搜索表单 + 用户表格 -->
+      <el-col :span="19" :xs="24">
+        <ContentWrap>
+          <el-form :inline="true" :model="queryParams" label-width="85px">
+            <el-form-item label="用户名称">
+              <el-input
+                v-model="queryParams.username"
+                placeholder="请输入用户名称"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-220px"
+              />
+            </el-form-item>
+            <el-form-item label="手机号码">
+              <el-input
+                v-model="queryParams.mobile"
+                placeholder="请输入手机号码"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-220px"
+              />
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="请选择状态"
+                clearable
+                class="!w-220px"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery">
+                <Icon icon="ep:search" class="mr-5px" /> 搜索
+              </el-button>
+              <el-button @click="resetQuery">
+                <Icon icon="ep:refresh" class="mr-5px" /> 重置
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </ContentWrap>
+        <!-- 数据表格：单选 radio / 多选 checkbox 统一在一个 table 内 -->
+        <ContentWrap>
+          <el-table
+            ref="tableRef"
+            v-loading="loading"
+            :data="list"
+            :stripe="true"
+            :show-overflow-tooltip="true"
+            row-key="id"
+            :highlight-current-row="!multiple"
+            @selection-change="handleSelectionChange"
+            @row-click="handleRowClick"
+            @row-dblclick="handleRowDblClick"
+          >
+            <!-- 多选：checkbox（reserve-selection 保证跨页勾选不丢失） -->
+            <el-table-column
+              v-if="multiple"
+              type="selection"
+              :reserve-selection="true"
+              width="50"
+              align="center"
+            />
+            <!-- 单选：radio -->
+            <el-table-column v-else width="50" align="center">
+              <template #default="{ row }">
+                <el-radio
+                  v-model="selectedRadioId"
+                  :value="row.id"
+                  class="radio-no-label"
+                  @change="handleRadioChange(row)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="用户名称" align="center" prop="username" width="150" />
+            <el-table-column label="用户昵称" align="left" prop="nickname" min-width="150" />
+            <el-table-column label="部门" align="center" prop="deptName" width="150" />
+            <el-table-column label="手机号码" align="center" prop="mobile" width="130" />
+            <el-table-column label="状态" align="center" prop="status" width="80">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+          </el-table>
+          <Pagination
+            :total="total"
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </ContentWrap>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button type="primary" @click="confirmSelect">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as UserApi from '@/api/system/user'
+import DeptTreeSelect from '@/views/system/dept/components/DeptTreeSelect.vue'
+
+defineOptions({ name: 'UserSelectDialogV2' })
+
+const props = withDefaults(
+  defineProps<{
+    multiple?: boolean // true 多选（checkbox），false 单选（radio）
+  }>(),
+  {
+    multiple: true
+  }
+)
+
+const message = useMessage()
+const emit = defineEmits<{
+  selected: [rows: UserApi.UserVO[]]
+}>()
+
+const dialogVisible = ref(false) // 弹窗是否展示
+const loading = ref(false) // 列表加载中
+const list = ref<UserApi.UserVO[]>([]) // 用户列表
+const total = ref(0) // 总条数
+
+// ==================== 部门树 ====================
+const deptTreeRef = ref() // 部门树 Ref
+
+/** 部门节点点击 */
+const handleDeptNodeClick = (deptId: number | undefined) => {
+  queryParams.deptId = deptId
+  handleQuery()
+}
+
+// ==================== 选中状态 ====================
+const tableRef = ref() // 表格 Ref
+const selectedRows = ref<UserApi.UserVO[]>([]) // 多选模式：选中行
+const selectedRadioId = ref<number>() // 单选模式：选中 ID
+const currentRadioRow = ref<UserApi.UserVO>() // 单选模式：选中行对象
+const preSelectedIds = ref<number[]>([]) // 打开弹窗时传入的已选 ID
+
+/** 多选：checkbox 变化 */
+const handleSelectionChange = (rows: UserApi.UserVO[]) => {
+  if (props.multiple) {
+    selectedRows.value = rows
+  }
+}
+
+/** 单选：radio 变化 */
+const handleRadioChange = (row: UserApi.UserVO) => {
+  currentRadioRow.value = row
+}
+
+/** 单击行：单选模式下点击整行即选中（降低操作成本），多选不处理（避免和 dblclick 冲突） */
+const handleRowClick = (row: UserApi.UserVO) => {
+  if (props.multiple) {
+    return
+  }
+  selectedRadioId.value = row.id
+  currentRadioRow.value = row
+}
+
+/** 双击行：多选模式切换勾选，单选模式直接确认 */
+const handleRowDblClick = (row: UserApi.UserVO) => {
+  if (props.multiple) {
+    tableRef.value?.toggleRowSelection(row)
+    return
+  }
+  selectedRadioId.value = row.id
+  currentRadioRow.value = row
+  confirmSelect()
+}
+
+// ==================== 用户查询 ====================
+const queryParams = reactive({
+  pageNo: 1, // 页码
+  pageSize: 10, // 每页条数
+  username: undefined as string | undefined, // 用户名称
+  mobile: undefined as string | undefined, // 手机号码
+  status: CommonStatusEnum.ENABLE as number | undefined, // 状态：默认只查启用
+  deptId: undefined as number | undefined // 部门 ID（从左侧树选择）
+})
+
+/** 查询用户列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+    await nextTick()
+    applyPreSelection()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 恢复预选状态（当前页可见范围内） */
+const applyPreSelection = () => {
+  if (preSelectedIds.value.length === 0) {
+    return
+  }
+  if (props.multiple) {
+    const table = tableRef.value
+    if (!table) {
+      return
+    }
+    list.value.forEach((row) => {
+      if (preSelectedIds.value.includes(row.id)) {
+        table.toggleRowSelection(row, true)
+      }
+    })
+  } else {
+    const match = list.value.find((row) => preSelectedIds.value.includes(row.id))
+    if (match) {
+      selectedRadioId.value = match.id
+      currentRadioRow.value = match
+    }
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置查询条件 */
+const resetQuery = () => {
+  queryParams.username = undefined
+  queryParams.mobile = undefined
+  queryParams.status = CommonStatusEnum.ENABLE
+  queryParams.deptId = undefined
+  // 清空部门树选中
+  deptTreeRef.value?.reset()
+  handleQuery()
+}
+
+/** 确认选择 */
+const confirmSelect = () => {
+  if (props.multiple) {
+    if (selectedRows.value.length === 0) {
+      message.warning('请至少选择一条数据')
+      return
+    }
+    emit('selected', selectedRows.value)
+  } else {
+    if (!currentRadioRow.value) {
+      message.warning('请选择一条数据')
+      return
+    }
+    emit('selected', [currentRadioRow.value])
+  }
+  dialogVisible.value = false
+}
+
+// ==================== 打开弹窗 ====================
+
+/** 打开弹窗，可传入已选 ID 用于预选高亮 */
+const open = async (selectedIds?: number[]) => {
+  dialogVisible.value = true
+  // 重置查询条件 + 页码，避免二次打开继承上次过滤上下文
+  queryParams.username = undefined
+  queryParams.mobile = undefined
+  queryParams.status = CommonStatusEnum.ENABLE
+  queryParams.deptId = undefined
+  queryParams.pageNo = 1
+  // 清空上一次的选中状态
+  selectedRows.value = []
+  selectedRadioId.value = undefined
+  currentRadioRow.value = undefined
+  preSelectedIds.value = selectedIds ?? []
+  // 清空部门树选中 + 多选模式清空跨页缓存的勾选
+  await nextTick()
+  deptTreeRef.value?.reset()
+  tableRef.value?.clearSelection()
+  await getList()
+}
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+/* 隐藏 radio 的 label 文字，只保留圆圈 */
+.radio-no-label {
+  :deep(.el-radio__label) {
+    display: none;
+  }
+}
+</style>
--- a/src/views/system/user/components/UserSelectV2.vue
+++ b/src/views/system/user/components/UserSelectV2.vue
@ -0,0 +1,172 @@
+<!--
+  系统用户选择器 V2：只读输入框 + 点击弹窗选择
+
+  对齐 MdVendorSelect 架构模式
+
+  交互：显示为只读 el-input，点击打开弹窗（单选模式）进行选择
+  Props:
+    modelValue  — 绑定的用户 ID（v-model）
+    disabled    — 是否禁用
+    clearable   — 是否允许清空（鼠标悬停时显示清除图标）
+    placeholder — 占位文字
+  Events:
+    update:modelValue — v-model 更新
+    change(item)      — 选中用户变化时触发，传递完整 UserVO（清空时为 undefined）
+-->
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <el-tooltip :disabled="!selectedItem" placement="top" :show-after="500">
+      <template #content>
+        <div v-if="selectedItem" class="leading-6">
+          <div>用户名称：{{ selectedItem.username }}</div>
+          <div>用户昵称：{{ selectedItem.nickname }}</div>
+          <div>部门：{{ (selectedItem as any).deptName || '-' }}</div>
+          <div>手机号码：{{ selectedItem.mobile || '-' }}</div>
+        </div>
+      </template>
+      <el-input
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        readonly
+        :suffix-icon="suffixIcon"
+        :class="disabled ? 'is-select-disabled' : 'is-select-clickable'"
+      />
+    </el-tooltip>
+  </div>
+  <!-- 弹窗必须放在 div 外部，否则弹窗内的点击事件会冒泡到 div 触发 handleClick -->
+  <UserSelectDialogV2 ref="dialogRef" :multiple="false" @selected="handleSelected" />
+</template>
+
+<script setup lang="ts">
+import * as UserApi from '@/api/system/user'
+import { Search, CircleClose } from '@element-plus/icons-vue'
+import UserSelectDialogV2 from './UserSelectDialogV2.vue'
+
+// 组件有两个根节点（div + Dialog），Vue 不会自动继承 attrs；
+// 手动透传到外层 div，确保父组件传入的 class / style 等生效
+const attrs = useAttrs()
+
+defineOptions({ name: 'UserSelectV2', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number // 绑定的用户 ID
+    disabled?: boolean // 是否禁用
+    clearable?: boolean // 是否允许清空
+    placeholder?: string // 占位文字
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择用户'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: UserApi.UserVO | undefined]
+}>()
+
+const dialogRef = ref() // 弹窗 Ref
+const hovering = ref(false) // 鼠标是否悬停
+
+// ==================== 名称回显 ====================
+const selectedItem = ref<UserApi.UserVO | undefined>() // 当前选中的用户对象
+
+/** 输入框显示文本：展示用户昵称，保持简洁 */
+const displayLabel = computed(() => {
+  return selectedItem.value?.nickname ?? ''
+})
+
+/** 是否显示清除图标 */
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && hovering.value && props.modelValue != null
+})
+
+/** 后缀图标：悬停且有值时显示清除，否则显示搜索 */
+const suffixIcon = computed(() => {
+  return showClear.value ? CircleClose : Search
+})
+
+/** 根据 ID 单条查询用户信息（用于编辑回显） */
+const resolveItemById = async (id: number | undefined) => {
+  if (id == null) {
+    selectedItem.value = undefined
+    return
+  }
+  if (selectedItem.value?.id === id) {
+    return
+  }
+  try {
+    selectedItem.value = await UserApi.getUser(id)
+  } catch (e) {
+    console.error('[UserSelectV2] resolveItemById failed:', e)
+  }
+}
+
+/** 监听 modelValue 变化，触发回显 */
+watch(
+  () => props.modelValue,
+  (val) => {
+    resolveItemById(val)
+  },
+  { immediate: true }
+)
+
+// ==================== 点击交互 ====================
+
+/** 点击组件：清除或打开弹窗 */
+const handleClick = (e: MouseEvent) => {
+  if (props.disabled) {
+    return
+  }
+  // 点击清除图标：清空选中
+  const target = e.target as HTMLElement
+  if (showClear.value && target.closest('.el-input__suffix')) {
+    e.stopPropagation()
+    selectedItem.value = undefined
+    emit('update:modelValue', undefined)
+    emit('change', undefined)
+    return
+  }
+  // 打开弹窗，传入当前选中 ID 用于预选高亮
+  const selectedIds = props.modelValue != null ? [props.modelValue] : []
+  dialogRef.value.open(selectedIds)
+}
+
+/** 弹窗选中回调 */
+const handleSelected = (rows: UserApi.UserVO[]) => {
+  if (!rows || rows.length === 0) {
+    return
+  }
+  const item = rows[0]
+  selectedItem.value = item
+  emit('update:modelValue', item.id)
+  emit('change', item)
+}
+</script>
+
+<style lang="scss" scoped>
+/* :deep 用于穿透 el-input 内部元素的 cursor 样式，UnoCSS 无法直接处理组件内部 DOM */
+.is-select-clickable {
+  :deep(.el-input__wrapper),
+  :deep(.el-input__inner) {
+    cursor: pointer;
+  }
+}
+
+.is-select-disabled {
+  :deep(.el-input__wrapper),
+  :deep(.el-input__inner) {
+    cursor: not-allowed;
+  }
+}
+</style>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -7,7 +7,7 @@
    <!-- 左侧部门树 -->
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
-        <DeptTree @node-click="handleDeptNodeClick" />
+        <DeptTreeSelect @node-click="handleDeptNodeClick" />
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
@ -219,7 +219,7 @@ import * as UserApi from '@/api/system/user'
 import UserForm from './UserForm.vue'
 import UserImportForm from './UserImportForm.vue'
 import UserAssignRoleForm from './UserAssignRoleForm.vue'
-import DeptTree from './DeptTree.vue'
+import DeptTreeSelect from '@/views/system/dept/components/DeptTreeSelect.vue'

 defineOptions({ name: 'SystemUser' })

@ -265,14 +265,9 @@ const resetQuery = () => {
 }

 /** 处理部门被点击 */
-const handleDeptNodeClick = async (row: any) => {
-  if (row === undefined) {
-    queryParams.deptId = undefined
-    await getList()
-  } else {
-    queryParams.deptId = row.id
-    await getList()
-  }
+const handleDeptNodeClick = async (deptId: number | undefined) => {
+  queryParams.deptId = deptId
+  await getList()
 }

 /** 添加/修改操作 */