feat：线下销售单-支持选择省市区街道

src/views/mallManagement/order/offline_order_list/index.vue

@@ -74,16 +74,44 @@
               <el-form-item label="客户地址" prop="province" :required="true">
                 <el-row>
                   <el-col :span="5" style="margin-right: 12px;">
-                    <el-input type="text" v-model="formData.province" disabled placeholder="请选择省"></el-input>
+                    <el-select v-model="formData.provinceId" placeholder="请选择省" style="width: 100%;" @change="changeProvince">
+                      <el-option
+                        v-for="item in provinceList.map(v => ({ value: v.id, label: v.name }))"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
                   </el-col>
                   <el-col :span="5" style="margin-right: 12px;">
-                    <el-input type="text" v-model="formData.city" disabled placeholder="请选择市"></el-input>
+                    <el-select v-model="formData.cityId" placeholder="请选择市" style="width: 100%;" @change="changeCity">
+                      <el-option
+                        v-for="item in cityList.map(v => ({ value: v.id, label: v.name }))"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
                   </el-col>
                   <el-col :span="5" style="margin-right: 12px;">
-                    <el-input type="text" v-model="formData.area" disabled placeholder="请选择区"></el-input>
+                    <el-select v-model="formData.areaId" placeholder="请选择区" style="width: 100%;" @change="changeArea">
+                      <el-option
+                        v-for="item in areaList.map(v => ({ value: v.id, label: v.name }))"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
                   </el-col>
                   <el-col :span="8">
-                    <el-input type="text" v-model="formData.street" disabled placeholder="请选择街道"></el-input>
+                    <el-select v-model="formData.streetId" placeholder="请选择街道" style="width: 100%;" @change="changeStreet">
+                      <el-option
+                        v-for="item in streetList.map(v => ({ value: v.id, label: v.name }))"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
                   </el-col>
                 </el-row>
               </el-form-item>
@@ -798,6 +826,73 @@ export default {
       })
     },
 
+    delDataK(num) {
+      if (num <= 1) {
+        // 删除市
+        this.formData.cityId = ''
+        this.formData.city = ''
+        // 删除市选项
+        this.cityList = []
+      }
+      if (num <= 2) {
+        // 删除区
+        this.formData.areaId = ''
+        this.formData.area = ''
+        // 删除区选项
+        this.areaList = []
+      }
+      if (num <= 3) {
+        // 删除街道
+        this.formData.streetId = ''
+        this.formData.street = ''
+        // 删除街道选项
+        this.streetList = []
+      }
+      // 删除gps地址
+      this.formData.gpsAddress = ''
+    },
+
+    // 更改省
+    changeProvince(val) {
+      // 获取省名称
+      this.formData.province = this.provinceList.find(item => item.id === val)?.name || ''
+      // 清除市区街道以及详细地址数据
+      this.delDataK(1)
+      lbsAmapRegion({ pid: val }).then(res => {
+        this.cityList = res.data
+      })
+    },
+
+    // 更改市
+    changeCity(val) {
+      // 获取市名称
+      this.formData.city = this.cityList.find(item => item.id === val).name
+      // 清除区街道以及详细地址数据
+      this.delDataK(2)
+      lbsAmapRegion({ pid: val }).then(res => {
+        this.areaList = res.data
+      })
+    },
+
+    // 更改区
+    changeArea(val) {
+      // 获取区名称
+      this.formData.area = this.areaList.find(item => item.id === val).name
+      // 清除街道以及详细地址数据
+      this.delDataK(3)
+      lbsAmapRegion({ pid: val }).then(res => {
+        this.streetList = res.data
+      })
+    },
+
+    // 更改街道
+    changeStreet(val) {
+      // 获取街道名称
+      this.formData.street = this.streetList.find(item => item.id === val).name
+      // 清除详细地址数据
+      this.delDataK(4)
+    },
+
     selectAddress(data){
       console.log(data);
       this.formData.lng = data.center[0]