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

src/views/vehicle/mileage-record.vue

@@ -72,15 +72,44 @@
         <span>{{ formatMileage(row.totalMileage) }}</span>
       </template>
       <template #vehicleNoForm>
-        <el-autocomplete
+        <el-select
           v-model="form.vehicleNo"
-          :fetch-suggestions="fetchVehicleOptions"
-          :disabled="Boolean(form.id)"
+          :disabled="boxType === 'view'"
+          :loading="vehicleOptionsLoading"
+          placeholder="请选择车牌号"
           clearable
-          placeholder="输入车牌号模糊查询选择"
-          value-key="value"
-          class="mileage-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 #previousMonthMileageForm>
         <el-input
@@ -213,6 +242,9 @@ export default {
       },
       selectionList: [],
       boxType: '',
+      vehicleOptions: [],
+      vehicleOptionsLoading: false,
+      vehicleOptionsRequestId: 0,
       data: [],
     };
   },
@@ -251,13 +283,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;
+        });
     },
     formatMileage(value) {
       if (this.isEmpty(value)) {
@@ -446,6 +492,8 @@ export default {
       const vehicleNoColumn = this.findColumn(this.option.column, 'vehicleNo');
       vehicleNoColumn.disabled = type !== 'add';
       if (type === 'add') {
+        this.vehicleOptions = [];
+        this.loadVehicleOptions('');
         this.form.vehicleType = '车辆';
         this.form.mileageUnit = '公里';
       }
@@ -456,6 +504,8 @@ export default {
           detail.vehicleType = '车辆';
           detail.mileageUnit = '公里';
           this.form = detail;
+          this.vehicleOptions = [];
+          this.loadVehicleOptions(this.form.vehicleNo || '');
         });
       }
       done();