<script lang="ts" setup>
|
import type { CrmCustomerApi } from '#/api/crm/customer';
|
|
import { computed, ref, watch } from 'vue';
|
|
import { Select } from 'ant-design-vue';
|
|
import { getCustomerSimpleList } from '#/api/crm/customer';
|
|
interface Props {
|
value?: number;
|
disabled?: boolean;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
value: undefined,
|
disabled: false,
|
});
|
|
const emit = defineEmits(['update:value', 'change']);
|
|
const customerList = ref<CrmCustomerApi.Customer[]>([]);
|
const loading = ref(false);
|
|
const options = computed(() => {
|
return customerList.value.map((item) => ({
|
label: item.name,
|
value: item.id,
|
}));
|
});
|
|
const selectedValue = ref(props.value);
|
|
watch(
|
() => props.value,
|
(val) => {
|
selectedValue.value = val;
|
},
|
);
|
|
watch(selectedValue, (val) => {
|
emit('update:value', val);
|
const customer = customerList.value.find((item) => item.id === val);
|
emit('change', customer);
|
});
|
|
async function loadCustomers() {
|
if (customerList.value.length > 0) return;
|
loading.value = true;
|
try {
|
customerList.value = await getCustomerSimpleList();
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function filterOption(input: string, option: any) {
|
return option.label.toLowerCase().includes(input.toLowerCase());
|
}
|
|
loadCustomers();
|
</script>
|
|
<template>
|
<Select
|
v-model:value="selectedValue"
|
:options="options"
|
:loading="loading"
|
:disabled="disabled"
|
placeholder="请选择客户"
|
show-search
|
:filter-option="filterOption"
|
allow-clear
|
/>
|
</template>
|
