xiangyuan-gov-app/src/components/dynamic/wrappers/PickerCityField.vue

<template>
  <CascaderField
    :modelValue="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
    textKey="name"
    valueKey="code"
    childrenKey="children"
    placeholder="请选择省市区" 
    :data="(ChinaCityData.data.value as CascaderItem[]) || []"
    v-bind="$attrs"
  />
</template>

<script setup lang="ts">
import { useDataLoader } from '@/components/composeabe/DataLoader';
import type { CascaderItem } from '@/components/form/Cascader.vue';
import CascaderField from '@/components/form/CascaderField.vue';
import type { PropType } from 'vue';

const props = defineProps({
  modelValue: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  cityDataUrl: {
    type: String,
    default: 'https://mn.wenlvti.net/app_static/xiangan/city-data.json',
  }
})
defineEmits(['update:modelValue'])

const ChinaCityData = useDataLoader(() => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: props.cityDataUrl,
      method: 'GET',
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}, {
  immediate: true,
});
</script>