仓储设置 负责人使用封装的远程搜索

mes-ui/mes-ui-admin-vue3/src/views/heli/warehouse/WarehouseForm.vue

@@ -14,27 +14,11 @@
         <el-input v-model="formData.whName" placeholder="请输入仓库名称" class="!w-500px" />
       </el-form-item>
       <el-form-item label="联系人" prop="contact">
-        <!-- <el-input v-model="formData.contact" placeholder="请输入联系人" class="!w-500px" /> -->
-        <el-select
+        <UserSelect class="!w-500px"
           v-model="formData.contact"
-          placeholder="请输入联系人"
-          :remote-method="remoteUserSearch"
-          remote-show-suffix
-          remote
-          clearable
-          reserve-keyword
-          filterable
-          :loading="userSelectLoading"
-          class="!w-500px"
-          @change="handleContact"
-        >
-          <el-option
-            v-for="item in userSelectList"
-            :key="item.id"
-            :label="item.username + ' ' + item.nickname"
-            :value="item.id"
+          :leaderUserId="formData.contact"
+          @update:newValue="handleSelectedUser"
         />
-        </el-select>
       </el-form-item>
       <el-form-item label="联系电话" prop="telephone">
         <el-input v-model="formData.telephone" placeholder="请输入联系电话" class="!w-500px" />
@@ -62,7 +46,7 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import * as WarehouseApi from '@/api/heli/warehouse'
 import * as UserApi from '@/api/system/user'
 import { fromPairs } from 'lodash-es'
-
+import UserSelect from '../hlvuestyle/userSelect.vue'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -179,4 +163,9 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+const handleSelectedUser = (newValue: any) => {
+  // console.log('接收对应的数据:', newValue)
+  formData.value.leaderUserId = newValue.id
+}
 </script>