From ba77fdc6a30c9ad0941e40319f8c4f6fe6fdf9f1 Mon Sep 17 00:00:00 2001
From: cuilei <ray_tsu1@163.com>
Date: 星期四, 07 八月 2025 10:30:42 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/mes/modules/MesProductionWeekCalendar.vue | 241 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 241 insertions(+), 0 deletions(-)
diff --git a/src/views/mes/modules/MesProductionWeekCalendar.vue b/src/views/mes/modules/MesProductionWeekCalendar.vue
new file mode 100644
index 0000000..46c0716
--- /dev/null
+++ b/src/views/mes/modules/MesProductionWeekCalendar.vue
@@ -0,0 +1,241 @@
+<!-- src/views/mes/modules/MesProductionWeekCalendar.vue -->
+<template>
+ <div class="week-calendar">
+ <div class="calendar-header">
+ <a-button 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>
+ </div>
+
+ <div class="calendar-grid">
+ <div class="week-header">
+ <div
+ v-for="(day, index) in weekDays"
+ :key="index"
+ class="header-cell"
+ >
+ <div class="day-name">{{ day.format('ddd') }}</div>
+ <div
+ class="day-number"
+ :class="{ today: isToday(day), selected: isSelected(day) }"
+ @click="selectDay(day)"
+ >
+ {{ day.date() }}
+ </div>
+ </div>
+ </div>
+
+ <div class="calendar-body">
+ <div
+ v-for="(day, index) in weekDays"
+ :key="index"
+ class="day-cell"
+ :class="{ today: isToday(day), selected: isSelected(day) }"
+ @click="selectDay(day)"
+ >
+ <div class="cell-content">
+ <!-- 鎻掓Ы鐢ㄤ簬娓叉煋鏃ユ湡鍐呭 -->
+ <slot
+ name="dateCell"
+ :date="day"
+ :isSelected="isSelected(day)"
+ :isToday="isToday(day)"
+ >
+ <!-- 榛樿鍐呭 -->
+ <div class="default-content">
+ <!-- 鍙互鍦ㄨ繖閲屾坊鍔犻粯璁ょ殑鏃ユ湡鍐呭娓叉煋閫昏緫 -->
+ </div>
+ </slot>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import moment from 'moment'
+
+export default {
+ name: 'MesProductionWeekCalendar',
+ props: {
+ // 璧峰鏃ユ湡锛岄粯璁や负浠婂ぉ
+ startDate: {
+ type: [Object, String, Date],
+ default: null
+ }
+ },
+ data() {
+ return {
+ // 褰撳墠鏄剧ず鐨勮捣濮嬫棩鏈�
+ currentStartDate: this.startDate ? moment(this.startDate) : moment(),
+ // 閫変腑鐨勬棩鏈�
+ selectedDate: this.startDate ? moment(this.startDate) : moment()
+ }
+ },
+ computed: {
+ // 璁＄畻杩炵画7澶╃殑鏃ユ湡
+ weekDays() {
+ const days = []
+ for (let i = 0; i < 7; i++) {
+ days.push(this.currentStartDate.clone().add(i, 'days'))
+ }
+ return days
+ },
+ // 褰撳墠鏄剧ず鐨勬棩鏈熻寖鍥存枃鏈�
+ weekRangeText() {
+ const start = this.currentStartDate
+ const end = this.currentStartDate.clone().add(6, 'days')
+
+ if (start.month() === end.month()) {
+ return `${start.format('YYYY骞碝鏈圖鏃�')} - ${end.format('D鏃�')}`
+ } else {
+ return `${start.format('YYYY骞碝鏈圖鏃�')} - ${end.format('M鏈圖鏃�')}`
+ }
+ }
+ },
+ watch: {
+ startDate(newVal) {
+ if (newVal) {
+ this.currentStartDate = moment(newVal)
+ this.selectedDate = moment(newVal)
+ }
+ }
+ },
+ methods: {
+ // 鍒囨崲鍒颁笂7澶�
+ prevWeek() {
+ this.currentStartDate = this.currentStartDate.clone().subtract(7, 'days')
+ this.$emit('change', this.currentStartDate)
+ },
+ // 鍒囨崲鍒颁笅7澶�
+ nextWeek() {
+ this.currentStartDate = this.currentStartDate.clone().add(7, 'days')
+ this.$emit('change', this.currentStartDate)
+ },
+ // 璺宠浆鍒颁粖澶�
+ goToToday() {
+ this.currentStartDate = moment()
+ this.selectedDate = moment()
+ this.$emit('change', this.currentStartDate)
+ this.$emit('select', this.selectedDate)
+ },
+ // 閫夋嫨鏃ユ湡
+ selectDay(day) {
+ this.selectedDate = day.clone()
+ this.$emit('select', day)
+ },
+ // 鍒ゆ柇鏄惁鏄粖澶�
+ isToday(day) {
+ return day.isSame(moment(), 'day')
+ },
+ // 鍒ゆ柇鏄惁鏄�変腑鐨勬棩鏈�
+ isSelected(day) {
+ return day.isSame(this.selectedDate, 'day')
+ }
+ }
+}
+</script>
+
+<style scoped>
+.week-calendar {
+ padding: 16px;
+}
+
+.calendar-header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.current-week-range {
+ margin: 0 16px;
+ font-weight: bold;
+ font-size: 14px;
+}
+
+.calendar-grid {
+ border: 1px solid #e8e8e8;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.week-header {
+ display: flex;
+ background-color: #fafafa;
+ border-bottom: 1px solid #e8e8e8;
+}
+
+.header-cell {
+ flex: 1;
+ text-align: center;
+ padding: 8px 0;
+ border-right: 1px solid #e8e8e8;
+}
+
+.header-cell:last-child {
+ border-right: none;
+}
+
+.day-name {
+ font-size: 12px;
+ color: #666;
+ margin-bottom: 4px;
+}
+
+.day-number {
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ margin: 0 auto;
+ border-radius: 50%;
+}
+
+.day-number.today {
+ background-color: #1890ff;
+ color: white;
+}
+
+.day-number.selected {
+ background-color: #bae7ff;
+ color: #1890ff;
+}
+
+.calendar-body {
+ display: flex;
+ height: 300px;
+}
+
+.day-cell {
+ flex: 1;
+ border-right: 1px solid #e8e8e8;
+ cursor: pointer;
+ padding: 4px;
+}
+
+.day-cell:last-child {
+ border-right: none;
+}
+
+.day-cell.today {
+ background-color: #e6f7ff;
+}
+
+.day-cell.selected {
+ background-color: #bae7ff;
+}
+
+.cell-content {
+ height: 100%;
+ overflow: hidden;
+}
+
+.default-content {
+ height: 100%;
+}
+</style>
--
Gitblit v1.9.3