69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<a-select
|
||
|
|
v-model="selectedValue"
|
||
|
|
placeholder="请选择账号"
|
||
|
|
allow-clear
|
||
|
|
filterable
|
||
|
|
@change="handleChange"
|
||
|
|
>
|
||
|
|
<a-option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name">
|
||
|
|
{{ account.name }}
|
||
|
|
</a-option>
|
||
|
|
</a-select>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed, onMounted } from 'vue';
|
||
|
|
import { getPlacementAccountsList } from '@/api/all/propertyMarketing';
|
||
|
|
|
||
|
|
// 定义账号对象类型
|
||
|
|
interface Account {
|
||
|
|
id: number;
|
||
|
|
name: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
modelValue?: number | string;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:modelValue', 'change']);
|
||
|
|
|
||
|
|
// 响应式数据
|
||
|
|
const selectedValue = ref(props.modelValue);
|
||
|
|
const allAccounts = ref<Account[]>([]);
|
||
|
|
const filteredAccounts = ref<Account[]>([]);
|
||
|
|
const loading = ref(false);
|
||
|
|
const searchKeyword = ref('');
|
||
|
|
|
||
|
|
// 获取账号列表
|
||
|
|
const fetchAccounts = async () => {
|
||
|
|
try {
|
||
|
|
loading.value = true;
|
||
|
|
const { code, data } = await getPlacementAccountsList({
|
||
|
|
names: searchKeyword.value,
|
||
|
|
});
|
||
|
|
if (code === 200) {
|
||
|
|
allAccounts.value = data;
|
||
|
|
filteredAccounts.value = data;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取账号列表失败:', error);
|
||
|
|
} finally {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 搜索处理
|
||
|
|
const handleSearch = (value: string) => {
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// 值变化处理
|
||
|
|
const handleChange = (value: number | string) => {
|
||
|
|
emit('update:modelValue', [value]);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 初始化获取数据
|
||
|
|
onMounted(fetchAccounts);
|
||
|
|
</script>
|