Sfoglia il codice sorgente

refactor(地址选择): 简化地区选择逻辑并添加名称解析功能

yz 1 mese fa
parent
commit
56cdd5bca9
2 ha cambiato i file con 64 aggiunte e 19 eliminazioni
  1. 60 6
      src/components/region-cascader/index.vue
  2. 4 13
      src/views/order/address/index.vue

+ 60 - 6
src/components/region-cascader/index.vue

@@ -58,8 +58,9 @@ export default {
   watch: {
     value: {
       handler(newVal) {
-        if (newVal && typeof newVal === 'string') {
-          this.selectedValues = []
+        if (typeof newVal === 'string' && newVal) {
+          // 如果传入的是regionName字符串(如:"广东省 深圳市 南山区"),需要解析
+          this.parseRegionName(newVal)
         } else if (Array.isArray(newVal)) {
           this.selectedValues = [...newVal]
         } else {
@@ -126,7 +127,6 @@ export default {
       const selectedNodes = this.$refs.cascader ? this.$refs.cascader.getCheckedNodes() : []
 
       let regionName = ''
-      let regionCode = ''
       
       if (values && values.length > 0) {
         // 获取选中的节点信息
@@ -134,7 +134,6 @@ export default {
         if (selectedNodes.length > 0) {
           const node = selectedNodes[0]
           regionName = node.pathLabels.join(' ')
-          regionCode = values[values.length - 1]
         }
       }
 
@@ -143,7 +142,6 @@ export default {
       this.$emit('change', {
         values,
         regionName,
-        regionCode
       })
     },
 
@@ -154,6 +152,62 @@ export default {
     handleExpandChange(activeValues) {
       this.$emit('expand-change', activeValues)
     }
-  }
+  },
+  
+  /**
+   * 解析regionName字符串,查找对应的代码路径
+   * @param {string} regionName - 省市区名称,用空格分割
+   */
+  async parseRegionName(regionName) {
+    if (!regionName) {
+      this.selectedValues = []
+      return
+    }
+    
+    const regions = regionName.split(' ').filter(item => item.trim())
+    if (regions.length === 0) {
+      this.selectedValues = []
+      return
+    }
+    
+    try {
+      const codes = []
+      
+      // 查找省级
+      if (regions[0]) {
+        const province = this.options.find(item => item.title === regions[0])
+        if (province) {
+          codes.push(province.value)
+          
+          // 查找市级
+          if (regions[1]) {
+            const cityRes = await getLazyTree(province.value)
+            if (cityRes.data.success) {
+              const city = cityRes.data.data.find(item => item.title === regions[1])
+              if (city) {
+                codes.push(city.value)
+                
+                // 查找区级
+                if (regions[2]) {
+                  const districtRes = await getLazyTree(city.value)
+                  if (districtRes.data.success) {
+                    const district = districtRes.data.data.find(item => item.title === regions[2])
+                    if (district) {
+                      codes.push(district.value)
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      
+      this.selectedValues = codes
+    } catch (error) {
+      console.error('解析regionName失败:', error)
+      this.selectedValues = []
+    }
+  },
 }
 </script>

+ 4 - 13
src/views/order/address/index.vue

@@ -399,12 +399,10 @@ export default {
      * @param {Object} data - 选择的地区数据
      */
     handleRegionChange(data) {
-      const { values, regionName, regionCode } = data
+      const { regionName } = data
       
-      // 直接设置表单字段值
+      // 只设置regionName,regionCode保持独立
       this.form.regionName = regionName
-      // this.form.regionCode = regionCode
-      this.regionCascaderValue = values
       
       // 手动触发表单验证
       this.$nextTick(() => {
@@ -426,18 +424,11 @@ export default {
           const res = await getDetail(this.form.id)
           this.form = res.data.data
           
-          // 如果有地区数据,需要解析并设置级联选择器的值
-          if (this.form.regionCode) {
-            // 这里可能需要根据regionCode反向解析出完整的省市区路径
-            // 暂时清空,让用户重新选择
-            this.regionCascaderValue = []
-          }
+          // regionName会通过组件的watch自动解析和回显
+          // 不需要额外处理regionCascaderValue
         } catch (error) {
           window.console.log(error)
         }
-      } else {
-        // 新增时清空地区选择
-        this.regionCascaderValue = []
       }
       done()
     },