1、调整凭证

2、调整运单

src/components/address-map-picker/main.vue

@@ -1,11 +1,5 @@
 <template>
-  <el-dialog
-    v-model="visible"
-    title="地图选择地址"
-    width="920px"
-    append-to-body
-    @opened="initMap"
-  >
+  <el-dialog v-model="visible" title="地图选择地址" width="920px" append-to-body @opened="initMap">
     <div class="address-map-picker__toolbar">
       <el-input
         v-model="keyword"
@@ -15,7 +9,14 @@
       />
       <el-button type="primary" :loading="searching" @click="searchKeyword">搜索</el-button>
     </div>
-    <div ref="map" class="address-map-picker__map"></div>
+    <div class="address-map-picker__content">
+      <map-search-results
+        v-if="searchResults.length"
+        :results="searchResults"
+        @select="selectSearchResult"
+      />
+      <div ref="map" class="address-map-picker__map"></div>
+    </div>
     <div class="address-map-picker__info">{{ status }}</div>
     <template #footer>
       <el-button @click="visible = false">取消</el-button>
@@ -54,6 +55,8 @@ export default {
       amap: null,
       marker: null,
       geocoder: null,
+      searchResults: [],
+      mapInitializing: null,
     };
   },
   watch: {
@@ -65,6 +68,7 @@ export default {
           this.keyword = this.address || '';
           this.selected = {};
           this.status = '可搜索地址或点击地图选点';
+          this.searchResults = [];
         }
       },
     },
@@ -96,25 +100,39 @@ export default {
       return amapLoader;
     },
     initMap() {
-      this.loadAmap()
+      if (this.mapInitializing) return this.mapInitializing;
+
+      this.mapInitializing = this.loadAmap()
         .then(() => {
-          this.$nextTick(() => {
-            if (!this.amap) {
-              this.amap = new window.AMap.Map(this.$refs.map, {
-                center: [116.40769, 39.89945],
-                zoom: 11,
-              });
-              this.amap.on('click', event => this.pickPoint(event.lnglat));
-            } else {
-              this.amap.resize();
-              this.clearMarker();
-            }
+          if (!window.AMap?.Map) {
+            throw new Error('高德地图组件未就绪');
+          }
+          return new Promise(resolve => {
+            this.$nextTick(() => {
+              if (!this.$refs.map) return resolve(null);
+              if (!this.amap) {
+                this.amap = new window.AMap.Map(this.$refs.map, {
+                  center: [116.40769, 39.89945],
+                  zoom: 11,
+                });
+                this.amap.on('click', event => this.pickPoint(event.lnglat));
+              } else {
+                this.amap.resize();
+                this.clearMarker();
+              }
+              resolve(this.amap);
+            });
           });
         })
         .catch(() => {
           this.$message.error('高德地图组件加载失败，请稍后重试');
           this.visible = false;
+          return null;
+        })
+        .finally(() => {
+          this.mapInitializing = null;
         });
+      return this.mapInitializing;
     },
     ensureGeocoder() {
       if (this.geocoder) return Promise.resolve(this.geocoder);
@@ -154,15 +172,28 @@ export default {
         this.$message.warning('请输入地址关键词');
         return;
       }
+      if (this.searching) return;
+      this.searchResults = [];
       this.searching = true;
-      this.loadAmap()
-        .then(() => this.runGeocode('location', keyword))
+      this.initMap()
+        .then(map => (map ? this.runGeocode('location', keyword) : null))
         .then(result => {
-          const point = result.geocodes?.[0]?.location || result.location;
+          if (!result) return;
+          const geocodes = result.geocodes || (result.location ? [result] : []);
+          this.searchResults = geocodes.map((item, index) => ({
+            id: item.id || index,
+            name: item.formattedAddress || item.address || keyword,
+            address: item.formattedAddress || item.address || keyword,
+            location: item.location,
+          }));
+          const point = geocodes[0]?.location || result.location;
           if (!point) {
             throw new Error('未找到匹配地址');
           }
-          this.pickPoint(point, keyword);
+          return this.$nextTick().then(() => {
+            this.amap?.resize();
+            this.pickPoint(point, geocodes[0]?.formattedAddress || keyword);
+          });
         })
         .catch(() => {
           this.status = '未找到匹配地址';
@@ -172,6 +203,11 @@ export default {
           this.searching = false;
         });
     },
+    selectSearchResult(item) {
+      if (item && item.location) {
+        this.pickPoint(item.location, item.address || item.name || '');
+      }
+    },
     pickPoint(point, fallbackAddress = '') {
       const longitude = typeof point.getLng === 'function' ? point.getLng() : point.lng;
       const latitude = typeof point.getLat === 'function' ? point.getLat() : point.lat;
@@ -181,7 +217,11 @@ export default {
       }
       const lnglat = new window.AMap.LngLat(Number(longitude), Number(latitude));
       this.renderMarker(lnglat);
-      this.selected = { longitude: Number(longitude), latitude: Number(latitude), address: fallbackAddress };
+      this.selected = {
+        longitude: Number(longitude),
+        latitude: Number(latitude),
+        address: fallbackAddress,
+      };
       this.status = '正在解析地址...';
       this.resolving = true;
       this.runGeocode('address', lnglat)
@@ -238,11 +278,19 @@ export default {
   }
 
   &__map {
+    flex: 1 1 auto;
     width: 100%;
+    min-width: 0;
     height: 420px;
     border: 1px solid #eff1f7;
   }
 
+  &__content {
+    display: flex;
+    gap: 12px;
+    min-width: 0;
+  }
+
   &__info {
     margin-top: 10px;
     color: #606266;