rax-medical/src/views/home/week-calendar.vue

<template>
    <div class="week-calendar-part">
        <div class="header-box">
            <el-icon @click="setWeek('up')">
                <ArrowLeft />
            </el-icon>
            <div class="date-block">
                <span @click="handleOpen">{{ formatDate(month) }}</span>
                <el-date-picker ref="datePicker" popper-class="week-calendar-picker" class="month-date-pick" v-model="month"
                    type="month" @change="setWeek()" />
            </div>
            <el-icon @click="setWeek('down')">
                <ArrowRight />
            </el-icon>
        </div>
        <div class="week-box">
            <table>
                <tr class="text1-color">
                    <th v-for="item in weekEn" :key="item">{{ item }}</th>
                </tr>
                <tr v-if="week.length > 0" class="swing_flip_1">
                    <td v-for="item in week" :key="item" :class="{
                        'record-mark': recordWeek.some((r: any) => dateFormater('yyyy-MM-dd', r.date) === dateFormater('yyyy-MM-dd', item)),
                        'active': dateFormater('yyyy-MM-dd', item) === dateFormater('yyyy-MM-dd', currentDate)
                    }">
                        <span :class="{
                            'text2-color': item.getDate() > week[6].getDate()
                        }" @click="setDate(item)">{{ dateFormater('dd', item) }}</span>
                    </td>
                </tr>
            </table>
        </div>
        <el-button text icon="Plus" style="width: 100%;margin-bottom: 5px;" @click="addRecord()">新建</el-button>
        <div class="record-box move_2">
            <el-empty v-if="record.length < 1" :description="dateFormater('MM月dd日', currentDate) + '没有任何记录'" style="padding: 0;" />
            <div class="record-item" v-for="(item, index) in record" :key="'record-' + index" @click="viewRecord(item)">
                <div class="icon-box">
                    <i class="icon-RectangleCopy"></i>
                </div>
                <div class="text-box">
                    <p class="main-color" style="font-weight: 600;cursor: pointer;">{{
                        item.title }}</p>
                    <p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p>
                </div>
                <el-icon class="remove-icon" @click.stop="remoteRecord(item, index)">
                    <Close />
                </el-icon>
            </div>
        </div>

        <el-dialog v-model="isRecordDialog" title="详情">
            <RecordForm ref="recordFormRef" @close="isRecordDialog = false" @saveData="saveData" />
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import RecordForm from './record-form.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { dateFormater, getFirstDayOfWeek, getDays } from '@/utils/date-util';


const monthEn = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
const weekEn = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

const datePicker = ref()
const recordFormRef = ref()
const isRecordDialog = ref(false)
const month = ref(new Date())
const week = ref([] as any)
const recordWeek = ref([] as any)
const record = ref([] as any)
const currentDate = ref<Date>(new Date())

setWeek()

function formatDate(date: any) {
    return monthEn[new Date(date).getMonth()] + '月 ' + new Date(date).getFullYear()
}
/**
 * 设置周
 * @param type 
 * 获取一周的数据，然后给每天打 record-mark 标记
 */
function setWeek(type?: 'up' | 'down') {
    const date = (type && getDays(month.value, type === 'up' ? -7 : 7)) || month.value
    currentDate.value = date
    const e = date
    week.value = []
    recordWeek.value = []
    recordWeek.value = [
        {
            id: '1',
            title: '月度会议',
            type: '',
            state: '',
            date: getFirstDayOfWeek(e, 1),
            time: getFirstDayOfWeek(e, 1),
            content: '测试测试'
        },
        {
            id: '2',
            title: '手术提醒',
            type: '',
            state: '',
            date: getFirstDayOfWeek(e, 4),
            time: getFirstDayOfWeek(e, 4),
            content: '测试测试'
        }
    ]
    // 定时器等待动画执行
    setTimeout(() => {
        for (let i = 0; i < 7; i++) {
            week.value.push(getFirstDayOfWeek(date, i + 1))
        }
    }, 0)
    setDate(currentDate.value)
}

const handleOpen = () => {
    datePicker.value.handleOpen()
}
function setDate(e: Date) {
    currentDate.value = e
    record.value = recordWeek.value.filter((r: any) => dateFormater('yyyy-MM-dd', r.date) === dateFormater('yyyy-MM-dd', e))
}
const addRecord = () => {
    const e = currentDate.value || new Date()
    isRecordDialog.value = true
    setTimeout(() => {
        recordFormRef.value.resetData()
        recordFormRef.value.formData.date = e
        recordFormRef.value.formData.isRemoveBtn = false
    }, 0)
}
const viewRecord = (e: any) => {
    isRecordDialog.value = true
    setTimeout(() => {
        recordFormRef.value.resetData()
        recordFormRef.value.formData = Object.assign({}, recordFormRef.value.formData, e)
        recordFormRef.value.formData.isRemoveBtn = true
        console.log(recordFormRef.value.formData)
    }, 0)
}
const remoteRecord = (item: any, index: number) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage.success('删除成功！')
        recordWeek.value = recordWeek.value.filter((r: any) => r.id !== item.id)
        setDate(item.date)
    }).catch(() => { })
}
const saveData = (e: any) => {
    recordWeek.value.push(e)
    setDate(e.date)
}
</script>

<style lang='scss' scoped>
.week-calendar-part {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .header-box {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-icon {
            cursor: pointer;
        }

        .date-block {
            position: relative;

            &>span {
                cursor: pointer;
            }

            :deep(.month-date-pick) {
                position: absolute;
                width: 0;
                height: 0;
                bottom: 0;
                left: 50%;
                overflow: hidden;
            }
        }
    }

    .week-box {
        width: 100%;
        height: 80px;
        border-top: 1px solid $border-color;

        table {
            width: 100%;
            height: 80px;
            text-align: center;

            tr {
                td {
                    font-weight: 600;
                    color: black;

                    span {
                        cursor: pointer;
                        width: 30px;
                        height: 30px;
                        border: 2px solid transparent;
                        border-radius: 50%;
                        display: flex;
                        margin: 0 auto;
                        justify-content: center;
                        align-items: center;
                        transition: all .3s;

                        &:hover {
                            background: rgba($main-color, .1);
                            transition: all .3s;
                        }
                    }
                }

                .record-mark {
                    color: $main-color;

                    span {
                        border-color: $main-color;
                    }
                }

                .active {
                    color: white;

                    span {
                        color: white;
                        border-color: $main-color;
                        background: $main-color;

                        &:hover {
                            background: rgba($main-color, .8);
                        }
                    }
                }
            }
        }
    }

    .record-box {
        width: 100%;
        height: calc(100% - 170px);
        overflow-x: hidden;
        overflow-y: auto;

        .record-item {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            padding: 10px 20px;
            transition: all .6s;

            &:hover {
                background: rgba($main-color, .1);
                transition: all .6s;
            }

            .icon-box {
                flex-shrink: 0;
                width: 50px;
                height: 50px;
                border-radius: 8px;
                background: rgba($main-color, .1);
                color: $main-color;
                font-size: 32px;
                text-align: center;
                line-height: 50px;
                margin-right: 15px;
            }

            .remove-icon {
                cursor: pointer;
                position: absolute;
                font-size: 20px;
                top: calc(50% - 10px);
                right: 20px;
                color: $text3-color;
            }
        }
    }
}
</style>