feat: indent客户名供应商名远程搜索/自建逻辑优化.

src/pages/indent-manage/indent/components/info.vue

@@ -57,15 +57,15 @@
                       v-model="item.vendor_id"
                       :remote-method="($e: any) => queryVenderList($e, index)"
                       filterable
-                      allow-create
                       remote
                       style="width: 100%"
                       placeholder="请选择供应商"
                       @change="($e) => changeVenderSelect($e, index)"
                     >
+                      <!-- allow-create -->
                       <el-option
-                        v-for="option in vendorList[index]"
-                        :key="option.id"
+                        v-for="(option, subIndex) in vendorList[index]"
+                        :key="option.id || subIndex"
                         :value="option.id"
                         :label="option.name"
                       ></el-option>
@@ -326,7 +326,9 @@
                 <el-input
                   v-model="item.product_capacity"
                   placeholder="请输入容量"
-                  @input="($e) => inputFilter($e, forms[index], 'product_capacity')"
+                  @input="
+                    ($e) => inputFilter($e, forms[index], 'product_capacity')
+                  "
                 ></el-input>
                 <div
                   v-if="index < forms.length - 1"
@@ -349,7 +351,9 @@
                 <el-input
                   v-model="item.product_material"
                   placeholder="请输入材质"
-                  @input="($e) => inputFilter($e, forms[index], 'product_material')"
+                  @input="
+                    ($e) => inputFilter($e, forms[index], 'product_material')
+                  "
                 ></el-input>
                 <div
                   v-if="index < forms.length - 1"
@@ -372,7 +376,9 @@
                 <el-input
                   v-model="item.product_battery"
                   placeholder="是否带电池"
-                  @input="($e) => inputFilter($e, forms[index], 'product_battery')"
+                  @input="
+                    ($e) => inputFilter($e, forms[index], 'product_battery')
+                  "
                 ></el-input>
                 <div
                   v-if="index < forms.length - 1"
@@ -395,7 +401,10 @@
                 <el-input
                   v-model="item.product_require_print"
                   placeholder="请输入要求"
-                  @input="($e) => inputFilter($e, forms[index], 'product_require_print')"
+                  @input="
+                    ($e) =>
+                      inputFilter($e, forms[index], 'product_require_print')
+                  "
                 ></el-input>
                 <div
                   v-if="index < forms.length - 1"
@@ -420,7 +429,9 @@
                 <el-input
                   v-model="item.product_color"
                   placeholder="请输入颜色"
-                  @input="($e) => inputFilter($e, forms[index], 'product_color')"
+                  @input="
+                    ($e) => inputFilter($e, forms[index], 'product_color')
+                  "
                 ></el-input>
                 <div
                   v-if="index < forms.length - 1"
@@ -443,7 +454,10 @@
                 <el-input
                   v-model="item.product_require_color"
                   placeholder="请输入颜色定制要求"
-                  @input="($e) => inputFilter($e, forms[index], 'product_require_color')"
+                  @input="
+                    ($e) =>
+                      inputFilter($e, forms[index], 'product_require_color')
+                  "
                 ></el-input>
                 <div
                   v-if="index < forms.length - 1"
@@ -470,7 +484,9 @@
                   placeholder="其他信息"
                   type="textarea"
                   :rows="3"
-                  @input="($e) => inputFilter($e, forms[index], 'product_other')"
+                  @input="
+                    ($e) => inputFilter($e, forms[index], 'product_other')
+                  "
                 ></el-input>
                 <div
                   v-if="index < forms.length - 1"
@@ -1308,17 +1324,32 @@ watch(
     show.value = visible > 0
   },
 )
