用moment写日历

<style scoped>
    .calendar {
        width: 308px;
        padding-left: 40px;
    }

    .title {
        border-bottom: 1px solid rgba(0, 0, 0, .09);
        margin-bottom: 12px;
    }

    .week {
        flex-wrap: wrap;
    }

    .week span {
        width: 44px;
        position: relative;
    }

    .week span {
        box-sizing: border-box;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .work-day {
        background: rgba(82, 196, 26, .1);
    }

    .work-day:hover {
        border: 1px solid rgba(82, 196, 26, 1);
    }

    .not-work-day {
        background: rgba(255, 102, 0, .1);
    }

    .not-work-day:hover {
        border: 1px solid rgba(255, 102, 0, 1);
    }

    .legend {
        flex-wrap: wrap;
    }

    .legend span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin: 0 8px;
    }

    .width {
        width: 44px;
        height: 44px;
    }

    .calendar-left {
        width: 500px;
        padding: 24px;
        border-right: 1px solid #E4E7ED;
    }

    .calendar-left-f {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        margin-right: 16px;
    }

    .calendar-left-f-button > div {
        width: 84px;
        height: 36px;
        margin-right: 16px;
        margin-bottom: 16px;
        border: 1px solid rgba(236, 236, 236, 1);
        text-align: center;
        line-height: 34px;
        color: rgba(200, 200, 200, 1);
        font-size: 16px;
        cursor: pointer;
    }

    .calendar-left-f-button > div.week-active {
        border-color: transparent;
        background: #FFF2EA;
        color: #F60;
    }

    .calendar-left-f-button > div:not(.week-active):hover {
        color: #838383;
    }

    .calendar-left-f-button > div:hover {
        border-color: rgba(255, 102, 0, .5);
    }

    .calendar-left-s-time {
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        margin-right: 16px;
    }

    .calendar-left-s-time p {
        margin-bottom: 10px;
    }

    >>> .el-input__inner {
        color: rgba(0, 0, 0, .65);
    }
</style>

