|
@@ -0,0 +1,173 @@
|
|
|
+<script setup>
|
|
|
+//可搜索的 distpicker(地区选择器) 代替原先的v-distpicker
|
|
|
+import { ref, reactive, computed, watch } from 'vue'
|
|
|
+import {province_sorce,city_sorce,area_sorce} from '@/utils/distpicker';
|
|
|
+const props = defineProps({
|
|
|
+ provinceInfo: { //省数据回显
|
|
|
+ type:String,
|
|
|
+ default:''
|
|
|
+ },
|
|
|
+ cityInfo:{ //市数据回显
|
|
|
+ type:String,
|
|
|
+ default:''
|
|
|
+ },
|
|
|
+ disabled:{ //是否可选择,目前统一控制
|
|
|
+ type:Boolean,
|
|
|
+ default:false
|
|
|
+ },
|
|
|
+ showArea:{ //是否展示区
|
|
|
+ type:Boolean,
|
|
|
+ default:false
|
|
|
+ },
|
|
|
+ areaInfo:{ //区数据回显
|
|
|
+ type:String,
|
|
|
+ default:''
|
|
|
+ }
|
|
|
+})
|
|
|
+const emit = defineEmits(["selected"])
|
|
|
+let province = ref({
|
|
|
+ provinceKey:'',
|
|
|
+ provinceName:''
|
|
|
+})
|
|
|
+let city = ref({
|
|
|
+ cityKey:'',
|
|
|
+ cityName:''
|
|
|
+})
|
|
|
+let area = ref({
|
|
|
+ areaKey:'',
|
|
|
+ areaName:''
|
|
|
+})
|
|
|
+
|
|
|
+const provinceSource = computed(() => {
|
|
|
+ return Object.keys(province_sorce).map(key=>{
|
|
|
+ return {
|
|
|
+ provinceKey:key||'',
|
|
|
+ provinceName:province_sorce[key]||''
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+const citySource = computed(() => {
|
|
|
+ const cityMap = city_sorce[province.value.provinceKey]||{}
|
|
|
+ return Object.keys(cityMap).map(cityKey=>{
|
|
|
+ return {
|
|
|
+ cityKey:cityKey||'',
|
|
|
+ cityName:cityMap[cityKey]||''
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+const areaSource = computed(() => {
|
|
|
+ const areaMap = area_sorce[city.value.cityKey]||{}
|
|
|
+ return Object.keys(areaMap).map(areaKey=>{
|
|
|
+ return {
|
|
|
+ areaKey:areaKey||'',
|
|
|
+ areaName:areaMap[areaKey]||''
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+watch(
|
|
|
+ ()=>props.provinceInfo,
|
|
|
+ (newval)=>{
|
|
|
+ if(newval&&newval.length){
|
|
|
+ if(newval===province.value.provinceName) return
|
|
|
+ const provinceResult= Object.entries(province_sorce).find(([key,val])=>val===newval)||['',newval]
|
|
|
+ province.value = {provinceKey:provinceResult[0],provinceName:provinceResult[1]}
|
|
|
+ if(province.value.provinceKey){
|
|
|
+ const cityResult = Object.entries(city_sorce[province.value.provinceKey]).find(([key,val])=>val===props.cityInfo)||['',props.cityInfo]
|
|
|
+ city.value = {cityKey:cityResult[0],cityName:cityResult[1]}
|
|
|
+ }else{
|
|
|
+ city.value = {cityKey:'',cityName:props.cityInfo}
|
|
|
+ }
|
|
|
+ if(city.value.cityKey){
|
|
|
+ const areaResult = Object.entries(area_sorce[city.value.cityKey]).find(([key,val])=>val===props.areaInfo)||['',props.areaInfo]
|
|
|
+ area.value = {areaKey:areaResult[0],areaName:areaResult[1]}
|
|
|
+ }else{
|
|
|
+ area.value={areaKey:'',areaName:''}
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ province.value={provinceKey:'',provinceName:''}
|
|
|
+ city.value={cityKey:'',cityName:''}
|
|
|
+ area.value={areaKey:'',areaName:''}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {immediate:true})
|
|
|
+
|
|
|
+function handleSelectChange(type){
|
|
|
+ if(type==='province'){
|
|
|
+ city.value = {cityKey:'',cityName:''}
|
|
|
+ area.value = {areaKey:'',areaName:''}
|
|
|
+ }
|
|
|
+ if(type==='city'&&props.showArea){
|
|
|
+ area.value = {areaKey:'',areaName:''}
|
|
|
+ }
|
|
|
+ emit('selected',{
|
|
|
+ province:{value:province.value.provinceName},
|
|
|
+ city:{value:city.value.cityName},
|
|
|
+ area:{value:area.value.areaName}
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="select-dist-picker">
|
|
|
+ <!-- 省选择器 -->
|
|
|
+ <el-select
|
|
|
+ placeholder="请选择省"
|
|
|
+ filterable
|
|
|
+ v-model="province"
|
|
|
+ value-key="provinceKey"
|
|
|
+ :disabled="props.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="props.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="props.disabled"
|
|
|
+ @change="handleSelectChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="area in areaSource"
|
|
|
+ :key="area.areaKey"
|
|
|
+ :label="area.areaName"
|
|
|
+ :value="area"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.select-dist-picker{
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ :deep(.el-input){
|
|
|
+ width:100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|