城市体验官省市区处理

src/views/cityExperienceOfficer/Index.vue

@@ -16,11 +16,13 @@
                 </a-select>
               </a-form-item>
             </a-col>
-            <a-col :md="8" :sm="24" v-if="provinces.length>0">
-              <a-form-item label="省份" has-feedback>
-                <a-select v-model="queryParam.province_id" placeholder="请选择省份">
-                  <a-select-option v-for="item in provinces" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
-                </a-select>
+            <a-col :md="8" :sm="24" v-if="regions.length>0">
+              <a-form-item label="快递省市区" has-feedback>
+                <a-cascader
+                  :options="regions"
+                  placeholder="请选择快递省市区"
+                  @change="onAreaChange"
+                />
               </a-form-item>
             </a-col>
             <a-col :md="8" :sm="24">
@@ -185,6 +187,7 @@ export default {
       areas: [],
       status: [],
       provinces: [],
+      regions: [],
       count: {
         'all': 0, // 全部
         'init': 0, // 待检测
@@ -199,15 +202,19 @@ export default {
         mobile: undefined, // 收件人手机号
         experience_area_id: undefined, // 城市id
         status: undefined, // 状态：
-        province_id: undefined // 省
+        province_id: undefined, // 省
+        city_id: undefined, // 市
+        district_id: undefined // 区
       },
       loadData: (parameter) => {
-        this.getbeforeInfo()
         const requestParameters = Object.assign({}, parameter, this.queryParam)
         return getMiddlesExperience(requestParameters)
       }
     }
   },
+  created () {
+    this.getbeforeInfo()
+  },
   watch: {
     $route (to, from) {
       if (to.name === 'cityExperienceOfficer' && (
@@ -251,11 +258,16 @@ export default {
       getMiddlesExperienceBefore().then(res => {
         this.areas = res.areas
         this.count = res.count
-        this.provinces = res.provinces
+        this.regions = res.regions
         this.status = res.status
       }).catch(err => {
         console.log(err)
       })
+    },
+    onAreaChange (value) {
+      this.queryParam.province_id = value[0]
+      this.queryParam.city_id = value[1]
+      this.queryParam.district_id = value[2]
     }
   }
 }