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

<template>
    <uni-datetime-picker v-model="dateFilter" type="daterange" :returnType="props.returnType">
        <view class="filter-picker">
            <view class="picker-value">
                <text class="picker-text">{{ dateFilter1[0] && dateFilter1[1] ? `${dateFilter1[0]} - ${dateFilter1[1]}`
                    :
                    t('card.Form.f57') }}</text>
                <uni-icons type="calendar" size="14" color="#6b7280" class="picker-icon" />
            </view>
        </view>
    </uni-datetime-picker>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
type Option = {
    value: string | number | undefined
    label: string
}
const props = defineProps<{
    modelValue?: string | number | null
    returnType?: string
}>()
const emit = defineEmits<{
    (e: 'update:modelValue', value: string | number | undefined): void
    (e: 'change', option: Option): void
}>()
const { t } = useI18n()
const dateFilter = ref<string | number | undefined>(props.modelValue)
const dateFilter1 = computed(() => {
    if (!dateFilter.value || dateFilter.value.length === 0) {
        return ['', '']
    }
    if (props.returnType === 'timestamp') {
        return (dateFilter.value as any[]).map((item) =>
            typeof item === 'number'
                ? dayjs(item).format('YYYY-MM-DD')
                : item
        )
    }
    return dateFilter.value
})
watch(
    () => props.modelValue,
    (val) => {
        dateFilter.value = val
    }
)
watch(
    () => dateFilter.value,
    (val) => {
        emit('update:modelValue', val)
    },
    { immediate: true },
)
</script>