dvcp_v2_wxcp_app/components/AiAreaPicker.vue

<template>
  <section class="AiAreaPicker">
    <div @tap="handleJump">
      <slot v-if="$slots.default"/>
      <div v-else-if="isForm">
        <ai-more v-model="areaName"/>
      </div>
      <div v-else class="areaBtn">
        <image :src="locationIcon" class="location"/>
        <div v-text="areaName"/>
      </div>
    </div>
  </section>
</template>

<script>
import {mapState} from 'vuex'
import AiMore from "./AiMore";
import qs from "query-string"

export default {
  name: 'AiAreaPicker',
  components: {AiMore},
  model: {
    prop: "value",
    event: "select"
  },
  props: {
    /**
     * 用于标定最大地区范围地区编码
     */
    areaId: String,
    name: {default: ''},
    value: {default: ''},
    all: Boolean,
    icon: {default: "location.svg"},
    isForm: Boolean,
    valueLevel: {default: 5},
    fullName: {default: ''},
    disabled: Boolean,
    selectRoot: Boolean,
    multiple: Boolean
  },
  computed: {
    ...mapState(['user']),
    dataRange() {
      let rules = [10, 8, 6, 3, 0],
          level = 0
      if (this.all || this.disabled) return (level = 0)
      rules.some((e, i) => {
        let reg = new RegExp(`0{${e}}`, 'g')
        if (reg.test(this.root)) {
          return (level = i)
        }
      })
      return level
    },
    root() {
      return this.areaId || this.rootArea
    },
    locationIcon() {
      return this.$cdn + this.icon
    },
    hasValue() {
      return this.multiple ? this.value?.length > 0 : !!this.value
    }
  },
  data() {
    return {
      fullArea: [],
      areaName: "",
      rootArea: ""
    }
  },
  watch: {
    root(v) {
      v && (this.getFullArea(v))
    },
    value: {
      immediate: true,
      handler(v) {
        v && this.getAreaName(this.value)
      }
    },
    fullArea(v) {
      v && this.value && !this.multiple && this.$emit('update:fullName', v?.map(e => e.name)?.join("") || "")
    },
    areaName(v) {
      v && this.$emit('update:name', v)
    }
  },
  created() {
    this.getRootArea()
  },
  methods: {
    getRootArea() {
      if (uni.getStorageSync("rootArea")) {
        this.rootArea = uni.getStorageSync("rootArea")
      } else this.$http.post("/app/appdvcpconfig/getCorpArea", null, {}).then(res => {
        if (res?.data) {
          this.rootArea = res.data
          uni.setStorageSync("rootArea", res.data)
        }
      })
    },
    getInfo(areaId) {
      return areaId ? this.$http.post('/admin/area/getAllParentAreaId', null, {
        withoutToken: true,
        params: {areaId},
      }).then(res => {
        if (res?.data) {
          return res.data.reverse()
        }
      }) : Promise.reject()
    },
    getFullArea(areaId) {
      const current = this.fullArea.slice(-1)?.[0]?.id
      return current && current == areaId ? Promise.resolve(this.fullArea) : this.getInfo(areaId).then(meta => {
        if (meta.length > 1) {
          this.fullArea = meta.slice(this.dataRange)
        } else {
          this.fullArea = meta
        }
        return this.fullArea
      })
    },
    handleJump() {
      if (!this.disabled) {
        uni.$once('selectArea', data => {
          if (data?.id) {
            this.$emit("select", data.id)
            this.areaName = data.name
            this.fullArea = data.fullArea
            this.$forceUpdate()
          } else if (data.length > -1) {
            this.$emit("select", data)
            this.areaName = data.length == 0 ? '' : `已选择${data.length}个`
            this.$forceUpdate()
          }
        })
        let {value, all, valueLevel, selectRoot, areaId = this.root} = this.$props,
            action = "/components/pages/selectArea"
        if (this.multiple) {
          action = "/components/pages/multiplyArea"
        }
        let url = qs.stringifyUrl({
          url: action, query: {...this.$attrs, value, all, valueLevel, selectRoot, areaId}
        })
        uni.navigateTo({url})
      }
    },
    getAreaName(area) {
      if (this.multiple) {
        this.areaName = `已选择${[area].flat().filter(Boolean)?.length}个`.replace('已选择0个', '')
      } else {
        this.getFullArea(area).then(list => {
          let arr = JSON.parse(JSON.stringify(list))
          this.areaName = arr?.reverse()?.[0]?.name || ""
        }).catch(() => this.areaName = '')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.AiAreaPicker {

  .areaBtn {
    display: flex;
    align-items: center;
  }

  .location {
    width: 28px;
    height: 80px;
    margin-right: 12px;
  }
}
</style>