118 lines
2.6 KiB
Vue
118 lines
2.6 KiB
Vue
<template>
|
|
<el-select
|
|
v-model="model"
|
|
:placeholder="placeholder"
|
|
filterable
|
|
remote
|
|
:remote-method="searchRemote"
|
|
:loading="loading"
|
|
:allow-create="allowCreate"
|
|
default-first-option
|
|
clearable
|
|
style="width: 100%"
|
|
@focus="handleFocus"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.customerName"
|
|
:value="item.customerName"
|
|
>
|
|
<div class="db-crm-option">
|
|
<span>{{ item.customerName }}</span>
|
|
<span v-if="item.customerNo" class="db-crm-option__meta">{{ item.customerNo }}</span>
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { fetchCustomerList } from '@/api/crm/customer'
|
|
|
|
defineOptions({ name: 'DbCrmCustomerSelect' })
|
|
|
|
const model = defineModel<string>({ default: '' })
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
placeholder?: string
|
|
allowCreate?: boolean
|
|
}>(),
|
|
{
|
|
placeholder: '请输入客户名称搜索',
|
|
allowCreate: true
|
|
}
|
|
)
|
|
|
|
interface CustomerOption {
|
|
id: string
|
|
customerName: string
|
|
customerNo?: string
|
|
}
|
|
|
|
const loading = ref(false)
|
|
const options = ref<CustomerOption[]>([])
|
|
|
|
const extractList = (res: unknown): CustomerOption[] => {
|
|
const data = (res as { data?: { list?: CustomerOption[]; rows?: CustomerOption[] } })?.data ?? res ?? {}
|
|
const payload = data as { list?: CustomerOption[]; rows?: CustomerOption[] }
|
|
return payload.list || payload.rows || []
|
|
}
|
|
|
|
const loadDefault = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await fetchCustomerList({ page: 1, pageSize: 20 })
|
|
options.value = extractList(res)
|
|
} catch (error) {
|
|
console.error('加载 CRM 客户列表失败', error)
|
|
options.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const searchRemote = async (query: string) => {
|
|
if (!query.trim()) {
|
|
await loadDefault()
|
|
return
|
|
}
|
|
loading.value = true
|
|
try {
|
|
const res = await fetchCustomerList({
|
|
customerName: query.trim(),
|
|
page: 1,
|
|
pageSize: 50
|
|
})
|
|
options.value = extractList(res)
|
|
} catch (error) {
|
|
console.error('搜索 CRM 客户失败', error)
|
|
options.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleFocus = () => {
|
|
if (options.value.length === 0) {
|
|
loadDefault()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.db-crm-option {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.db-crm-option__meta {
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
</style>
|