feat(mes): 优化排班日历功能,新增假期按日期范围查询逻辑及假期类型枚举
parent
f4239e8a0e
commit
e5bd477a7e
|
|
@ -1,8 +1,8 @@
|
||||||
<!-- 排班日历 - 日历格子(公共组件) -->
|
<!-- 排班日历 - 日历格子(公共组件) -->
|
||||||
<template>
|
<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 }">
|
<span class="text-16px font-500" :class="{ 'text-#f56c6c': isWeekend }">
|
||||||
{{ dayNumber }}
|
{{ dayNumber }}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -11,39 +11,38 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 农历 / 节气 / 节日显示 -->
|
<!-- 农历 / 节气 / 节日显示 -->
|
||||||
<div
|
<div
|
||||||
class="text-12px text-#909399 mt-2px"
|
class="text-11px text-#909399 mt-1px shrink-0 truncate"
|
||||||
:class="{ 'text-#67c23a': hasFestivalDay }"
|
:class="{ 'text-#67c23a': hasFestivalDay }"
|
||||||
>
|
>
|
||||||
{{ lunarDisplay }}
|
{{ lunarDisplay }}
|
||||||
</div>
|
</div>
|
||||||
<!-- 班次列表:节假日不显示排班 -->
|
<!-- 班次列表:节假日不显示排班 -->
|
||||||
<template v-if="!isHoliday">
|
<!--
|
||||||
<!--
|
配色规则(sort 对应轮班方式中的班次顺序):
|
||||||
配色规则(sort 对应轮班方式中的班次顺序):
|
sort=1 白班 → 绿色(#95d475)
|
||||||
sort=1 白班 → success(绿色)
|
sort=2 中班 → 三班倒用橙色(#f0a020),两班倒用灰色(#909399)
|
||||||
sort=2 中班 → 三班倒用 warning(橙色),两班倒用 info(灰色)
|
sort=3 夜班 → 灰色(#909399)
|
||||||
sort=3 夜班 → info(灰色)
|
-->
|
||||||
-->
|
<div v-if="!isHoliday" class="mt-2px flex flex-col gap-1px overflow-hidden">
|
||||||
<div v-for="item in teamShifts" :key="item.sort" class="mt-2px">
|
<div v-for="item in teamShifts" :key="item.sort">
|
||||||
<!-- sort=1 白班:绿色 -->
|
<!-- 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 }}
|
{{ item.shiftName }} · {{ item.teamName }}
|
||||||
</el-button>
|
</div>
|
||||||
<!-- sort=2 中班:三班倒时用橙色,两班倒时用灰色 -->
|
<!-- sort=2 中班:三班倒时橙色,两班倒时灰色 -->
|
||||||
<el-button
|
<div
|
||||||
v-else-if="item.sort === 2"
|
v-else-if="item.sort === 2"
|
||||||
:type="shiftType === MesCalShiftTypeEnum.THREE ? 'warning' : 'info'"
|
class="shift-tag"
|
||||||
size="small"
|
:class="shiftType === MesCalShiftTypeEnum.THREE ? 'bg-#f0a020' : 'bg-#909399'"
|
||||||
class="!w-full !text-12px"
|
|
||||||
>
|
>
|
||||||
{{ item.shiftName }} · {{ item.teamName }}
|
{{ item.shiftName }} · {{ item.teamName }}
|
||||||
</el-button>
|
</div>
|
||||||
<!-- sort=3 夜班:灰色 -->
|
<!-- 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 }}
|
{{ item.shiftName }} · {{ item.teamName }}
|
||||||
</el-button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -108,3 +107,18 @@ const hasFestivalDay = computed(() => {
|
||||||
return !!(info.solarFestival || info.lunarFestival || info.termName)
|
return !!(info.solarFestival || info.lunarFestival || info.termName)
|
||||||
})
|
})
|
||||||
</script>
|
</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 { HolidayType } from '@/views/mes/utils/constants'
|
||||||
import CalendarDateCell from './CalendarDateCell.vue'
|
import CalendarDateCell from './CalendarDateCell.vue'
|
||||||
import CalendarLegend from './CalendarLegend.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 loading = ref(false)
|
||||||
const currentDate = ref(new Date()) // 日历当前显示月份
|
const currentDate = ref(new Date()) // 日历当前显示月份
|
||||||
|
|
@ -94,7 +100,11 @@ const fetchCalendar = async () => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
list.forEach((item: CalCalendarDayVO) => {
|
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 {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,12 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||||
import { HolidayType } from '@/views/mes/utils/constants'
|
import { HolidayType } from '@/views/mes/utils/constants'
|
||||||
import CalendarDateCell from './CalendarDateCell.vue'
|
import CalendarDateCell from './CalendarDateCell.vue'
|
||||||
import CalendarLegend from './CalendarLegend.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 loading = ref(false)
|
||||||
const currentDate = ref(new Date()) // 日历当前显示月份
|
const currentDate = ref(new Date()) // 日历当前显示月份
|
||||||
|
|
@ -85,7 +91,11 @@ const fetchCalendar = async () => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
list.forEach((item: CalCalendarDayVO) => {
|
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 {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,12 @@ import { formatDate } from '@/utils/formatTime'
|
||||||
import { HolidayType } from '@/views/mes/utils/constants'
|
import { HolidayType } from '@/views/mes/utils/constants'
|
||||||
import CalendarDateCell from './CalendarDateCell.vue'
|
import CalendarDateCell from './CalendarDateCell.vue'
|
||||||
import CalendarLegend from './CalendarLegend.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 loading = ref(false)
|
||||||
const currentDate = ref(new Date()) // 日历当前显示月份
|
const currentDate = ref(new Date()) // 日历当前显示月份
|
||||||
|
|
@ -94,7 +100,11 @@ const fetchCalendar = async () => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
list.forEach((item: CalCalendarDayVO) => {
|
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 {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue