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

<template>
	<a-form :model="form" :rules="rules" ref="formRef" layout="vertical">
		<a-form-item label="课时名称：" name="title" required>
			<a-input v-model:value="form.title" placeholder="输入内容"/>
		</a-form-item>
		<a-form-item label="选择视频：" required name="video">
			<div class="video-select-row">
				<a-button type="primary" @click="()=>{emit('handlerSelect')}">选择资源</a-button>
				<a-button type="primary" @click="()=>{emit('handlerUpSelect')}">新上传资源</a-button>
			</div>
			<!--			<span  style="margin-top: 12px;  margin-bottom: 12px">{{ file.name }}</span>-->
			<FileName ref="fileNameRef" v-model:value="form.video"></FileName>
		</a-form-item>
		<a-form-item label="上传封面：" required name="coverUrl">
			<div class="cover-upload-row">
				<UpLoadImg v-model:value="form.coverUrl" ref="upLoadImgRef"
						   @handlerUpImage="handlerUpImage"></UpLoadImg>
			</div>
		</a-form-item>
		<a-form-item label="上传讲义：" name="docUrl">
			<UpLoadDoc v-model:value="form.docUrl" ref="upLoadDocRef" @handlerUpDoc="handlerUpDoc"></UpLoadDoc>
		</a-form-item>
		<a-form-item label="上传字幕：" name="srtUrl">
			<UpLoadSrt v-model:value="form.srtUrl" ref="UpLoadSrtRef" @handlerUpSrt="handlerUpSrt"></UpLoadSrt>
		</a-form-item>

	</a-form>
</template>

<script setup>
import {ref, reactive, watch, defineProps, defineEmits} from 'vue'
import {message} from 'ant-design-vue'
import {PictureOutlined, CloudUploadOutlined} from '@ant-design/icons-vue'
import UpLoadImg from '@/components/UpLoadImg/index.vue'
import UpLoadDoc from '@/components/UpLoadDoc/index.vue'
import UpLoadSrt from '@/components/UpLoadSrt/index.vue'
import FileName from './fileName.vue'
import {add, detail} from '@/api/hour/index'

const props = defineProps({
	visible: Boolean
})
const emit = defineEmits(['update:visible', 'ok', 'handlerUpSelect', 'handlerNewSelect','handlerEx','handlerExs'])

const fileNameRef = ref(null)
const upLoadImgRef = ref(null)
const upLoadDocRef = ref(null)
const UpLoadSrtRef = ref(null)
const modeTag = ref('add')
const formRef = ref()
const file = ref({
	id: '',
	name: '',
})
const form = reactive({
	title: '',
	video: '',
	coverUrl: '',
	docUrl: '',
	srtUrl: ''
})

const rules = {
	title: [{required: true, message: '请输入课时名称'}],
	video: [{required: true, message: '请选择或上传资源'}],
	coverUrl: [{required: true, message: '请上传封面'}],
	docUrl: [{required: true, message: '请上传讲义'}],
	srtUrl: [{required: true, message: '请上传字幕'}],
}


const handlerUpImage = (id) => {
	form.coverUrl = id
}
const handlerUpDoc = (id) => {
	form.docUrl = id
}
const handlerUpSrt = (id) => {
	form.srtUrl = id
}

const setFile = (fileData) => {
	console.log("设置了文件", fileData)
	file.value.id = fileData.id
	file.value.name = fileData.fileName

	form.video = fileData.id
	nextTick(() => {
		fileNameRef.value.setData({id : fileData.id, name :fileData.fileName })
	})

}

const getData = (callBack) => {
	formRef.value.validate().then(() => {
		let data = {}

		data.name = form.title
		data.courseRelates = []
		//todo ：0封面 1视频资源，2讲义，3字幕，4作业，5测验
		data.courseRelates.push({funcType: 0, relateId: form.coverUrl})
		data.courseRelates.push({funcType: 1, relateId: form.video})
		data.courseRelates.push({funcType: 2, relateId: form.docUrl})
		data.courseRelates.push({funcType: 3, relateId: form.srtUrl})

		// {
		// 	"chapterId": "voluptate nostrud",
		// 	"name": "蒋霞",
		// 	"remark": "amet ut",
		// 	"courseRelates": [
		// 	{
		// 		"funcType": "anim dolore",
		// 		"relateId": "veniam enim"
		// 	},
		// 	{
		// 		"funcType": "cillum consequat",
		// 		"relateId": "et pariatur laborum nostrud"
		// 	}
		// ]
		// }


		callBack(data)
	}).catch((res)=>{
		console.log("错误内容",res)
		if(res.errorFields[0]){
			message.error(res.errorFields[0].errors[0])
		}

	})
}

