仓储 编辑联系人

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

@@ -1,6 +1,12 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="700px">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="108px" v-loading="formLoading">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="108px"
+      v-loading="formLoading"
+    >
       <el-form-item label="仓库编号" prop="whNo">
         <el-input v-model="formData.whNo" disabled class="!w-500px" />
       </el-form-item>
@@ -9,10 +15,25 @@
       </el-form-item>
       <el-form-item label="联系人" prop="contact">
         <!-- <el-input v-model="formData.contact" placeholder="请输入联系人" class="!w-500px" /> -->
-        <el-select v-model="formData.contact" placeholder="请输入联系人" :remote-method="remoteUserSearch" remote-show-suffix
+        <el-select
-          remote clearable reserve-keyword filterable :loading="userSelectLoading" class="!w-500px" @change="handleContact">
+          v-model="formData.contact"
-          <el-option v-for="item in userSelectList" :key="item.id" :label="item.username + ' ' + item.nickname"
+          placeholder="请输入联系人"
-            :value="item.id" />
+          :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"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="联系电话" prop="telephone">
@@ -20,7 +41,11 @@
       </el-form-item>
       <el-form-item label="状态" prop="whStatus">
         <el-radio-group v-model="formData.whStatus">
-          <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.HELI_COMMON_STATUS)" :key="dict.value" :label="dict.value">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.HELI_COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
             {{ dict.label }}
           </el-radio>
         </el-radio-group>
@@ -35,8 +60,8 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import * as WarehouseApi from '@/api/heli/warehouse'
-import * as UserApi from "@/api/system/user";
+import * as UserApi from '@/api/system/user'
-import { fromPairs } from 'lodash-es';
+import { fromPairs } from 'lodash-es'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -45,32 +70,34 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
+const formData: any = ref({
   id: undefined,
   whNo: undefined,
   whName: undefined,
   contact: undefined,
   telephone: undefined,
-  whStatus: 1,
+  whStatus: 1
 })
 const formRules = reactive({
-  whName: [{ required: true, message: '仓库名称，唯一不能为空', trigger: 'blur' }],
+  whName: [{ required: true, message: '仓库名称，唯一不能为空', trigger: 'blur' }]
   // whStatus: [{ required: true, message: '状态,1 表示正常，2 表示禁用不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
 
 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
 const userSelectList = ref<UserApi.UserVO[]>([])
-const userSelectLoading = ref(false);
+const userSelectLoading = ref(false)
 const remoteUserSearch = (query: string) => {
   if (query) {
     userSelectLoading.value = true
     setTimeout(() => {
       userSelectLoading.value = false
       userSelectList.value = userList.value.filter((item) => {
-        return item.nickname.toLowerCase().includes(query.toLowerCase()) || item.username.toLowerCase().includes(query.toLowerCase())
+        return (
+          item.nickname.toLowerCase().includes(query.toLowerCase()) ||
+          item.username.toLowerCase().includes(query.toLowerCase())
+        )
       })
-     
     }, 200)
   } else {
     userSelectList.value = userList.value
@@ -78,13 +105,11 @@ const remoteUserSearch = (query: string) => {
 }
 /** 搜索按钮操作 */
 const handleContact = (uid) => {
-  
   var mobileUser = userList.value.find((item) => {
-        return item.id === uid
+    return item.id === uid
-      })
+  })
 
   formData.value.telephone = mobileUser?.mobile
-
 }
 
 /** 打开弹窗 */
@@ -98,22 +123,23 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       formData.value = await WarehouseApi.getWarehouse(id)
-
       formData.value.contact = Number(formData.value.contact)
+      if (formData.value.contact == 0) {
+        formData.value.contact = undefined
+      }
     } finally {
       formLoading.value = false
     }
-
   }
   // 获得用户列表
   let userParams = {
     pageNo: 1,
     pageSize: 10,
-    status: "0"
+    status: '0'
   }
   const data = await UserApi.getUserPage(userParams)
-  userList.value = data.list;
+  userList.value = data.list
-  userSelectList.value = data.list;
+  userSelectList.value = data.list
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -149,7 +175,7 @@ const resetForm = () => {
     whName: undefined,
     contact: undefined,
     telephone: undefined,
-    whStatus: 1,
+    whStatus: 1
   }
   formRef.value?.resetFields()
 }