Vue【原创】基于【日历组件Calendar】的【节假日管理】功能整合

基于日历组件（lilo-calendar）的节假日管理功能整合。

效果图：

 

完整代码：

<template>
    <div class="root-calendar">
        <div class="control-wrapper">
            <div class="year-wrapper">
                <el-button v-for="(year, index) in years" :key="index" :type="year.isCurrent ? 'primary' : ''"
                    @click="changeYear(year)">
                    {{ year.value }}年
                </el-button>
            </div>
            <div class="btn-wrapper">
                <el-button type="primary" icon="el-icon-check" @click="submit">设置节假日</el-button>
            </div>
        </div>
        <div class="calendar-wrapper" :style="{ height: `${calendarHeight}px` }">
            <div class="calendar" v-for="(calendar, index) in calendars" :key="index">
                <lilo-calendar :default-selected-dates="calendar.selectedDates" :current-date="calendar.date" can-select
                    @date-selected="dateSelected">
                </lilo-calendar>
            </div>
        </div>
    </div>
</template>

<script>
    import _ from 'lodash';
    // import {
    //     get1year, //业务接口，获取初始化的整年节假日
    //     set1year //业务接口，设置正年的节假日
    // } from '@/api/khxt/holidays/index.js';

    export default {
        data() {
            return {
                years: [],
                currentYear: new Date().getFullYear(),
                calendars: [],
                calendarHeight: 0,
            }
        },
        created() {
            this.defaultSelectedDates = []
            this.selectedDates = []
            this.tempSelectedDates = []
            
            this.years = this.createYears();
            this.calendars = this.createDates(new Date().getFullYear())
        },
        mounted() {
            this.calendarHeight = window.document.body.clientHeight - 150;
            window.addEventListener('resize', () => {
                this.calendarHeight = window.document.body.clientHeight - 150;
            });
            
            this.getHolidays();
        },
        computed: {},
        methods: {
            getHolidays() {
                this.tempSelectedDates = []
                // get1year({ year: this.currentYear }).then(res => {
                //     const data = res.data
                //     let result = []
                //     data.forEach(d => {
                //         const { date } = d
                //         result.push(date)
                //     })
                //     this.defaultSelectedDates = result
                // });

                //静态测试数据，应该从业务接口获取
                this.defaultSelectedDates = [
                    "2023-01-01", "2023-01-02", "2023-01-07", "2023-01-08", "2023-01-14", "2023-01-15", "2023-01-21",
                    "2023-01-22", "2023-01-23", "2023-01-24", "2023-01-25", "2023-01-26", "2023-01-27", "2023-02-04",
                    "2023-02-05", "2023-02-11", "2023-02-12", "2023-02-18", "2023-02-19", "2023-02-25", "2023-02-26",
                    "2023-03-04", "2023-03-05", "2023-03-11", "2023-03-12", "2023-03-18", "2023-03-19", "2023-03-25",
                    "2023-03-26", "2023-04-01", "2023-04-02", "2023-04-05", "2023-04-08", "2023-04-09", "2023-04-15",
                    "2023-04-16", "2023-04-22", "2023-04-29", "2023-04-30", "2023-05-01", "2023-05-02", "2023-05-03",
                    "2023-05-07", "2023-05-13", "2023-05-14", "2023-05-20", "2023-05-21", "2023-05-27", "2023-05-28",
                    "2023-06-03", "2023-06-04", "2023-06-10", "2023-06-11", "2023-06-17", "2023-06-18", "2023-06-22",
                    "2023-06-23", "2023-06-24", "2023-07-01", "2023-07-02", "2023-07-08", "2023-07-09", "2023-07-15",
                    "2023-07-16", "2023-07-22", "2023-07-23", "2023-07-29", "2023-07-30", "2023-08-05", "2023-08-06",
                    "2023-08-12", "2023-08-13", "2023-08-19", "2023-08-20", "2023-08-26", "2023-08-27", "2023-09-02",
                    "2023-09-03", "2023-09-09", "2023-09-10", "2023-09-16", "2023-09-17", "2023-09-23", "2023-09-24",
                    "2023-09-29", "2023-09-30", "2023-10-01", "2023-10-02", "2023-10-03", "2023-10-04", "2023-10-05",
                    "2023-10-06", "2023-10-14", "2023-10-15", "2023-10-21", "2023-10-22", "2023-10-28", "2023-10-29",
                    "2023-11-04", "2023-11-05", "2023-11-11", "2023-11-12", "2023-11-18", "2023-11-19", "2023-11-25",
                    "2023-11-26", "2023-12-02", "2023-12-03", "2023-12-09", "2023-12-10", "2023-12-16", "2023-12-17",
                    "2023-12-23", "2023-12-24", "2023-12-30", "2023-12-31"
                ]
                //把整年的选中日期分配到每个月，这个数据结构的组装过程应该在服务端构建更好
                this.calendars.forEach(calendar => {
                    calendar.selectedDates = []
                    this.defaultSelectedDates.forEach(dsd => {
                        if(dsd.indexOf(calendar.date) !== -1) {
                            calendar.selectedDates.push(dsd)
                        }
                    })
                })
                // console.log(this.calendars)
            },
            createYears() {
                let result = []
                const dt = new Date()
                const curYear = dt.getFullYear()
                for (let i = 5; i >= -1; i--) {
                    result.push({
                        value: curYear - i,
                        isCurrent: i === 0
                    })
                }
                return result
            },
            createDates(curYear) {
                let result = []
                for (let i = 1; i <= 12; i++) {
                    result.push({
                        date: curYear + '-' + (i < 10 ? `0${i}` : i)
                    })
                }
                return result
            },
            changeYear(year) {
                this.years.forEach(y => {
                    y.isCurrent = false;
                })
                year.isCurrent = true;

                this.currentYear = year.value;

                this.calendars = this.createDates(year.value)

                this.getHolidays();
            },
            dateSelected(val) {
                //我这边服务端需要全量返回，包括默认选中的内容，你也可以根据业务自己构建返回数据
                if (val.selectedDates) {
                    this.tempSelectedDates = this.defaultSelectedDates.concat(this.tempSelectedDates).concat(val
                        .selectedDates)
                    this.tempSelectedDates = Array.from(new Set(this.tempSelectedDates));
                }
                if (val.removeDate) {
                    this.tempSelectedDates.splice(this.tempSelectedDates.indexOf(val.removeDate), 1);
                    const index = this.defaultSelectedDates.indexOf(val.removeDate);
                    if (index !== -1) {
                        this.defaultSelectedDates.splice(index, 1);
                    }
                }
                let result = []
                this.tempSelectedDates.forEach(sd => {
                    result.push({
                        date: sd
                    })
                })
                this.selectedDates = result
            },
            submit: _.debounce(function() {
                this.$confirm('是否确认提交', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        const param = {
                            year: this.currentYear,
                            holidays: this.selectedDates
                        }
                        // set1year(param).then(res => {
                        //     this.$notify.success({
                        //         title: '通知',
                        //         message: res.message
                        //     });

                        //     this.getHolidays();
                        // })
                        //打印最终提交结果数据
                        console.log(param);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
            }, 300),
        }
    };
</script>

<style lang="scss" scoped>
    .root-calendar {
        display: flex;
        flex-direction: column;

        .control-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;

            .year-wrapper {
                flex: 1;
                padding: 10px;
            }

            .btn-wrapper {
                flex: 0 0 100px;
                padding: 10px;
            }
        }

        .calendar-wrapper {
            // height: calc(100vh - 150px);
            overflow-y: auto;
            // flex: 1;
            display: flex;
            flex-wrap: wrap;

            .calendar {
                flex: 0 0 33.333%;
                padding: 10px;
            }
        }
    }
</style>

 

查看lilo-calendar日历组件请移步我的另外一个帖子：https://www.cnblogs.com/loveFlex/p/17662243.html