Ant Design动态配送范围选择框

<a-modal
      v-model="addressVisiable"
      :footer="false"
      width="800px"
      :bodyStyle="{ height: '400px' }"
      :afterClose="afterClose"
    >
      <a-tabs
        v-model="activeKey"
        :animated="false"
        @change="tabChange(activeKey)"
      >
        <a-tab-pane
          v-for="pane in panes"
          :key="pane.key"
          :tab="pane.title"
          :disabled="pane.show"
        >
          <div>
            <a-spin :spinning="spanLoading" tip="loading..." />
            <span
              v-for="item in pane.ItemData"
              :key="item.code"
              style="display: inline-block; margin: 20px; cursor: pointer"
              @click="clickChoice(item)"
              >{{ item.name }}</span
            >
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>

// 获取省市区
async getProvince (params, index) {
  this.spanLoading = true
  try {
    const res = await getProvince({
      code: params
    })
    if (res.code === 200) {
      this.panes[index].ItemData = res.data
      this.spanLoading = false
    } else {
      throw res
    }
  } catch (err) {
    this.$message.error(err.desc)
  } finally {
    this.spanLoading = false
  }
},
// !获取京东四级街道
async getJdCounty (params) {
  this.spanLoading = true
  try {
    const res = await getJdCounty({
      code: params
    })
    if (res.code === 200) {
      this.panes[3].ItemData = res.data
    } else {
      throw res
    }
  } catch (err) {
    this.$message.error(err.desc)
  } finally {
    this.spanLoading = false
  }
},
// 打开配送范围弹框
openAddressRange () {
  this.getProvince('0', 0)
  this.addressVisiable = true
  this.activeKey = '1'
},
// 选择地区
async clickChoice (item) {
  if (this.activeKey === '4') {
    this.choiceAddressArray.push(item.name)
    let str = ''
    this.choiceAddressStr = ''
    for (let i = 0; i < this.choiceAddressArray.length; i++) {
      str += this.choiceAddressArray[i] + ' '
    }
    this.choiceAddressStr = str
    this.choiceAddressArray = []
    this.reqGetJdStock()
    this.addressVisiable = false
  } else {
    let index = parseInt(this.activeKey)
    if (this.activeKey === '3') {
      this.getJdCounty(item.code)
      this.choiceAreaCode = item.code
    } else {
      this.getProvince(item.code, index)
    }
    this.panes[parseInt(this.activeKey) - 1].title = item.name
    this.panes[parseInt(this.activeKey)].show = false
    this.activeKey = (parseInt(this.activeKey) + 1).toString()
    this.choiceAddressArray.push(item.name)
  }
},
// 配送范围Tab点击事件
tabChange (activeKey) {
  let index = parseInt(activeKey)
  if (this.choiceAddressArray.length >= index) {
    for (let i = index; i <= this.choiceAddressArray.length; i++) {
      this.panes[i].show = true
    }
    this.choiceAddressArray.length = index - 1
  }
},
// 配送范围弹框完全关闭后的回调
afterClose () {
  this.panes = [
    {
      title: '选择省/自治区', key: '1', show: false, ItemData: []
    },
    {
      title: '选择城市', key: '2', show: true, ItemData: []
    },
    {
      title: '选择市区', key: '3', show: true, ItemData: []
    },
    {
      title: '选择街道', key: '4', show: true, ItemData: []
    }
  ]
},