From e7a8095a355cd448eef5df7146ff45ee32d16a7c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 19 Feb 2026 12:23:18 +0800
Subject: [PATCH] =?UTF-8?q?review=EF=BC=88mes=EF=BC=89=EF=BC=9Acal-calende?=
 =?UTF-8?q?r=20=E6=97=A5=E5=8E=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mes/cal/calendar/index.ts             |  25 +++
 .../mes/cal/calendar/CalendarTypeView.vue     | 206 +++++++++++++++++
 src/views/mes/cal/calendar/PersonView.vue     | 206 +++++++++++++++++
 src/views/mes/cal/calendar/TeamView.vue       | 212 ++++++++++++++++++
 src/views/mes/cal/calendar/index.vue          |  26 +++
 5 files changed, 675 insertions(+)
 create mode 100644 src/api/mes/cal/calendar/index.ts
 create mode 100644 src/views/mes/cal/calendar/CalendarTypeView.vue
 create mode 100644 src/views/mes/cal/calendar/PersonView.vue
 create mode 100644 src/views/mes/cal/calendar/TeamView.vue
 create mode 100644 src/views/mes/cal/calendar/index.vue

diff --git a/src/api/mes/cal/calendar/index.ts b/src/api/mes/cal/calendar/index.ts
new file mode 100644
index 000000000..1bd3cef6d
--- /dev/null
+++ b/src/api/mes/cal/calendar/index.ts
@@ -0,0 +1,25 @@
+import request from '@/config/axios'
+
+// 排班日历 - 班组排班项
+export interface CalCalendarTeamShiftItem {
+  teamId: number
+  teamName: string
+  shiftId: number
+  shiftName: string
+  sort: number
+}
+
+// 排班日历 - 日历天 VO
+export interface CalCalendarDayVO {
+  day: string // yyyy-MM-dd
+  shiftType: number // 轮班方式
+  teamShifts: CalCalendarTeamShiftItem[]
+}
+
+// 排班日历 API
+export const CalCalendarApi = {
+  // 查询排班日历列表
+  getCalendarList: async (params: any) => {
+    return await request.get({ url: `/mes/cal/calendar/list`, params })
+  }
+}
diff --git a/src/views/mes/cal/calendar/CalendarTypeView.vue b/src/views/mes/cal/calendar/CalendarTypeView.vue
new file mode 100644
index 000000000..d37f0b4ee
--- /dev/null
+++ b/src/views/mes/cal/calendar/CalendarTypeView.vue
@@ -0,0 +1,206 @@
+<!-- 排班日历 - 按分类视图 -->
+<template>
+  <div class="flex">
+    <!-- 左侧：班组类型选择 -->
+    <div class="w-150px mr-10px">
+      <el-radio-group v-model="selectedType" class="flex flex-col" @change="onTypeSelected">
+        <el-radio-button
+          v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_CALENDAR_TYPE)"
+          :key="dict.value"
+          :value="dict.value"
+          class="!rounded-0 !border-b-1px !border-b-solid !border-b-gray-200"
+        >
+          {{ dict.label }}
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+    <!-- 右侧：日历 -->
+    <div class="flex-1">
+      <el-calendar v-model="currentDate" v-loading="loading">
+        <template #date-cell="{ data }">
+          <div class="h-full p-4px">
+            <div class="flex justify-between items-center">
+              <span class="text-16px font-500" :class="{ 'text-#f56c6c': isWeekend(data.day) }">
+                {{ data.day.split('-')[2] }}
+              </span>
+              <el-tag v-if="holidaySet.has(data.day)" size="small" effect="dark" type="success">
+                休
+              </el-tag>
+              <el-tag v-else size="small" effect="dark"> 班 </el-tag>
+            </div>
+            <div
+              class="text-12px text-#909399 mt-2px"
+              :class="{ 'text-#67c23a': hasFestival(data.day) }"
+            >
+              {{ getLunarDisplay(data.day) }}
+            </div>
+            <!-- 班次信息 -->
+            <template v-if="!holidaySet.has(data.day)">
+              <div
+                v-for="item in getTeamShiftsForDay(data.day)"
+                :key="item.sort"
+                class="mt-2px"
+              >
+                <el-button
+                  v-if="item.sort === 1"
+                  type="success"
+                  size="small"
+                  class="!w-full !text-12px"
+                >
+                  {{ item.teamName }}
+                </el-button>
+                <el-button
+                  v-else-if="item.sort === 2"
+                  :type="getShiftTypeForDay(data.day) === MesCalShiftTypeEnum.THREE ? 'warning' : 'info'"
+                  size="small"
+                  class="!w-full !text-12px"
+                >
+                  {{ item.teamName }}
+                </el-button>
+                <el-button
+                  v-else-if="item.sort === 3"
+                  type="info"
+                  size="small"
+                  class="!w-full !text-12px"
+                >
+                  {{ item.teamName }}
+                </el-button>
+              </div>
+            </template>
+          </div>
+        </template>
+      </el-calendar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CalCalendarApi, CalCalendarDayVO } from '@/api/mes/cal/calendar'
+import { CalHolidayApi, CalHolidayVO } from '@/api/mes/cal/holiday'
+import { formatDate } from '@/utils/formatTime'
+import { SolarDay } from 'tyme4ts'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { HolidayType, MesCalShiftTypeEnum } from '@/views/mes/utils/constants'
+
+const loading = ref(false)
+const currentDate = ref(new Date())
+const selectedType = ref<number>()
+const calendarDayMap = ref<Map<string, CalCalendarDayVO>>(new Map())
+const holidaySet = ref(new Set<string>())
+
+/** 获取假期列表 */
+const getHolidayList = async () => {
+  holidaySet.value.clear()
+  const list = await CalHolidayApi.getHolidayList()
+  if (list) {
+    list.forEach((item: CalHolidayVO) => {
+      const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
+      if (day && item.type === HolidayType.HOLIDAY) {
+        holidaySet.value.add(day)
+      }
+    })
+  }
+}
+
+/** 查询排班日历 */
+const fetchCalendar = async () => {
+  if (!selectedType.value) return
+  loading.value = true
+  try {
+    // 计算当前月份的起止日期
+    const date = currentDate.value
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    const startDay = new Date(year, month, 1)
+    const endDay = new Date(year, month + 1, 0, 23, 59, 59)
+    const list = await CalCalendarApi.getCalendarList({
+      queryType: 'TYPE',
+      calendarType: selectedType.value,
+      startDay: formatDate(startDay, 'YYYY-MM-DD HH:mm:ss'),
+      endDay: formatDate(endDay, 'YYYY-MM-DD HH:mm:ss')
+    })
+    calendarDayMap.value.clear()
+    if (list) {
+      list.forEach((item: CalCalendarDayVO) => {
+        calendarDayMap.value.set(item.day, item)
+      })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 选择分类 */
+const onTypeSelected = () => {
+  fetchCalendar()
+}
+
+/** 获取指定日期的班次列表 */
+const getTeamShiftsForDay = (day: string) => {
+  const calDay = calendarDayMap.value.get(day)
+  return calDay?.teamShifts || []
+}
+
+/** 获取指定日期的轮班方式 */
+const getShiftTypeForDay = (day: string) => {
+  const calDay = calendarDayMap.value.get(day)
+  return calDay?.shiftType
+}
+
+/** 判断是否周末 */
+const isWeekend = (day: string): boolean => {
+  const date = new Date(day)
+  const weekDay = date.getDay()
+  return weekDay === 0 || weekDay === 6
+}
+
+/** 获取农历显示信息 */
+const getLunarInfo = (day: string) => {
+  const parts = day.split('-')
+  const year = parseInt(parts[0])
+  const month = parseInt(parts[1])
+  const date = parseInt(parts[2])
+  try {
+    const solarDay = SolarDay.fromYmd(year, month, date)
+    const lunarDay = solarDay.getLunarDay()
+    const solarFestival = solarDay.getFestival()
+    const lunarFestival = lunarDay.getFestival()
+    const termDay = solarDay.getTermDay()
+    const termName = termDay.getDayIndex() === 0 ? termDay.getSolarTerm().getName() : null
+    const lunarMonthName = lunarDay.getLunarMonth().getName()
+    const lunarDayName = lunarDay.getName()
+    return {
+      solarFestival: solarFestival ? solarFestival.getName() : null,
+      lunarFestival: lunarFestival ? lunarFestival.getName() : null,
+      termName,
+      lunarText: lunarMonthName + lunarDayName
+    }
+  } catch {
+    return { solarFestival: null, lunarFestival: null, termName: null, lunarText: '' }
+  }
+}
+
+/** 获取农历显示文本 */
+const getLunarDisplay = (day: string): string => {
+  const info = getLunarInfo(day)
+  return info.solarFestival || info.lunarFestival || info.termName || info.lunarText
+}
+
+/** 判断是否有节日 */
+const hasFestival = (day: string): boolean => {
+  const info = getLunarInfo(day)
+  return !!(info.solarFestival || info.lunarFestival || info.termName)
+}
+
+// 监听月份变化
+watch(currentDate, () => {
+  if (selectedType.value) {
+    fetchCalendar()
+  }
+})
+
+/** 初始化 */
+onMounted(() => {
+  getHolidayList()
+})
+</script>
diff --git a/src/views/mes/cal/calendar/PersonView.vue b/src/views/mes/cal/calendar/PersonView.vue
new file mode 100644
index 000000000..663729d2e
--- /dev/null
+++ b/src/views/mes/cal/calendar/PersonView.vue
@@ -0,0 +1,206 @@
+<!-- 排班日历 - 按个人视图 -->
+<template>
+  <div>
+    <!-- 顶部：用户选择 -->
+    <el-form :inline="true" label-width="80px" class="mb-10px">
+      <el-form-item label="用户编号">
+        <el-input-number
+          v-model="userId"
+          placeholder="请输入用户编号"
+          :min="1"
+          controls-position="right"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onUserQuery">
+          <Icon icon="ep:search" class="mr-5px" /> 查询
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 日历 -->
+    <el-calendar v-model="currentDate" v-loading="loading">
+      <template #date-cell="{ data }">
+        <div class="h-full p-4px">
+          <div class="flex justify-between items-center">
+            <span class="text-16px font-500" :class="{ 'text-#f56c6c': isWeekend(data.day) }">
+              {{ data.day.split('-')[2] }}
+            </span>
+            <el-tag v-if="holidaySet.has(data.day)" size="small" effect="dark" type="success">
+              休
+            </el-tag>
+            <el-tag v-else size="small" effect="dark"> 班 </el-tag>
+          </div>
+          <div
+            class="text-12px text-#909399 mt-2px"
+            :class="{ 'text-#67c23a': hasFestival(data.day) }"
+          >
+            {{ getLunarDisplay(data.day) }}
+          </div>
+          <!-- 班次信息 -->
+          <template v-if="!holidaySet.has(data.day)">
+            <div
+              v-for="item in getTeamShiftsForDay(data.day)"
+              :key="item.sort"
+              class="mt-2px"
+            >
+              <el-button
+                v-if="item.sort === 1"
+                type="success"
+                size="small"
+                class="!w-full !text-12px"
+              >
+                {{ item.teamName }}
+              </el-button>
+              <el-button
+                v-else-if="item.sort === 2"
+                :type="getShiftTypeForDay(data.day) === MesCalShiftTypeEnum.THREE ? 'warning' : 'info'"
+                size="small"
+                class="!w-full !text-12px"
+              >
+                {{ item.teamName }}
+              </el-button>
+              <el-button
+                v-else-if="item.sort === 3"
+                type="info"
+                size="small"
+                class="!w-full !text-12px"
+              >
+                {{ item.teamName }}
+              </el-button>
+            </div>
+          </template>
+        </div>
+      </template>
+    </el-calendar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CalCalendarApi, CalCalendarDayVO } from '@/api/mes/cal/calendar'
+import { CalHolidayApi, CalHolidayVO } from '@/api/mes/cal/holiday'
+import { formatDate } from '@/utils/formatTime'
+import { SolarDay } from 'tyme4ts'
+import { HolidayType, MesCalShiftTypeEnum } from '@/views/mes/utils/constants'
+
+const loading = ref(false)
+const currentDate = ref(new Date())
+const userId = ref<number>()
+const calendarDayMap = ref<Map<string, CalCalendarDayVO>>(new Map())
+const holidaySet = ref(new Set<string>())
+
+/** 获取假期列表 */
+const getHolidayList = async () => {
+  holidaySet.value.clear()
+  const list = await CalHolidayApi.getHolidayList()
+  if (list) {
+    list.forEach((item: CalHolidayVO) => {
+      const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
+      if (day && item.type === HolidayType.HOLIDAY) {
+        holidaySet.value.add(day)
+      }
+    })
+  }
+}
+
+/** 查询排班日历 */
+const fetchCalendar = async () => {
+  if (!userId.value) return
+  loading.value = true
+  try {
+    const date = currentDate.value
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    const startDay = new Date(year, month, 1)
+    const endDay = new Date(year, month + 1, 0, 23, 59, 59)
+    const list = await CalCalendarApi.getCalendarList({
+      queryType: 'USER',
+      userId: userId.value,
+      startDay: formatDate(startDay, 'YYYY-MM-DD HH:mm:ss'),
+      endDay: formatDate(endDay, 'YYYY-MM-DD HH:mm:ss')
+    })
+    calendarDayMap.value.clear()
+    if (list) {
+      list.forEach((item: CalCalendarDayVO) => {
+        calendarDayMap.value.set(item.day, item)
+      })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 查询按钮 */
+const onUserQuery = () => {
+  fetchCalendar()
+}
+
+/** 获取指定日期的班次列表 */
+const getTeamShiftsForDay = (day: string) => {
+  const calDay = calendarDayMap.value.get(day)
+  return calDay?.teamShifts || []
+}
+
+/** 获取指定日期的轮班方式 */
+const getShiftTypeForDay = (day: string) => {
+  const calDay = calendarDayMap.value.get(day)
+  return calDay?.shiftType
+}
+
+/** 判断是否周末 */
+const isWeekend = (day: string): boolean => {
+  const date = new Date(day)
+  const weekDay = date.getDay()
+  return weekDay === 0 || weekDay === 6
+}
+
+/** 获取农历显示信息 */
+const getLunarInfo = (day: string) => {
+  const parts = day.split('-')
+  const year = parseInt(parts[0])
+  const month = parseInt(parts[1])
+  const date = parseInt(parts[2])
+  try {
+    const solarDay = SolarDay.fromYmd(year, month, date)
+    const lunarDay = solarDay.getLunarDay()
+    const solarFestival = solarDay.getFestival()
+    const lunarFestival = lunarDay.getFestival()
+    const termDay = solarDay.getTermDay()
+    const termName = termDay.getDayIndex() === 0 ? termDay.getSolarTerm().getName() : null
+    const lunarMonthName = lunarDay.getLunarMonth().getName()
+    const lunarDayName = lunarDay.getName()
+    return {
+      solarFestival: solarFestival ? solarFestival.getName() : null,
+      lunarFestival: lunarFestival ? lunarFestival.getName() : null,
+      termName,
+      lunarText: lunarMonthName + lunarDayName
+    }
+  } catch {
+    return { solarFestival: null, lunarFestival: null, termName: null, lunarText: '' }
+  }
+}
+
+/** 获取农历显示文本 */
+const getLunarDisplay = (day: string): string => {
+  const info = getLunarInfo(day)
+  return info.solarFestival || info.lunarFestival || info.termName || info.lunarText
+}
+
+/** 判断是否有节日 */
+const hasFestival = (day: string): boolean => {
+  const info = getLunarInfo(day)
+  return !!(info.solarFestival || info.lunarFestival || info.termName)
+}
+
+// 监听月份变化
+watch(currentDate, () => {
+  if (userId.value) {
+    fetchCalendar()
+  }
+})
+
+/** 初始化 */
+onMounted(() => {
+  getHolidayList()
+})
+</script>
diff --git a/src/views/mes/cal/calendar/TeamView.vue b/src/views/mes/cal/calendar/TeamView.vue
new file mode 100644
index 000000000..1abfe00c8
--- /dev/null
+++ b/src/views/mes/cal/calendar/TeamView.vue
@@ -0,0 +1,212 @@
+<!-- 排班日历 - 按班组视图 -->
+<template>
+  <div class="flex">
+    <!-- 左侧：班组列表选择 -->
+    <div class="w-150px mr-10px">
+      <el-radio-group v-model="selectedTeamId" class="flex flex-col" @change="onTeamSelected">
+        <el-radio-button
+          v-for="team in teamList"
+          :key="team.id"
+          :value="team.id"
+          class="!rounded-0 !border-b-1px !border-b-solid !border-b-gray-200"
+        >
+          {{ team.name }}
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+    <!-- 右侧：日历 -->
+    <div class="flex-1">
+      <el-calendar v-model="currentDate" v-loading="loading">
+        <template #date-cell="{ data }">
+          <div class="h-full p-4px">
+            <div class="flex justify-between items-center">
+              <span class="text-16px font-500" :class="{ 'text-#f56c6c': isWeekend(data.day) }">
+                {{ data.day.split('-')[2] }}
+              </span>
+              <el-tag v-if="holidaySet.has(data.day)" size="small" effect="dark" type="success">
+                休
+              </el-tag>
+              <el-tag v-else size="small" effect="dark"> 班 </el-tag>
+            </div>
+            <div
+              class="text-12px text-#909399 mt-2px"
+              :class="{ 'text-#67c23a': hasFestival(data.day) }"
+            >
+              {{ getLunarDisplay(data.day) }}
+            </div>
+            <!-- 班次信息 -->
+            <template v-if="!holidaySet.has(data.day)">
+              <div
+                v-for="item in getTeamShiftsForDay(data.day)"
+                :key="item.sort"
+                class="mt-2px"
+              >
+                <el-button
+                  v-if="item.sort === 1"
+                  type="success"
+                  size="small"
+                  class="!w-full !text-12px"
+                >
+                  {{ item.teamName }}
+                </el-button>
+                <el-button
+                  v-else-if="item.sort === 2"
+                  :type="getShiftTypeForDay(data.day) === MesCalShiftTypeEnum.THREE ? 'warning' : 'info'"
+                  size="small"
+                  class="!w-full !text-12px"
+                >
+                  {{ item.teamName }}
+                </el-button>
+                <el-button
+                  v-else-if="item.sort === 3"
+                  type="info"
+                  size="small"
+                  class="!w-full !text-12px"
+                >
+                  {{ item.teamName }}
+                </el-button>
+              </div>
+            </template>
+          </div>
+        </template>
+      </el-calendar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CalCalendarApi, CalCalendarDayVO } from '@/api/mes/cal/calendar'
+import { CalTeamApi, CalTeamVO } from '@/api/mes/cal/team'
+import { CalHolidayApi, CalHolidayVO } from '@/api/mes/cal/holiday'
+import { formatDate } from '@/utils/formatTime'
+import { SolarDay } from 'tyme4ts'
+import { HolidayType, MesCalShiftTypeEnum } from '@/views/mes/utils/constants'
+
+const loading = ref(false)
+const currentDate = ref(new Date())
+const selectedTeamId = ref<number>()
+const teamList = ref<CalTeamVO[]>([])
+const calendarDayMap = ref<Map<string, CalCalendarDayVO>>(new Map())
+const holidaySet = ref(new Set<string>())
+
+/** 获取班组列表 */
+const getTeamList = async () => {
+  teamList.value = await CalTeamApi.getTeamList()
+}
+
+/** 获取假期列表 */
+const getHolidayList = async () => {
+  holidaySet.value.clear()
+  const list = await CalHolidayApi.getHolidayList()
+  if (list) {
+    list.forEach((item: CalHolidayVO) => {
+      const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
+      if (day && item.type === HolidayType.HOLIDAY) {
+        holidaySet.value.add(day)
+      }
+    })
+  }
+}
+
+/** 查询排班日历 */
+const fetchCalendar = async () => {
+  if (!selectedTeamId.value) return
+  loading.value = true
+  try {
+    const date = currentDate.value
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    const startDay = new Date(year, month, 1)
+    const endDay = new Date(year, month + 1, 0, 23, 59, 59)
+    const list = await CalCalendarApi.getCalendarList({
+      queryType: 'TEAM',
+      teamId: selectedTeamId.value,
+      startDay: formatDate(startDay, 'YYYY-MM-DD HH:mm:ss'),
+      endDay: formatDate(endDay, 'YYYY-MM-DD HH:mm:ss')
+    })
+    calendarDayMap.value.clear()
+    if (list) {
+      list.forEach((item: CalCalendarDayVO) => {
+        calendarDayMap.value.set(item.day, item)
+      })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 选择班组 */
+const onTeamSelected = () => {
+  fetchCalendar()
+}
+
+/** 获取指定日期的班次列表 */
+const getTeamShiftsForDay = (day: string) => {
+  const calDay = calendarDayMap.value.get(day)
+  return calDay?.teamShifts || []
+}
+
+/** 获取指定日期的轮班方式 */
+const getShiftTypeForDay = (day: string) => {
+  const calDay = calendarDayMap.value.get(day)
+  return calDay?.shiftType
+}
+
+/** 判断是否周末 */
+const isWeekend = (day: string): boolean => {
+  const date = new Date(day)
+  const weekDay = date.getDay()
+  return weekDay === 0 || weekDay === 6
+}
+
+/** 获取农历显示信息 */
+const getLunarInfo = (day: string) => {
+  const parts = day.split('-')
+  const year = parseInt(parts[0])
+  const month = parseInt(parts[1])
+  const date = parseInt(parts[2])
+  try {
+    const solarDay = SolarDay.fromYmd(year, month, date)
+    const lunarDay = solarDay.getLunarDay()
+    const solarFestival = solarDay.getFestival()
+    const lunarFestival = lunarDay.getFestival()
+    const termDay = solarDay.getTermDay()
+    const termName = termDay.getDayIndex() === 0 ? termDay.getSolarTerm().getName() : null
+    const lunarMonthName = lunarDay.getLunarMonth().getName()
+    const lunarDayName = lunarDay.getName()
+    return {
+      solarFestival: solarFestival ? solarFestival.getName() : null,
+      lunarFestival: lunarFestival ? lunarFestival.getName() : null,
+      termName,
+      lunarText: lunarMonthName + lunarDayName
+    }
+  } catch {
+    return { solarFestival: null, lunarFestival: null, termName: null, lunarText: '' }
+  }
+}
+
+/** 获取农历显示文本 */
+const getLunarDisplay = (day: string): string => {
+  const info = getLunarInfo(day)
+  return info.solarFestival || info.lunarFestival || info.termName || info.lunarText
+}
+
+/** 判断是否有节日 */
+const hasFestival = (day: string): boolean => {
+  const info = getLunarInfo(day)
+  return !!(info.solarFestival || info.lunarFestival || info.termName)
+}
+
+// 监听月份变化
+watch(currentDate, () => {
+  if (selectedTeamId.value) {
+    fetchCalendar()
+  }
+})
+
+/** 初始化 */
+onMounted(() => {
+  getTeamList()
+  getHolidayList()
+})
+</script>
diff --git a/src/views/mes/cal/calendar/index.vue b/src/views/mes/cal/calendar/index.vue
new file mode 100644
index 000000000..dbb3bb370
--- /dev/null
+++ b/src/views/mes/cal/calendar/index.vue
@@ -0,0 +1,26 @@
+<!-- MES 排班日历 -->
+<template>
+  <ContentWrap>
+    <el-tabs v-model="activeTab" type="border-card">
+      <el-tab-pane label="按分类" name="type">
+        <CalendarTypeView />
+      </el-tab-pane>
+      <el-tab-pane label="按班组" name="team">
+        <TeamView />
+      </el-tab-pane>
+      <el-tab-pane label="按个人" name="user">
+        <PersonView />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import CalendarTypeView from './CalendarTypeView.vue'
+import TeamView from './TeamView.vue'
+import PersonView from './PersonView.vue'
+
+defineOptions({ name: 'MesCalCalendar' })
+
+const activeTab = ref('type')
+</script>