From e5bd477a7e2fd05ebc45916db73bcae41cd2c90e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 19 Feb 2026 22:26:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes):=20=E4=BC=98=E5=8C=96=E6=8E=92?=
 =?UTF-8?q?=E7=8F=AD=E6=97=A5=E5=8E=86=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=81=87=E6=9C=9F=E6=8C=89=E6=97=A5=E6=9C=9F=E8=8C=83?=
 =?UTF-8?q?=E5=9B=B4=E6=9F=A5=E8=AF=A2=E9=80=BB=E8=BE=91=E5=8F=8A=E5=81=87?=
 =?UTF-8?q?=E6=9C=9F=E7=B1=BB=E5=9E=8B=E6=9E=9A=E4=B8=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mes/cal/calendar/CalendarDateCell.vue     | 58 ++++++++++++-------
 src/views/mes/cal/calendar/TeamView.vue       | 12 +++-
 src/views/mes/cal/calendar/TypeView.vue       | 12 +++-
 src/views/mes/cal/calendar/UserView.vue       | 12 +++-
 4 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/src/views/mes/cal/calendar/CalendarDateCell.vue b/src/views/mes/cal/calendar/CalendarDateCell.vue
index e3f3ecb11..664eab115 100644
--- a/src/views/mes/cal/calendar/CalendarDateCell.vue
+++ b/src/views/mes/cal/calendar/CalendarDateCell.vue
@@ -1,8 +1,8 @@
 <!-- 排班日历 - 日历格子（公共组件） -->
 <template>
-  <div class="h-full p-4px">
+  <div class="h-full p-4px flex flex-col overflow-hidden">
     <!-- 顶部：日期数字 + 上班/休息标签 -->
-    <div class="flex justify-between items-center">
+    <div class="flex justify-between items-center shrink-0">
       <span class="text-16px font-500" :class="{ 'text-#f56c6c': isWeekend }">
         {{ dayNumber }}
       </span>
@@ -11,39 +11,38 @@
     </div>
     <!-- 农历 / 节气 / 节日显示 -->
     <div
-      class="text-12px text-#909399 mt-2px"
+      class="text-11px text-#909399 mt-1px shrink-0 truncate"
       :class="{ 'text-#67c23a': hasFestivalDay }"
     >
       {{ lunarDisplay }}
     </div>
     <!-- 班次列表：节假日不显示排班 -->
-    <template v-if="!isHoliday">
-      <!--
-        配色规则（sort 对应轮班方式中的班次顺序）：
-          sort=1  白班  → success（绿色）
-          sort=2  中班  → 三班倒用 warning（橙色），两班倒用 info（灰色）
-          sort=3  夜班  → info（灰色）
-      -->
-      <div v-for="item in teamShifts" :key="item.sort" class="mt-2px">
+    <!--
+      配色规则（sort 对应轮班方式中的班次顺序）：
+        sort=1  白班  → 绿色（#95d475）
+        sort=2  中班  → 三班倒用橙色（#f0a020），两班倒用灰色（#909399）
+        sort=3  夜班  → 灰色（#909399）
+    -->
+    <div v-if="!isHoliday" class="mt-2px flex flex-col gap-1px overflow-hidden">
+      <div v-for="item in teamShifts" :key="item.sort">
         <!-- sort=1 白班：绿色 -->
-        <el-button v-if="item.sort === 1" type="success" size="small" class="!w-full !text-12px">
+        <div v-if="item.sort === 1" class="shift-tag bg-#95d475">
           {{ item.shiftName }} · {{ item.teamName }}
-        </el-button>
-        <!-- sort=2 中班：三班倒时用橙色，两班倒时用灰色 -->
-        <el-button
+        </div>
+        <!-- sort=2 中班：三班倒时橙色，两班倒时灰色 -->
+        <div
           v-else-if="item.sort === 2"
-          :type="shiftType === MesCalShiftTypeEnum.THREE ? 'warning' : 'info'"
-          size="small"
-          class="!w-full !text-12px"
+          class="shift-tag"
+          :class="shiftType === MesCalShiftTypeEnum.THREE ? 'bg-#f0a020' : 'bg-#909399'"
         >
           {{ item.shiftName }} · {{ item.teamName }}
-        </el-button>
+        </div>
         <!-- sort=3 夜班：灰色 -->
