MTP2.0_NEWMANAGE_WEB/src/packages/pc/components/modules/region/index.vue

<template>
    <div class="app-region">
        <el-select v-model="countryId">
            <el-option :label="item.divisionname" :value="item.autoid" v-for="(item, index) in countryList"
                :key="index" />
        </el-select>
        <el-select v-model="provinceId">
            <el-option :label="item.divisionname" :value="item.autoid" v-for="(item, index) in provinceList"
                :key="index" />
        </el-select>
        <el-select v-model="cityId">
            <el-option :label="item.divisionname" :value="item.autoid" v-for="(item, index) in cityList" :key="index" />
        </el-select>
        <el-select v-model="districtId">
            <el-option :label="item.divisionname" :value="item.autoid" v-for="(item, index) in districtList"
                :key="index" />
        </el-select>
    </div>
</template>

<script lang="ts" setup>
import { computed, watch } from 'vue'
import { useRequest } from '@/hooks/request'
import { getProvince } from '@/services/api/common'

const props = defineProps({
    country: Number,
    province: Number,
    city: Number,
    district: Number
})

const emit = defineEmits(['update:country', 'update:province', 'update:city', 'update:district'])

const countryId = computed({
    get: () => props.country,
    set: (val) => emit('update:country', val)
})

const provinceId = computed({
    get: () => props.province,
    set: (val) => emit('update:province', val)
})

const cityId = computed({
    get: () => props.city,
    set: (val) => emit('update:city', val)
})

const districtId = computed({
    get: () => props.district,
    set: (val) => emit('update:district', val)
})

const { dataList: countryList } = useRequest(getProvince, {
    defaultParams: {
        divisionLevel: 'country'
    },
    onSuccess: () => {
        if (!countryList.value.some((e) => e.autoid === countryId.value)) {
            countryId.value = undefined
            provinceId.value = undefined
            cityId.value = undefined
            districtId.value = undefined
        }
    }
})

const { dataList: provinceList, run: getProvinceList } = useRequest(getProvince, {
    manual: true,
    onSuccess: () => {
        if (!provinceList.value.some((e) => e.autoid === provinceId.value)) {
            provinceId.value = undefined
            cityId.value = undefined
            districtId.value = undefined
        }
    }
})

const { dataList: cityList, run: getCityList } = useRequest(getProvince, {
    manual: true,
    onSuccess: () => {
        if (!cityList.value.some((e) => e.autoid === cityId.value)) {
            cityId.value = undefined
            districtId.value = undefined
        }
    }
})

const { dataList: districtList, run: getDistrictList } = useRequest(getProvince, {
    manual: true,
    onSuccess: () => {
        if (!districtList.value.some((e) => e.autoid === districtId.value)) {
            districtId.value = undefined
        }
    }
})

watch(countryId, (val) => {
    provinceList.value = []
    if (val) {
        getProvinceList({ autoId: val.toString() })
    }
})

watch(provinceId, (val) => {
    cityList.value = []
    if (val) {
        getCityList({ autoId: val.toString() })
    }
})

watch(cityId, (val) => {
    districtList.value = []
    if (val) {
        getDistrictList({ autoId: val.toString() })
    }
})
</script>