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

src/views/vehicle/insurance-record.vue

@@ -60,14 +60,44 @@
         </el-button>
       </template>
       <template #vehicleNoForm>
-        <el-autocomplete
+        <el-select
           v-model="form.vehicleNo"
-          :fetch-suggestions="fetchVehicleOptions"
-          clearable
+          :disabled="boxType === 'view'"
+          :loading="vehicleOptionsLoading"
           :placeholder="vehicleNoPlaceholder"
-          value-key="value"
-          class="insurance-record-page__vehicle-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 #insuredAmountForm>
         <el-input
@@ -211,6 +241,9 @@ export default {
       excelForm: {},
       isDetailLoading: false,
       boxType: '',
+      vehicleOptions: [],
+      vehicleOptionsLoading: false,
+      vehicleOptionsRequestId: 0,
       option,
       excelOption,
       page: {
@@ -226,7 +259,7 @@ export default {
   },
   created() {
     this.initDeptTree();
-    this.initOcrTemplateOptions();
+    this.initOcrTemplateOptions('车辆');
   },
   computed: {
     ...mapGetters(['permission', 'userInfo']),
@@ -243,7 +276,7 @@ export default {
       };
     },
     vehicleNoPlaceholder() {
-      return this.form.vehicleType === '船舶' ? '输入船号模糊查询选择' : '输入车牌号模糊查询选择';
+      return this.form.vehicleType === '船舶' ? '请选择船号' : '请选择车牌号';
     },
     ids() {
       const ids = [];
@@ -271,9 +304,12 @@ export default {
     updateVehicleTypeDisplays(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('');
+        this.initOcrTemplateOptions(vehicleType, true);
       }
     },
     initDeptTree() {
@@ -282,8 +318,9 @@ export default {
         column.dicData = res.data.data;
       });
     },
-    initOcrTemplateOptions() {
-      getOcrTemplateList(1, 100, {})
+    initOcrTemplateOptions(vehicleType = '车辆', resetSelected = false) {
+      const type = vehicleType || '车辆';
+      return getOcrTemplateList(1, 100, { vehicleType: type })
         .then(res => {
           const records = res.data.data?.records || [];
           this.ocrTemplateOptions = records.map(item => ({
@@ -293,26 +330,44 @@ export default {
           }));
           const templateColumn = this.findColumn(this.option.column, 'ocrTemplate');
           if (templateColumn) templateColumn.dicData = this.ocrTemplateOptions;
+          if (resetSelected || !this.ocrTemplateOptions.some(item => item.value === this.form.ocrTemplate)) {
+            this.form.ocrTemplate = this.ocrTemplateOptions[0]?.value || '';
+          }
         })
         .catch(() => {
           this.ocrTemplateOptions = [];
+          const templateColumn = this.findColumn(this.option.column, 'ocrTemplate');
+          if (templateColumn) templateColumn.dicData = [];
+          if (resetSelected) this.form.ocrTemplate = '';
         });
     },
-    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;
+        });
     },
     normalizeRow(row) {
       const values = { ...row };
@@ -421,8 +476,10 @@ export default {
     beforeOpen(done, type) {
       this.boxType = type;
       if (type === 'add') {
+        this.vehicleOptions = [];
+        this.loadVehicleOptions('');
         this.form.vehicleType = '车辆';
-        this.form.ocrTemplate = this.ocrTemplateOptions[0]?.value || '';
+        this.initOcrTemplateOptions('车辆', true);
       }
       if (['edit', 'view'].includes(type)) {
         this.isDetailLoading = true;
@@ -432,6 +489,9 @@ export default {
               ...res.data.data,
               vehicleType: res.data.data.vehicleType || '车辆',
             };
+            this.vehicleOptions = [];
+            this.loadVehicleOptions(this.form.vehicleNo || '');
+            return this.initOcrTemplateOptions(this.form.vehicleType);
           })
           .finally(() => {
             this.isDetailLoading = false;
@@ -548,7 +608,7 @@ export default {
           if (filledCount > 0) {
             this.$message.success(`保单识别完成，已填充${filledCount}项`);
           } else {
-            this.$message.warning('保单识别完成，未匹配到模板字段，请手动填写保险信息');
+            this.$message.warning('未识别到相关字段，请手动填写保险信息');
           }
         })
         .catch(() => {