调整 合同、运力、基础配置、客商

src/views/vehicle/etc-record.vue

@@ -60,15 +60,44 @@
         </el-button>
       </template>
       <template #vehicleNoForm>
-        <el-autocomplete
+        <el-select
           v-model="form.vehicleNo"
-          :fetch-suggestions="fetchVehicleOptions"
           :disabled="boxType === 'view'"
+          :loading="vehicleOptionsLoading"
+          placeholder="请选择车牌号"
           clearable
-          placeholder="输入车牌号模糊查询选择"
-          value-key="value"
-          class="etc-record-page__input"
-        />
+          filterable
+          remote
+          :remote-method="loadVehicleOptions"
+          @visible-change="handleVehicleSelectVisible"
+        >
+          <el-option
+            v-for="item in vehicleOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+      <template #vehicleNo-form>
+        <el-select
+          v-model="form.vehicleNo"
+          :disabled="boxType === 'view'"
+          :loading="vehicleOptionsLoading"
+          placeholder="请选择车牌号"
+          clearable
+          filterable
+          remote
+          :remote-method="loadVehicleOptions"
+          @visible-change="handleVehicleSelectVisible"
+        >
+          <el-option
+            v-for="item in vehicleOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
       </template>
       <template #transactionAmountForm>
         <el-input
@@ -138,6 +167,9 @@ export default {
       },
       selectionList: [],
       boxType: '',
+      vehicleOptions: [],
+      vehicleOptionsLoading: false,
+      vehicleOptionsRequestId: 0,
       data: [],
     };
   },
@@ -176,17 +208,27 @@ export default {
         column.dicData = res.data.data;
       });
     },
-    fetchVehicleOptions(queryString, callback) {
+    handleVehicleSelectVisible(visible) {
+      if (visible && !this.vehicleOptions.length) this.loadVehicleOptions('');
+    },
+    loadVehicleOptions(queryString = '') {
+      const requestId = ++this.vehicleOptionsRequestId;
+      this.vehicleOptionsLoading = true;
       getVehicleList(1, 20, { plateNo: queryString })
         .then(res => {
-          const records = res.data.data.records || [];
-          callback(
-            records.map(item => ({
-              value: item.plateNo,
-            }))
-          );
+          if (requestId !== this.vehicleOptionsRequestId) return;
+          const values = (res.data.data.records || []).map(item => item.plateNo).filter(Boolean);
+          this.vehicleOptions = [...new Set(values)].map(value => ({ label: value, value }));
+          if (this.form.vehicleNo && !this.vehicleOptions.some(item => item.value === this.form.vehicleNo)) {
+            this.vehicleOptions.unshift({ label: this.form.vehicleNo, value: this.form.vehicleNo });
+          }
         })
-        .catch(() => callback([]));
+        .catch(() => {
+          if (requestId === this.vehicleOptionsRequestId) this.vehicleOptions = [];
+        })
+        .finally(() => {
+          if (requestId === this.vehicleOptionsRequestId) this.vehicleOptionsLoading = false;
+        });
     },
     formatAttachments(value) {
       if (!value) return '';
@@ -341,6 +383,8 @@ export default {
     beforeOpen(done, type) {
       this.boxType = type;
       if (type === 'add') {
+        this.vehicleOptions = [];
+        this.loadVehicleOptions('');
         this.form = { dataSource: '手工录入' };
       }
       if (['edit', 'view'].includes(type)) {
@@ -348,6 +392,8 @@ export default {
           const detail = res.data.data;
           detail.attachments = this.parseAttachments(detail.attachments);
           this.form = detail;
+          this.vehicleOptions = [];
+          this.loadVehicleOptions(this.form.vehicleNo || '');
         });
       }
       done();