feat(mes): 优化排班日历功能，新增假期按日期范围查询逻辑及假期类型枚举
YunaiV
parent
f4239e8a0e
commit
e5bd477a7e
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue