eta_front/src/components/searchDistPicker.vue

<template>
<!-- 可搜索的 distpicker(地区选择器) -->
    <div class="select-dist-picker">
        <!-- 省选择器 -->
        <el-select
            :placeholder="$t('SystemManage.DepartManage.user_add_placeholder10')"
            filterable
            v-model="province"
            value-key="provinceKey"
            :disabled="disabled"
            @change="handleSelectChange('province')"
        >
            <el-option
                v-for="province in provinceSource"
                :key="province.provinceKey"
                :label="province.provinceName"
                :value="province"
            />
        </el-select>
        <!-- 市选择器 -->
        <el-select
            :placeholder="$t('SystemManage.DepartManage.user_add_placeholder11')"
            filterable
            v-model="city"
            value-key="cityKey"
            :disabled="disabled"
            @change="handleSelectChange"
        >
            <el-option
                v-for="city in citySource"
                :key="city.cityKey"
                :label="city.cityName"
                :value="city"
            />
        </el-select>
    </div>
</template>

<script>
import {province_sorce,city_sorce} from '@/utils/distpicker';
export default {
    props:{
        provinceInfo:{
            type:String,
            default:''
        },
        cityInfo:{
            type:String,
            default:''
        },
        disabled:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            province:{
                provinceKey:'',
                provinceName:''
            },
            city:{
                cityKey:'',
                cityName:''
            },
        };
    },
    watch:{
        provinceInfo:{
            handler(newval){
                if(newval&&newval.length){
                    if(newval===this.province.provinceName) return
                    const provinceResult= Object.entries(province_sorce).find(([key,val])=>val===newval)||['',newval]
                    this.province = {provinceKey:provinceResult[0],provinceName:provinceResult[1]}
                    if(this.province.provinceKey){
                        const cityResult = Object.entries(city_sorce[this.province.provinceKey]).find(([key,val])=>val===this.cityInfo)||['',this.cityInfo]
                        this.city = {cityKey:cityResult[0],cityName:cityResult[1]}
                    }else{
                        this.city = {cityKey:'',cityName:this.cityInfo}
                    }
                }else{
                    this.province={provinceKey:'',provinceName:''}
                    this.city={cityKey:'',cityName:''}
                }
            },
            immediate:true
        },
    },
    computed:{
        provinceSource(){
            return Object.keys(province_sorce).map(key=>{
                return {
                    provinceKey:key||'',
                    provinceName:province_sorce[key]||''
                }
            })

        },
        citySource(){
            const cityMap = city_sorce[this.province.provinceKey]||{}
            return Object.keys(cityMap).map(cityKey=>{
                        return {
                            cityKey:cityKey||'',
                            cityName:cityMap[cityKey]||''
                        }
                    })
        }
    },
    methods: {
        handleSelectChange(type){
            if(type==='province'){
                this.city = {cityKey:'',cityName:''}
            }
            this.$emit('selected',{province:{value:this.province.provinceName},
                city:{
                    value:this.city.cityName
                }})
        }
    },
};
</script>

<style scoped lang="scss">
.select-dist-picker{
    display: flex;
    gap: 10px;
}
</style>