feat:日历样式调整

张含笑

2025-07-22 ab0a385dfbfb01db6240dbc5047677199edcd824

feat:日历样式调整

 src/views/wel/components/calendarBox.vue

@@ -57,14 +57,12 @@
  end_date: undefined,
  start_date: undefined,
});
const formatDate = (date, format = 'YYYY年M月') => {
  return dayjs(date).format(format);
};

const eventIcons = ref({
  'work-order': ev1,
  task: ev2,
});
// 初始化月份范围

const monthRange = getCurrentMonthRange();
params.value = monthRange;
// 检查日期是否是当前月份
@@ -73,25 +71,20 @@
};
// 处理月份选择器变化
const handleMonthChange = val => {
  const selectedDate = new Date(val);
  const now = new Date();

  const selectedMonth = new Date(val);
  currentMonth.value = selectedMonth;
  
  // 如果是当前月份，则选中当天；否则不选中
  if (
    selectedDate.getFullYear() === now.getFullYear() &&
    selectedDate.getMonth() === now.getMonth()
  ) {
    currentMonth.value = selectedDate;
  if (isCurrentMonth(selectedMonth)) {
    selectedDate.value = new Date();
  } else {
    currentMonth.value = selectedDate;
    // 清除选中状态
    nextTick(() => {
      const selectedCells = document.querySelectorAll('.el-calendar-table td.is-selected');
      selectedCells.forEach(cell => {
        cell.classList.remove('is-selected');
      });
    });
    selectedDate.value = null;
  }
  
  // 强制更新日历视图
  nextTick(() => {
    updateCalendarSelection();
  });
};

// 获取日历数据
@@ -130,17 +123,34 @@
    currentMonth.value = dayjs(currentMonth.value).add(1, 'month').toDate();
  }

  // 如果是当前月份，则选中当天；否则不选中
  if (isCurrentMonth(currentMonth.value)) {
    selectedDate.value = new Date();
  } else {
    selectedDate.value = null;
  }

  await nextTick();
  // 强制清除所有选中状态
  updateCalendarSelection();
};
const updateCalendarSelection = () => {
  // 清除所有选中状态
  const selectedCells = document.querySelectorAll('.el-calendar-table td.is-selected');
  selectedCells.forEach(cell => {
    cell.classList.remove('is-selected');
  });

  // 如果是当前月份才设置选中
  if (isCurrentMonth(currentMonth.value)) {
    selectedDate.value = new Date();
  // 如果是当前月份，设置当前日为选中状态
  if (isCurrentMonth(currentMonth.value) && selectedDate.value) {
    const currentDay = dayjs(selectedDate.value).date();
    const calendarCells = document.querySelectorAll('.el-calendar-table td');
    
    calendarCells.forEach(cell => {
      const day = parseInt(cell.querySelector('.date-number').textContent);
      if (day === currentDay) {
        cell.classList.add('is-selected');
      }
    });
  }
};

@@ -161,6 +171,10 @@
      selectedDate.value = null;
    }

    nextTick(() => {
      updateCalendarSelection();
    });
    
    getJobEventBar();
  },
  { deep: true, immediate: true }
@@ -200,6 +214,11 @@
  } else {
    selectedDate.value = null;
  }
  
  nextTick(() => {
    updateCalendarSelection();
  });
  
  getJobEventBar();
});
</script>
@@ -212,7 +231,7 @@
    display: none;
  }
  .el-calendar__body {
    padding-top: 0;
    padding-top: 0 !important;
  }
  .date-number {
    font-size: 13px !important;
@@ -318,6 +337,7 @@
    .el-calendar-table td.is-selected {
      background-color: transparent;
    }
    
  }

  .event-item {