platform-customsdeclaration-ssr/components/base/area/area.vue

<template>
  <div class="clearfix">
    <div class="pull-left name"><span v-if="IslookOrUpdate !== 'look'">*</span>所在地区</div>
    <div class="pull-left select" v-if="IslookOrUpdate !== 'look'">
      <el-select v-model="pro" placeholder="省级行政区" @change="ProselectChange">
        <el-option v-for="proItem in cityData.province" :label="proItem" :value="proItem" v-bind:key="proItem"></el-option>
      </el-select>
    </div>
    <div class="pull-left select" v-else>
      <el-input v-model="pro" :disabled="true">
      </el-input>
    </div>
    <div class="pull-left select"  v-if="IslookOrUpdate !== 'look'">
      <el-select v-model="city" placeholder="市"  @change="CityselectChange">
        <el-option v-for="proItem in cityData.city" :label="proItem" :value="proItem" v-bind:key="proItem"></el-option>
      </el-select>
    </div>
    <div class="pull-left select" v-else>
      <el-input v-model="city" :disabled="true">
      </el-input>
    </div>
    <div class="pull-left select"  v-if="IslookOrUpdate !== 'look'">
      <el-select v-model="area" placeholder="区" @change="setup">
        <el-option v-for="proItem in cityData.district" :label="proItem" :value="proItem" v-bind:key="proItem"></el-option>
      </el-select>
    </div>
    <div class="pull-left select" v-else>
      <el-input v-model="area" :disabled="true">
      </el-input>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Cityarea',
    props: {
      data: {
        type: String,
        default: ''
      },
      IslookOrUpdate: {
        type: String,
        default: 'update'
      }
    },
    data() {
      return {
        area: '',
        pro: '',
        city: '',
        cityData: {
          province: [],
          city: [],
          district: []
        }
      }
    },
    created() {

    },
    mounted() {
      this.$nextTick(()=>{
        this.$http.get('/data/city.json').then(response => {
          this.temCityData = response.data
          for (let province in response.data) {
            this.cityData.province.push(province)
          }
          this.setValshow()
        })
      })
    },
    methods: {
      ProselectChange(am) {
        this.proText = am
        this.city = ''
        this.area = ''
        this.cityData.city = []
        for (let item in this.temCityData[am]) {
          this.cityData.city.push(item)
        }
      },
      CityselectChange(am) {
        this.area = ''
        this.cityData.district = this.temCityData[this.proText][am]
      },
      setValshow() {
        this.pro = this.data ? this.data.split('，')[0] : ''
        if (this.data && this.pro) {
          this.ProselectChange(this.pro)
          this.city = this.data.split('，')[1]
        } else {
          this.city = ''
        }
        if (this.data && this.city) {
          this.CityselectChange(this.city)
          this.area = this.data.split('，')[2]
        } else {
          this.area = ''
        }
      },
      setup() {
        let info = this.pro + '，' + this.city + '，' + this.area
        this.$emit('setup', info)
      }
    }
  }
</script>

<style>

</style>