<template>
    <div>
        <breadcrumb class="m-16">
            <el-breadcrumb-item>企业日历</el-breadcrumb-item>
        </breadcrumb>
        <div class="mt16 bf" style="display: flex; padding: 24px;">
            <div class="calendar-left">
                <div class="calendar-left-f">
                    <h3 class="f16 c85">工作日</h3>
                    <p class="c25">已设置 <span>{{ additionalDay }}</span> 个额外工作日</p>
                </div>
                <el-row class="calendar-left-f-button">
                    <el-col v-for="(i,index) in weekArrLeft" :key="index" :class="i.flag&&'week-active'">
                        <p @click="weekHandle(i,index)">{{ i.value }}</p>
                    </el-col>
                </el-row>
                <div class="calendar-left-s" style="margin-top: 40px;">
                    <h3 class="f16 c85">工作时间</h3>
                    <div class="calendar-left-s-time">
                        <div class="calendar-left-s-time-f">
                            <p class="c45">上午</p>
                            <el-time-picker
                                @change="num++"
                                v-model="startWorkTime"
                                value-format="HH:mm:ss"
                                placeholder="任意时间点"
                            />
                        </div>
                        <div>
                            <p class="c45">下午</p>
                            <el-time-picker
                                @change="num++"
                                v-model="endWorkTime"
                                value-format="HH:mm:ss"
                                placeholder="任意时间点"
                            />
                        </div>
                    </div>
                    <p style="margin-bottom: 40px;" class="c25">
                        <i class="el-icon-info" style="margin-right: 7px;" />温馨提示：调整企业日历后，将影响平台用户添加工时的核准规则。
                    </p>
                    <div class="tr mr16">
                        <el-button type="primary" :disabled="!num" @click="btnYes">确 定</el-button>
                    </div>
                </div>
            </div>
            <div class="calendar" style="padding: 15px 29px;">
                <div class="title flex_ai_c c65 flex_jc_b p12_0">
                    <i class="el-icon-d-arrow-left m0_12 hover" @click="prevYear" />
                    <i class="el-icon-arrow-left hover" @click="prevMonth" />
                    <span class="flex1 flex_center c85 fw">{{ getDateFormat }}</span>
                    <i class="el-icon-arrow-right hover" @click="nextMonth" />
                    <i class="el-icon-d-arrow-right m0_12 hover" @click="nextYear" />
                </div>
                <div class="">
                    <div class="week flex_ai_c c85">
                        <span v-for="i in weekArr" :key="i" class="flex_center width">{{ i }}</span>
                    </div>
                    <div class="week flex_ai_c f16 c65">
                        <span v-for="i in getFirstDayInfo" :key="i" class="width" />
                        <span v-for="i in monthDays"
                              :key="i.date"
                              :class="['width date flex_center', i.isWorkDay ? 'work-day' : 'not-work-day'] "
                              @click="changeWorkDay(i)"
                        >{{ i.day }}</span>
                    </div>
                </div>
                <div class="flex_center legend p12_0 f14">
                    <em v-for="i in legend" :key="i.text" class="c65 p0_12 flex_ai_c"><span
                        :style="{background:i.color}"
                    />{{ i.text }}</em>
                </div>
                <p style="margin-bottom: 40px; text-align: center;" class="c25">
                    <span>点击日期即可切换工作日/休息日</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from "moment"

    export default {
        data() {
            return {
                startWorkTime: '09:00:00',//开始工作的时间
                endWorkTime: '18:00:00',//结束工作的时间
                loading: false,
                weekArrLeft: [
                    {value: "星期一", flag: false, index: 1},
                    {value: "星期二", flag: false, index: 2},
                    {value: "星期三", flag: false, index: 3},
                    {value: "星期四", flag: false, index: 4},
                    {value: "星期五", flag: false, index: 5},
                    {value: "星期六", flag: false, index: 6},
                    {value: "星期日", flag: false, index: 7},
                ],
                weekArr: ["一", "二", "三", "四", "五", "六", "日"],
                legend: [{text: "工作日", color: '#52C41A'}, {text: "休息日", color: '#ff6600'}],
                date: moment(this.yearMonth).format("YYYY-MM"),
                num: 0,
                resItems: [], //返回的特殊项的数组
            }
        },
        computed: {
            additionalDay() {
                return this.resItems.filter(v => v.type == 1 && !this.extraWorkDay(v.day)).length
            },
            monthDays() {
                let dateArr = [];
                for (var i = 1; i <= this.dataLocal.daysInMonth(); i++) {  //daysInMonth循环当月的天数
                    let date = this.dataLocal.date(i);  //当月第几天
                    let dateFormat = date.format("YYYY-MM-DD 00:00:00");
                    let repeatDay = this.resItems.find(v => v.day == dateFormat);  //查找后台的特殊项是否包含当前循环的这一天
                    var obj = {
                        day: i < 10 ? '0' + i : '' + i,
                        isWorkDay: repeatDay ? repeatDay.type == 1 : this.extraWorkDay(date),
                        date: dateFormat
                    };
                    dateArr.push(obj);
                }
                return dateArr
            },
            getFirstDayInfo() {  //每个月第一天的位置
                return this.dataLocal.weekday()
            },
            getDateFormat() {
                return this.dataLocal.format("YYYY年MM月")
            },
            dataLocal() {  //当天格式化为中国格式
                return moment(this.date).locale("zh_CN")
            }
        },
        mounted() {
            this.getList()
        },
        methods: {

            //点击特殊项的回调
            changeWorkDay(i) {
                this.num++
                const type = i.isWorkDay ? 2 : 1

                let repeatDay = this.resItems.find(v => v.day == i.date);
                if (repeatDay) {
                    repeatDay.type = type
                } else {
                    this.resItems.push({day: i.date, type: type})
                }
            },
            //确定按钮的回调
            btnYes() {
                this.num = 0;
                this.$c_ajax.post("/calendar/save", {
                    workDay: this.weekArrLeft.filter(v => v.flag).map(v => v.index).join(","),
                    startWorkTime: this.startWorkTime,
                    endWorkTime: this.endWorkTime,
                    items: this.resItems
                }).then((res) => {
                    this.loading = false;
                    res.state ? this.$message.success(res.msg) : this.$message.error(res.msg);
                });
            },

            //工作日回调
            weekHandle(i, index) {
                this.num++
                i.flag = !i.flag;
            },
            getList() {
                this.loading = true;
                this.$c_ajax.post("/calendar/all").then((res) => {
                    this.loading = false;
                    for (let i of res.data.workDay.split(',')) {
                        this.weekArrLeft[i - 1].flag = true
                    }
                    this.startWorkTime = res.data.startWorkTime;
                    this.endWorkTime = res.data.endWorkTime;
                    this.resItems = res.data.items

                });
            },
            extraWorkDay(date) {  //是不是额外工作日
                let DayOfWeek = moment(date).locale("zh_CN").format("d") - 1;
                return this.weekArrLeft[DayOfWeek == -1 ? 6 : DayOfWeek].flag;
            },
            prevMonth() {
                this.date = this.dataLocal.subtract(1, "M").format("YYYY-MM");
            },
            nextMonth() {
                this.date = this.dataLocal.add(1, "M").format("YYYY-MM");
            },
            prevYear() {
                this.date = this.dataLocal.subtract(1, "y").format("YYYY-MM");
            },
            nextYear() {
                this.date = this.dataLocal.add(1, "y").format("YYYY-MM");
            }
        }

    }
</script>