-const queryVenderList = function (keywords: string, index: number) {
+const queryVenderList = function (keyword: string, index: number) {
+  let keywords = keyword.trim()
+  if (!keywords.length) return
   getVendorList({ keywords }).then((response: any) => {
+    const defaultCreateOption = {
+      name: keywords,
+      id: '',
+    }
     if (Array.isArray(response.result)) {
+      const tempStr = keywords.replace(/\S_-/g, '').toLowerCase()
+      const tempList = response.result.map((i: any) =>
+        i.name.replace(/\S_-/g, '').toLowerCase(),
+      )
+      let result = []
+      if (response.result.length) {
+        if (tempList.includes(tempStr)) {
+          result = response.result
+        } else {
+          // 结果里面没找到输入的搜索字符串, 就把它加入到结果里面当成‘新增的’
+          result = [cloneDeep(defaultCreateOption)].concat(response.result)
+        }
+      }
       if (manualVendor.value.id) {
-        vendorList.value.splice(
-          index,
-          1,
-          [manualVendor.value].concat(response.result || []),
-        )
+        vendorList.value.splice(index, 1, [manualVendor.value].concat(result))
       } else {
-        vendorList.value.splice(index, 1, response.result || [])
+        vendorList.value.splice(index, 1, result)
       }
     }
   })

src/pages/indent-manage/indent/edit.vue

@@ -25,21 +25,21 @@
             prop="custom_name"
           >
             <el-select
-              v-model="form.custom_name"
+              v-model="form.custom_id"
               style="width: 100%"
               :placeholder="$t('text_please_select')"
-              :remote-method="getCustomListFun"
+              :remote-method="debounce(getCustomListFun, 500)"
               :loading="loading"
-              allow-create
               remote
               filterable
               @change="customChange"
             >
+              <!-- allow-create -->
               <el-option
-                v-for="option in customList"
-                :key="option.id"
+                v-for="(option, index) in customList"
+                :key="option.id || index"
                 :label="option.name"
-                :value="option.name"
+                :value="option.id"
               ></el-option>
             </el-select>
           </el-form-item>
@@ -294,6 +294,7 @@ import {
 import type { FormInstance } from 'element-plus'
 import cloneDeep from 'lodash.clonedeep'
 import dayjs from 'dayjs'
+import debounce from 'lodash.debounce'
 import ImageUpload from '@/components/ImageUpload.vue'
 import editInfo from './components/info.vue'
 
@@ -492,9 +493,9 @@ const selectSku = (data: any) => {
   form.value.item_id = data.id || ''
 }
 const customChange = (value: any) => {
-  const temp = customList.value.filter((i: any) => i.name === value)
+  const temp = customList.value.filter((i: any) => i.id === value)
   // id为空且custom_name有值是新增
-  form.value.custom_id = temp.length ? temp[0].id : ''
+  form.value.custom_name = temp.length ? temp[0].name : '-'
 }
 // 成功创建了报价, 把数据展示到界面
 const quotaCreated = (data: any) => {
@@ -572,13 +573,34 @@ const checkForm = (
     }
   })
 }
-const getCustomListFun = (keywords: string) => {
+const getCustomListFun = (keyword: string) => {
+  let keywords = keyword.trim()
+  if (!keywords.length) return
   loading.value = true
   customList.value = []
   getCustomList({ keywords })
     .then((response: any) => {
-      if (Array.isArray(response.result) && response.result.length) {
-        customList.value = response.result
+      const defaultCreateOption = {
+        name: keywords,
+        id: '',
+      }
+      if (Array.isArray(response.result)) {
+        const tempStr = keywords.replace(/\S_-/g, '').toLowerCase()
+        const tempList = response.result.map((i: any) =>
+          i.name.replace(/\S_-/g, '').toLowerCase(),
+        )
+        let result = []
+        if (response.result.length) {
+          if (tempList.includes(tempStr)) {
+            result = response.result
+          } else {
+            // 结果里面没找到输入的搜索字符串, 就把它加入到结果里面当成‘新增的’
+            result = [cloneDeep(defaultCreateOption)].concat(response.result)
+          }
+        } else if (keywords.length) {
+          result = [cloneDeep(defaultCreateOption)]
+        }
+        customList.value = result
       }
     })
     .finally(() => {