| | |
| | | <!-- 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"> |
| | |
| | | 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() }} |
| | |
| | | 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"> |
| | |
| | | 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() { |
| | |
| | | border-right: none; |
| | | } |
| | | |
| | | .header-cell.first-day-highlight { |
| | | background-color: #ffffff; /* 重置第一天的背景色 */ |
| | | } |
| | | |
| | | .day-name { |
| | | font-size: 12px; |
| | | color: #666; |
| | |
| | | border-radius: 50%; |
| | | } |
| | | |
| | | .day-number.today { |
| | | .day-number.today.highlight { |
| | | background-color: #1890ff; |
| | | color: white; |
| | | } |
| | |
| | | border-right: none; |
| | | } |
| | | |
| | | .day-cell.today { |
| | | .day-cell.today.highlight { |
| | | background-color: #e6f7ff; |
| | | } |
| | | |