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

<template>
  <a-select allow-search v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange">
    <a-option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
      {{ item.name }}
    </a-option>
  </a-select>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getplacementAccountProjectsLlist } from '@/api/all/propertyMarketing';

interface Account {
  id: number;
  name: string;
}

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['update:modelValue', 'change']);

// 响应式数据
const selectedValue = ref(props.modelValue);
const allAccounts = ref<Account[]>([]);
const listData = ref<Account[]>([]);
const loading = ref(false);
const searchKeyword = ref('');

const fetchData = async () => {
  try {
    loading.value = true;
    const { code, data } = await getplacementAccountProjectsLlist({
      names: searchKeyword.value,
    });
    if (code === 200) {
      allAccounts.value = data;
      listData.value = data;
    }
  } catch (error) {
    console.error('获取账号列表失败:', error);
  } finally {
    loading.value = false;
  }
};
const handleChange = (value: any) => {
  let data = [];
  if (value === '') {
    data = [];
  } else {
    data = [value];
  }
  emit('update:modelValue', data);
};

onMounted(fetchData);
</script>