-        <el-button v-else-if="item.sort === 3" type="info" size="small" class="!w-full !text-12px">
+        <div v-else-if="item.sort === 3" class="shift-tag bg-#909399">
           {{ item.shiftName }} · {{ item.teamName }}
-        </el-button>
+        </div>
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -108,3 +107,18 @@ const hasFestivalDay = computed(() => {
   return !!(info.solarFestival || info.lunarFestival || info.termName)
 })
 </script>
+
+<style scoped>
+/* 紧凑的班次标签：替代 el-button，减少纵向占用 */
+.shift-tag {
+  padding: 1px 4px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+</style>
diff --git a/src/views/mes/cal/calendar/TeamView.vue b/src/views/mes/cal/calendar/TeamView.vue
index 309656504..c847ae889 100644
--- a/src/views/mes/cal/calendar/TeamView.vue
+++ b/src/views/mes/cal/calendar/TeamView.vue
@@ -40,6 +40,12 @@ import { formatDate } from '@/utils/formatTime'
 import { HolidayType } from '@/views/mes/utils/constants'
 import CalendarDateCell from './CalendarDateCell.vue'
 import CalendarLegend from './CalendarLegend.vue'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import PluginLunar from 'dayjs-plugin-lunar'
+
+dayjs.locale('zh-cn')
+dayjs.extend(PluginLunar)
 
 const loading = ref(false)
 const currentDate = ref(new Date()) // 日历当前显示月份
@@ -94,7 +100,11 @@ const fetchCalendar = async () => {
       return
     }
     list.forEach((item: CalCalendarDayVO) => {
-      calendarDayMap.value.set(item.day, item)
+      // 后端返回的 day 为时间戳（long），格式化为 yyyy-MM-dd 作为 Map key
+      const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
+      if (day) {
+        calendarDayMap.value.set(day, { ...item, day })
+      }
     })
   } finally {
     loading.value = false
diff --git a/src/views/mes/cal/calendar/TypeView.vue b/src/views/mes/cal/calendar/TypeView.vue
index b1a3ee603..70de72522 100644
--- a/src/views/mes/cal/calendar/TypeView.vue
+++ b/src/views/mes/cal/calendar/TypeView.vue
@@ -40,6 +40,12 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { HolidayType } from '@/views/mes/utils/constants'
 import CalendarDateCell from './CalendarDateCell.vue'
 import CalendarLegend from './CalendarLegend.vue'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import PluginLunar from 'dayjs-plugin-lunar'
+
+dayjs.locale('zh-cn')
+dayjs.extend(PluginLunar)
 
 const loading = ref(false)
 const currentDate = ref(new Date()) // 日历当前显示月份
@@ -85,7 +91,11 @@ const fetchCalendar = async () => {
       return
     }
     list.forEach((item: CalCalendarDayVO) => {
-      calendarDayMap.value.set(item.day, item)
+      // 后端返回的 day 为时间戳（long），格式化为 yyyy-MM-dd 作为 Map key
+      const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
+      if (day) {
+        calendarDayMap.value.set(day, { ...item, day })
+      }
     })
   } finally {
     loading.value = false
diff --git a/src/views/mes/cal/calendar/UserView.vue b/src/views/mes/cal/calendar/UserView.vue
index a2324d3f2..e64301f83 100644
--- a/src/views/mes/cal/calendar/UserView.vue
+++ b/src/views/mes/cal/calendar/UserView.vue
@@ -48,6 +48,12 @@ import { formatDate } from '@/utils/formatTime'
 import { HolidayType } from '@/views/mes/utils/constants'
 import CalendarDateCell from './CalendarDateCell.vue'
 import CalendarLegend from './CalendarLegend.vue'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import PluginLunar from 'dayjs-plugin-lunar'
+
+dayjs.locale('zh-cn')
+dayjs.extend(PluginLunar)
 
 const loading = ref(false)
 const currentDate = ref(new Date()) // 日历当前显示月份
@@ -94,7 +100,11 @@ const fetchCalendar = async () => {
       return
     }
     list.forEach((item: CalCalendarDayVO) => {
-      calendarDayMap.value.set(item.day, item)
+      // 后端返回的 day 为时间戳（long），格式化为 yyyy-MM-dd 作为 Map key
+      const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
+      if (day) {
+        calendarDayMap.value.set(day, { ...item, day })
+      }
     })
   } finally {
     loading.value = false