136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<a-select
|
||
|
|
v-model:value="value"
|
||
|
|
:allowClear="true"
|
||
|
|
show-search
|
||
|
|
style="width: 250px"
|
||
|
|
:filter-option="false"
|
||
|
|
placeholder="Select Item..."
|
||
|
|
max-tag-count="responsive"
|
||
|
|
:options="options"
|
||
|
|
:loading="fetching"
|
||
|
|
@popupScroll="handleScrollUserList"
|
||
|
|
@search="onSearch"
|
||
|
|
@focus="handleFocus"
|
||
|
|
@change="onChange"
|
||
|
|
></a-select>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, ref, reactive } from 'vue'
|
||
|
|
import { debounce } from 'lodash-es'
|
||
|
|
|
||
|
|
type OptionItem = { [k: string]: any }
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
modelValue?: any
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:modelValue', 'change', 'search'])
|
||
|
|
|
||
|
|
const pager = reactive<{ page: number; size: number; total: number | null }>({
|
||
|
|
page: 1,
|
||
|
|
size: 20,
|
||
|
|
total: null
|
||
|
|
})
|
||
|
|
const fetching = ref(false)
|
||
|
|
const keyword = ref('')
|
||
|
|
const internalList = ref<OptionItem[]>([])
|
||
|
|
|
||
|
|
// page size is stored in pager.size
|
||
|
|
|
||
|
|
const value = computed({
|
||
|
|
get: () => props.modelValue,
|
||
|
|
set: v => emit('update:modelValue', v)
|
||
|
|
})
|
||
|
|
|
||
|
|
const getLabel = (it: OptionItem) => {
|
||
|
|
return String(it['label'] ?? '')
|
||
|
|
}
|
||
|
|
|
||
|
|
const getValue = (it: OptionItem, idx: number) => {
|
||
|
|
return it['value'] ?? String(idx)
|
||
|
|
}
|
||
|
|
|
||
|
|
const options = computed(() => {
|
||
|
|
return internalList.value.map((it, idx) => ({
|
||
|
|
label: getLabel(it),
|
||
|
|
value: getValue(it, idx),
|
||
|
|
raw: it
|
||
|
|
}))
|
||
|
|
})
|
||
|
|
|
||
|
|
const defaultFetch = async ({
|
||
|
|
page: p,
|
||
|
|
pageSize: ps,
|
||
|
|
keyword: kw
|
||
|
|
}: {
|
||
|
|
page: number
|
||
|
|
pageSize: number
|
||
|
|
keyword: string
|
||
|
|
}) => {
|
||
|
|
const raw = sessionStorage.getItem('allCountry') || '[]'
|
||
|
|
let list: OptionItem[] = []
|
||
|
|
try {
|
||
|
|
list = JSON.parse(raw)
|
||
|
|
if (!Array.isArray(list)) list = []
|
||
|
|
} catch (e) {
|
||
|
|
list = []
|
||
|
|
}
|
||
|
|
|
||
|
|
// Return the raw list from sessionStorage exactly as-is (no slicing/filtering/delay)
|
||
|
|
return { data: list, total: list.length }
|
||
|
|
}
|
||
|
|
|
||
|
|
const doFetch = async (reset = false) => {
|
||
|
|
if (reset) pager.page = 1
|
||
|
|
if (pager.total !== null && (pager.page - 1) * pager.size >= (pager.total ?? 0)) return
|
||
|
|
fetching.value = true
|
||
|
|
try {
|
||
|
|
const res = await defaultFetch({
|
||
|
|
page: pager.page,
|
||
|
|
pageSize: pager.size,
|
||
|
|
keyword: keyword.value
|
||
|
|
})
|
||
|
|
const data = res?.data ?? []
|
||
|
|
pager.total = res?.total ?? null
|
||
|
|
if (pager.page === 1) internalList.value = data
|
||
|
|
else internalList.value = internalList.value.concat(data)
|
||
|
|
pager.page += 1
|
||
|
|
} finally {
|
||
|
|
fetching.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const debouncedSearch = debounce((val: string) => {
|
||
|
|
keyword.value = val
|
||
|
|
emit('search', val)
|
||
|
|
doFetch(true)
|
||
|
|
}, 300)
|
||
|
|
|
||
|
|
const onSearch = (val: string) => {
|
||
|
|
debouncedSearch(val)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleScrollUserList = (e: Event) => {
|
||
|
|
const target = e?.target as HTMLElement | null
|
||
|
|
if (!target) return
|
||
|
|
const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 40
|
||
|
|
if (nearBottom && !fetching.value) {
|
||
|
|
doFetch(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleFocus = () => {
|
||
|
|
// When focused, load first page (or reload with current keyword)
|
||
|
|
doFetch(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
const onChange = (val: any) => {
|
||
|
|
emit('change', val)
|
||
|
|
console.log('change---------', val)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped></style>
|