fix: repair admin country select

apps/src/views/team/components/team-country-select.vue

@@ -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];
+  change: [any, Record<string, any> | null];
-  'update:value': [number | string];
+  '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>