lingji-work-fe/src/views/components/common/AccountSelect.vue

<template>
  <a-select allow-search 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) => {
  let data = [];
  if (value === '') {
    data = [];
  } else {
    data = [value];
  }
  emit('update:modelValue', data);
};

// 初始化获取数据
onMounted(fetchAccounts);
</script>