gypsy-crm-frontend-vu/components/cwg-combox.vue

<template>
    <view class="cwg-combox">

        <template v-if="disabled">
            <view class="disabled-text">{{ innerText }}</view>

        </template>
        <template v-if="!disabled">
            <!-- 可搜索模式 -->
            <uni-combox v-if="filterable" v-model="innerText" :candidates="textList" :clearable="clearable"
                :placeholder="placeholder" :disabled="disabled" @input="handleComboxChange" />

            <!-- 普通下拉模式 -->
            <uni-data-select v-else v-model="innerValue" :localdata="options" :clear="clearable"
                :placeholder="placeholder" :disabled="disabled" @change="handleSelectChange" />
        </template>

    </view>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps({
    value: [String, Number],
    options: {
        type: Array,
        default: () => []
    },
    filterable: {
        type: Boolean,
        default: false
    },
    placeholder: String,
    clearable: {
        type: Boolean,
        default: true
    },
    disabled: Boolean
})

const emit = defineEmits(['update:value', 'change'])

/**
 * 内部状态
 */
const innerValue = ref(props.value)
const innerText = ref('')

/**
 * 提取 text 列表（给 combox 用）
 */
const textList = computed(() =>
    props.options.map(item => item.text)
)

/**
 * value → text 映射
 */
const updateTextByValue = (val) => {
    if (!val) {
        innerText.value = ''
        return
    }
    const item = props.options.find(i => i.value === val)
    innerText.value = item ? item.text : ''
}

/**
 * 组件挂载时初始化
 */
onMounted(() => {
    if (props.value) {
        innerValue.value = props.value
        updateTextByValue(props.value)
    }
})

/**
 * value 改变时同步内部状态
 */
watch(
    () => props.value,
    (val) => {
        innerValue.value = val
        updateTextByValue(val)
    }
)

/**
 * options 改变时重新计算显示文本（回显）
 */
watch(
    () => props.options,
    () => {
        if (props.value) {
            updateTextByValue(props.value)
        }
    },
    { deep: true }
)

/**
 * 普通 select 改变
 */
const handleSelectChange = (val) => {
    innerValue.value = val
    updateTextByValue(val)
    emit('update:value', val)
    emit('change', val)
}

/**
 * combox 改变
 */
const handleComboxChange = (text) => {
    const item = props.options.find(i => i.text === text)
    if (item) {
        innerValue.value = item.value
        emit('update:value', item.value)
        emit('change', item.value)
    }
}
</script>
<style lang="scss" scoped>
.disabled-text {
    height: px2rpx(35);
    padding: 0 px2rpx(12);
    border-radius: px2rpx(4);
    line-height: px2rpx(35);
    font-size: px2rpx(15);
    background: #f5f5f5;
    color: #d5d5d5;
}
</style>