fix: repair admin country select
This commit is contained in:
parent
1462c296af
commit
aec6962175
@ -1,31 +1,43 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { getCountryAlls } from '#/api/legacy/system';
|
||||
|
||||
import { Select, SelectOption } from 'antdv-next';
|
||||
import { Select } from 'antdv-next';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
clearable?: boolean;
|
||||
disabled?: boolean;
|
||||
value?: number | string;
|
||||
filterable?: boolean;
|
||||
multiple?: boolean;
|
||||
placeholder?: string;
|
||||
value?: any;
|
||||
}>(),
|
||||
{
|
||||
clearable: false,
|
||||
disabled: false,
|
||||
filterable: true,
|
||||
multiple: false,
|
||||
placeholder: '请选择国家',
|
||||
value: '',
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [number | string, Record<string, any> | null];
|
||||
'update:value': [number | string];
|
||||
change: [any, Record<string, any> | null];
|
||||
'update:value': [any];
|
||||
}>();
|
||||
|
||||
const loading = ref(false);
|
||||
const list = ref<Array<Record<string, any>>>([]);
|
||||
const selectValue = ref<number | string>('');
|
||||
const selectValue = ref<any>('');
|
||||
const countryOptions = computed(() =>
|
||||
list.value.map((item) => ({
|
||||
label: String(item.aliasName || item.countryName || item.alphaTwo || item.id || '-'),
|
||||
value: item.id as any,
|
||||
})),
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
@ -44,11 +56,13 @@ async function loadCountries() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleChange(value: number | string) {
|
||||
function handleChange(value: any) {
|
||||
selectValue.value = value;
|
||||
emit('update:value', value);
|
||||
const country =
|
||||
list.value.find((item) => String(item.id) === String(value)) || null;
|
||||
Array.isArray(value)
|
||||
? null
|
||||
: list.value.find((item) => String(item.id) === String(value)) || null;
|
||||
emit('change', value, country);
|
||||
}
|
||||
|
||||
@ -58,21 +72,17 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Select option-label-prop="label"
|
||||
<Select
|
||||
:value="selectValue"
|
||||
allow-clear
|
||||
:allow-clear="clearable"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
show-search
|
||||
:mode="multiple ? 'multiple' : undefined"
|
||||
:options="countryOptions"
|
||||
:placeholder="placeholder"
|
||||
:show-search="filterable"
|
||||
option-label-prop="label"
|
||||
style="width: 100%"
|
||||
@change="handleChange"
|
||||
>
|
||||
<SelectOption
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:label="item.aliasName || item.countryName"
|
||||
:value="item.id"
|
||||
>
|
||||
{{ item.aliasName || item.countryName }}
|
||||
</SelectOption>
|
||||
</Select>
|
||||
/>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user