forked from opentiny/tiny-vue
64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<tiny-calendar-view
|
|
ref="calendar"
|
|
v-model="selectedDates"
|
|
:multi-select="true"
|
|
:year="2023"
|
|
:month="5"
|
|
:modes="[]"
|
|
:set-day-bg-color="setDayBgColor"
|
|
@selected-date-change="selectedDateChange"
|
|
>
|
|
<template #tool>
|
|
<tiny-button type="primary" @click="setDays('workingDays')" class="mr-2">工作日</tiny-button>
|
|
<tiny-button type="success" @click="setDays('offDays')" class="mr-2">休息日</tiny-button>
|
|
<tiny-button type="warning" @click="setDays('holidays')">节假日</tiny-button>
|
|
</template>
|
|
</tiny-calendar-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { CalendarView as TinyCalendarView, Button as TinyButton, Modal } from '@opentiny/vue'
|
|
|
|
const workingDays = ref([])
|
|
const offDays = ref([])
|
|
const holidays = ref([])
|
|
const selectedDate = ref([])
|
|
const selectedDates = ref([])
|
|
|
|
const map = {
|
|
workingDays,
|
|
offDays,
|
|
holidays
|
|
}
|
|
|
|
const setDays = (type) => {
|
|
if (!selectedDate.value.length) {
|
|
Modal.message({ message: '请选择日期', status: 'info' })
|
|
return
|
|
}
|
|
map[type].value.push(...selectedDate.value)
|
|
selectedDates.value = []
|
|
selectedDate.value = []
|
|
}
|
|
|
|
const setDayBgColor = (date) => {
|
|
if (workingDays.value.includes(date)) {
|
|
return 'blue'
|
|
}
|
|
if (offDays.value.includes(date)) {
|
|
return 'green'
|
|
}
|
|
if (holidays.value.includes(date)) {
|
|
return 'yellow'
|
|
}
|
|
|
|
return ''
|
|
}
|
|
|
|
const selectedDateChange = (date) => {
|
|
selectedDate.value = date
|
|
}
|
|
</script>
|