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

src/views/vehicle/other-expense-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'"
-          clearable
+          :loading="vehicleOptionsLoading"
           :placeholder="vehicleNoPlaceholder"
-          value-key="value"
-          class="other-expense-record-page__input"
-        />
+          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 #vehicleNo-form>
+        <el-select
+          v-model="form.vehicleNo"
+          :disabled="boxType === 'view'"
+          :loading="vehicleOptionsLoading"
+          :placeholder="vehicleNoPlaceholder"
+          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 #amountForm>
         <el-input
@@ -108,6 +137,7 @@ import { add, getDetail, getList, remove, update } from '@/api/vehicle/other-exp
 import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
 import { getList as getShipList } from '@/api/transportCapacity/transport-ship';
 import { getDeptTree } from '@/api/system/dept';
+import { getDictionary } from '@/api/system/dictbiz';
 import { exportBlob } from '@/api/common';
 import { downloadXls } from '@/utils/util';
 import { openImportDialog } from '@/utils/import-excel';
@@ -140,11 +170,15 @@ export default {
       },
       selectionList: [],
       boxType: '',
+      vehicleOptions: [],
+      vehicleOptionsLoading: false,
+      vehicleOptionsRequestId: 0,
       data: [],
     };
   },
   created() {
     this.initDeptTree();
+    this.initExpenseTypeOptions();
   },
   computed: {
     ...mapGetters(['permission', 'userInfo']),
@@ -161,7 +195,7 @@ export default {
       };
     },
     vehicleNoPlaceholder() {
-      return this.form.vehicleType === '船舶' ? '输入船号模糊查询选择' : '输入车牌号模糊查询选择';
+      return this.form.vehicleType === '船舶' ? '请选择船号' : '请选择车牌号';
     },
     ids() {
       const ids = [];
@@ -189,29 +223,52 @@ export default {
         column.dicData = res.data.data;
       });
     },
+    initExpenseTypeOptions() {
+      getDictionary({ code: 'other_fee_category' }).then(res => {
+        const column = this.findColumn(this.option.column, 'expenseType');
+        column.dicData = (res.data.data || []).map(item => ({
+          label: item.dictValue,
+          value: item.dictValue,
+        }));
+      });
+    },
     updateVehicleType(vehicleType, oldValue) {
       const vehicleNoColumn = this.findColumn(this.option.column, 'vehicleNo');
       vehicleNoColumn.placeholder =
-        vehicleType === '船舶' ? '输入船号模糊查询选择' : '输入车牌号模糊查询选择';
-      if (!this.isDetailLoading && oldValue && vehicleType !== oldValue && this.form.vehicleNo) {
+        vehicleType === '船舶' ? '请选择船号' : '请选择车牌号';
+      if (!this.isDetailLoading && oldValue && vehicleType !== oldValue) {
         this.form.vehicleNo = '';
+        this.vehicleOptions = [];
+        this.loadVehicleOptions('');
       }
     },
-    fetchVehicleOptions(queryString, callback) {
+    handleVehicleSelectVisible(visible) {
+      if (visible && !this.vehicleOptions.length) this.loadVehicleOptions('');
+    },
+    loadVehicleOptions(queryString = '') {
       const vehicleType = this.form.vehicleType || '车辆';
-      const request = vehicleType === '船舶' ? getShipList : getVehicleList;
-      const params =
-        vehicleType === '船舶' ? { shipIdentifierNo: queryString } : { plateNo: queryString };
+      const isShip = vehicleType === '船舶';
+      const request = isShip ? getShipList : getVehicleList;
+      const params = isShip ? { shipIdentifierNo: queryString } : { plateNo: queryString };
+      const requestId = ++this.vehicleOptionsRequestId;
+      this.vehicleOptionsLoading = true;
       request(1, 20, params)
         .then(res => {
-          const records = res.data.data.records || [];
-          callback(
-            records.map(item => ({
-              value: vehicleType === '船舶' ? item.shipIdentifierNo || item.shipName : item.plateNo,
-            }))
-          );
+          if (requestId !== this.vehicleOptionsRequestId) return;
+          const values = (res.data.data.records || [])
+            .map(item => (isShip ? item.shipIdentifierNo || item.shipName : 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 '';
@@ -369,6 +426,8 @@ export default {
           dataSource: '手工录入',
         };
         this.updateVehicleType('车辆');
+        this.vehicleOptions = [];
+        this.loadVehicleOptions('');
       }
       if (['edit', 'view'].includes(type)) {
         this.isDetailLoading = true;
@@ -379,6 +438,8 @@ export default {
             detail.vehicleType = detail.vehicleType || '车辆';
             this.form = detail;
             this.updateVehicleType(detail.vehicleType);
+            this.vehicleOptions = [];
+            this.loadVehicleOptions(detail.vehicleNo || '');
           })
           .finally(() => {
             this.isDetailLoading = false;