|
@@ -28,6 +28,9 @@
|
|
<el-calendar v-model="calendarValue">
|
|
<el-calendar v-model="calendarValue">
|
|
<template #date-cell="{ data }">
|
|
<template #date-cell="{ data }">
|
|
<div class="calendar-cell" @dblclick="handleDayDblClick(data.day)">
|
|
<div class="calendar-cell" @dblclick="handleDayDblClick(data.day)">
|
|
|
|
+ <!-- 红点标记 -->
|
|
|
|
+ <div v-if="showRedDot(data.day)" class="red-dot"></div>
|
|
|
|
+
|
|
<div class="checkbox-status">
|
|
<div class="checkbox-status">
|
|
<el-checkbox
|
|
<el-checkbox
|
|
:label="formatMonthDay(data.day)"
|
|
:label="formatMonthDay(data.day)"
|
|
@@ -135,7 +138,7 @@ const addHandle = () => {
|
|
addOrUpdateHandle(undefined, undefined, selectedDates.value);
|
|
addOrUpdateHandle(undefined, undefined, selectedDates.value);
|
|
})
|
|
})
|
|
.catch(() => {
|
|
.catch(() => {
|
|
- // 用户取消,无需处理
|
|
|
|
|
|
+ // 取消
|
|
});
|
|
});
|
|
} else {
|
|
} else {
|
|
// 无冲突,直接新增
|
|
// 无冲突,直接新增
|
|
@@ -156,6 +159,7 @@ const addOrUpdateHandle = (id?: number, date?: string, dates?: string[]) => {
|
|
|
|
|
|
const handleDayDblClick = (day: string) => {
|
|
const handleDayDblClick = (day: string) => {
|
|
const schedule = state.dataList?.find(item => item.scheduleDate === day);
|
|
const schedule = state.dataList?.find(item => item.scheduleDate === day);
|
|
|
|
+
|
|
if (schedule && schedule.id) {
|
|
if (schedule && schedule.id) {
|
|
// 已有排班记录,修改
|
|
// 已有排班记录,修改
|
|
addOrUpdateHandle(schedule.id);
|
|
addOrUpdateHandle(schedule.id);
|
|
@@ -164,6 +168,39 @@ const handleDayDblClick = (day: string) => {
|
|
addOrUpdateHandle(undefined, day);
|
|
addOrUpdateHandle(undefined, day);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
+//红点
|
|
|
|
+const showRedDot = (date: string): boolean => {
|
|
|
|
+ const today = new Date();
|
|
|
|
+ const todayStr = today.toISOString().split("T")[0];
|
|
|
|
+
|
|
|
|
+ console.log("cell date:", date, "fake today:", todayStr);
|
|
|
|
+ if (date !== todayStr) return false;
|
|
|
|
+
|
|
|
|
+ const year = today.getFullYear();
|
|
|
|
+ const month = today.getMonth(); // 0-11
|
|
|
|
+
|
|
|
|
+ // 本月最后一天
|
|
|
|
+ const lastDateOfMonth = new Date(year, month + 1, 0);
|
|
|
|
+ console.log(lastDateOfMonth);
|
|
|
|
+
|
|
|
|
+ const lastDayWeekDay = lastDateOfMonth.getDay();
|
|
|
|
+
|
|
|
|
+ // 最后一周的周一
|
|
|
|
+ const daysToMonday = lastDayWeekDay === 0 ? 6 : lastDayWeekDay - 1;
|
|
|
|
+ const lastWeekMonday = new Date(lastDateOfMonth);
|
|
|
|
+ lastWeekMonday.setDate(lastDateOfMonth.getDate() - daysToMonday);
|
|
|
|
+
|
|
|
|
+ if (today >= lastWeekMonday && today <= lastDateOfMonth) {
|
|
|
|
+ const nextYearMonth = new Date(year, month + 1).toISOString().slice(0, 7);
|
|
|
|
+ const hasNextMonthSchedule = state.dataList?.some(
|
|
|
|
+ item => item.yearMonth === nextYearMonth
|
|
|
|
+ );
|
|
|
|
+ return !hasNextMonthSchedule;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return false;
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
|
|
|
|
|
|
const handleDateToggle = (day: string, checked: boolean) => {
|
|
const handleDateToggle = (day: string, checked: boolean) => {
|
|
@@ -259,6 +296,7 @@ const reviewHandle = (id?: string) => {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ position: relative;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
@@ -287,6 +325,15 @@ const reviewHandle = (id?: string) => {
|
|
-webkit-user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
}
|
|
|
|
+.red-dot {
|
|
|
|
+ width: 8px;
|
|
|
|
+ height: 8px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background-color: red;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 4px;
|
|
|
|
+ right: 6px;
|
|
|
|
+}
|
|
|
|
|
|
|
|
|
|
::v-deep(.el-calendar-day) {
|
|
::v-deep(.el-calendar-day) {
|