114 lines
2.5 KiB
Vue
114 lines
2.5 KiB
Vue
<template>
|
|
<div class="w-full">
|
|
<div>
|
|
{{ props.title }}
|
|
</div>
|
|
<a-select
|
|
:size="props.size"
|
|
v-model:value="localValue"
|
|
:disabled="props.disabled"
|
|
:show-search="props.showSearch"
|
|
:mode="props.mode"
|
|
:style="props.style"
|
|
:multiple="props.multiple"
|
|
@change="handleChange"
|
|
:placeholder="props.placeholder"
|
|
:allowClear="props.allowClear"
|
|
:filter-option="filterOption"
|
|
class="w-full"
|
|
>
|
|
<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'
|
|
|
|
//Props
|
|
import { usePrefix } from '@/utils/usePrefix'
|
|
import { computed } from 'vue'
|
|
|
|
interface Prop {
|
|
title?: string
|
|
value?: string | number | boolean
|
|
style?: string
|
|
size?: string
|
|
keyName: string
|
|
disabled?: boolean
|
|
mode?: string
|
|
valueName: string
|
|
multiple?: boolean
|
|
showSearch?: boolean
|
|
items?: any[]
|
|
placeholder?: string
|
|
allowClear?: boolean
|
|
hasTooltip?: boolean
|
|
noData?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Prop>(), {
|
|
allowClear: true,
|
|
hasTooltip: true,
|
|
showSearch: 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: var(--app-primary-color, #a72b77);
|
|
border-radius: @border-radius-base;
|
|
}
|
|
}*/
|
|
}
|
|
</style>
|