feat:课程新增编辑添加学期和允许资源下载开关

This commit is contained in:
yuk255 2025-09-17 10:38:18 +08:00
parent a4cd04429a
commit 8a2a8add39

View File

@ -24,12 +24,6 @@
<n-input v-model:value="formData.courseName" placeholder="请输入课程名称" class="form-input" />
</div>
<!-- 课程开始时间 -->
<div class="form-item">
<label class="form-label required">课程开始时间:</label>
<n-date-picker v-model:value="formData.startTime" type="datetime" placeholder="选择时间" class="form-input" />
</div>
<!-- 主讲老师 -->
<div class="form-item">
<label class="form-label required">授课老师:</label>
@ -37,6 +31,12 @@
class="form-input" />
</div>
<!-- 课程开始时间 -->
<div class="form-item">
<label class="form-label required">课程开始时间:</label>
<n-date-picker v-model:value="formData.startTime" type="datetime" placeholder="选择时间" class="form-input" />
</div>
<!-- 参与学员 -->
<div class="form-item">
<label class="form-label required">参与学员:</label>
@ -71,6 +71,17 @@
class="form-input" />
</div>
<!-- 学期设置 -->
<div class="form-item">
<label class="form-label required">学期:</label>
<div class="semester-container">
<n-select v-model:value="formData.semesterYear" :options="yearOptions" placeholder="选择年份"
class="semester-year-input" @update:value="updateSemester" />
<n-select v-model:value="formData.semesterTerm" :options="termOptions" placeholder="选择学期"
class="semester-term-input" @update:value="updateSemester" />
</div>
</div>
<!-- 排序 -->
<!-- <div class="form-item">
<label class="form-label required">排序:</label>
@ -120,6 +131,14 @@
<!-- 下半部分设置选项 -->
<div class="form-section">
<!-- 是否允许下载 -->
<div class="form-item btn-label">
<label class="form-label required">允许下载课件</label>
<div class="setting-container">
<n-switch v-model:value="formData.allowDownload" class="form-toggle" />
</div>
</div>
<!-- 离开页面停止播放 -->
<div class="form-item btn-label">
<label class="form-label required">离开页面停止播放</label>
@ -261,7 +280,12 @@ const formData = reactive({
selectedClasses: [] as string[],
courseCover: null as File | null,
courseDescription: '',
//
semesterYear: new Date().getFullYear(), //
semesterTerm: 'spring' as 'spring' | 'autumn', //
semester: '', // "2025"
//
allowDownload: true,
stopOnLeave: false,
videoSpeedControl: false,
showVideoText: false,
@ -363,7 +387,14 @@ const loadCourseData = async () => {
}
}
//
if (storeCourseData.semester) {
parseSemesterData(storeCourseData.semester);
}
// 0/1
formData.allowDownload = storeCourseData.allowDownload !== undefined ?
Boolean(Number(storeCourseData.allowDownload)) : true;
formData.stopOnLeave = storeCourseData.pauseExit !== undefined ?
Boolean(Number(storeCourseData.pauseExit)) : true;
formData.videoSpeedControl = storeCourseData.allowSpeed !== undefined ?
@ -440,7 +471,14 @@ const loadCourseData = async () => {
}
}
//
if (courseData.semester) {
parseSemesterData(courseData.semester);
}
// 0/1
formData.allowDownload = courseData.allowDownload !== undefined ?
Boolean(Number(courseData.allowDownload)) : true;
formData.stopOnLeave = courseData.pauseExit !== undefined ?
Boolean(Number(courseData.pauseExit)) : true;
formData.videoSpeedControl = courseData.allowSpeed !== undefined ?
@ -481,6 +519,59 @@ const instructorOptions = ref([] as { label: string; value: string }[])
//
const classOptions = ref([] as { label: string; value: string }[])
// 5
const yearOptions = ref<{ label: string; value: number }[]>([])
//
const initYearOptions = () => {
const currentYear = new Date().getFullYear()
const years = []
for (let i = 0; i < 6; i++) {
const year = currentYear + i
years.push({
label: `${year}`,
value: year
})
}
yearOptions.value = years
}
//
const termOptions = ref([
{ label: '春季学期', value: 'spring' },
{ label: '秋季学期', value: 'autumn' }
])
//
const updateSemester = () => {
const termMap = {
spring: '春',
autumn: '秋'
}
formData.semester = `${formData.semesterYear}${termMap[formData.semesterTerm]}`
}
// "2025"
const parseSemesterData = (semesterStr: string) => {
if (!semesterStr) return
//
const yearMatch = semesterStr.match(/(\d{4})/)
if (yearMatch) {
formData.semesterYear = parseInt(yearMatch[1])
}
// /
if (semesterStr.includes('春')) {
formData.semesterTerm = 'spring'
} else if (semesterStr.includes('秋')) {
formData.semesterTerm = 'autumn'
}
//
formData.semester = semesterStr
}
//
const triggerFileUpload = () => {
fileInput.value?.click()
@ -694,9 +785,11 @@ const handleSubmit = async () => {
classId: formData.studentType === 'all' ? '' : formData.selectedClasses.join(','), // classId
startTime: formData.startTime ? formatDateTime(formData.startTime) : null,
endTime: formData.endTime ? formatDateTime(formData.endTime) : null,
semester: formData.semester, //
pauseExit: formData.stopOnLeave ? '1' : '0', //
allowSpeed: formData.videoSpeedControl ? '1' : '0', //
showSubtitle: formData.showVideoText ? '1' : '0', //
allowDownload: formData.allowDownload ? '1' : '0', //
//
school: null,
video: null,
@ -828,6 +921,10 @@ const getClassList = async () => {
}
onMounted(async () => {
//
initYearOptions();
updateSemester();
//
await Promise.all([
getCourseList(),
@ -1093,6 +1190,35 @@ onMounted(async () => {
cursor: pointer;
}
/* 学期选择器样式 */
.semester-container {
display: flex;
gap: 12px;
flex: 1;
}
.semester-year-input {
flex: 1;
height: 42px;
}
.semester-term-input {
flex: 1;
height: 42px;
}
.semester-year-input :deep(.n-base-selection),
.semester-term-input :deep(.n-base-selection) {
--n-height: 42px !important;
height: 42px !important;
}
.semester-year-input :deep(.n-base-selection-label),
.semester-term-input :deep(.n-base-selection-label) {
height: 42px !important;
line-height: 42px !important;
}
/* 课程封面上传区域 */
.cover-upload-container {
flex: 1;