boursecu_admin/src/components/BasicSelect.vue

<template>
  <div :class="[prefixCls]">
    <div>
      {{ props.title }}
    </div>
    <a-select
      class="w-full"
      :size="props.size"
      v-model:value="localValue"
      :disabled="props.disabled"
      show-search
      :mode="props.mode"
      :style="props.style"
      :multiple="props.multiple"
      :dropdown-style="dropdownStyle"
      @change="handleChange"
      :placeholder="props.placeholder"
      :allowClear="props.allowClear"
      :filter-option="filterOption"
    >
      <template #notFoundContent v-if="noData">
        <div class="w-full text-center font-bold">{{ noData }}</div>
      </template>
      <a-select-option
        :label="val[props.valueName]"
        v-for="val in props.items"
        :value="val[props.keyName]"
      >
        <a-tooltip v-if="props.hasTooltip" placement="left" class="cursor-pointer">
          <template #title>
            <span>{{ val[props.valueName] }}</span>
          </template>
          <div class="truncate max-w-40">{{ val[props.valueName] }}</div>
        </a-tooltip>
        <div v-else>{{ val[props.valueName] }}</div>
      </a-select-option>
    </a-select>
  </div>
</template>

<script setup lang="ts">
import { usePrefix } from '@core/composable/usePrefix'
import { SELECT_DROPDOWN_Z_INDEX } from '@/constants/overlayZIndex'

const dropdownStyle = { zIndex: SELECT_DROPDOWN_Z_INDEX }

//Props
interface Prop {
  title?: string
  value?: string | number | boolean
  style?: string
  size?: string
  keyName: string
  disabled?: boolean
  mode?: string
  valueName: string
  multiple?: boolean
  items?: any[]
  placeholder?: string
  allowClear?: boolean
  hasTooltip?: boolean
  noData?: string
}

const props = withDefaults(defineProps<Prop>(), {
  allowClear: true,
  hasTooltip: true
})

// console.log('props.items ====>', props.items)
//define emits
const emit = defineEmits(['update:value', 'change'])

const localValue = computed({
  get() {
    return props.value
  },

  set(value) {
    emit('update:value', value)
  }
})

const filterOption = (input: string, option: any) => {
  return option.label?.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

const handleChange = (e: any) => {
  // console.log('e ====>', e)
  emit(
    'change',
    props.items?.find((x) => x[props.keyName] === e)
  )
}

//css style
const { prefixCls } = usePrefix('select')
</script>

<style lang="less">
@prefix: ~'@{prefixCls}-select';

.@{prefix} {
  //padding: 5px;
  /*  .ant-select {
    .ant-select-selector {
      border-color: @primary-color;
      border-radius: @border-radius-base;
    }
  }*/
}
</style>