<template>
|
<a-form-item-rest>
|
<div class="area-select">
|
<!--省份-->
|
<a-select v-model:value="province" @change="proChange" allowClear :disabled="disabled">
|
<template v-for="item in provinceOptions" :key="`${item.value}`">
|
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
|
</template>
|
</a-select>
|
<!--城市-->
|
<a-select v-if="level >= 2" v-model:value="city" @change="cityChange" :disabled="disabled">
|
<template v-for="item in cityOptions" :key="`${item.value}`">
|
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
|
</template>
|
</a-select>
|
<!--地区-->
|
<a-select v-if="level >= 3" v-model:value="area" @change="areaChange" :disabled="disabled">
|
<template v-for="item in areaOptions" :key="`${item.value}`">
|
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
|
</template>
|
</a-select>
|
</div>
|
</a-form-item-rest>
|
</template>
|
<script lang="ts">
|
import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, onUnmounted, toRefs } from 'vue';
|
import { propTypes } from '/@/utils/propTypes';
|
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
|
import { provinceOptions, getDataByCode, getRealCode } from '../../utils/areaDataUtil';
|
|
export default defineComponent({
|
name: 'JAreaSelect',
|
props: {
|
value: [Array, String],
|
province: [String],
|
city: [String],
|
area: [String],
|
level: propTypes.number.def(3),
|
disabled: propTypes.bool.def(false),
|
codeField: propTypes.string,
|
size: propTypes.string,
|
placeholder: propTypes.string,
|
formValues: propTypes.any,
|
allowClear: propTypes.bool.def(false),
|
getPopupContainer: {
|
type: Function,
|
default: (node) => node.parentNode,
|
},
|
},
|
emits: ['change', 'update:value','update:area','update:city','update:province'],
|
setup(props, { emit, refs }) {
|
const emitData = ref<any[]>([]);
|
//下拉框的选择值
|
const pca = reactive({
|
province: '',
|
city: '',
|
area: '',
|
});
|
//表单值
|
const [state] = useRuleFormItem(props, 'value', 'change', emitData);
|
//城市下拉框的选项
|
const cityOptions = computed(() => {
|
return pca.province ? getDataByCode(pca.province) : [];
|
});
|
//地区下拉框的选项
|
const areaOptions = computed(() => {
|
return pca.city ? getDataByCode(pca.city) : [];
|
});
|
/**
|
* 监听props值
|
*/
|
watchEffect(() => {
|
props && initValue();
|
});
|
|
/**
|
* 监听组件值变化
|
*/
|
watch(pca, (newVal) => {
|
if (!props.value) {
|
emit('update:province', pca.province);
|
emit('update:city', pca.city);
|
emit('update:area', pca.area);
|
}
|
});
|
/**
|
* 数据初始化
|
*/
|
function initValue() {
|
if (props.value) {
|
//传参是数组的情况下的处理
|
if (Array.isArray(props.value)) {
|
pca.province = props.value[0];
|
pca.city = props.value[1] ? props.value[1] : '';
|
pca.area = props.value[2] ? props.value[2] : '';
|
} else {
|
//传参是数值
|
let valueArr = getRealCode(props.value, props.level);
|
if (valueArr) {
|
pca.province = valueArr[0];
|
pca.city = props.level >= 2 && valueArr[1] ? valueArr[1] : '';
|
pca.area = props.level >= 3 && valueArr[2] ? valueArr[2] : '';
|
}
|
}
|
} else {
|
//绑定三个数据的情况
|
pca.province = props.province ? props.province : '';
|
pca.city = props.city ? props.city : '';
|
pca.area = props.area ? props.area : '';
|
}
|
}
|
|
/**
|
* 省份change事件
|
*/
|
function proChange(val) {
|
pca.city = val && getDataByCode(val)[0]?.value;
|
pca.area = pca.city && getDataByCode(pca.city)[0]?.value;
|
state.value = props.level <= 1 ? val : props.level <= 2 ? pca.city : pca.area;
|
emit('update:value', unref(state));
|
}
|
|
/**
|
* 城市change事件
|
*/
|
function cityChange(val) {
|
pca.area = val && getDataByCode(val)[0]?.value;
|
state.value = props.level <= 2 ? val : pca.area;
|
emit('update:value', unref(state));
|
}
|
|
/**
|
* 区域change事件
|
*/
|
function areaChange(val) {
|
state.value = val;
|
emit('update:value', unref(state));
|
}
|
|
return {
|
...toRefs(pca),
|
provinceOptions,
|
cityOptions,
|
areaOptions,
|
proChange,
|
cityChange,
|
areaChange,
|
};
|
},
|
});
|
</script>
|
<style lang="less" scoped>
|
.area-select {
|
width: 100%;
|
display: flex;
|
|
.ant-select {
|
width: 33.3%;
|
}
|
|
.ant-select:not(:first-child) {
|
margin-left: 10px;
|
}
|
}
|
</style>
|
