feat: 修改所有选择用户名 /邮箱的组件

src/component/common/SelectUser.vue

@@ -3,9 +3,10 @@
     v-model:value="value"
     :allowClear="true"
     show-search
+    :mode="multiple ? 'multiple' : undefined"
     style="width: 250px"
     :filter-option="false"
-    placeholder="Select Item..."
+    placeholder="Select Item"
     max-tag-count="responsive"
     :options="options"
     :loading="fetching"
@@ -19,43 +20,42 @@
 <script setup lang="ts">
 import { computed, ref, reactive } from 'vue'
 import { debounce } from 'lodash-es'
+import { Https } from '@/tool/https'
+import { useStore } from '@/store'
 
 type OptionItem = { [k: string]: any }
 
 const props = defineProps<{
-  modelValue?: any
+  modelValue: any
+  labelKey?: string
+  valueKey?: string
+  multiple?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue', 'change', 'search'])
 
-const pager = reactive<{ page: number; size: number; total: number | null }>({
+const pager = reactive<{ page: number; size: number; hasMore: boolean }>({
   page: 1,
-  size: 20,
-  total: null
+  size: 30,
+  hasMore: true
 })
 const fetching = ref(false)
 const keyword = ref('')
 const internalList = ref<OptionItem[]>([])
 
-// page size is stored in pager.size
-
 const value = computed({
-  get: () => props.modelValue,
+  get: () => {
+    const mv = props.modelValue
+    if (mv === '' || mv === null) return undefined
+    return mv
+  },
   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),
+    label: it[props.labelKey] || it.label,
+    value: it[props.valueKey] || it.value,
     raw: it
   }))
 })
@@ -69,22 +69,22 @@ const defaultFetch = async ({
   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 = []
-  }
+  const res =
+    (await Https.axiosGet(Https.httpUrls.getAllUserId, {
+      params: { page: p, size: ps, email: kw }
+    })) || []
+  //  store.commit('setAllUserList', rv)
 
   // Return the raw list from sessionStorage exactly as-is (no slicing/filtering/delay)
-  return { data: list, total: list.length }
+  return { data: res.records, hasMore: res.current <= res.pages }
 }
 
 const doFetch = async (reset = false) => {
-  if (reset) pager.page = 1
-  if (pager.total !== null && (pager.page - 1) * pager.size >= (pager.total ?? 0)) return
+  if (reset) {
+    pager.page = 1
+    pager.hasMore = true
+  }
+  if (!pager.hasMore) return
   fetching.value = true
   try {
     const res = await defaultFetch({
@@ -92,8 +92,8 @@ const doFetch = async (reset = false) => {
       pageSize: pager.size,
       keyword: keyword.value
     })
-    const data = res?.data ?? []
-    pager.total = res?.total ?? null
+    const data = res?.data
+    pager.hasMore = res?.hasMore
     if (pager.page === 1) internalList.value = data
     else internalList.value = internalList.value.concat(data)
     pager.page += 1
@@ -115,8 +115,8 @@ const onSearch = (val: string) => {
 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) {
+  const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 30
+  if (nearBottom) {
     doFetch(false)
   }
 }
@@ -128,7 +128,6 @@ const handleFocus = () => {
 
 const onChange = (val: any) => {
   emit('change', val)
-  console.log('change---------', val)
 }
 </script>