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.name }}</span>
				<!--				<a-icon type="edit" @click="editChapter(chapterIndex)" />-->
				<div>
					<EditOutlined style="margin-right: 20px" @click="editChapter(chapterIndex)" />
					<a-popover v-model:visible="popoverVisible[chapterIndex]" title="提示" trigger="click">
						<template #content>
							<a-button style="margin-right: 10px" type="primary" @click="delChapter(chapterIndex)">删除 </a-button>
							<a-button
								@click="
									() => {
										popoverVisible[chapterIndex] = false
									}
								"
								>取消</a-button
							>
						</template>
						<DeleteOutlined />
					</a-popover>
				</div>
			</div>

			<!-- 添加课时按钮 -->
			<a-button class="add-chapter-btn1" type="primary" size="small" @click="showAddLessonModal(chapterIndex)">
				<PlusOutlined />
				添加课时
			</a-button>
			<!-- 课时列表 -->
			<div v-for="(lesson, lessonIndex) in chapter.classHours" :key="lessonIndex" class="lesson">
				<!-- 视频封面 -->
				<img
					:src="sysConfig.FILE_URL+lesson.coverImageUrl"
					alt="Video Cover"
					class="video-cover"
					style="width: 140px; height: 90px; margin-left: 10px;margin-right: 20px"
				/>
				<!-- 课时信息 -->
				<div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
					<div>{{ lesson.name }}</div>
					<div>
						<!--						<span>视频大小：{{ lesson.size }}MB</span>-->
						<span>发布时间：{{ lesson.createTime }}</span>
						<span>发布人：{{ lesson.createUserName }}</span>
					</div>
				</div>
				<div style="display: flex; height: 100%; position: absolute; right: 15px; top: 15px">
					<div>
						<EditOutlined class="action-icon" @click="handleEdit(lesson)" />
						<DeleteOutlined class="action-icon" @click="handleDel(lesson)" />
					</div>
				</div>
			</div>
		</div>
		<!-- 添加章节模态框 -->
		<a-modal v-model:visible="modalVisible" :title="dialogTitle" @ok="handleOk" @cancel="handleCancel">
			<a-form :model="formState" ref="formRef" :rules="rules" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
				<a-form-item label="章节名称" name="chapterName">
					<a-input v-model:value="formState.chapterName" placeholder="请输入章节名称" />
				</a-form-item>
				<!-- <a-form-item label="知识点" name="knowledgeIds">
					<a-select
						mode="multiple"
						v-model:value="formState.knowledgeIds"
						placeholder="请选择知识点"
						style="width: 220px"
					>
						<a-select-option v-for="(item, index) in knowledgeOptions" :key="index" :value="item.value"
							>{{ item.label }}
						</a-select-option>
					</a-select>
				</a-form-item> -->
			</a-form>
		</a-modal>
		<!-- 添加课时模态框 -->
		<addDialog ref="addDialogRef" @ok="onAddClassHoursOk" @onAddChapter="onAddChapter" />
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import addDialog from './addDialog.vue'
	import courseProductionApi from '@/api/courseCenter/courseProduction.js'
	import { useRoute, useRouter } from 'vue-router'
	import { del, edit as editApi } from '@/api/hour/index'
	import tool from '@/utils/tool'
	import sysConfig from "@/config";

	const router = useRouter()
	const route = useRoute()
	const popoverVisible = ref({})
	const formRef = ref(null)
	const modeTag = ref('add')
	const dialogTitle = ref('添加章节')
	const knowledgeOptions = tool.dictList('knowledge')

	const props = defineProps({
		//课程id
		courseInfoId: {
			type: Number,
			required: true,
			default: null
		}
	})
	// 章节数据
	const chapters = ref([])
	const closePopover = () => {
		popoverVisible.value = false
	}
	const handleEdit = (item) => {
		addDialogRef.value.edit(item)
	}
	const handleDel = (item) => {
		del([{ id: item.id }]).then(() => {
			getList()
		})
	}

	// 模态框显示状态
	const modalVisible = ref(false)
	const currentChapterIndex = ref(null)
	const addDialogRef = ref(null)
	// 表单状态
	const formState = reactive({
		id: '',
		chapterName: undefined,
		knowledgeIds: []
	})
	const rules = {
		chapterName: [{ required: true, message: '请输入章节名称', trigger: 'blur' }],
		knowledgeIds: [{ required: true, message: '请选择知识点', trigger: 'blur' }]
	}
	const pagination = reactive({
		pageSize: 10,
		pageNum: 1,
		total: 50,
		showTotal: (total) => `共${total}条`
	})
	// 显示模态框
	const showModal = () => {
		dialogTitle.value = '添加章节'
		modeTag.value = 'add'
		modalVisible.value = true

		formState.chapterName = ''
		formState.knowledgeIds = []
	}

	// 确认按钮点击事件
	const handleOk = () => {
		formRef.value.validate().then(() => {
			let courseInfoId = props.courseInfoId
			if (formState.chapterName && modeTag.value == 'add') {
				courseProductionApi
					.add({
						courseId: courseInfoId,
						name: formState.chapterName
						// knowledgeIds: formState.knowledgeIds
					})
					.then((res) => {
						getList()
					})
					.catch((err) => {
						console.log(err)
					})
				formState.chapterName = '' // 清空表单
				modalVisible.value = false // 关闭模态框
			}
			if (formState.chapterName && modeTag.value == 'edit') {
				courseProductionApi
					.edit({
						id: formState.id,
						courseId: courseInfoId,
						name: formState.chapterName
						// knowledgeIds: formState.knowledgeIds
					})
					.then((res) => {
						getList()
					})
					.catch((err) => {
						console.log(err)
					})
				formState.chapterName = '' // 清空表单
				modalVisible.value = false // 关闭模态框
			}
		})
	}

	// 取消按钮点击事件
	const handleCancel = () => {
		formState.chapterName = '' // 清空表单
		modalVisible.value = false // 关闭模态框
	}
	// 编辑章节
	const editChapter = (chapterIndex) => {
		// 实现编辑逻辑
		let item = chapters.value[chapterIndex]
		modalVisible.value = true
		dialogTitle.value = '修改章节'
		modeTag.value = 'edit'

		formRef.value.resetFields()

		formState.id = item.id
		formState.chapterName = item.name
		// formState.knowledgeIds = item.knowledeges
	}

	// 编辑课时
	const editLesson = (chapterIndex, lessonIndex) => {
		// 实现编辑逻辑
	}
	const delChapter = (chapterIndex) => {
		// 实现编辑逻辑
		let item = chapters.value[chapterIndex]
		popoverVisible.value[chapterIndex] = false

		courseProductionApi
			.delete([{ id: item.id }])
			.then((res) => {
				getList()
			})
			.catch((err) => {
				console.log(err)
			})
	}
	// 获取章节列表
	const getList = () => {
		console.log('获取列表章节',props.courseInfoId)
		courseProductionApi
			.allList({ courseId: props.courseInfoId })
			.then((res) => {
				chapters.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}

	// 删除课时
	const deleteLesson = (chapterIndex, lessonIndex) => {
		chapters.value[chapterIndex].lessons.splice(lessonIndex, 1)
	}
	// 显示课时模态框
	const showAddLessonModal = (chapterIndex) => {
		currentChapterIndex.value = chapterIndex
		addDialogRef.value.open()
		addDialogRef.value.setData(chapters.value[chapterIndex])
		modeTag.value = 'add'
	}
	// 显示课时模态框
	const onAddClassHoursOk = (data) => {
		// addLessonModalVisible.value = true
	}
	const onAddChapter = () => {
		getList()
	}
	watch(
		() => props.courseInfoId,
		(newVal) => {
			if (newVal) {
				getList()
			}
		}
	)
	// onMounted(() => {
	// 	getList()
	// })
	defineExpose({
		getList
	})
</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;
		position: relative;
	}

	.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>