OnlineEducation-back-front/src/views/courseAdd/components/courseProduction/index.vue

<template>
	<div class="course-chapter">
		<!-- 添加章节按钮 -->
		<a-button type="primary" class="add-chapter-btn" @click="showModal">添加章节</a-button>

		<!-- 章节列表 -->
		<div v-for="(chapter, chapterIndex) in chapters" :key="chapterIndex" class="chapter">
			<!-- 章节标题 -->
			<div class="chapter-title">
				<span>{{ chapter.title }}</span>
				<a-icon type="edit" @click="editChapter(chapterIndex)" />
			</div>

			<!-- 添加课时按钮 -->
			<a-button class="add-chapter-btn1" type="primary" size="small" @click="showAddLessonModal(chapterIndex)">
				<PlusOutlined /> 添加课时</a-button
			>
			<!-- 课时列表 -->
			<div v-for="(lesson, lessonIndex) in chapter.lessons" :key="lessonIndex" class="lesson">
				<a-row :gutter="48">
					<a-col :span="4">
						<!-- 视频封面 -->
						<img src="@/assets/images/fileImg/gif.png" alt="Video Cover" class="video-cover" />
					</a-col>
					<a-col :span="16">
						<!-- 课时信息 -->
						<div class="lesson-info">
							<div class="lesson-title">{{ lesson.title }}</div>
							<div class="lesson-details">
								<span>视频大小：{{ lesson.size }}MB</span>
								<span>发布时间：{{ lesson.publishTime }}</span>
								<span>发布人：{{ lesson.publisher }}</span>
							</div>
						</div>
					</a-col>
					<a-col :span="4">
						<!-- 编辑和删除按钮 -->
						<div class="lesson-actions">
							<EditOutlined class="action-icon" @click="$emit('edit-lesson', lesson)" />
							<DeleteOutlined class="action-icon" @click="$emit('delete-lesson', lesson)" />
						</div>
					</a-col>
				</a-row>
			</div>
		</div>
		<!-- 添加章节模态框 -->
		<a-modal v-model:visible="modalVisible" title="添加章节" @ok="handleOk" @cancel="handleCancel">
			<a-form :model="formState">
				<a-form-item label="章节名称">
					<a-input v-model:value="formState.chapterName" placeholder="请输入章节名称" />
				</a-form-item>
			</a-form>
		</a-modal>
		<!-- 添加课时模态框 -->
		<addClassHours v-model:visible="addLessonModalVisible" @ok="onAddClassHoursOk" />
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import addClassHours from './addClassHours.vue'
	const addLessonModalVisible = ref(false)
	// 章节数据
	const chapters = ref([
		{
			title: '第一章 课程导学',
			lessons: [
				{
					title: '1-1 课程简介',
					size: 300,
					publishTime: '2025-07-01 10:23:59',
					publisher: '张三'
				},
				{
					title: '1-2 课程前瞻',
					size: 300,
					publishTime: '2025-07-01 10:23:59',
					publisher: '张三'
				}
			]
		},
		{
			title: '第二章 课程XX',
			lessons: [
				{
					title: '2-1 课时标题',
					size: 300,
					publishTime: '2025-07-01 10:23:59',
					publisher: '张三'
				},
				{
					title: '2-2 课时标题',
					size: 300,
					publishTime: '2025-07-01 10:23:59',
					publisher: '张三'
				},
				{
					title: '2-3 课时标题',
					size: 300,
					publishTime: '2025-07-01 10:23:59',
					publisher: '张三'
				}
			]
		}
	])
	// 模态框显示状态
	const modalVisible = ref(false)
	const currentChapterIndex = ref(null)
	// 表单状态
	const formState = ref({
		chapterName: ''
	})
	// 显示模态框
	const showModal = () => {
		modalVisible.value = true
	}

	// 确认按钮点击事件
	const handleOk = () => {
		if (formState.value.chapterName) {
			chapters.value.push({
				title: formState.value.chapterName,
				lessons: []
			})
			formState.value.chapterName = '' // 清空表单
			modalVisible.value = false // 关闭模态框
		}
	}

	// 取消按钮点击事件
	const handleCancel = () => {
		formState.value.chapterName = '' // 清空表单
		modalVisible.value = false // 关闭模态框
	}
	// 编辑章节
	const editChapter = (chapterIndex) => {
		// 实现编辑逻辑
	}

	// 编辑课时
	const editLesson = (chapterIndex, lessonIndex) => {
		// 实现编辑逻辑
	}

	// 删除课时
	const deleteLesson = (chapterIndex, lessonIndex) => {
		chapters.value[chapterIndex].lessons.splice(lessonIndex, 1)
	}
	// 显示课时模态框
	const showAddLessonModal = (chapterIndex) => {
		currentChapterIndex.value = chapterIndex
		addLessonModalVisible.value = true
	}
	// 显示课时模态框
	const onAddClassHoursOk = (data) => {
		console.log(data, 'onAddClassHoursOk')
		// addLessonModalVisible.value = true
	}
</script>

<style scoped>
	.chapter {
		width: 80%;
	}
	.course-chapter {
		padding: 20px;
	}

	.chapter-title {
		background: #f0f0f0;
		padding: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.lesson {
		width: 100%;
		height: 120px;
		display: flex;
		align-items: center;
		background: #f7f8fa;
		border-radius: 8px;
		margin-bottom: 16px;
		padding: 16px 4px;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
		transition: box-shadow 0.2s;
	}

	.video-cover {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 4px;
	}

	.lesson-info {
		margin-left: 10px;
	}

	.lesson-title {
		font-weight: bold;
		margin-bottom: 30px;
	}

	.lesson-details {
		display: flex;
		flex-wrap: wrap;
	}

	.lesson-details span {
		margin-right: 10px;
	}
	/* 模态框内样式 */
	.ant-modal-content {
		width: 400px;
	}

	.ant-modal-body {
		padding: 20px;
	}

	.ant-form-item-label > label {
		font-weight: normal;
	}
	.lesson-actions {
		display: flex;
		align-items: center;
	}
	.action-icon {
		font-size: 18px;
		color: #347aff;
		margin-left: 18px;
		cursor: pointer;
		transition: color 0.2s;
	}
	.action-icon:hover {
		color: #1d5fd6;
	}
	.add-chapter-btn {
		background: #ffff;
		border: 1px solid #347aff;
		color: #347aff;
		border-radius: 3px;
		margin-bottom: 10px;
	}
	.add-chapter-btn1 {
		color: #ffff;
		border: 1px solid #347aff;
		background: #347aff;
		border-radius: 3px;
		margin-bottom: 10px;
	}
</style>