gypsy-crm-frontend-vu/components/cwg-filter-select.vue

<template>
    <!-- 显示区域 -->
    <view class="filter-select" :class="{ disabled }">
        <view class="picker-value">
            <uni-data-select v-model="value1" :localdata="optionList" :clear="false"
                @change="onConfirm"></uni-data-select>
        </view>
    </view>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'

type Option = {
    value: string | number | undefined
    text: string
}

const props = defineProps<{
    modelValue?: string | number | null
    options: Record<string, string> | Option[]
    placeholder?: string
    disabled?: boolean
    showAll?: boolean
}>()
const emit = defineEmits<{
    (e: 'update:modelValue', value: string | number | undefined): void
}>()
const value1 = ref(props.modelValue)
watch(
    () => props.modelValue,
    (val) => {
        value1.value = val === null ? undefined : val
    },
)
const { t } = useI18n()
const optionList = computed<Option[]>(() => {
    let list: Option[] = []

    if (Array.isArray(props.options)) {
        list = props.options.map(i => ({
            value: i.value,
            text: i.label
        }))
    } else {
        list = Object.entries(props.options).map(([value, label]) => ({
            value: isNaN(Number(value)) ? value : Number(value),
            text:
                typeof label === 'string' && label.includes('.')
                    ? t(label)
                    : String(label)
        }))
    }

    if (props.showAll !== true) {
        list.unshift({
            value: -1,
            text: props.placeholder || t('State.All')
        })
    }

    return list
})
function onConfirm(e: any) {
    emit('update:modelValue', e)
}
</script>