@@ -53,14 +53,19 @@
'other-month': !date.isCurrentMonth,
'today': date.isToday,
'selected': date.isSelected,
'has-event': date.hasEvent
'has-event': date.hasEvent,
'legal-holiday': date.isHoliday
}
]"
@click ="selectDate(date, $event)"
@mouseenter ="selectDate(date, $event)"
>
< span class = "date-number" > { { date . day } } < / span >
< div v-if = "date.hasEvent && !isRestDay(date.dateStr)" class="event-dot" :class="getEventTypeClass(date.dateStr)" > < / div >
< span v-if = "isRestDay(date.dateStr)" class="rest-text" > 休 < / span >
< span v-if = "date.isHoliday" class="holiday-text" > 休 < / span >
< div v-if = "isHolidayStart(date.dateStr)" class="holiday-name" >
< span v-for = "(char, index) in getHolidayName(date.dateStr)" :key="index" class="holiday-char" > {{ char }} < / span >
< / div >
< / div >
< / div >
@@ -253,7 +258,7 @@
import { ref , computed , onMounted } from 'vue' ;
import { useRouter } from 'vue-router' ;
import { useUserStore } from '@/stores/user' ;
import { getCampPeriodAdmin } from '@/api/secondTop.js'
import { getCampPeriodAdmin , changeCampPeriod } from '@/api/secondTop.js'
// 响应式数据
const currentYear = ref ( new Date ( ) . getFullYear ( ) ) ;
@@ -298,6 +303,63 @@ const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
// 示例事件数据
const events = ref ( [ ] ) ;
// 节假日数据
const holidays = ref ( [ ] ) ;
// 获取节假日数据
const fetchHolidays = async ( year ) => {
try {
const response = await fetch ( ` https://timor.tech/api/holiday/year/ ${ year } / ` ) ;
const data = await response . json ( ) ;
if ( data && data . holiday ) {
const holidayList = [ ] ;
Object . keys ( data . holiday ) . forEach ( key => {
const holiday = data . holiday [ key ] ;
holidayList . push ( {
date : holiday . date ,
name : holiday . name ,
isHoliday : ! holiday . target // 如果没有target字段, 说明是法定节假日而不是调休
} ) ;
} ) ;
holidays . value = holidayList ;
}
} catch ( error ) {
console . error ( '获取节假日数据失败:' , error ) ;
holidays . value = [ ] ;
}
} ;
// 判断是否为法定节假日
const isLegalHoliday = ( dateStr ) => {
return holidays . value . some ( holiday => holiday . date === dateStr && holiday . isHoliday ) ;
} ;
// 获取节假日名称
const getHolidayName = ( dateStr ) => {
const holiday = holidays . value . find ( holiday => holiday . date === dateStr && holiday . isHoliday ) ;
return holiday ? holiday . name : '' ;
} ;
// 判断是否为节假日的开始日期
const isHolidayStart = ( dateStr ) => {
if ( ! isLegalHoliday ( dateStr ) ) return false ;
const currentHoliday = holidays . value . find ( holiday => holiday . date === dateStr && holiday . isHoliday ) ;
if ( ! currentHoliday ) return false ;
// 检查前一天是否也是同一个节假日
const currentDate = new Date ( dateStr ) ;
const previousDate = new Date ( currentDate ) ;
previousDate . setDate ( previousDate . getDate ( ) - 1 ) ;
const previousDateStr = ` ${ previousDate . getFullYear ( ) } - ${ String ( previousDate . getMonth ( ) + 1 ) . padStart ( 2 , '0' ) } - ${ String ( previousDate . getDate ( ) ) . padStart ( 2 , '0' ) } ` ;
const previousHoliday = holidays . value . find ( holiday => holiday . date === previousDateStr && holiday . isHoliday ) ;
// 如果前一天不是节假日,或者前一天是不同名称的节假日,则当前日期是节假日的开始
return ! previousHoliday || previousHoliday . name !== currentHoliday . name ;
} ;
// 计算属性:当前月份的日期数组
const calendarDates = computed ( ( ) => {
const dates = [ ] ;
@@ -317,6 +379,7 @@ const calendarDates = computed(() => {
const isCurrentMonth = date . getMonth ( ) === currentMonth . value ;
const isToday = dateStr === todayString ;
const hasEvent = events . value . some ( event => event . date === dateStr ) ;
const isHoliday = isLegalHoliday ( dateStr ) ;
dates . push ( {
key : ` ${ date . getFullYear ( ) } - ${ date . getMonth ( ) } - ${ date . getDate ( ) } ` ,
@@ -326,7 +389,9 @@ const calendarDates = computed(() => {
isCurrentMonth : isCurrentMonth ,
isToday : isToday ,
isSelected : selectedDate . value && selectedDate . value . dateStr === dateStr ,
hasEvent : hasEvent
hasEvent : hasEvent ,
isHoliday : isHoliday ,
holidayName : isHoliday ? getHolidayName ( dateStr ) : ''
} ) ;
}
@@ -347,29 +412,43 @@ const selectedDateEvents = computed(() => {
} ) ;
// 方法:上一月
const previousMonth = ( ) => {
const previousMonth = async ( ) => {
const oldYear = currentYear . value ;
if ( currentMonth . value === 0 ) {
currentMonth . value = 11 ;
currentYear . value -- ;
} else {
currentMonth . value -- ;
}
// 如果年份发生变化,重新获取节假日数据
if ( oldYear !== currentYear . value ) {
await fetchHolidays ( currentYear . value ) ;
}
} ;
// 方法:下一月
const nextMonth = ( ) => {
const nextMonth = async ( ) => {
const oldYear = currentYear . value ;
if ( currentMonth . value === 11 ) {
currentMonth . value = 0 ;
currentYear . value ++ ;
} else {
currentMonth . value ++ ;
}
// 如果年份发生变化,重新获取节假日数据
if ( oldYear !== currentYear . value ) {
await fetchHolidays ( currentYear . value ) ;
}
} ;
// 方法:选择日期
const selectDate = ( date , event ) => {
selectedDate . value = date ;
if ( event ) {
// 只有当日期有事件时才显示悬浮框
if ( event && date . hasEvent ) {
tooltipPosition . value = {
x : event . clientX + 10 ,
y : event . clientY - 10
@@ -405,7 +484,6 @@ const loadHistoryPeriods = async () => {
try {
// 这里可以调用API获取历史营期数据
// const result = await getHistoryCampPeriods();
// 模拟历史营期数据
historyPeriods . value = [
{
@@ -455,10 +533,15 @@ const saveCampSettings = async () => {
isSaving . value = true ;
try {
// 调用API设置营期参数并获取营期安排
const result = await CenterCampPeriodAdmin ( {
// 获取用户参数
const params = getRequestParams ( ) ;
// 调用changeCampPeriod API设置营期参数
const result = await changeCampPeriod ( {
receipt _data _time : campDays . value . toString ( ) ,
rest _days : restDays . value . toString ( )
rest _time : restDays . value . toString ( ) ,
user _level : "4" ,
user _name : params . user _name || "潘加俊"
} ) ;
if ( result && result . data ) {
@@ -467,6 +550,9 @@ const saveCampSettings = async () => {
campDays . value = null ;
restDays . value = null ;
alert ( '营期设置成功!' ) ;
// 重新获取营期数据以更新日历显示
await CenterCampPeriodAdmin ( ) ;
}
} catch ( error ) {
console . error ( '保存营期设置失败:' , error ) ;
@@ -561,29 +647,26 @@ const saveNextCampSettings = async () => {
}
try {
// 先结束当前营期
isCampFinished . value = true ;
await CenterCampPeriodAdmin ( {
is _camp _finish : "11"
} ) ;
// 设置下一营期
await CenterCampPeriodAdmin ( {
receipt _data _start _time : nextCampStartDate . value ,
// 发送包含四个必需参数的请求
const result = await CenterCampPeriodAdmin ( {
is _camp _finish : "true" ,
camp _start _time : nextCampStartDate . value ,
receipt _data _time : nextCampDataDays . value . toString ( ) ,
rest _days : nextCampRestDays . value . toString ( )
rest _time : nextCampRestDays . value . toString ( )
} ) ;
// 关闭弹框并重置数据
showNextCampModal . value = false ;
n extCampStartDate . value = '' ;
nextCampDataDays . value = null ;
nextCampRest Days . value = null ;
if ( result && result . data ) {
// 关闭弹框并重置数据
showN extCampModal . value = false ;
nextCampStartDate . value = '' ;
nextCampData Days . value = null ;
nextCampRestDays . value = null ;
isCampFinished . value = true ;
alert ( '营期设置成功!' ) ;
alert ( '营期设置成功!' ) ;
}
} catch ( error ) {
console . error ( '营期设置失败:' , error ) ;
isCampFinished . value = false ;
alert ( '营期设置失败,请重试' ) ;
}
} ;
@@ -620,11 +703,7 @@ const getRequestParams = () => {
return params
}
// 判断是否为路由导航(有路由参数)
const isRouteNavigation = computed ( ( ) => {
const routeUserName = router . currentRoute . value . query . user _name || router . currentRoute . value . params . user _name
return ! ! routeUserName
} )
// 获取和设置当前营期阶段 getCampPeriodAdmin
async function CenterCampPeriodAdmin ( data = { } ) {
const params = getRequestParams ( )
@@ -632,7 +711,15 @@ async function CenterCampPeriodAdmin(data = {}) {
// 根据传入的参数决定传递哪些数据
let Finsh = { }
if ( data . is _camp _finish !== undefined ) {
// 检查是否传入了新的四个参数格式
if ( data . is _camp _finish && data . camp _start _time && data . receipt _data _time && data . rest _time ) {
// 新的四个参数格式:同时设置营期结束和下一营期
Finsh . is _camp _finish = data . is _camp _finish
Finsh . camp _start _time = data . camp _start _time
Finsh . receipt _data _time = data . receipt _data _time
Finsh . rest _time = data . rest _time
} else if ( data . is _camp _finish !== undefined ) {
// 结束营期时, 只传递is_camp_finish参数
Finsh . is _camp _finish = data . is _camp _finish
} else if ( data . receipt _data _start _time && data . receipt _data _time ) {
@@ -655,8 +742,6 @@ async function CenterCampPeriodAdmin(data = {}) {
}
// 如果没有营期设置数据, Finsh 保持为空对象,用于获取现有数据
}
console . log ( 'Finsh' , Finsh )
console . log ( 'params' , params )
// 确保总是传递用户参数,即使是获取数据时
const finalParams = hasParams ? { ... params , ... Finsh } : ( Object . keys ( Finsh ) . length > 0 ? Finsh : { } )
@@ -760,6 +845,9 @@ onMounted(async () => {
selectedDate . value = todayDate ;
}
// 获取当前年份的节假日数据
await fetchHolidays ( currentYear . value ) ;
// 获取现有的营期数据
try {
const result = await CenterCampPeriodAdmin ( ) ;
@@ -911,7 +999,7 @@ onMounted(async () => {
width : 6 px ;
height : 6 px ;
border - radius : 50 % ;
background : # ff6b6b ;
background : rgb ( 146 , 107 , 107 ) ;
position : absolute ;
bottom : 8 px ;
}
@@ -920,6 +1008,10 @@ onMounted(async () => {
background : # 4 ecdc4 ;
}
. date - cell . has - event . event - dot . event - data {
background : # ff4757 ! important ;
}
. date - tooltip {
position : fixed ;
z - index : 1000 ;
@@ -1197,8 +1289,8 @@ onMounted(async () => {
/* 营期事件类型样式 */
. event - dot . event - data {
background : linear - gradient ( 135 deg , # 9 c27b0 , # 7 b1fa2 ) ;
box - shadow : 0 2 px 4 px rgba ( 156 , 39 , 176 , 0.3 ) ;
background : # ff4757 ;
box - shadow : 0 2 px 4 px rgba ( 255 , 71 , 87 , 0.3 ) ;
}
. event - dot . event - course {
@@ -1225,6 +1317,60 @@ onMounted(async () => {
line - height : 1 ;
}
/* 法定节假日样式 */
. date - cell . legal - holiday {
background : linear - gradient ( 135 deg , # fff3e0 , # ffcc80 ) ;
color : # d84315 ;
}
. date - cell . legal - holiday . date - number {
color : # d84315 ;
font - weight : 600 ;
}
. holiday - text {
position : absolute ;
bottom : 2 px ;
right : 2 px ;
font - size : 10 px ;
color : white ;
font - weight : bold ;
background : rgba ( 255 , 255 , 255 , 0.2 ) ;
padding : 1 px 3 px ;
border - radius : 2 px ;
line - height : 1 ;
}
/* 节假日名称样式 */
. holiday - name {
position : absolute ;
top : 2 px ;
left : 2 px ;
display : flex ;
flex - direction : column ;
align - items : center ;
z - index : 2 ;
}
. holiday - char {
font - size : 8 px ;
color : # d63031 ;
font - weight : bold ;
line - height : 1 ;
margin - bottom : 1 px ;
text - shadow : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.3 ) ;
background : rgba ( 255 , 255 , 255 , 0.9 ) ;
border - radius : 2 px ;
padding : 1 px 2 px ;
min - width : 10 px ;
text - align : center ;
}
. date - cell . legal - holiday . holiday - char {
color : # d63031 ;
background : rgba ( 255 , 255 , 255 , 0.9 ) ;
}
/* 确认弹框样式 */
. confirm - modal {
max - width : 420 px ;