多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

143 lines
4.1 KiB

<script lang="ts" setup>
import dayjs from 'dayjs'
interface Props {
selectedDate?: dayjs.Dayjs | null
isDisabled?: boolean
pageDate?: dayjs.Dayjs
isYearPicker?: boolean
hideHeader?: boolean
}
const props = withDefaults(defineProps<Props>(), {
selectedDate: null,
isDisabled: false,
pageDate: dayjs(),
hideHeader: false,
isYearPicker: false,
})
const emit = defineEmits(['update:selectedDate', 'update:pageDate'])
const pageDate = useVModel(props, 'pageDate', emit)
const selectedDate = useVModel(props, 'selectedDate', emit)
const years = computed(() => {
const date = pageDate.value
const startOfYear = date.startOf('year')
const years: dayjs.Dayjs[] = []
for (let i = 0; i < 12; i++) {
years.push(dayjs(startOfYear).add(i, 'year'))
}
return years
})
const months = computed(() => {
const months: dayjs.Dayjs[] = []
for (let i = 0; i < 12; i++) {
months.push(pageDate.value.set('month', i))
}
return months
})
const compareDates = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
if (!date1 || !date2) return false
return date1.isSame(date2, 'month') && date1.isSame(date2, 'year')
}
const isMonthSelected = (date: dayjs.Dayjs) => {
if (!dayjs(selectedDate.value).isValid()) return false
return compareDates(date, selectedDate.value)
}
const paginateMonth = (action: 'next' | 'prev') => {
let date = pageDate.value
if (action === 'next') {
date = date.add(1, 'year')
} else {
date = date.subtract(1, 'year')
}
pageDate.value = date
emit('update:pageDate', date)
}
const paginateYear = (action: 'next' | 'prev') => {
let date = dayjs(pageDate.value)
if (action === 'next') {
date = date.add(12, 'year')
} else {
date = date.subtract(12, 'year')
}
pageDate.value = date
emit('update:pageDate', date)
}
const paginate = (action: 'next' | 'prev') => {
if (props.isYearPicker) {
paginateYear(action)
} else {
paginateMonth(action)
}
}
const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
if (!date1 || !date2) return false
return date1.isSame(date2, 'year')
}
</script>
<template>
<div class="px-3 pb-3 pt-2 flex flex-col">
<div v-if="!hideHeader" class="flex justify-between items-center">
<NcTooltip>
<NcButton size="small" type="secondary" @click="paginate('prev')">
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.previous') }}</span>
</template>
</NcTooltip>
<span class="text-gray-700">{{ isYearPicker ? $t('labels.selectYear') : pageDate.year() }}</span>
<NcTooltip>
<NcButton size="small" type="secondary" @click="paginate('next')">
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
</NcButton>
<template #title>
<span>{{ $t('labels.next') }}</span>
</template>
</NcTooltip>
</div>
<div class="rounded-y-xl max-w-[350px]">
<div class="grid grid-cols-4 gap-2 py-3">
<template v-if="!isYearPicker">
<span
v-for="(month, id) in months"
:key="id"
:class="{
'!bg-gray-200 !font-bold !text-brand-500': isMonthSelected(month),
}"
class="h-9 rounded-lg flex items-center font-medium justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-900 cursor-pointer"
@click="selectedDate = month"
>
{{ month.format('MMM') }}
</span>
</template>
<template v-else>
<span
v-for="(year, id) in years"
:key="id"
:class="{
'!bg-gray-200 !font-bold !text-brand-500': compareYear(year, selectedDate),
}"
class="h-9 rounded-lg flex items-center font-medium justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-900 cursor-pointer"
@click="selectedDate = year"
>
{{ year.format('YYYY') }}
</span>
</template>
</div>
</div>
</div>
</template>
<style lang="scss" scoped></style>