hz_crm_web/src/components/searchDistPicker.vue

<template>
<!-- 可搜索的 distpicker(地区选择器) -->
    <div class="select-dist-picker">
        <!-- 省选择器 -->
        <el-select
            placeholder="请选择省"
            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="请选择市"
            filterable
            v-model="city"
            value-key="cityKey"
            :disabled="disabled"
            @change="handleSelectChange('city')"
        >
            <el-option
                v-for="city in citySource"
                :key="city.cityKey"
                :label="city.cityName"
                :value="city"
            />
        </el-select>
        <!-- 区选择器 -->
        <el-select v-if="showArea"
            placeholder="请选择区"
            filterable
            v-model="area"
            value-key="areaKey"
            :disabled="disabled"
            @change="handleSelectChange"
        >
            <el-option
                v-for="area in areaSource"
                :key="area.areaKey"
                :label="area.areaName"
                :value="area"
            />
        </el-select>
    </div>
</template>

<script>
import {province_sorce,city_sorce,area_sorce} from '@/utils/distpicker';
export default {
    props:{
        provinceInfo:{
            type:String,
            default:''
        },
        cityInfo:{
            type:String,
            default:''
        },
        disabled:{
            type:Boolean,
            default:false
        },
        showArea:{
            type:Boolean,
            default:false
        },
        areaInfo:{
            type:String,
            default:''
        }
    },
    data() {
        return {
            province:{
                provinceKey:'',
                provinceName:''
            },
            city:{
                cityKey:'',
                cityName:''
            },
            area:{
                areaKey:'',
                areaName:''
            }
        };
    },
    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}
                    }
                    if(this.city.cityKey && this.showArea){
                        const areaResult = Object.entries(area_sorce[this.city.cityKey]).find(([key,val])=>val===this.areaInfo)||['',this.areaInfo]
                        this.area={areaKey:areaResult[0],areaName:areaResult[1]}
                    }else{
                        this.area={areaKey:'',areaName:this.areaInfo}
                    }
                }else{
                    this.province={provinceKey:'',provinceName:''}
                    this.city={cityKey:'',cityName:''}
                    this.area={areaKey:'',areaName:''}
                }
            },
            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]||''
                        }
                    })
        },
        areaSource(){
            const areaMap = area_sorce[this.city.cityKey]||{}
            return Object.keys(areaMap).map(areaKey=>{
                        return {
                            areaKey:areaKey||'',
                            areaName:areaMap[areaKey]||''
                        }
                    })
        }
    },
    methods: {
        handleSelectChange(type){
            if(type==='province'){
                this.city = {cityKey:'',cityName:''}
                this.area = {areaKey:'',areaName:''}
            }
            if(type==='city'&&this.showArea){
                this.area = {areaKey:'',areaName:''}
            }
            this.$emit('selected',{
                province:{value:this.province.provinceName},
                city:{value:this.city.cityName},
                area:{value:this.area.areaName}
            })
        }
    },
};
</script>

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