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': record.some((e: any) => new Date(e.time).getDate() === item.getDate()) }">
                        <span :class="{
                            'text2-color': item.getDate() > week[6].getDate()
                        }" @click="addRecord(item)">{{ dateFormater('dd', item) }}</span>
                    </td>
                </tr>
            </table>
        </div>
        <div v-if="week.length > 0" class="record-box move_2">
            <div class="record-item" v-for="(item, index) in record" :key="'record-' + index">
                <div class="icon-box">
                    <i class="icon-RectangleCopy"></i>
                </div>
                <div class="text-box">
                    <p class="main-color" style="font-weight: 600;cursor: pointer;" @click="viewRecord(item)">{{ item.title}}</p>
                    <p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p>
                </div>
            </div>
        </div>

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

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import RecordForm from './record-form.vue';
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 record = ref([] as any)

setWeek()

function formatDate(date: any) {
    return monthEn[new Date(date).getMonth()] + '月 ' + new Date(date).getFullYear()
}
function setWeek(type?: 'up' | 'down') {
    const date = (type && getDays(month.value, type === 'up' ? -7 : 7)) || month.value
    week.value = []
    record.value = []
    setTimeout(() => {
        for (let i = 0; i < 7; i++) {
            week.value.push(getFirstDayOfWeek(date, i + 1))
        }
        record.value = [
            {
                id: '1',
                title: '月度会议',
                type: '',
                state: '',
                date: getFirstDayOfWeek(date, 1),
                time: new Date('2023/12/16 16:15:00'),
                content: '测试测试'
            },
            {
                id: '2',
                title: '手术提醒',
                type: '',
                state: '',
                date: getFirstDayOfWeek(date, 4),
                time: new Date('2023/12/16 16:15:00'),
                content: '测试测试'
            }
        ]
    }, 0)
}

const handleOpen = () => {
    datePicker.value.handleOpen()
}
const addRecord = (e: 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)
}
</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, .2);
                            transition: all .3s;
                        }
                    }
                }

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

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

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

        .record-item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 20px;

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