162 lines
3.3 KiB
Vue
162 lines
3.3 KiB
Vue
<template>
|
|
<div class="center">
|
|
<el-select placeholder="请选择省" style="width: 100px" v-model="prov" @change="provChange">
|
|
<el-option
|
|
v-for="item in provList"
|
|
:key="item.regionId"
|
|
:label="item.regionName"
|
|
:value="item.regionName"
|
|
/>
|
|
</el-select>
|
|
<el-select
|
|
placeholder="请选择市"
|
|
style="width: 100px"
|
|
:disabled="!prov"
|
|
v-model="city"
|
|
@change="cityChange"
|
|
>
|
|
<el-option
|
|
v-for="item in cityList"
|
|
:key="item.regionId"
|
|
:label="item.regionName"
|
|
:value="item.regionName"
|
|
/>
|
|
</el-select>
|
|
<el-select
|
|
placeholder="请选择区"
|
|
style="width: 100px"
|
|
:disabled="!city"
|
|
v-model="area"
|
|
@change="areaChange"
|
|
>
|
|
<el-option
|
|
v-for="item in areaList"
|
|
:key="item.regionId"
|
|
:label="item.regionName"
|
|
:value="item.regionName"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { getRegion } from "@/api/common";
|
|
|
|
const provList = ref<any[]>([]);
|
|
const cityList = ref<any[]>([]);
|
|
const areaList = ref<any[]>([]);
|
|
|
|
const provCode = defineModel("provCode", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
// 监听省份code变化
|
|
watch(
|
|
provCode,
|
|
async (n, o) => {
|
|
await getRegionAjax();
|
|
if (n && n !== undefined) {
|
|
provChange(n, true);
|
|
|
|
// 监听市区code变化
|
|
watch(
|
|
cityCode,
|
|
async (n, o) => {
|
|
if (n !== undefined && n) {
|
|
cityChange(n, true);
|
|
}
|
|
},
|
|
{
|
|
immediate: true, // 可选：初始化立即执行，验证是否监听到初始值
|
|
}
|
|
);
|
|
}
|
|
},
|
|
{
|
|
immediate: true, // 可选：初始化立即执行，验证是否监听到初始值
|
|
}
|
|
);
|
|
|
|
const cityCode = defineModel("cityCode", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
const areaCode = defineModel("areaCode", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
const prov = defineModel("prov", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
const city = defineModel("city", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
const area = defineModel("area", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
const wxProvinceCode = defineModel("wxProvinceCode", {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
// 省份变化 e code isEcho是否回显
|
|
function provChange(e: string, isEcho: boolean = false) {
|
|
console.log("provChange", e);
|
|
if (!isEcho) {
|
|
city.value = "";
|
|
area.value = "";
|
|
cityList.value = [];
|
|
areaList.value = [];
|
|
}
|
|
const provObj = provList.value.find((item) => item.regionName == e);
|
|
if (provObj && provObj.children) {
|
|
cityList.value = provObj.children;
|
|
}
|
|
}
|
|
|
|
// 市区变化
|
|
function cityChange(e: string, isEcho: boolean = false) {
|
|
if (!isEcho) {
|
|
area.value = "";
|
|
areaList.value = [];
|
|
}
|
|
const cityObj = cityList.value.find((item) => item.regionName == e);
|
|
|
|
if (cityObj && cityObj.children) {
|
|
areaList.value = cityObj.children;
|
|
wxProvinceCode.value = cityObj.wxProvinceCode;
|
|
}
|
|
}
|
|
|
|
// 区变化
|
|
function areaChange(e: string) {}
|
|
|
|
// 获取省市区数据
|
|
async function getRegionAjax() {
|
|
try {
|
|
const res = await getRegion();
|
|
provList.value = res;
|
|
} catch (error) {
|
|
console.error("获取省市区数据失败：", error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.center {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
</style>
|