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>
		<a-spin :spinning="spinning" >

		<!-- 章节列表 -->
		<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-spin>
		<!-- 添加章节模态框 -->
		<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";


const router = useRouter()
const route = useRoute()
const popoverVisible = ref({})
const formRef = ref(null)
const spinning = ref(false)
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) => {
	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: 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) => {
					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,
					// knowledgeIds : formState.knowledgeIds
				})
				.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'

	formRef.value.resetFields()


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

}

// 编辑课时
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 = () => {
	spinning.value = true
	courseProductionApi
		.allList({courseId: props.courseInfoId})
		.then((res) => {
			console.log('章节列表', res)
			chapters.value = res.data
			spinning.value = false
		})
		.catch((err) => {
			console.log(err)
			spinning.value = false
		})
}

// 删除课时
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)
	console.log('有没有字典', knowledgeOptions)
	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>