const open = () => {
	modeTag.value = 'add'
	// reset()
}
const reset = () => {
	console.log("关掉吗")
	formRef.value.resetFields();
	nextTick(() => {
		form.title = ''
		form.video = ''
		form.coverUrl = ''
		form.docUrl = ''
		form.srtUrl = ''

		upLoadImgRef.value.setData({id: "", url: ""})
		fileNameRef.value.setData({id: "", name: ""})
		upLoadDocRef.value.setData({id: "", name: ""})
		UpLoadSrtRef.value.setData({id: "", name: ""})
	})
}


const edit = (item) => {
	// form.value.id = data.id
	modeTag.value = 'edit'
	// let data = {}
	//
	// data.name = form.title
	// data.courseRelates = []
	// //todo ：1视频资源，2讲义，3字幕，4作业，5测验
	// data.courseRelates.push({funcType : 1,relateId:form.video})
	// data.courseRelates.push({funcType : 2,relateId:form.docUrl})
	// data.courseRelates.push({funcType : 3,relateId:form.srtUrl})
	console.log('修改什么', item)
	if(item){
		detail({id: item.id}).then((res) => {
			if (res.code == 200) {
				let data = res.data
				form.title = data.name
				for (let i = 0; i < data.courseRelates.length; i++) {
					let itemi = data.courseRelates[i]
					console.log('每条数据', itemi)
					switch (itemi.funcType) {
						case '0':
							upLoadImgRef.value.setData({id: itemi.relateId, url: itemi.url})
							break;
						case '1':
							// form.video = itemi.relateId
							// file.value.name = itemi.name
							form.video = itemi.relateId
							fileNameRef.value.setData({id: itemi.relateId, name: itemi.name})
							break;
						case '2':
							// form.docUrl = itemi.relateId
							upLoadDocRef.value.setData({id: itemi.relateId, name: itemi.name})
							break;
						case '3':
							// form.srtUrl = itemi.relateId
							UpLoadSrtRef.value.setData({id: itemi.relateId, name: itemi.name})
							break;
						case '4':
							// form.srtUrl = itemi.relateId
							// UpLoadSrtRef.value.setData({id: itemi.relateId, name: itemi.name})
							emit('handlerEx', [itemi])
							break;
						case '5':
							// form.srtUrl = itemi.relateId
							// UpLoadSrtRef.value.setData({id: itemi.relateId, name: itemi.name})
							emit('handlerExs', [itemi])
							break;
					}
				}
			}

			// {
			// 	"code": 200,
			// 	"msg": "操作成功",
			// 	"data": {
			// 	"chapterId": "1945821914740051969",
			// 		"courseRelates": [
			// 		{
			// 			"relateId": "1941793498696044545",
			// 			"chapterHourType": "1",
			// 			"name": "1940384168492494848",
			// 			"mainId": "1946118995975536642",
			// 			"url": "upload/20250705/3705fd26117d7e6653b13d60e8e0399d.mp4",
			// 			"funcType": "1"
			// 		},
			// 		{
			// 			"relateId": "1946118974324539394",
			// 			"chapterHourType": "1",
			// 			"name": "",
			// 			"mainId": "1946118995975536642",
			// 			"url": "",
			// 			"funcType": "2"
			// 		},
			// 		{
			// 			"relateId": "1946118987192664066",
			// 			"chapterHourType": "1",
			// 			"name": "",
			// 			"mainId": "1946118995975536642",
			// 			"url": "",
			// 			"funcType": "3"
			// 		}
			// 	],
			// 		"name": "110",
			// 		"remark": "",
			// 		"id": "1946118995975536642"
			// }
			// }
		}).catch((err) => {

		})
	}


	// chapterId:"1945821914740051969"
	// createTime:"2025-07-18 16:05:00.444"
	// createUserName:"超管"
	// id:"1946118995975536642"
	// name:"110"
	// remark:""


}
defineExpose({
	getData, setFile, edit, open, reset
})

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