cuilei
4 天以前 4dfa438cbd4f3f475c97a2233688d1fe3628099c
src/views/mes/modules/MesProductionWeekCalendar.vue
@@ -1,11 +1,11 @@
<!-- src/views/mes/modules/MesProductionWeekCalendar.vue -->
<template>
  <div class="week-calendar">
    <div class="calendar-header">
      <a-button icon="left" @click="prevWeek" size="small" />
    <div v-if="showHeader" class="calendar-header">
      <a-button v-if="showNavigation" icon="left" @click="prevWeek" size="small" />
      <span class="current-week-range">{{ weekRangeText }}</span>
      <a-button icon="right" @click="nextWeek" size="small" />
      <a-button @click="goToToday" size="small" style="margin-left: 8px">今天</a-button>
      <a-button v-if="showNavigation" icon="right" @click="nextWeek" size="small" />
      <a-button v-if="showTodayButton" @click="goToToday" size="small" style="margin-left: 8px">今天</a-button>
    </div>
    <div class="calendar-grid">
@@ -14,11 +14,16 @@
          v-for="(day, index) in weekDays"
          :key="index"
          class="header-cell"
          :class="{ 'first-day-highlight': showFirstDayHighlight && index === 0 }"
        >
          <div class="day-name">{{ day.format('ddd') }}</div>
          <div
            class="day-number"
            :class="{ today: isToday(day), selected: isSelected(day) }"
            :class="{
              'highlight': showTodayHighlight && isToday(day),
              today: isToday(day),
              selected: isSelected(day)
            }"
            @click="selectDay(day)"
          >
            {{ day.date() }}
@@ -31,7 +36,12 @@
          v-for="(day, index) in weekDays"
          :key="index"
          class="day-cell"
          :class="{ today: isToday(day), selected: isSelected(day) }"
          :class="{
            'highlight': showTodayHighlight && isToday(day),
            'first-day-highlight': showFirstDayHighlight && index === 0,
            today: isToday(day),
            selected: isSelected(day)
          }"
          @click="selectDay(day)"
        >
          <div class="cell-content">
@@ -64,6 +74,31 @@
    startDate: {
      type: [Object, String, Date],
      default: null
    },
    // 是否显示头部导航
    showHeader: {
      type: Boolean,
      default: true
    },
    // 是否显示导航按钮(前后翻页)
    showNavigation: {
      type: Boolean,
      default: true
    },
    // 是否显示今天按钮
    showTodayButton: {
      type: Boolean,
      default: true
    },
    // 是否高亮当天
    showTodayHighlight: {
      type: Boolean,
      default: true
    },
    // 是否高亮本周第一天
    showFirstDayHighlight: {
      type: Boolean,
      default: true
    }
  },
  data() {
@@ -179,6 +214,10 @@
  border-right: none;
}
.header-cell.first-day-highlight {
  background-color: #ffffff; /* 重置第一天的背景色 */
}
.day-name {
  font-size: 12px;
  color: #666;
@@ -196,7 +235,7 @@
  border-radius: 50%;
}
.day-number.today {
.day-number.today.highlight {
  background-color: #1890ff;
  color: white;
}
@@ -222,7 +261,7 @@
  border-right: none;
}
.day-cell.today {
.day-cell.today.highlight {
  background-color: #e6f7ff;
}