1

src/views/system/jd-instruction/fadan-quick-record.vue

@@ -14,23 +14,19 @@
           </div>
         </el-form-item>
         <el-form-item label="型号" required>
-          <el-select
+          <el-autocomplete
             v-model="form.model"
-            class="model-select-full"
-            filterable
-            allow-create
-            default-first-option
+            class="model-input-full"
+            :fetch-suggestions="queryModels"
+            placeholder="可输入、可改；点选联想项会带出最近一单付款 / 后返"
             clearable
-            placeholder="必选或输入新型号；从历史单选时将带出最近一单付款 / 后返"
-            @change="onModelChange"
+            :trigger-on-focus="true"
+            @select="onModelSuggestionSelect"
           >
-            <el-option
-              v-for="item in modelOptions"
-              :key="item.modelNumber"
-              :label="modelOptionLabel(item)"
-              :value="item.modelNumber"
-            />
-          </el-select>
+            <template slot-scope="{ item }">
+              <span class="model-suggest-label">{{ item.label }}</span>
+            </template>
+          </el-autocomplete>
         </el-form-item>
         <el-form-item label="下单地址" required>
           <el-input
@@ -196,9 +192,27 @@ export default {
         // 静默失败，不影响手输型号
       }
     },
-    onModelChange(val) {
-      const key = (val != null ? String(val) : '').trim()
-      if (!key) return
+    queryModels(queryString, cb) {
+      const q = (queryString || '').trim().toLowerCase()
+      const rows = this.modelOptions
+        .filter(o => {
+          const m = String(o.modelNumber || '').trim()
+          if (!m) return false
+          if (!q) return true
+          return m.toLowerCase().includes(q)
+        })
+        .slice(0, 100)
+      cb(
+        rows.map(o => ({
+          value: String(o.modelNumber).trim(),
+          label: this.modelOptionLabel(o)
+        }))
+      )
+    },
+    /** 仅从联想列表点选时回填金额；型号本身为输入框，选后仍可继续编辑 */
+    onModelSuggestionSelect(item) {
+      if (!item || !item.value) return
+      const key = String(item.value).trim()
       const hit = this.modelOptions.find(o => o && String(o.modelNumber || '').trim() === key)
       if (!hit) return
       const payRaw = hit.lastPaymentAmount
@@ -499,13 +513,15 @@ export default {
   min-width: 0;
 }
 
-.model-select-full {
+.model-input-full {
   width: 100%;
 }
 
-.model-select-full ::v-deep .el-input__inner,
-.model-select-full ::v-deep .el-input__prefix {
-  line-height: normal;
+.model-suggest-label {
+  display: block;
+  line-height: 1.45;
+  white-space: normal;
+  word-break: break-all;
 }
 
 .btn-row {