OnlineEducation-teacher-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="@/assets/images/fileImg/gif.png" alt="Video Cover" class="video-cover" style="width: 140px; height: 90px"/>
				<!-- 课时信息 -->
				<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">
				<a-form-item label="章节名称">
					<a-input v-model:value="formState.chapterName" placeholder="请输入章节名称"/>
				</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'


const router = useRouter()
const route = useRoute()
const popoverVisible = ref({})
const modeTag = ref('add')
const dialogTitle = ref('添加章节')


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) => {
	console.log('删除',item)

	del([{id : item.id}]).then(()=>{
		getList()
	})
}

// 模态框显示状态
const modalVisible = ref(false)
const currentChapterIndex = ref(null)
const addDialogRef = ref(null)
// 表单状态
const formState = reactive({
	id: '',
	chapterName: ''
})
const pagination = reactive({
	pageSize: 10,
	pageNum: 1,
	total: 50,
	showTotal: (total) => `共${total}条`
})
// 显示模态框
const showModal = () => {
	dialogTitle.value = '添加章节'
	modeTag.value = 'add'
	modalVisible.value = true
	formState.chapterName = ''
}

// 确认按钮点击事件
const handleOk = () => {
	let courseInfoId = props.courseInfoId
	if (formState.chapterName && modeTag.value == 'add') {

		courseProductionApi
			.add({
				courseId: courseInfoId,
				name: formState.chapterName
			})
			.then((res) => {
				console.log(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
			})
			.then((res) => {
				console.log(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'
	formState.id = item.id
	formState.chapterName = item.name

}

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

	courseProductionApi.delete([{id: item.id}]).then((res) => {
		console.log('章节列表', res)
		getList()
	})
		.catch((err) => {
			console.log(err)
		})

}
// 获取章节列表
const getList = () => {
	courseProductionApi
		.allList({courseId: props.courseInfoId})
		.then((res) => {
			console.log('章节列表', 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) => {
	console.log(data, 'onAddClassHoursOk')
	// addLessonModalVisible.value = true
}
const onAddChapter = () => {
	getList()
}
onMounted(() => {
	console.log('有没有id呢', props.courseInfoId)
	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>