review（mes）：cal-calender 日历功能
YunaiV
parent
b8254baf5a
commit
e7a8095a35
|
|
@ -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 })
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue