oms/src/benyun/components/byArea/byArea.vue

<template>
  <div class="by-area">
    <el-row>
      <el-col :span="6">
        <div class="area-box first">
          <div class="left-label">省：</div>
          <div class="right-area">
            <el-select v-model="provinceCode" clearable :disabled="attrs.disabled" class="areaSelect" :class="{'error':provinceError}" @change="onProvince" size="small" placeholder="请选择省">
              <el-option
                v-for="item in optionsProvince"
                :key="item.id"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="6" v-if="!attrs.show || attrs.show != 'province'">
        <div class="area-box">
          <div class="left-label">市：</div>
          <div class="right-area">
            <el-select v-model="cityCode" clearable :disabled="attrs.disabled" class="areaSelect" :class="{'error':cityError}" @change="onCity" size="small" placeholder="请选择市">
              <el-option
                v-for="item in optionsCity"
                :key="item.id"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="6" v-if="!attrs.show || (attrs.show != 'province' && attrs.show != 'city')">
        <div class="area-box last">
          <div class="left-label">区/县：</div>
          <div class="right-area">
            <el-select v-model="countyCode" clearable :disabled="attrs.disabled" class="areaSelect" :class="{'error':countyError}" @change="onCounty" size="small" placeholder="请选择区/县">
              <el-option
                v-for="item in optionsCounty"
                :key="item.id"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="6" v-if="!attrs.show || (attrs.show != 'province' && attrs.show != 'city' && attrs.show != 'county')" >
        <div class="area-box last">
          <div class="left-label">街道：</div>
          <div class="right-area">
            <el-select v-model="townCode" clearable :disabled="attrs.disabled" class="areaSelect" @change="onTown" size="small" placeholder="请选择街道">
              <el-option
                v-for="item in optionsTown"
                :key="item.id"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
