OnlineEducation-student-front/src/views/courseAdd/components/courseProduction/addDialog.vue

<template>
	<div>
		<a-modal
			v-model:visible="modalVisible"
			:title="modeTag.value == 'add'?'添加课时':'修改课时'"
			:footer="null"
			width="700px"
			class="add-class-hours-modal"
		>
			<a-tabs v-model:activeKey="activeKey" type="card" @change="handleChange">
				<a-tab-pane key="1" tab="课时">
					<addClassHours ref="addClassHoursRef" @handlerSelect="handlerSelect" @handlerUpSelect="handlerUpSelect"></addClassHours>
				</a-tab-pane>
				<a-tab-pane key="2" tab="作业" >
					<div>这里是作业的内容</div>
				</a-tab-pane>
				<a-tab-pane key="3" tab="考试" >
					<div>这里是考试的内容</div>
				</a-tab-pane>
			</a-tabs>
			<div class="footer-btns">
				<a-button @click="handleCancel">取消</a-button>
				<a-button type="primary" @click="handleOk">确定</a-button>
			</div>
		</a-modal>

		<resListDialog ref="resListDialogRef" @handleSelectFile="handleSelectFile"></resListDialog>
		<resourceUpload ref="resourceUploadRef"></resourceUpload>
	</div>

</template>

<script setup>
	import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
	import { message } from 'ant-design-vue'
	import addClassHours from './addClassHours.vue'
	import resListDialog from './resListDialog.vue'
	import resourceUpload from './resourceUpload.vue'
	import { add } from '@/api/hour/index'

	const addClassHoursRef = ref(null)
	const resListDialogRef = ref(null)
	const resourceUploadRef = ref(null)
	const activeKey = ref('1')
	const modeTag = ref('add')

	const emit = defineEmits(['update:visible', 'ok','onAddChapter'])

	const props = defineProps({
		//课程id
		courseInfoId: {
			type: Number,
			required: true,
			default: null
		},
		// visible: Boolean
	})

	const form = ref({
		id : ''
	})


	const modalVisible = ref(false)
	// watch(
	// 	() => props.visible,
	// 	(v) => {
	// 		modalVisible.value = v
	// 	}
	// )
	// watch(modalVisible, (v) => {
	// 	emit('update:visible', v)
	// })

	const open = () =>{
		activeKey.value = '1'
		modalVisible.value = true
		modeTag.value = 'add'
	}
	const handleChange = (activeKey) =>{

	}
	const setData = (data) => {
		console.log('进来的章节信息',data)
		form.value.id = data.id
	}
	const edit = (item) => {
		activeKey.value = '1'
		console.log('进来的章节信息',item)
		// form.value.id = data.id
		modalVisible.value = true
		modeTag.value = 'edit'
		console.log('有没有',addClassHoursRef.value)
		nextTick(()=>{
			addClassHoursRef.value.edit(item)
		})

	}

	const handlerSelect = () =>{
		resListDialogRef.value.open()
	}
	const handlerUpSelect = () =>{
		resourceUploadRef.value.open()
	}
	const handleSelectFile = (item) =>{
		resListDialogRef.value.close()
		addClassHoursRef.value.setFile(item)
	}
	const  handleOk = () =>{

		console.log('有没有',addClassHoursRef)
		addClassHoursRef.value.getData((data)=>{
			//设置章节id
			data.chapterId = form.value.id
			// props.courseInfoId
			console.log('提交的参数',data)

			add(data).then((res)=>{
				modalVisible.value = false
				emit('onAddChapter')
			}).catch((err) => {

			})

		})
		// formRef.value.validate().then(() => {
		// 	emit('ok', { ...form })
		// 	modalVisible.value = false
		// })
	}
	function handleCancel() {
		modalVisible.value = false
	}

	defineExpose({ open ,setData,edit})
</script>

<style lang="less" scoped>
	.add-class-hours-modal {
		.ant-modal-content {
			border-radius: 10px;
		}
		.ant-modal-header {
			border-radius: 10px 10px 0 0;
		}
		.ant-form-item {
			margin-bottom: 24px;
		}
		.video-select-row {
			display: flex;
			align-items: center;
		}
		.cover-upload-row {
			display: flex;
			align-items: center;
			.cover-upload-box {
				width: 120px;
				height: 120px;
				background: #f7f8fa;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24px;
				border: 1px dashed #d9d9d9;
				cursor: pointer;
				.cover-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 8px;
				}
				.cover-placeholder {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					color: #bbb;
					font-size: 32px;
				}
			}
			.cover-tip {
				color: #888;
				font-size: 13px;
			}
		}
		.upload-tip {
			color: #888;
			font-size: 13px;
			margin-left: 12px;
		}
		.footer-btns {
			display: flex;
			justify-content: flex-end;
			gap: 16px;
			margin-top: 24px;
		}
	}
</style>