xueshan/components/select-region/select-region.vue

<template>
  <view class="container">
    <view v-if="isLoading" class="loading">
      <u-loading mode="circle"></u-loading>
    </view>
    <view v-else class="field-body" @click="handleSelect()">
      <view class="field-value oneline-hide">{{ valueText ? valueText: placeholder }}</view>
    </view>
    <u-select v-model="show" mode="mutil-column-auto" :list="options" :default-value="defaultValue" @confirm="onConfirm"></u-select>
  </view>
</template>

<script>
  import Emitter from '@/uview-ui/libs/util/emitter'
  import { isEmpty } from '@/utils/util'
  import RegionModel from '@/common/model/Region'

  // 根据选中的value集获取索引集keys
  // 用于设置默认选中
  const findOptionsKey = (data, searchValue, deep = 1, keys = []) => {
    const index = data.findIndex(item => item.value === searchValue[deep - 1])
    if (index > -1) {
      keys.push(index)
      if (data[index].children) {
        findOptionsKey(data[index].children, searchValue, ++deep, keys)
      }
    }
    return keys
  }

  export default {
    name: 'SelectRegion',
    mixins: [Emitter],
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      // v-model 指定选中项
      value: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 未选中时的提示文字
      placeholder: {
        type: String,
        default: '请选择省/市/区'
      }
    },
    data() {
      return {
        // 正在加载
        isLoading: true,
        // 是否显示
        show: false,
        // 默认选中的值
        defaultValue: [],
        // 选中项内容(文本展示)
        valueText: '',
        // 级联选择器数据
        options: []
      }
    },
    watch: {
      // 监听v-model
      value(val) {
        // 设置默认选中的值
        this.valueText = val.map(item => item.label).join('/')
        this.setDefaultValue(val)
        // 将当前的值发送到 u-form-item 进行校验
        this.dispatch('u-form-item', 'on-form-change', val)
      },
    },
    created() {
      // 获取地区数据
      this.getTreeData()
    },

    methods: {

      // 打开选择器
      handleSelect() {
        this.show = true
      },

      // 获取地区数据
      getTreeData() {
        const app = this
        app.isLoading = true
        RegionModel.getTreeData()
          .then(regions => {
            // 格式化级联选择器数据
            this.options = this.getOptions(regions)
          })
          .finally(() => app.isLoading = false)
      },

      // 确认选择后的回调
      onConfirm(value) {
        // 绑定到v-model执行的值
        this.$emit('input', value)
        this.$emit('change', value)
      },

      /**
       * 设置默认选中的值
       * 该操作是为了每次打开选择器时聚焦到上次选择
       * @param {Object} value
       */
      setDefaultValue(value) {
        const values = value.map(item => item.value)
        const options = this.options
        this.defaultValue = findOptionsKey(options, values)
      },

      /**
       * 格式化级联选择器数据
       * @param {*} regions 地区数据
       */
      getOptions(regions) {
        const { getOptions, getChildren } = this
        const options = []
        for (const index in regions) {
          const item = regions[index]
          const children = getChildren(item)
          const optionItem = {
            value: item.id,
            label: item.name
          }
          if (children !== false) {
            optionItem.children = getOptions(children)
          }
          options.push(optionItem)
        }
        return options
      },

      // 获取子集地区
      getChildren(item) {
        if (item.city) {
          return item.city
        }
        if (item.region) {
          return item.region
        }
        return false
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
  }

  .loading {
    padding-left: 10rpx;
    // text-align: center;
  }
</style>