<script lang="ts" setup>
|
import type { AftersalesTicketApi } from '#/api/aftersales/ticket';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { Select } from 'ant-design-vue';
|
|
import { getTicketPage } from '#/api/aftersales/ticket';
|
|
defineOptions({ name: 'AfterSaleTicketSelect', inheritAttrs: false });
|
|
const props = withDefaults(
|
defineProps<{
|
allowClear?: boolean;
|
disabled?: boolean;
|
modelValue?: number;
|
placeholder?: string;
|
}>(),
|
{
|
allowClear: true,
|
disabled: false,
|
modelValue: undefined,
|
placeholder: '请选择售后工单',
|
},
|
);
|
|
const emit = defineEmits<{
|
'update:modelValue': [value: number | undefined];
|
}>();
|
|
const ticketList = ref<AftersalesTicketApi.Ticket[]>([]);
|
|
const selectValue = computed({
|
get: () => props.modelValue,
|
set: (value: number | undefined) => {
|
emit('update:modelValue', value);
|
},
|
});
|
|
async function loadTickets() {
|
const { list } = await getTicketPage({ pageNo: 1, pageSize: 200 });
|
ticketList.value = list || [];
|
}
|
|
onMounted(loadTickets);
|
</script>
|
|
<template>
|
<Select
|
v-bind="$attrs"
|
v-model:value="selectValue"
|
:allow-clear="allowClear"
|
:disabled="disabled"
|
:field-names="{ label: 'no', value: 'id' }"
|
:options="ticketList"
|
:placeholder="placeholder"
|
class="w-full"
|
option-filter-prop="no"
|
show-search
|
>
|
<template #option="{ value: id, label: no }">
|
<div class="flex items-center gap-2">
|
<span>{{ no }}</span>
|
<span class="text-xs text-gray-400">
|
{{ ticketList.find((t) => t.id === id)?.name }}
|
</span>
|
</div>
|
</template>
|
</Select>
|
</template>
|
