新建项目

src/components/AreaPicker/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="AreaPicker">
+    <el-select v-model="form.province"
+      @change="changeProvince(form.province)"
+      filterable
+      placeholder="请选择省份"
+      :loading="loading == 'province'">
+      <el-option
+        v-for="item in province_list"
+        :key="item.sid"
+        :label="item.name"
+        :value="item.sid"
+        >
+      </el-option>
+    </el-select>
+    <el-select v-model="form.city"
+      @change='changeCity(form.city)'
+      filterable
+      placeholder="请选择市"
+      :loading="loading == 'city'"
+      style="margin-left: 8px;">
+      <el-option
+        v-for="item in city_list"
+        :key="item.sid"
+        :label="item.name"
+        :value="item.sid">
+      </el-option>
+    </el-select>
+    <el-select v-model="form.county"
+      @change='changeCounty(form.county)'
+      filterable
+      :loading="loading == 'county'"
+      placeholder="请选择县/区"
+      style="margin-left: 8px;">
+      <el-option
+        v-for="item in county_list"
+        :key="item.sid"
+        :label="item.name"
+        :value="item.sid">
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+  import {
+  	getProvince,
+  	getCity,
+  	getCounty
+  } from '@/api/Common/areaPicker.js'
+  export default {
+    props:{
+      province:{
+        type: String,
+        default: ''
+      },
+      city:{
+        type: String,
+        default: ''
+      },
+      county:{
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        province_list: [],
+        city_list: [],
+        county_list: [],
+        form:{
+          province: this.province,
+          city: this.city,
+          county: this.county
+        },
+        loading: false
+      }
+    },
+    watch:{
+      province:function(newVal,oldVal){
+        this.form.province = newVal
+      },
+      city:function(newVal,oldVal){
+        this.form.city = newVal
+      },
+      county:function(newVal,oldVal){
+        this.form.county = newVal
+      }
+    },
+    async mounted() {
+      let provincelist =  await getProvince()
+      this.province_list = provincelist.data
+      if(this.province){
+        let citylist =  await getCity({ sid: this.province })
+        this.city_list = citylist.data
+      }
+      if(this.city){
+        let countylist =  await getCounty({ sid: this.city })
+        this.county_list = countylist.data
+      }
+      this.loading = false
+    },
+    methods: {
+      changeProvince(val){
+        console.log(val)
+        getCity({ sid: val }).then(res => {
+          this.city_list = res.data
+          this.loading = false
+        })
+        let obj = {};
+        obj = this.province_list.find((item)=>{
+            return item.sid === val;//筛选出匹配数据
+        });
+        console.log(obj)
+        this.form.city = ''
+        this.form.county = ''
+        this.city_list = []
+        this.county_list = []
+        this.loading = 'city'
+        this.$emit('areaPicker', obj.sidPath)
+      },
+      changeCity(val){
+        let obj = {};
+        obj = this.city_list.find((item)=>{
+            return item.sid === val;//筛选出匹配数据
+        });
+        console.log(obj)
+        this.form.county = ''
+        this.county_list = []
+        this.loading = 'county'
+        this.$emit('areaPicker', obj.sidPath)
+        getCounty({ sid: val }).then(res => {
+          this.county_list = res.data
+          this.loading = false
+        })
+      },
+      changeCounty(val){
+        let obj = {};
+        obj = this.county_list.find((item)=>{
+            return item.sid === val;//筛选出匹配数据
+        });
+        this.$emit('areaPicker', obj.sidPath)
+      }
+    }
+  }
+</script>
+
+
+<style>
+
+</style>