vben-admin 自定义form components 字典表下拉搜索框

<script lang="ts" setup>
import type { SelectValue } from 'ant-design-vue/lib/select'
import { debounce } from 'lodash-es'
import { defineProps, ref, watch } from 'vue'
import { Select, Spin } from 'ant-design-vue'
import { getDict } from '@/api/ddt/common'

defineOptions({ name: 'DdtDictSreach', inheritAttrs: false })

const props = defineProps({
  value: { type: [Array, Object, String, Number] as PropType<SelectValue> },
  params: {
    type: Object,
    default: () => ({}),
  },
  planceholder: {
    type: String,
    default: '请输入搜索内容',
  },
})
// 自定义方法和事件
const emit = defineEmits(['update:value', 'search', 'change'])

let lastFetchId = 0
const data = ref([])
const fetching = ref(false)
// 自定义属性
const inputValue = ref([])
const fetchUser = debounce((value) => {
  console.log('fetching user', value)
  lastFetchId += 1
  const fetchId = lastFetchId
  data.value = []
  fetching.value = true

  // eslint-disable-next-line prefer-const
  let pdata = {
    param: `${props.params.col} like "%${value}%"`,
    ...props.params,
  }
  getDict(pdata).then((res) => {
    if (fetchId !== lastFetchId) {
      // for fetch callback order
      return
    }
    data.value = JSON.parse(res)
    fetching.value = false
  })
}, 300)

watch(inputValue, (value) => {
  emit('update:value', value)
})
function selectChange(value) {
  inputValue.value = value.label
  emit('update:value', value.label)
  emit('change', value.label)
}
function selectSelect(value) {
  console.log('selectSelect', value)
}
</script>

<template>
  <Select
    v-model:value="inputValue"
    show-search
    label-in-value
    :placeholder="planceholder"
    style="width: 100%"
    :filter-option="false"
    :not-found-content="fetching ? undefined : null"
    :options="data"
    @search="fetchUser"
    @change="selectChange"
    @select="selectSelect"
  >
    <template v-if="fetching" #notFoundContent>
      <Spin size="small" />
    </template>
  </Select>
</template>