mailbox-outer-admin-vue/src/components/HolidayList.vue

<template>
    <div class="app-container" v-loading="loading">
        <el-form :inline="true" style="display: flex; justify-content: center;margin-top: 10px;margin-right: 70px;">
            <el-form-item label="请选择年份">
                <el-date-picker type="year" v-model="currenYear" placeholder="请选择年份" value-format="YYYY"></el-date-picker>
            </el-form-item>
            <el-button type="primary" @click="searchHoliday">查询节假日</el-button>
            <el-button type="primary" @click="refreshHoliday">同步节假日</el-button>
        </el-form>
        <el-scrollbar class="scrollbar-container">
            <el-row>
                <el-col v-for="(item, index) in   defaultCals  " :key="item.cal" :span="7"
                    style="margin-right: 10px;margin-left: 50px;">
                    <el-card shadow="hover" style="margin-bottom: 20px;">
                        <el-calendar v-model="item.cal" class="holiday" style="pointer-events:none">
                            <!-- <el-calendar v-model="item.cal" class="holiday"> -->
                            <template #date-cell="{ data }">
                                <div class="holiday-cell" v-show="data.type === 'current-month'"
                                    :id="index + '-' + data.day"
                                    :class="{ 'is-holiday': ifHoliday(data.day) }, { 'is-adjust': ifAdjustDay(data.day) }">
                                    {{ data.day.split('-')[2] }}
                                    <span class="holiday-text">{{ ifHoliday(data.day) ? '休' : '' }}</span>
                                    <span class="adjust-text">{{ ifAdjustDay(data.day) ? '班' : '' }}</span>
                                    <span class="content-text">{{ dayContent(data.day) }}</span>
                                </div>
                            </template>
                        </el-calendar>
                    </el-card>
                </el-col>
            </el-row>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus'
import axios from 'axios';

const currenYear = ref('');
const loading = ref(true);
const defaultCals = ref([]);
const dayType = ref({
    date: '',
    type: ''
});

const getDateData = () => {
    axios.get('/api/outer/holiday/show-holiday').then(res => {
        dayType.value = res.data;
        loading.value = false;
        console.log(dayType.value);
    }).catch(err => {
        console.log(err);
    });
}

onBeforeMount(() => {
    getDateData();
})


onMounted(() => {
    let nowYear = new Date().getFullYear();
    initCalendar(nowYear);
    loading.value = false;
});

const initCalendar = (year) => {
    const months = [];
    for (let i = 0; i < 12; i++)
        months.push({ cal: new Date(year, i, 1) });
    defaultCals.value = months;
    // console.log(defaultCals.value);
};

const searchHoliday = () => {
    loading.value = true;
    let nowYear = new Date().getFullYear();
    console.log(currenYear.value + '==' + nowYear);
    if (currenYear.value === String(nowYear)) {
        getDateData();
        setTimeout(() => {
            loading.value = false;
        }, 1000);
    } else {
        ElMessage.info('其他年份尚未拥有数据')
        loading.value = false;
    }
};


const refreshHoliday = () => {
    loading.value = true;
    axios.post('/api/outer/holiday/refresh-holiday', { year: currenYear.value }, { headers: { 'Content-Type': 'application/json' } }).then(res => {
        // console.log(res.data);
        dayType.value = res.data.holidayList;
        setTimeout(() => {
            loading.value = false;
        }, 1000);
        ElMessage.success('同步成功')
    }).catch(err => {
        ElMessage.error('同步失败')
        console.log(err);
    });
};

const ifHoliday = (day) => {
    // console.log('Comparing dayType.value.date:', dayType.value.date, 'with day:', day);
    for (let i = 0; i < dayType.value.length; i++)
        if (dayType.value[i].date === day && dayType.value[i].holidayFlag === 'Y')
            return true;
    return false;
};

const ifAdjustDay = (day) => {
    // console.log('Comparing dayType.value.date:', dayType.value.date, 'with day:', day);
    for (let i = 0; i < dayType.value.length; i++)
        if (dayType.value[i].date === day && dayType.value[i].holidayFlag === 'N')
            return true;
    return false;
};

// const ifCurrentDay = (day, index) => {
//     var today = new Date();
//     // 获取当前时间的年、月和日
//     var year = today.getFullYear();
//     var month = ('0' + (today.getMonth() + 1)).slice(-2); // 月份需要加1，并且确保两位数字
//     var dayNumber = ('0' + today.getDate()).slice(-2); // 确保两位数字

//     // if (String(year) === currenYear && String(index + 1) === month && dayNumber == String(day))
//     if (String(year) === currenYear && '02' === month && '11' == String(day))
//         return true;
//     else
//         return false;
// };

const dayContent = (day) => {
    // console.log('Comparing dayType.value.date:', dayType.value.date, 'with day:', day);
    for (let i = 0; i < dayType.value.length; i++)
        if (dayType.value[i].date === day)
            return dayType.value[i].detail;
    return '';
};
</script>

<style>
.holiday .el-calendar__button-group {
    display: none;
}

.select-month .el-calendar__button-group {
    display: none;
}

.holiday .el-calendar-day {
    padding: 1px;
    width: 100%;
    height: 40px;
    background: #FFF;
}

.select-month .el-calendar-day {
    padding: 1px;
    width: 100%;
}

.holiday-cell {
    position: relative;
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: center;
}

.holiday-text {
    position: absolute;
    top: 15%;
    left: 85%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #5e72cc;
}

.adjust-text {
    position: absolute;
    top: 15%;
    left: 85%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #5e72cc;
}

.content-text {
    position: absolute;
    top: 70%;
    left: 55%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    white-space: nowrap;
}

.is-holiday {
    border-radius: 5px;
    background: linear-gradient(145deg, #a7d2b3, #c6f9d5);
    box-shadow: 5px 5px 10px #90b69b,
        -5px -5px 10px #e2fff3;
}

.is-adjust {
    border-radius: 5px;
    background: linear-gradient(145deg, #d9a2a2, #ffc1c1);
    box-shadow: 5px 5px 10px #bc8c8c,
        -5px -5px 10px #ffdcdc;
}

.scrollbar-container {
    height: calc(100vh - 150px);
}

/* .is-today {
    border-radius: 5px;
    background: linear-gradient(145deg, #d9a2a2, #ffc1c1);
    box-shadow: 5px 5px 10px #bc8c8c,
        -5px -5px 10px #ffdcdc;
} */
</style>