/*
  config:{
    attr:{
      province:'' //省
      provinceCode:'' //省编码
      city:''   //市
      cityCode:''  //市编码
      county:''  //县/区
      countyCode:''   //县/区编码
      town:''  //街道
      townCode:''  //街道编码
      show:'province/city/county'   //显示的层级
    }
  }
*/
import { Component, Prop, Vue, Mixins,Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class ByArea extends VueViews {
  provinceCode='';
  cityCode='';
  countyCode='';
  townCode='';
  province='';
  city='';
  county='';
  town='';
  area='';
  areaCode='';
  optionsProvince:Array<any>=[];
  optionsCity:Array<any>=[];
  optionsCounty:Array<any>=[];
  optionsTown:Array<any>=[];
  provinceError = false;
  cityError = false;
  countyError = false;
  
  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }
  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
    if(this.parentValue){
      this.setAllValue(this.parentValue);
    }
  }
  mounted(){
    this.getProvince();
  }
  setAllValue(data:any){
    if(this.attrs.province){
      this.province=data[this.attrs.province];
    }
    if(this.attrs.provinceCode){
      this.provinceCode=data[this.attrs.provinceCode];
    }
    if(this.attrs.city){
      this.city=data[this.attrs.city];
    }
    if(this.attrs.cityCode){
      this.cityCode=data[this.attrs.cityCode];
      if(this.provinceCode){
        this.getCity(this.provinceCode);
      }
    }
    if(this.attrs.county){
      this.county=data[this.attrs.county];
    }
    if(this.attrs.countyCode){
      this.countyCode=data[this.attrs.countyCode];
      if(this.cityCode){
        this.getCounty(this.cityCode);
      }
    }
    if(this.attrs.town){
      this.town=data[this.attrs.town];
    }
    if(this.attrs.townCode){
      this.townCode=data[this.attrs.townCode];
      if(this.countyCode){
        this.getTown(this.countyCode);
      }
    }
    if(this.attrs.areaCode){
      this.areaCode=data[this.attrs.areaCode];
    }
    if(this.attrs.area){
      this.area=data[this.attrs.area];
    }
  }
  setValue(v?:any){
    this.setAllValue(this.parentValue);
  }
  clearValue(){
    this.provinceCode='';
    this.cityCode='';
    this.countyCode='';
    this.townCode='';
    this.province='';
    this.city='';
    this.county='';
    this.town='';
    this.area='';
    this.areaCode='';
    this.optionsCity=[];
    this.optionsCounty>=[];
    this.optionsTown=[];
  }
  onProvince(v:any){
    this.province = '';
    this.area = '';
    for(const item of this.optionsProvince){
      if(item.code == v){
        this.province = item.name;
        this.area = item.fullName;
      }
    }
    this.city='';
    this.cityCode = '';
    this.county='';
    this.countyCode = '';
    this.optionsCity = [];
    this.optionsCounty = [];
    this.townCode = '';
    this.town = '';
    this.optionsTown=[];
    this.areaCode = v;
    this.provinceError = false;
    if(v){
      this.getCity(v);
    }
    this.onChange();
  }
  onCity(v:any){
    this.city = '';
    this.area = '';
    for(const item of this.optionsCity){
      if(item.code == v){
        this.city = item.name;
        this.area = item.fullName;
      }
    }
    this.county='';
    this.countyCode = '';
    this.optionsCounty = [];
    this.townCode = '';
    this.town = '';
    this.optionsTown=[];
    this.areaCode = v;
    this.cityError = false;
    if(v){
      this.getCounty(v);
    }
    this.onChange();
  }
  onCounty(v:any){
    this.county = '';
    this.area = '';
    for(const item of this.optionsCounty){
      if(item.code == v){
        this.county = item.name;
        this.area = item.fullName;
      }
    }
    this.townCode = '';
    this.town = '';
    this.optionsTown=[];
    
    this.areaCode = v;
    this.countyError = false;
    if(v){
      this.getTown(v);
    }
    this.onChange();
  }
  onTown(v:any){
    this.town = '';
    this.area = '';
    for(const item of this.optionsTown){
      if(item.code == v){
        this.town = item.name;
        this.area = item.fullName;
      }
    }
    this.areaCode = v;
    this.onChange();
  }
  getValue(){
    let obj:any={};
    if(this.attrs.province){
      obj[this.attrs.province]=this.province;
    }
    if(this.attrs.provinceCode){
      obj[this.attrs.provinceCode]=this.provinceCode;
    }
    if(this.attrs.city){
      obj[this.attrs.city]=this.city;
    }
    if(this.attrs.cityCode){
      obj[this.attrs.cityCode]=this.cityCode
    }
    if(this.attrs.county){
      obj[this.attrs.county]=this.county;
    }
    if(this.attrs.countyCode){
      obj[this.attrs.countyCode]=this.countyCode
    }
    if(this.attrs.town){
      obj[this.attrs.town]=this.town;
    }
    if(this.attrs.townCode){
      obj[this.attrs.townCode]=this.townCode
    }
    if(this.attrs.areaCode){
      obj[this.attrs.areaCode]=this.areaCode;
    }
    if(this.attrs.area){
      obj[this.attrs.area]=this.area;
    }
    return obj;
  }
  onChange(){
    this.$emit('onChange',this.getValue())
  }
  //获取省数据
  getProvince(){
    this.request({
      params:{
        parentCode:'86'
      },
      success:(data:any) => {
        this.optionsProvince = data;
      }
    })
  }
  //获取市
  getCity(v:any){
    this.request({
      params:{
        parentCode:v
      },
      success:(data:any) => {
        this.optionsCity = data;
      }
    })
  }
  //获取县/区
  getCounty(v:any){
    this.request({
      params:{
        parentCode:v
      },
      success:(data:any) => {
        this.optionsCounty = data;
      }
    })
  }
  //获取街道
  getTown(v:any){
    this.request({
      params:{
        parentCode:v
      },
      success:(data:any) => {
        this.optionsTown = data;
      }
    })
  }
  request(data:any){
    let parame:any = {
      url:'/omsOrder/omsArea/getByParentCode',
      method: 'GET',
    };
    parame.params = data.params;
    parame.success = (res:any) => {
      data.success(res.data)
    }
    parame.fail = (err:any) => {
      
    }
    this.requestHandle(parame);
  }
}
</script>

<style lang="scss" scoped>
.by-area{
  width: 100%;
  .area-box{
    padding: 0 4px;
    display: flex;
    align-items: center;
    .left-label{
      width: 80px;
      text-align: right;
      // flex-shrink: 0;
      // .require{
      //   color: #F00;
      //   padding: 0 2px;
      // }
    }
    .right-area{
      width: 100%;
    }
  }
  .first{
    padding-left: 0;
  }
  .last{
    padding-right: 0;
  }
}
</style>