985 lines
35 KiB
Vue
985 lines
35 KiB
Vue
<template>
|
||
<div class="index-lists">
|
||
<el-card class="!border-none" shadow="never">
|
||
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
|
||
<el-form-item label="班级" prop="classId">
|
||
<el-select
|
||
v-model="queryParams.classId"
|
||
placeholder="请输入班级名称搜索"
|
||
:remote="true"
|
||
:remote-method="handleClassRemoteSearch"
|
||
:loading="classSearchLoading"
|
||
filterable
|
||
clearable
|
||
remote-show-suffix
|
||
class="w-[280px]"
|
||
@change="handleClassChange"
|
||
>
|
||
<el-option
|
||
v-for="item in getClassLists.lists"
|
||
:key="item.id"
|
||
:value="item.id"
|
||
:label="item.className"
|
||
@click="handleStudentClick(item)"
|
||
>
|
||
<template #default>
|
||
<span
|
||
style="color: var(--el-text-color-secondary); font-size: 13px"
|
||
>
|
||
{{ item.classCode }}
|
||
</span>
|
||
<span style="margin-left: 8px">{{ item.className }}</span>
|
||
</template>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="学期" prop="semesterId">
|
||
<el-select
|
||
v-model="queryParams.semesterId"
|
||
class="w-[280px]"
|
||
clearable
|
||
@change="handleSemesterChange"
|
||
>
|
||
<el-option
|
||
v-for="college in getConfigLists.lists"
|
||
:key="college.id"
|
||
:value="college.id"
|
||
:label="college.config"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="当前周数" prop="weekNumber">
|
||
<el-select
|
||
v-model="selectedWeekNumber"
|
||
:disabled="!queryParams.semesterId || weekOptions.length === 0"
|
||
class="w-[120px]"
|
||
placeholder="请选择周数"
|
||
@change="handleWeekChange"
|
||
>
|
||
<el-option
|
||
v-for="week in weekOptions"
|
||
:key="week"
|
||
:label="`第${week}周`"
|
||
:value="week"
|
||
/>
|
||
</el-select>
|
||
<div class="text-xs text-gray-500 ml-2">
|
||
{{ currentWeekDateInfo }}
|
||
</div>
|
||
</el-form-item>
|
||
<!-- 选中时间段信息显示和清除按钮 -->
|
||
<el-form-item v-if="selectedTimeSlot" label="已选中时间段">
|
||
<el-tag type="info" size="large" closable @close="clearSelectedTimeSlot">
|
||
{{ getSelectedTimeSlotText() }}
|
||
</el-tag>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
<div class="flex">
|
||
<el-card class="!border-none mt-4 mr-4" shadow="never" style="width: 75%">
|
||
<el-table class="mb-4" size="large" v-loading="loading" :data="tableData" border>
|
||
<!-- 序号列（包含时间、类型、状态） -->
|
||
<el-table-column label="节次" width="50" class-name="first-column" align="left">
|
||
<template #default="{ $index }">
|
||
<div class="index-info">
|
||
<div class="index-details">
|
||
<div class="index-number">{{ $index + 1 }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="时间" width="80" class-name="first-column" align="left">
|
||
<template #default="{ row }">
|
||
<div class="index-info">
|
||
<div class="index-details">
|
||
<div class="flex justify-center" style="font-size: 12px">
|
||
{{ getRowStartTime(row) }}
|
||
</div>
|
||
<div class="flex justify-center" style="font-size: 6px">——</div>
|
||
<div class="flex justify-center" style="font-size: 12px">
|
||
{{ getRowEndTime(row) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 星期列改为循环渲染，方便处理点击事件 -->
|
||
<el-table-column
|
||
v-for="day in weekDays"
|
||
:key="day.value"
|
||
:label="day.label"
|
||
min-width="80"
|
||
align="center"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<div
|
||
:class="[
|
||
'time-slot-cell',
|
||
isTimeSlotSelected($index, day.value, row[day.value]) ? 'time-slot-selected' : '',
|
||
row[day.value] ? '' : 'empty-slot'
|
||
]"
|
||
@click="handleTimeSlotClick($index, day.value, row[day.value])"
|
||
>
|
||
<!-- 如果有课程信息，显示课程 -->
|
||
<div v-if="row[day.value]" class="course-info">
|
||
<div class="course-name">{{ row[day.value].courseName || '课程' }}</div>
|
||
<div class="course-details">
|
||
<div>教师: {{ row[day.value].teacherName || '未知' }}</div>
|
||
<div>教室: {{ row[day.value].classroomName || '未知' }}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 空时间段显示可选状态 -->
|
||
<div v-else class="empty-slot-content">
|
||
<el-icon v-if="isTimeSlotSelected($index, day.value, row[day.value])" class="check-icon">
|
||
<Check />
|
||
</el-icon>
|
||
<span v-else class="empty-text">点击选择</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<el-card class="mt-4" shadow="never" style="width: 24%">
|
||
<!-- 改为标签页 -->
|
||
<el-tabs v-model="activeTab" style="margin-top: -10px">
|
||
<el-tab-pane label="课程列表" name="course" class="course-list-container">
|
||
<div class="mb-4">
|
||
<h3 class="text-lg font-semibold">课程列表</h3>
|
||
<p class="text-sm text-gray-500 mt-1">当前班级和学期下的可用课程</p>
|
||
</div>
|
||
<div
|
||
v-if="getCourseLists.lists.length === 0"
|
||
class="text-center py-8 text-gray-400"
|
||
>
|
||
暂无课程数据，请选择班级和学期
|
||
</div>
|
||
<div v-else class="space-y-4 max-h-[700px] overflow-y-auto">
|
||
<el-card
|
||
v-for="item in getCourseLists.lists"
|
||
:key="`course-${item.id}`"
|
||
shadow="hover"
|
||
:class="['cursor-pointer transition-all duration-200', selectedCourseId === item.id ? 'selected-card' : 'hover:bg-blue-50']"
|
||
@click="handleCourseClick(item)"
|
||
>
|
||
<div class="p-0">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h4 class="font-medium text-sm">
|
||
课程：{{ item.courseName }}
|
||
</h4>
|
||
</div>
|
||
<el-tag v-if="selectedCourseId === item.id" size="small" type="info">
|
||
共{{ item.totalWeeks }}周
|
||
</el-tag>
|
||
</div>
|
||
<div class="flex justify-between text-xs text-gray-600">
|
||
<span>教师: {{ item.teacherName }}</span>
|
||
<span>总学时: {{ item.totalHours }}</span>
|
||
</div>
|
||
<div
|
||
v-if="selectedCourseId === item.id"
|
||
class="pt-3 border-t border-gray-100"
|
||
>
|
||
<div class="text-xs text-gray-700">
|
||
<div class="flex items-center mb-1">
|
||
<span class="font-medium">周学时:</span>
|
||
<span>{{ Math.round(item.totalHours / item.totalWeeks) }}</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="font-medium">任务代码:</span>
|
||
<span>{{ item.taskCode }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<div class="flex justify-end mt-6">
|
||
<pagination
|
||
layout="prev, pager, next"
|
||
v-model="pager"
|
||
@change="getLists"
|
||
/>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="教室列表" name="classroom" class="course-list-container">
|
||
<div class="mb-4">
|
||
<h3 class="text-lg font-semibold">教室列表</h3>
|
||
<p class="text-sm text-gray-500 mt-1">当前可用的教室资源</p>
|
||
</div>
|
||
<div
|
||
v-if="getRoomLists.lists.length === 0"
|
||
class="text-center py-8 text-gray-400"
|
||
>
|
||
暂无教室数据
|
||
</div>
|
||
<div v-else class="space-y-4 max-h-[700px] overflow-y-auto">
|
||
<el-card
|
||
v-for="item in getRoomLists.lists"
|
||
:key="`room-${item.id}`"
|
||
shadow="hover"
|
||
:class="['cursor-pointer transition-all duration-200', selectedRoomId === item.id ? 'selected-card' : 'hover:bg-blue-50']"
|
||
@click="handleClassroomClick(item)"
|
||
>
|
||
<div class="p-0">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h4 class="font-medium text-sm">
|
||
教室：{{ item.classroomName }}
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between text-xs text-gray-600">
|
||
<span>类型: {{ item.classroomTypeName }}</span>
|
||
<span>容量: {{ item.capacity }}人</span>
|
||
</div>
|
||
<div
|
||
v-if="selectedRoomId === item.id"
|
||
class="pt-3 border-t border-gray-100"
|
||
>
|
||
<div class="text-xs text-gray-700">
|
||
<div class="flex items-center mb-1">
|
||
<span class="font-medium">编号:</span>
|
||
<span>{{ item.classroomCode }}</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="font-medium">位置:</span>
|
||
<span>{{ item.location }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<!-- 排课操作按钮 -->
|
||
<div v-if="selectedTimeSlot" class="mt-6 p-4 border-t">
|
||
<h4 class="text-lg font-semibold mb-4">排课操作</h4>
|
||
<div class="space-y-4">
|
||
<div class="text-sm">
|
||
<div class="flex items-center mb-2">
|
||
<span class="font-medium mr-2">选中的时间段:</span>
|
||
<span>{{ getSelectedTimeSlotText() }}</span>
|
||
</div>
|
||
<div class="flex items-center mb-2">
|
||
<span class="font-medium mr-2">具体日期:</span>
|
||
<span>{{ selectedDate || '请选择周数' }}</span>
|
||
</div>
|
||
<div class="flex items-center mb-2">
|
||
<span class="font-medium mr-2">选中的课程:</span>
|
||
<span>{{ selectedCourseName || '未选择' }}</span>
|
||
</div>
|
||
<div class="flex items-center mb-2">
|
||
<span class="font-medium mr-2">授课教师:</span>
|
||
<span>{{ selectedCourseTeacherName || '未选择' }}</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="font-medium mr-2">选中的教室:</span>
|
||
<span>{{ selectedRoomName || '未选择' }}</span>
|
||
</div>
|
||
</div>
|
||
<el-button
|
||
type="primary"
|
||
size="large"
|
||
:disabled="!selectedCourseId || !selectedTimeSlot || !selectedWeekNumber"
|
||
@click="handleScheduleCourse"
|
||
plain
|
||
>
|
||
安排课程
|
||
</el-button>
|
||
<el-button
|
||
type="danger"
|
||
size="large"
|
||
:disabled="!selectedTimeSlot || !selectedTimeSlot.hasCourse"
|
||
@click="handleRemoveCourse"
|
||
plain
|
||
>
|
||
移除课程
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { computed, reactive, ref, onBeforeUnmount } from 'vue'
|
||
import { Check } from '@element-plus/icons-vue'
|
||
|
||
import { classLists } from '@/api/class'
|
||
import { configLists } from '@/api/config'
|
||
import { courseAvailableRooms, courseAvailableSlots, courseSchedule } from '@/api/course'
|
||
import { taskLists } from '@/api/task'
|
||
import { timeCurrentSemester } from '@/api/time'
|
||
import { usePaging } from '@/hooks/usePaging'
|
||
import feedback from '@/utils/feedback'
|
||
|
||
// 星期类型
|
||
interface WeekDay {
|
||
label: string
|
||
value: number
|
||
}
|
||
|
||
// 课程数据类型
|
||
interface CourseItem {
|
||
id: number
|
||
courseId: number
|
||
courseName: string
|
||
taskCode: string
|
||
totalHours: number
|
||
teacherId: number
|
||
teacherName: string
|
||
totalWeeks: number
|
||
}
|
||
|
||
// 教室数据类型
|
||
interface ClassroomItem {
|
||
id: number
|
||
classroomName: string
|
||
classroomCode: string
|
||
classroomTypeName: string
|
||
location: string
|
||
capacity: number
|
||
}
|
||
|
||
// 选中时间段类型
|
||
interface SelectedTimeSlot {
|
||
id: number
|
||
rowIndex: number
|
||
dayOfWeek: number
|
||
startTime: string
|
||
endTime: string
|
||
hasCourse: boolean
|
||
courseData?: any
|
||
}
|
||
|
||
// 学期配置类型
|
||
interface SemesterConfigItem {
|
||
id: number
|
||
academicYear: string
|
||
semesterCode: string
|
||
config: string
|
||
startDate: string
|
||
endDate: string
|
||
}
|
||
|
||
// 班级数据类型
|
||
interface ClassItem {
|
||
id: number
|
||
className: string
|
||
classCode: string
|
||
maxStudentCount: number
|
||
}
|
||
|
||
// 星期数组
|
||
const weekDays: WeekDay[] = [
|
||
{ label: '星期一', value: 1 },
|
||
{ label: '星期二', value: 2 },
|
||
{ label: '星期三', value: 3 },
|
||
{ label: '星期四', value: 4 },
|
||
{ label: '星期五', value: 5 },
|
||
{ label: '星期六', value: 6 },
|
||
{ label: '星期日', value: 7 }
|
||
]
|
||
|
||
const getConfigLists = ref<{ lists: SemesterConfigItem[] }>({ lists: [] })
|
||
const getClassLists = ref<{ lists: ClassItem[] }>({ lists: [] })
|
||
const classSearchLoading = ref(false)
|
||
const classSearchTimer = ref<number | null>(null)
|
||
const activeTab = ref('course')
|
||
|
||
// 时间段数据
|
||
const getTimeData = ref<{
|
||
lists: Array<{
|
||
timeSlotId: number
|
||
classId: number
|
||
classroomId: number
|
||
courseId: number
|
||
semesterId: number
|
||
teacherId: number
|
||
}>
|
||
}>({ lists: [] })
|
||
|
||
// 课程列表数据 - 明确类型
|
||
const getCourseLists = ref<{ lists: CourseItem[] }>({ lists: [] })
|
||
// 课程加载状态
|
||
const courseLoading = ref(false)
|
||
// 选中的课程ID
|
||
const selectedCourseId = ref<number | null>(null)
|
||
|
||
// 选中的课程完整对象
|
||
const selectedCourse = computed(() => {
|
||
if (!selectedCourseId.value) return null
|
||
return getCourseLists.value.lists.find(item => item.id === selectedCourseId.value) || null
|
||
})
|
||
|
||
// 选中的课程名称
|
||
const selectedCourseName = computed(() => {
|
||
return selectedCourse.value?.courseName || '未选择'
|
||
})
|
||
|
||
// 选中的课程教师ID
|
||
const selectedCourseTeacherId = computed(() => {
|
||
return selectedCourse.value?.teacherId || null
|
||
})
|
||
|
||
// 选中的课程教师姓名
|
||
const selectedCourseTeacherName = computed(() => {
|
||
return selectedCourse.value?.teacherName || '未选择'
|
||
})
|
||
|
||
// 教室列表数据 - 明确类型
|
||
const getRoomLists = ref<{ lists: ClassroomItem[] }>({ lists: [] })
|
||
const roomLoading = ref(false)
|
||
const selectedRoomId = ref<number | null>(null)
|
||
// 选中的教室名称
|
||
const selectedRoomName = computed(() => {
|
||
if (!selectedRoomId.value) return '未选择'
|
||
const room = getRoomLists.value.lists.find(item => item.id === selectedRoomId.value)
|
||
return room ? room.classroomName : '未选择'
|
||
})
|
||
|
||
// 选中的时间段
|
||
const selectedTimeSlot = ref<SelectedTimeSlot | null>(null)
|
||
|
||
// 新增：选中的周数
|
||
const selectedWeekNumber = ref<number>(1)
|
||
|
||
// 新增：当前学期配置
|
||
const currentSemesterConfig = computed(() => {
|
||
if (!queryParams.semesterId) return null
|
||
return getConfigLists.value.lists.find(item => item.id.toString() === queryParams.semesterId.toString())
|
||
})
|
||
|
||
// 新增：周数选项
|
||
const weekOptions = computed(() => {
|
||
if (!selectedCourse.value) return []
|
||
const weeks = selectedCourse.value.totalWeeks
|
||
return Array.from({ length: weeks }, (_, i) => i + 1)
|
||
})
|
||
|
||
// 新增：当前周对应的日期信息
|
||
const currentWeekDateInfo = computed(() => {
|
||
if (!selectedWeekNumber.value || !currentSemesterConfig.value) return ''
|
||
|
||
const startDate = new Date(currentSemesterConfig.value.startDate)
|
||
if (isNaN(startDate.getTime())) return '日期格式错误'
|
||
|
||
// 计算当前周第一天的日期（星期一）
|
||
// startDate可能是学期开始日期，我们需要根据周数计算
|
||
const weekStartDate = new Date(startDate)
|
||
// 将开始日期调整到星期一
|
||
const dayOfWeek = weekStartDate.getDay() // 0 = 周日, 1 = 周一, ..., 6 = 周六
|
||
const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek // 调整到星期一
|
||
|
||
// 根据周数计算目标周的第一天（星期一）
|
||
const targetWeekStart = new Date(weekStartDate)
|
||
targetWeekStart.setDate(targetWeekStart.getDate() + daysToMonday + (selectedWeekNumber.value - 1) * 7)
|
||
|
||
// 格式化日期
|
||
const formatDate = (date: Date) => {
|
||
return `${date.getMonth() + 1}月${date.getDate()}日`
|
||
}
|
||
|
||
// 计算本周日期范围
|
||
const weekEnd = new Date(targetWeekStart)
|
||
weekEnd.setDate(weekEnd.getDate() + 6) // 周日
|
||
|
||
return `${formatDate(targetWeekStart)} - ${formatDate(weekEnd)}`
|
||
})
|
||
|
||
// 新增：选中的具体日期（用于排课）
|
||
const selectedDate = computed(() => {
|
||
if (!selectedWeekNumber.value || !currentSemesterConfig.value || !selectedTimeSlot.value) return ''
|
||
|
||
const startDate = new Date(currentSemesterConfig.value.startDate)
|
||
if (isNaN(startDate.getTime())) return '日期格式错误'
|
||
|
||
// 计算当前周第一天的日期（星期一）
|
||
const weekStartDate = new Date(startDate)
|
||
const dayOfWeek = weekStartDate.getDay() // 0 = 周日, 1 = 周一, ..., 6 = 周六
|
||
const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek // 调整到星期一
|
||
|
||
// 根据周数计算目标周的第一天（星期一）
|
||
const targetWeekStart = new Date(weekStartDate)
|
||
targetWeekStart.setDate(targetWeekStart.getDate() + daysToMonday + (selectedWeekNumber.value - 1) * 7)
|
||
|
||
// 根据星期几计算具体日期
|
||
const targetDate = new Date(targetWeekStart)
|
||
targetDate.setDate(targetDate.getDate() + selectedTimeSlot.value.dayOfWeek - 1) // -1是因为星期一对应dayOfWeek=1
|
||
|
||
// 格式化日期为YYYY-MM-DD
|
||
const year = targetDate.getFullYear()
|
||
const month = String(targetDate.getMonth() + 1).padStart(2, '0')
|
||
const day = String(targetDate.getDate()).padStart(2, '0')
|
||
|
||
return `${year}-${month}-${day}`
|
||
})
|
||
|
||
const loading = ref(false)
|
||
const queryParams = reactive({
|
||
classId: '',
|
||
semesterId: '',
|
||
maxStudentCount: 0
|
||
})
|
||
|
||
// 周数变化处理
|
||
const handleWeekChange = () => {
|
||
// 周数变化时，可以在这里处理相关逻辑
|
||
console.log('周数变化为:', selectedWeekNumber.value)
|
||
}
|
||
|
||
// 班级变化处理
|
||
const handleClassChange = async () => {
|
||
// 切换班级时，清空选中的课程、教室、时间段和周数
|
||
selectedCourseId.value = null
|
||
selectedRoomId.value = null
|
||
selectedWeekNumber.value = 1
|
||
clearSelectedTimeSlot()
|
||
|
||
if (queryParams.classId && queryParams.semesterId) {
|
||
await fetchCourseLists()
|
||
await fetchRoomLists()
|
||
}
|
||
}
|
||
|
||
// 学期变化处理
|
||
const handleSemesterChange = async () => {
|
||
// 切换学期时，清空选中的课程、教室、时间段和周数
|
||
selectedCourseId.value = null
|
||
selectedRoomId.value = null
|
||
selectedWeekNumber.value = 1
|
||
clearSelectedTimeSlot()
|
||
|
||
if (queryParams.classId && queryParams.semesterId) {
|
||
await fetchCourseLists()
|
||
}
|
||
}
|
||
|
||
const handleStudentClick = (item: ClassItem) => {
|
||
queryParams.maxStudentCount = item.maxStudentCount || 0
|
||
}
|
||
|
||
// 获取班级列表
|
||
const fetchClassLists = async (params: string) => {
|
||
try {
|
||
const res = await classLists({
|
||
className: params.trim()
|
||
})
|
||
getClassLists.value = res
|
||
} catch (err) {
|
||
feedback.msgError('获取班级列表失败')
|
||
getClassLists.value = { lists: [] }
|
||
} finally {
|
||
classSearchLoading.value = false
|
||
}
|
||
}
|
||
|
||
const handleClassRemoteSearch = (keyword: string) => {
|
||
if (classSearchTimer.value) clearTimeout(classSearchTimer.value)
|
||
|
||
classSearchTimer.value = setTimeout(async () => {
|
||
classSearchLoading.value = true
|
||
await fetchClassLists(keyword)
|
||
}, 300) as unknown as number
|
||
}
|
||
|
||
// 获取学期列表
|
||
const fetchConfigLists = async () => {
|
||
try {
|
||
const res = await configLists()
|
||
const handleData = JSON.parse(JSON.stringify(res))
|
||
handleData.lists = handleData.lists.map((item: SemesterConfigItem) => ({
|
||
...item,
|
||
config: `${item.academicYear}${item.semesterCode === 'SPRING' ? ' 春' : ' 秋'}`
|
||
}))
|
||
getConfigLists.value = handleData
|
||
await fetchSemester()
|
||
} catch (err) {
|
||
feedback.msgError('获取学期列表失败')
|
||
}
|
||
}
|
||
|
||
const fetchSemester = async () => {
|
||
try {
|
||
const res = await timeCurrentSemester()
|
||
if (res) {
|
||
queryParams.semesterId = res.id
|
||
}
|
||
} catch (error) {
|
||
console.error('获取学期信息失败', error)
|
||
}
|
||
}
|
||
|
||
// 获取课程列表
|
||
const fetchCourseLists = async () => {
|
||
if (!queryParams.classId || !queryParams.semesterId) return
|
||
|
||
try {
|
||
courseLoading.value = true
|
||
const response = await taskLists({
|
||
classId: queryParams.classId,
|
||
semesterId: queryParams.semesterId
|
||
})
|
||
const mappedCourses: CourseItem[] = response.lists.map(
|
||
(task: any) => ({
|
||
id: task.id,
|
||
courseId: task.courseId,
|
||
courseName: task.courseName,
|
||
taskCode: task.taskCode,
|
||
totalHours: task.weeklyHours * task.totalWeeks,
|
||
teacherId: task.teacherId,
|
||
teacherName: task.teacherName,
|
||
totalWeeks: task.totalWeeks
|
||
})
|
||
)
|
||
getCourseLists.value = { lists: mappedCourses }
|
||
|
||
// 课程列表刷新后，校验选中的课程是否仍存在，不存在则清空
|
||
if (selectedCourseId.value && !mappedCourses.find(item => item.id === selectedCourseId.value)) {
|
||
selectedCourseId.value = null
|
||
selectedWeekNumber.value = 1 // 清空周数选择
|
||
}
|
||
} catch (err) {
|
||
console.error('获取课程列表失败', err)
|
||
feedback.msgError('获取课程列表失败')
|
||
getCourseLists.value = { lists: [] }
|
||
} finally {
|
||
courseLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 课程点击处理（切换选中/取消选中）
|
||
const handleCourseClick = (course: CourseItem) => {
|
||
selectedCourseId.value = selectedCourseId.value === course.id ? null : course.id
|
||
selectedWeekNumber.value = 1
|
||
activeTab.value = 'course'
|
||
}
|
||
|
||
// 获取教室列表
|
||
const fetchRoomLists = async () => {
|
||
try {
|
||
roomLoading.value = true
|
||
const response = await courseAvailableRooms({
|
||
num: queryParams.maxStudentCount
|
||
})
|
||
const mappedRooms: ClassroomItem[] = response.map(
|
||
(task: any) => ({
|
||
id: task.id,
|
||
classroomName: task.classroomName,
|
||
classroomCode: task.classroomCode,
|
||
classroomTypeName: task.classroomTypeName,
|
||
location: task.location,
|
||
capacity: task.capacity
|
||
})
|
||
)
|
||
getRoomLists.value = { lists: mappedRooms }
|
||
|
||
// 教室列表刷新后，校验选中的教室是否仍存在，不存在则清空
|
||
if (selectedRoomId.value && !mappedRooms.find(item => item.id === selectedRoomId.value)) {
|
||
selectedRoomId.value = null
|
||
}
|
||
} catch (err) {
|
||
console.error('获取教室列表失败', err)
|
||
feedback.msgError('获取教室列表失败')
|
||
getRoomLists.value = { lists: [] }
|
||
} finally {
|
||
roomLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 教室点击处理
|
||
const handleClassroomClick = (classroom: ClassroomItem) => {
|
||
selectedRoomId.value = selectedRoomId.value === classroom.id ? null : classroom.id
|
||
activeTab.value = 'classroom'
|
||
}
|
||
|
||
// 处理时间段点击
|
||
const handleTimeSlotClick = (rowIndex: number, dayOfWeek: number, cellData: any) => {
|
||
const row = tableData.value[rowIndex]
|
||
const id = cellData?.id || Date.now()
|
||
const startTime = getRowStartTime(row)
|
||
const endTime = getRowEndTime(row)
|
||
|
||
// 取消选中（点击已选中的时间段）
|
||
if (selectedTimeSlot.value &&
|
||
selectedTimeSlot.value.rowIndex === rowIndex &&
|
||
selectedTimeSlot.value.dayOfWeek === dayOfWeek) {
|
||
selectedTimeSlot.value = null
|
||
return
|
||
}
|
||
|
||
// 设置选中的时间段
|
||
selectedTimeSlot.value = {
|
||
id,
|
||
rowIndex,
|
||
dayOfWeek,
|
||
startTime,
|
||
endTime,
|
||
hasCourse: !!cellData,
|
||
courseData: cellData
|
||
}
|
||
|
||
// 自动选中对应课程（基于courseId精准匹配）
|
||
if (cellData && cellData.courseId) {
|
||
const targetCourse = getCourseLists.value.lists.find(item => item.courseId === cellData.courseId)
|
||
if (targetCourse) {
|
||
selectedCourseId.value = targetCourse.id
|
||
// 如果有课程，设置默认周数为第1周
|
||
if (targetCourse.totalWeeks > 0) {
|
||
selectedWeekNumber.value = 1
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 判断时间段是否被选中
|
||
const isTimeSlotSelected = (rowIndex: number, dayOfWeek: number, cellData: any) => {
|
||
return selectedTimeSlot.value &&
|
||
selectedTimeSlot.value.rowIndex === rowIndex &&
|
||
selectedTimeSlot.value.dayOfWeek === dayOfWeek
|
||
}
|
||
|
||
// 清除选中的时间段
|
||
const clearSelectedTimeSlot = () => {
|
||
selectedTimeSlot.value = null
|
||
}
|
||
|
||
// 获取选中时间段的显示文本
|
||
const getSelectedTimeSlotText = () => {
|
||
const slot = selectedTimeSlot.value
|
||
if (!slot) return ''
|
||
const dayText = weekDays.find(day => day.value === slot.dayOfWeek)?.label || ''
|
||
return `第${slot.rowIndex + 1}节 ${dayText} ${slot.startTime}-${slot.endTime}`
|
||
}
|
||
|
||
// 安排课程
|
||
const handleScheduleCourse = async () => {
|
||
// 增强校验：确保时间段、课程、教师ID、周数都存在
|
||
if (!selectedTimeSlot.value || !selectedCourseId.value || !selectedCourseTeacherId.value || !selectedWeekNumber.value) {
|
||
feedback.msgError('请先选择有效的时间段、课程和周数')
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 排课API参数：新增 teacherId 和 date 传递
|
||
await courseSchedule({
|
||
timeSlotId: selectedTimeSlot.value.id,
|
||
courseId: selectedCourseId.value,
|
||
classroomId: selectedRoomId.value,
|
||
semesterId: queryParams.semesterId,
|
||
classId: queryParams.classId,
|
||
teacherId: selectedCourseTeacherId.value,
|
||
date: selectedDate.value // 使用计算出的具体日期
|
||
})
|
||
|
||
feedback.msgSuccess('排课成功')
|
||
// 刷新课表数据
|
||
await getTimeLists()
|
||
// 清空选中状态，提升用户体验
|
||
clearSelectedTimeSlot()
|
||
selectedCourseId.value = null
|
||
selectedRoomId.value = null
|
||
selectedWeekNumber.value = 1
|
||
} catch (error) {
|
||
console.error('排课失败', error)
|
||
feedback.msgError('排课失败，请稍后重试')
|
||
}
|
||
}
|
||
|
||
// 移除课程
|
||
const handleRemoveCourse = async () => {
|
||
if (!selectedTimeSlot.value || !selectedTimeSlot.value.hasCourse) {
|
||
feedback.msgError('请先选择一个有课程的时间段')
|
||
return
|
||
}
|
||
|
||
try {
|
||
// TODO: 调用移除课程API
|
||
// 示例：await removeCourse({ timeSlotId: selectedTimeSlot.value.id })
|
||
|
||
feedback.msgSuccess('课程移除成功')
|
||
await getTimeLists()
|
||
clearSelectedTimeSlot()
|
||
} catch (error) {
|
||
console.error('移除课程失败', error)
|
||
feedback.msgError('移除课程失败，请稍后重试')
|
||
}
|
||
}
|
||
|
||
// 清理定时器
|
||
onBeforeUnmount(() => {
|
||
if (classSearchTimer.value) clearTimeout(classSearchTimer.value)
|
||
})
|
||
|
||
// 所有数据列表
|
||
const allLists = ref<any[]>([])
|
||
|
||
const { pager, getLists } = usePaging({
|
||
fetchFun: taskLists,
|
||
params: queryParams,
|
||
size: 7
|
||
})
|
||
|
||
// 请求数据列表
|
||
const getTimeLists = async () => {
|
||
loading.value = true
|
||
try {
|
||
const res = await courseAvailableSlots()
|
||
allLists.value = res
|
||
return Promise.resolve(res)
|
||
} catch (err) {
|
||
console.error('获取时间段列表失败', err)
|
||
return Promise.reject(err)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 处理表格数据，按节次分组，构建星期矩阵
|
||
const tableData = computed(() => {
|
||
const timeSlotMap = new Map<string, Record<number, any>>()
|
||
allLists.value.forEach((item) => {
|
||
const key = `${item.startTime}-${item.endTime}`
|
||
if (!timeSlotMap.has(key)) {
|
||
timeSlotMap.set(key, {})
|
||
}
|
||
const slotGroup = timeSlotMap.get(key)!
|
||
slotGroup[item.dayOfWeek] = item
|
||
})
|
||
|
||
return Array.from(timeSlotMap.values()).sort((a, b) => {
|
||
const aTime = Object.values(a)[0]?.startTime || ''
|
||
const bTime = Object.values(b)[0]?.startTime || ''
|
||
return aTime.localeCompare(bTime)
|
||
})
|
||
})
|
||
|
||
const getRowBaseInfo = (row: Record<number, any>) => {
|
||
return Object.values(row).find((item) => item) || {}
|
||
}
|
||
|
||
const getRowStartTime = (row: Record<number, any>) => {
|
||
const baseInfo = getRowBaseInfo(row)
|
||
const start = baseInfo?.startTime
|
||
if (start == null) return ''
|
||
const s = String(start)
|
||
return s.length > 3 ? s.slice(0, -3) : ''
|
||
}
|
||
|
||
const getRowEndTime = (row: Record<number, any>) => {
|
||
const baseInfo = getRowBaseInfo(row)
|
||
const end = baseInfo?.endTime
|
||
if (end == null) return ''
|
||
const s = String(end)
|
||
return s.length > 3 ? s.slice(0, -3) : ''
|
||
}
|
||
|
||
// 初始化时获取数据
|
||
getTimeLists()
|
||
fetchClassLists('')
|
||
fetchConfigLists()
|
||
</script>
|
||
<style scoped>
|
||
:deep(.first-column) {
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
.course-list-container {
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.course-list-container .el-card {
|
||
border: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.course-list-container .el-card:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.selected-card {
|
||
border-color: #409eff !important;
|
||
background-color: #f0f7ff;
|
||
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
|
||
}
|
||
|
||
:deep(.el-tag) {
|
||
height: 24px;
|
||
line-height: 22px;
|
||
}
|
||
|
||
/* 时间段单元格样式 */
|
||
.time-slot-cell {
|
||
height: 100%;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
border: 2px solid transparent;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.time-slot-cell:hover {
|
||
border-color: #96caff;
|
||
}
|
||
|
||
.time-slot-selected {
|
||
border-color: #409eff !important;
|
||
background-color: #f0f9ff;
|
||
border-color: #e0f2ff;
|
||
}
|
||
|
||
.empty-slot {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.empty-slot-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
color: #909399;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.empty-slot-content .check-icon {
|
||
color: #67c23a;
|
||
font-size: 16px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.course-info {
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.course-name {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
margin-bottom: 4px;
|
||
color: #303133;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.course-details {
|
||
font-size: 10px;
|
||
color: #606266;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.course-details div {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|