|
|
|
|
@ -0,0 +1,709 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="admin-calendar">
|
|
|
|
|
<!-- 顶部操作区 -->
|
|
|
|
|
<div class="admin-header">
|
|
|
|
|
<el-button type="success" icon="el-icon-plus" @click="openCreateModal('add')">新建日历事件</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 日历预览区 -->
|
|
|
|
|
<div class="admin-main">
|
|
|
|
|
<div class="calendar-panel">
|
|
|
|
|
<div class="calendar-wrapper">
|
|
|
|
|
<el-calendar v-model="calendarDate" :first-day-of-week="7">
|
|
|
|
|
<template slot="dateCell" slot-scope="{date}">
|
|
|
|
|
<div class="cell-content">
|
|
|
|
|
<span class="date-number">{{ date.getDate() }}</span>
|
|
|
|
|
<div class="event-list">
|
|
|
|
|
<div
|
|
|
|
|
v-for="ev in eventsForDate(date)"
|
|
|
|
|
:key="ev._id"
|
|
|
|
|
:class="['event-item', getEventClass(ev, date)]"
|
|
|
|
|
:title="getEventTooltip(ev, date)"
|
|
|
|
|
@click.stop="openCreateModal('editor', ev.id)"
|
|
|
|
|
>
|
|
|
|
|
<span class="event-title">{{ ev.title }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-calendar>
|
|
|
|
|
<!-- 连续事件覆盖层 -->
|
|
|
|
|
<div class="continuous-events-overlay">
|
|
|
|
|
<div
|
|
|
|
|
v-for="event in getContinuousEvents()"
|
|
|
|
|
:key="`continuous-${event.id}-${event.weekStart}`"
|
|
|
|
|
:class="['continuous-event', `event-type-${event.type || 'default'}`]"
|
|
|
|
|
:style="getContinuousEventStyle(event)"
|
|
|
|
|
:title="getEventTooltip(event, new Date(event.weekStart))"
|
|
|
|
|
@click.stop="openCreateModal('editor', event.id)"
|
|
|
|
|
>
|
|
|
|
|
{{ event.title }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<addCalendar ref="addCalendar" @refresh="getList"></addCalendar>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import addCalendar from './components/addCalendar.vue'
|
|
|
|
|
import {
|
|
|
|
|
index
|
|
|
|
|
} from '@/api/calendars/index.js'
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
addCalendar
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
list: [],
|
|
|
|
|
calendarDate: new Date()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
selectMonth() {
|
|
|
|
|
const now = this.calendarDate instanceof Date ? this.calendarDate : new Date(this.calendarDate)
|
|
|
|
|
const month = now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1
|
|
|
|
|
const year = now.getFullYear()
|
|
|
|
|
return year + '-' + month
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
calendarDate: {
|
|
|
|
|
handler() {
|
|
|
|
|
this.getList()
|
|
|
|
|
},
|
|
|
|
|
deep: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getList()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async getList() {
|
|
|
|
|
const res = await index({
|
|
|
|
|
month: this.selectMonth
|
|
|
|
|
})
|
|
|
|
|
this.list = res
|
|
|
|
|
},
|
|
|
|
|
openCreateModal(type, id) {
|
|
|
|
|
if (type === 'editor') {
|
|
|
|
|
this.$refs.addCalendar.id = id
|
|
|
|
|
}
|
|
|
|
|
this.$refs.addCalendar.type = type
|
|
|
|
|
this.$refs.addCalendar.isShow = true
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
eventsForDate(date) {
|
|
|
|
|
const d = new Date(date)
|
|
|
|
|
return this.list.filter(ev => {
|
|
|
|
|
const startDate = this.parseDateTime(ev.start_time)
|
|
|
|
|
|
|
|
|
|
// 如果没有end_time，只在start_time的日期显示
|
|
|
|
|
if (!ev.end_time) {
|
|
|
|
|
const currentDate = new Date(d.getFullYear(), d.getMonth(), d.getDate())
|
|
|
|
|
const eventStartDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())
|
|
|
|
|
return currentDate.getTime() === eventStartDate.getTime()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const endDate = this.parseDateTime(ev.end_time)
|
|
|
|
|
|
|
|
|
|
// 判断是否是跨天事件
|
|
|
|
|
const isMultiDay = startDate.getDate() !== endDate.getDate() ||
|
|
|
|
|
startDate.getMonth() !== endDate.getMonth() ||
|
|
|
|
|
startDate.getFullYear() !== endDate.getFullYear()
|
|
|
|
|
|
|
|
|
|
// 跨天事件不在单元格中显示，只在覆盖层显示
|
|
|
|
|
if (isMultiDay) {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 单天事件正常显示
|
|
|
|
|
const currentDate = new Date(d.getFullYear(), d.getMonth(), d.getDate())
|
|
|
|
|
const eventStartDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())
|
|
|
|
|
return currentDate.getTime() === eventStartDate.getTime()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getEventClass(event, date) {
|
|
|
|
|
const startDate = new Date(event.start_time)
|
|
|
|
|
const currentDate = new Date(date)
|
|
|
|
|
|
|
|
|
|
// 如果没有end_time，直接返回单天事件样式
|
|
|
|
|
if (!event.end_time) {
|
|
|
|
|
return `single-day event-type-${event.type || 'default'}`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const endDate = new Date(event.end_time)
|
|
|
|
|
|
|
|
|
|
// 判断是否是跨天事件
|
|
|
|
|
const isMultiDay = startDate.getDate() !== endDate.getDate() ||
|
|
|
|
|
startDate.getMonth() !== endDate.getMonth() ||
|
|
|
|
|
startDate.getFullYear() !== endDate.getFullYear()
|
|
|
|
|
|
|
|
|
|
if (!isMultiDay) {
|
|
|
|
|
return `single-day event-type-${event.type || 'default'}`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 判断当前日期在跨天事件中的位置
|
|
|
|
|
const eventStartDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())
|
|
|
|
|
const eventEndDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())
|
|
|
|
|
const currentDateOnly = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
|
|
|
|
|
|
|
|
|
|
if (currentDateOnly.getTime() === eventStartDate.getTime()) {
|
|
|
|
|
return `multi-day-start event-type-${event.type || 'default'}`
|
|
|
|
|
} else if (currentDateOnly.getTime() === eventEndDate.getTime()) {
|
|
|
|
|
return `multi-day-end event-type-${event.type || 'default'}`
|
|
|
|
|
} else {
|
|
|
|
|
return `multi-day-middle event-type-${event.type || 'default'}`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getEventTooltip(event, date) {
|
|
|
|
|
const startDate = new Date(event.start_time)
|
|
|
|
|
|
|
|
|
|
// 如果没有end_time，只显示事件标题和开始时间
|
|
|
|
|
if (!event.end_time) {
|
|
|
|
|
return `${event.title}\n时间：${this.formatDateTime(event.start_time)}`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const endDate = new Date(event.end_time)
|
|
|
|
|
|
|
|
|
|
const isMultiDay = startDate.getDate() !== endDate.getDate() ||
|
|
|
|
|
startDate.getMonth() !== endDate.getMonth() ||
|
|
|
|
|
startDate.getFullYear() !== endDate.getFullYear()
|
|
|
|
|
|
|
|
|
|
if (isMultiDay) {
|
|
|
|
|
return `${event.title}\n时间：${this.formatDateTime(event.start_time)} ~ ${this.formatDateTime(event.end_time)}`
|
|
|
|
|
} else {
|
|
|
|
|
return `${event.title}\n时间：${this.formatDateTime(event.start_time)} ~ ${this.formatDateTime(event.end_time)}`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getContinuousEvents() {
|
|
|
|
|
const FIRST_DOW = 0 // 0=Sunday to match :first-day-of-week="7" on el-calendar
|
|
|
|
|
const continuousEvents = []
|
|
|
|
|
|
|
|
|
|
// 仅选择跨天事件
|
|
|
|
|
const multiDayEvents = this.list.filter(ev => {
|
|
|
|
|
if (!ev.end_time) return false
|
|
|
|
|
const s = this.parseDateTime(ev.start_time)
|
|
|
|
|
const e = this.parseDateTime(ev.end_time)
|
|
|
|
|
return s.toDateString() !== e.toDateString()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const currentMonth = this.calendarDate.getMonth()
|
|
|
|
|
const currentYear = this.calendarDate.getFullYear()
|
|
|
|
|
const monthStart = new Date(currentYear, currentMonth, 1)
|
|
|
|
|
const monthEnd = new Date(currentYear, currentMonth + 1, 0)
|
|
|
|
|
|
|
|
|
|
function getWeekStart(date) {
|
|
|
|
|
const d = new Date(date)
|
|
|
|
|
const jsDow = d.getDay() // 0..6 (Sun..Sat)
|
|
|
|
|
const offset = (jsDow - FIRST_DOW + 7) % 7
|
|
|
|
|
d.setDate(d.getDate() - offset)
|
|
|
|
|
return d
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
multiDayEvents.forEach(ev => {
|
|
|
|
|
const eventStart = this.parseDateTime(ev.start_time)
|
|
|
|
|
const eventEnd = this.parseDateTime(ev.end_time)
|
|
|
|
|
|
|
|
|
|
if (eventEnd < monthStart || eventStart > monthEnd) return
|
|
|
|
|
|
|
|
|
|
// Clamp to month range so we only render in current month viewport
|
|
|
|
|
const clampedStart = eventStart < monthStart ? monthStart : eventStart
|
|
|
|
|
const clampedEnd = eventEnd > monthEnd ? monthEnd : eventEnd
|
|
|
|
|
|
|
|
|
|
let cursor = getWeekStart(clampedStart)
|
|
|
|
|
while (cursor <= clampedEnd) {
|
|
|
|
|
const weekStart = new Date(cursor)
|
|
|
|
|
const weekEnd = new Date(cursor)
|
|
|
|
|
weekEnd.setDate(weekEnd.getDate() + 6)
|
|
|
|
|
|
|
|
|
|
// Segment inside this week
|
|
|
|
|
const segStart = clampedStart > weekStart ? clampedStart : weekStart
|
|
|
|
|
const segEnd = clampedEnd < weekEnd ? clampedEnd : weekEnd
|
|
|
|
|
if (segStart <= segEnd) {
|
|
|
|
|
const startCol = (segStart.getDay() - FIRST_DOW + 7) % 7
|
|
|
|
|
const endCol = (segEnd.getDay() - FIRST_DOW + 7) % 7
|
|
|
|
|
const spanCols = endCol - startCol + 1
|
|
|
|
|
continuousEvents.push({
|
|
|
|
|
...ev,
|
|
|
|
|
weekStartISO: weekStart.toISOString(),
|
|
|
|
|
segStartISO: segStart.toISOString(),
|
|
|
|
|
segEndISO: segEnd.toISOString(),
|
|
|
|
|
startCol,
|
|
|
|
|
spanCols,
|
|
|
|
|
endCol
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
cursor.setDate(cursor.getDate() + 7)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 为同一周的分段分配“轨道”（lane），避免垂直重叠
|
|
|
|
|
const byWeek = {}
|
|
|
|
|
continuousEvents.forEach(seg => {
|
|
|
|
|
const key = seg.weekStartISO
|
|
|
|
|
if (!byWeek[key]) byWeek[key] = []
|
|
|
|
|
byWeek[key].push(seg)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
Object.values(byWeek).forEach(segs => {
|
|
|
|
|
// 按开始列排序，开始相同则优先更长的，减少冲突
|
|
|
|
|
segs.sort((a, b) => (a.startCol - b.startCol) || (b.spanCols - a.spanCols))
|
|
|
|
|
const laneEndCols = [] // 每个轨道当前占据的最后列
|
|
|
|
|
segs.forEach(seg => {
|
|
|
|
|
let placed = false
|
|
|
|
|
for (let i = 0; i < laneEndCols.length; i += 1) {
|
|
|
|
|
if (laneEndCols[i] < seg.startCol) {
|
|
|
|
|
seg.laneIndex = i
|
|
|
|
|
laneEndCols[i] = seg.endCol
|
|
|
|
|
placed = true
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!placed) {
|
|
|
|
|
seg.laneIndex = laneEndCols.length
|
|
|
|
|
laneEndCols.push(seg.endCol)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return continuousEvents
|
|
|
|
|
},
|
|
|
|
|
getContinuousEventStyle(event) {
|
|
|
|
|
const FIRST_DOW = 0
|
|
|
|
|
const currentMonth = this.calendarDate.getMonth()
|
|
|
|
|
const currentYear = this.calendarDate.getFullYear()
|
|
|
|
|
const firstDay = new Date(currentYear, currentMonth, 1)
|
|
|
|
|
|
|
|
|
|
// 可控的视觉偏移：将分段起始向后顺延 7 天
|
|
|
|
|
const adjStart = new Date(event.segStartISO)
|
|
|
|
|
adjStart.setDate(adjStart.getDate() + 7)
|
|
|
|
|
|
|
|
|
|
const msPerDay = 1000 * 60 * 60 * 24
|
|
|
|
|
const daysFromFirstOfMonth = Math.floor((adjStart - firstDay) / msPerDay)
|
|
|
|
|
const firstDayOffset = (firstDay.getDay() - FIRST_DOW + 7) % 7
|
|
|
|
|
const totalDaysFromCalendarStart = daysFromFirstOfMonth + firstDayOffset
|
|
|
|
|
const weekRow = Math.floor(totalDaysFromCalendarStart / 7)
|
|
|
|
|
|
|
|
|
|
// 起始列使用偏移后的日期重新计算
|
|
|
|
|
const startColAdjusted = (adjStart.getDay() - FIRST_DOW + 7) % 7
|
|
|
|
|
|
|
|
|
|
const cellWidth = 100 / 7
|
|
|
|
|
const cellHeight = 100
|
|
|
|
|
const headerHeight = 50
|
|
|
|
|
const dateNumberHeight = 25
|
|
|
|
|
const eventHeight = 16
|
|
|
|
|
const eventSpacing = 2
|
|
|
|
|
const verticalOffset = (event.laneIndex || 0) * (eventHeight + eventSpacing)
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
left: `calc(${startColAdjusted * cellWidth}% + 2px)`,
|
|
|
|
|
top: `${headerHeight + weekRow * cellHeight + dateNumberHeight + verticalOffset}px`,
|
|
|
|
|
width: `calc(${event.spanCols * cellWidth}% - 4px)`,
|
|
|
|
|
height: `${eventHeight}px`,
|
|
|
|
|
zIndex: 1000,
|
|
|
|
|
background: `linear-gradient(90deg, ${this.getEventTypeColor(event.type)} 0%, ${this.darkenColor(this.getEventTypeColor(event.type))} 100%)`,
|
|
|
|
|
borderRadius: '3px',
|
|
|
|
|
fontSize: '11px',
|
|
|
|
|
lineHeight: `${eventHeight}px`,
|
|
|
|
|
color: 'white',
|
|
|
|
|
padding: '0 4px',
|
|
|
|
|
whiteSpace: 'nowrap',
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
textOverflow: 'ellipsis',
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getEventStyle(event, date) {
|
|
|
|
|
const startDate = new Date(event.start_time)
|
|
|
|
|
const currentDate = new Date(date)
|
|
|
|
|
|
|
|
|
|
// 如果没有end_time，使用默认样式
|
|
|
|
|
if (!event.end_time) {
|
|
|
|
|
return {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const endDate = new Date(event.end_time)
|
|
|
|
|
|
|
|
|
|
// 判断是否是跨天事件
|
|
|
|
|
const isMultiDay = startDate.getDate() !== endDate.getDate() ||
|
|
|
|
|
startDate.getMonth() !== endDate.getMonth() ||
|
|
|
|
|
startDate.getFullYear() !== endDate.getFullYear()
|
|
|
|
|
|
|
|
|
|
if (!isMultiDay) {
|
|
|
|
|
return {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取当前周的开始日期（周日）
|
|
|
|
|
const currentWeekStart = new Date(currentDate)
|
|
|
|
|
const dayOfWeek = currentDate.getDay()
|
|
|
|
|
currentWeekStart.setDate(currentDate.getDate() - dayOfWeek)
|
|
|
|
|
|
|
|
|
|
// 计算事件在当前周的开始和结束位置
|
|
|
|
|
const eventStartDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())
|
|
|
|
|
const eventEndDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())
|
|
|
|
|
const currentDateOnly = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
|
|
|
|
|
|
|
|
|
|
// 计算当前周内事件的开始和结束天数
|
|
|
|
|
const weekStart = new Date(currentWeekStart)
|
|
|
|
|
const weekEnd = new Date(currentWeekStart)
|
|
|
|
|
weekEnd.setDate(weekEnd.getDate() + 6)
|
|
|
|
|
|
|
|
|
|
// 事件在当前周的实际开始和结束日期
|
|
|
|
|
const eventWeekStart = eventStartDate < weekStart ? weekStart : eventStartDate
|
|
|
|
|
const eventWeekEnd = eventEndDate > weekEnd ? weekEnd : eventEndDate
|
|
|
|
|
|
|
|
|
|
// 如果当前日期不在事件范围内，不应用特殊样式
|
|
|
|
|
if (currentDateOnly < eventWeekStart || currentDateOnly > eventWeekEnd) {
|
|
|
|
|
return {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 如果是事件在当前周的第一天，显示标题并延伸到周末尾或事件结束
|
|
|
|
|
if (currentDateOnly.getTime() === eventWeekStart.getTime()) {
|
|
|
|
|
const startDayOfWeek = eventWeekStart.getDay()
|
|
|
|
|
const endDayOfWeek = eventWeekEnd.getDay()
|
|
|
|
|
const spanDays = endDayOfWeek - startDayOfWeek + 1
|
|
|
|
|
|
|
|
|
|
// 根据事件类型设置背景色
|
|
|
|
|
const bgColor = this.getEventTypeColor(event.type)
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
left: '0',
|
|
|
|
|
top: '1px',
|
|
|
|
|
width: `calc(${spanDays * 100}% - 2px)`,
|
|
|
|
|
zIndex: 10,
|
|
|
|
|
background: `linear-gradient(90deg, ${bgColor} 0%, ${this.darkenColor(bgColor)} 100%)`,
|
|
|
|
|
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
|
|
|
|
|
border: '1px solid rgba(255, 255, 255, 0.3)',
|
|
|
|
|
borderRadius: '3px'
|
|
|
|
|
}
|
|
|
|
|
} else if (currentDateOnly > eventWeekStart && currentDateOnly <= eventWeekEnd) {
|
|
|
|
|
// 其他天完全隐藏内容，保留占位
|
|
|
|
|
return {
|
|
|
|
|
opacity: '0',
|
|
|
|
|
pointerEvents: 'none'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {}
|
|
|
|
|
},
|
|
|
|
|
getEventDisplayTitle(event, date) {
|
|
|
|
|
const startDate = new Date(event.start_time)
|
|
|
|
|
const currentDate = new Date(date)
|
|
|
|
|
|
|
|
|
|
// 如果没有end_time，显示完整标题
|
|
|
|
|
if (!event.end_time) {
|
|
|
|
|
return event.title
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const endDate = new Date(event.end_time)
|
|
|
|
|
|
|
|
|
|
// 判断是否是跨天事件
|
|
|
|
|
const isMultiDay = startDate.getDate() !== endDate.getDate() ||
|
|
|
|
|
startDate.getMonth() !== endDate.getMonth() ||
|
|
|
|
|
startDate.getFullYear() !== endDate.getFullYear()
|
|
|
|
|
|
|
|
|
|
if (!isMultiDay) {
|
|
|
|
|
return event.title
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 对于跨天事件，只在开始日期显示标题
|
|
|
|
|
const eventStartDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())
|
|
|
|
|
const currentDateOnly = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
|
|
|
|
|
|
|
|
|
|
// 获取当前周的开始日期
|
|
|
|
|
const currentWeekStart = new Date(currentDate)
|
|
|
|
|
const dayOfWeek = currentDate.getDay()
|
|
|
|
|
currentWeekStart.setDate(currentDate.getDate() - dayOfWeek)
|
|
|
|
|
|
|
|
|
|
const weekStart = new Date(currentWeekStart)
|
|
|
|
|
const eventWeekStart = eventStartDate < weekStart ? weekStart : eventStartDate
|
|
|
|
|
|
|
|
|
|
if (currentDateOnly.getTime() === eventWeekStart.getTime()) {
|
|
|
|
|
return event.title
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return '' // 其他日期不显示标题
|
|
|
|
|
},
|
|
|
|
|
getEventTypeColor(type) {
|
|
|
|
|
// 根据事件类型返回不同颜色
|
|
|
|
|
const colorMap = {
|
|
|
|
|
1: '#67C23A', // 课程 - 绿色
|
|
|
|
|
2: '#409EFF', // 会议 - 蓝色
|
|
|
|
|
3: '#E6A23C', // 自定义事件 - 橙色
|
|
|
|
|
4: '#F56C6C', // 资讯 - 红色
|
|
|
|
|
5: '#909399', // 其他 - 灰色
|
|
|
|
|
default: '#409EFF' // 默认蓝色
|
|
|
|
|
}
|
|
|
|
|
return colorMap[type] || colorMap.default
|
|
|
|
|
},
|
|
|
|
|
// 可靠的日期解析：避免 Safari/时区导致的偏移
|
|
|
|
|
parseDateTime(dateTimeStr) {
|
|
|
|
|
if (!dateTimeStr) return null
|
|
|
|
|
// 支持 "YYYY-MM-DD HH:mm:ss" 或 "YYYY-MM-DD" 形式
|
|
|
|
|
const [datePart, timePart = '00:00:00'] = dateTimeStr.trim().split(/\s+/)
|
|
|
|
|
const [y, m, d] = datePart.split('-').map(n => parseInt(n, 10))
|
|
|
|
|
const [hh = 0, mm = 0, ss = 0] = timePart.split(':').map(n => parseInt(n, 10))
|
|
|
|
|
return new Date(y, (m || 1) - 1, d || 1, hh || 0, mm || 0, ss || 0)
|
|
|
|
|
},
|
|
|
|
|
darkenColor(color) {
|
|
|
|
|
// 将颜色变暗，用于渐变效果
|
|
|
|
|
const colorMap = {
|
|
|
|
|
'#67C23A': '#5CB85C', // 绿色变暗
|
|
|
|
|
'#409EFF': '#337ecc', // 蓝色变暗
|
|
|
|
|
'#E6A23C': '#D4952B', // 橙色变暗
|
|
|
|
|
'#F56C6C': '#E85555', // 红色变暗
|
|
|
|
|
'#909399': '#73767A' // 灰色变暗
|
|
|
|
|
}
|
|
|
|
|
return colorMap[color] || '#337ecc'
|
|
|
|
|
},
|
|
|
|
|
formatDateTime(val) {
|
|
|
|
|
if (!val) return ''
|
|
|
|
|
return val.replace('T', ' ')
|
|
|
|
|
},
|
|
|
|
|
typeText(className) {
|
|
|
|
|
if (!className) return ''
|
|
|
|
|
if (className === 1) return '课程'
|
|
|
|
|
if (className === 3) return '自定义事件'
|
|
|
|
|
if (className === 4) return '资讯'
|
|
|
|
|
return ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
filters: {
|
|
|
|
|
formatDateTime(val) {
|
|
|
|
|
if (!val) return ''
|
|
|
|
|
return val.replace('T', ' ')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
::v-deep .el-calendar__body{
|
|
|
|
|
padding-left:0;
|
|
|
|
|
padding-right:0;
|
|
|
|
|
}
|
|
|
|
|
.admin-calendar {
|
|
|
|
|
background: #f4f6fa;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.admin-header {
|
|
|
|
|
background: transparent;
|
|
|
|
|
padding: 20px 30px 10px 30px;
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.admin-main {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 20px 30px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-panel {
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
|
|
|
padding: 24px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.continuous-events-overlay {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.continuous-event {
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.continuous-event:hover {
|
|
|
|
|
transform: translateY(-1px);
|
|
|
|
|
filter: brightness(1.1);
|
|
|
|
|
z-index: 101;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Element UI 日历样式覆盖 */
|
|
|
|
|
.calendar-panel ::v-deep .el-calendar-table {
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-panel ::v-deep .el-calendar-table .el-calendar-day {
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
height: auto;
|
|
|
|
|
min-height: 100px;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-panel ::v-deep .el-calendar-table td {
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
border: 1px solid #ebeef5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-panel ::v-deep .el-calendar-table tbody tr {
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-panel ::v-deep .el-calendar-table tbody {
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cell-content {
|
|
|
|
|
position: relative;
|
|
|
|
|
min-height: 100px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.date-number {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333;
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-list {
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
padding: 1px 3px;
|
|
|
|
|
margin: 1px 0;
|
|
|
|
|
background: #409EFF;
|
|
|
|
|
color: white;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
transition: background-color 0.2s;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-title {
|
|
|
|
|
display: block;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item:hover {
|
|
|
|
|
background: #337ecc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 不同事件类型的颜色 */
|
|
|
|
|
.event-item.event-type-1 {
|
|
|
|
|
background: #67C23A; /* 课程 - 绿色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-2 {
|
|
|
|
|
background: #409EFF; /* 会议 - 蓝色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-3 {
|
|
|
|
|
background: #E6A23C; /* 自定义事件 - 橙色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-4 {
|
|
|
|
|
background: #F56C6C; /* 资讯 - 红色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-5 {
|
|
|
|
|
background: #909399; /* 其他 - 灰色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-default {
|
|
|
|
|
background: #409EFF; /* 默认 - 蓝色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 悬停效果 */
|
|
|
|
|
.event-item.event-type-1:hover {
|
|
|
|
|
background: #5CB85C;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-2:hover {
|
|
|
|
|
background: #337ecc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-3:hover {
|
|
|
|
|
background: #D4952B;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-4:hover {
|
|
|
|
|
background: #E85555;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-5:hover {
|
|
|
|
|
background: #73767A;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item.event-type-default:hover {
|
|
|
|
|
background: #337ecc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 连续事件的特殊样式 */
|
|
|
|
|
.event-item[style*="position: absolute"] {
|
|
|
|
|
border-radius: 3px !important;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.event-item[style*="position: absolute"]:hover {
|
|
|
|
|
transform: translateY(-1px);
|
|
|
|
|
filter: brightness(1.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mt-4 {
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mb-2 {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
|
.admin-header {
|
|
|
|
|
padding: 15px 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.admin-main {
|
|
|
|
|
padding: 15px 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.calendar-panel {
|
|
|
|
|
padding: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
