OfficeApp/components/districtSelector/districtSelectorTow.vue

<template>
  <view class="component">
    <view class="title">地区信息</view>
    <u--form labelPosition="left" :model="formData" :rules="rules" ref="districtForm">
      <u-form-item v-if="datas && datas.street" label="村社" :required="!readonly" prop="village" @click="changeCity()" borderBottom>
        <u--input :value="formDataText.village" type="text" disabled disabledColor="#fff" placeholder="请选择村"></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item label="小队" :required="!readonly" prop="brigade" @click="changeCity('brigade')" borderBottom>
        <u--input :value="formDataText.brigade" disabled disabledColor="#fff" placeholder="请选择小队"></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
    </u--form>
    <u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
      @cancel="showProvince = false" @close="showProvince = false"></u-picker>
  </view>
</template>

<script>
  import { commonProvince, commonCity, commonArea, commonStreet, commonVillage, commonBrigade } from "@/api/oaPbulic.js"
  import { Toast } from "../../libs/uniApi"
  export default {
    name:"districtSelector",
    props:{
      readonly: {
        type: Boolean,
        default: false
      },
      datas:{
        type: Object,
        default: null
      }
    },
    data() {
      return {
        showProvince: false,
        formData: {
          village: '',
          brigade: '',
        },
        formDataText: {
          village: '',
          brigade: '',
        },
        rules:{
          village: {
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          brigade: {
            validator: (rule, value, callback )=>{
              value?callback():callback('不能为空')
            },
            trigger: ['change', 'blur']
          },
        },
        villageList: [],
        brigadeList: [],
        changeType: '', //当前选择的城市类型
      };
    },
    created() {
      if(!this.$props.readonly) {
        this.initProvinceAndCity();
      }else{
        this.rules = {};
      }
    },
    methods:{
      async validate(){
        return await this.$refs.districtForm.validate();
      },
      // 初始化
      async initProvinceAndCity() {
        if(this.$store.state.app.userInfo.village)this.loadBrigade(this.$store.state.app.userInfo.village);
        else if(this.$store.state.app.userInfo?.street)this.loadVillage(this.$store.state.app.userInfo.street);
      },
      // 选择城市
      changeCity(type) {
        if(this.$props.readonly)return ;
        if (type&&this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
        this.changeType = type;
        this.showProvince = true;
      },
      // 选择列表
      changeList() {
        return this[this.changeType + 'List'];
      },
      // 选中城市
      confirm(e) {
        let flag = false;//清空所选标记
        if(this.formData[this.changeType] != e.value[0][this.changeType + '_code'])flag = true;
        if (this.changeType == 'brigade') {
          this.formData.brigade = e.value[0].id;
          this.formDataText.brigade = e.value[0].brigade_name;
          this.showProvince = false;
          return ;
        }
        this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
        this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
        // 清空之前所选信息
        if(flag) switch (this.changeType) {
          case 'province':
            this.formData.city = '';
            this.formDataText.city = ''
          case 'city':
            this.formData.area = '';
            this.formDataText.area = ''
          case 'area':
            this.formData.street = '';
            this.formDataText.street = ''
          case 'street':
            this.formData.village = '';
            this.formDataText.village = ''
          case 'village':
            this.formData.brigade = '';
            this.formDataText.brigade = ''
        }
        this.showProvince = false;
      },
      loadVillage(code) {
        commonVillage({
          village: code
        }).then(res => {
          this.villageList = res.data;
        })
      },
      loadBrigade(code) {
        commonBrigade({
          brigade: code
        }).then(res => {
          this.brigadeList = res.data;
        })
      },
    }
  }
</script>

<style lang="scss">
.component{
  .title {
    font-weight: 500;
    font-size: 34rpx;
  
    &::before {
      width: 8rpx;
      height: 26rpx;
      border-radius: 4rpx;
      background-color: #3175f9;
      content: "";
      display: inline-block;
      margin-right: 8rpx;
    }
  }
}
</style>