OnlineEducation-teacher-front/src/views/student/classCentre/form.vue

<template>
	<xn-form-container
		:width="500"
		:get-container="false"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
		:mask="false"
	>
		<div v-if="itemObj.key == 2" style="height: 100%">
			<vue-office-pdf :src="itemObj.url" style="width: 100%; height: 100%" />
		</div>
		<div v-if="itemObj.key == 3" style="height: 100%">
			<div v-for="(item, idx) in itemObj.srtInfoList" :key="idx">
				<div>{{ item.startTime }}~{{ item.endTime }}</div>
				<div style="cursor: pointer; padding: 10px 0" @click="videoSpeed(item)">{{ item.text }}</div>
			</div>
		</div>
		<div v-if="itemObj.type == 2 || itemObj.type == 4">
			<a-card :bordered="false">
				<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
					<a-row :gutter="16">
						<a-col :span="24">
							<a-form-item name="noteContent" v-if="itemObj.type == 2">
								<a-textarea v-model:value="formData.noteContent" placeholder="请输入内容" :rows="4" />
							</a-form-item>
							<div v-if="itemObj.type == 4">
								<a-form-item name="info" label="问题">
									<a-textarea v-model:value="formData.info" placeholder="请输入问题" :rows="4" />
								</a-form-item>
							</div>
						</a-col>
					</a-row>
				</a-form>
				<div class="frc">
					<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
				</div>
				<div class="noteBox">
					<note v-if="itemObj.type == 2" :idsObj="idsObj" ref="noteRef" @edit="editForm"></note>
					<askDiv v-if="itemObj.type == 4" :idsObj="idsObj" ref="noteRef" @edit="editForm"></askDiv>
				</div>
			</a-card>
		</div>
	</xn-form-container>
</template>

<script setup>
	import classCentre from '@/api/student/classCentre'
	import { required } from '@/utils/formRules'
	import note from './note.vue'
	import askDiv from './ask.vue'
	// import VueOfficePdf from '@vue-office/pdf'
	import VueOfficePdf from '@vue-office/pdf/lib/v3/vue-office-pdf.mjs';
	// import '@vue-office/pdf/lib/v3/index.css';
	import axios from 'axios'
	const props = defineProps({
		rightItem: {
			type: [Array, Object],
			required: () => {}
		},
		idsObj: {
			type: [Array, Object],
			required: () => {}
		}
	})
	const itemObj = computed(() => {
		if (props.rightItem?.url) {
			GetSrtInfo(props.rightItem.url)
		}
		return props.rightItem
	})
	const noteRef = ref()
	const submitLoading = ref(false)
	// 表单数据，也就是默认给一些数据
	const formData = ref({})
	const formRef = ref()
	//tabs
	const activeKey = ref('1')
	// 默认是关闭状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null, videoSpeed: null })
	// 打开抽屉
	const onOpen = (edit) => {
		visible.value = true
		if (edit) {
			if (itemObj.value.type == 2) {
				formData.value.noteId = edit.noteId
				formData.value.noteContent = edit.noteContent
			} else {
				formData.value.info = edit.info
				formData.value.id = edit.id
			}
		}
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value?.resetFields()
		formData.value.id = null
		formData.value.noteId = null
		visible.value = false
	}
	// 默认要校验的
	const formRules = {
		noteContent: [required('请输入内容')],
		info: [required('请输入内容')]
	}
	// 提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				classCentre[itemObj.value.type == 2 ? 'notesSubmitForm' : 'askSubmitForm'](
					{
						...props.idsObj,
						...formData.value
					},
					itemObj.value.type == 2 ? formData.value.noteId : formData.value.id
				).then(() => {
					emit('successful')
					formRef.value.resetFields()
					noteRef.value.getList()
				})
			})
			.finally(() => {
				submitLoading.value = false
			})
	}
	const editForm = (e) => {
		onOpen(e)
		if (itemObj.value.type == 2) {
			formData.value.noteId = e.noteId
			formData.value.noteContent = e.noteContent
		} else {
			formData.value.info = e.info
			formData.value.id = e.id
		}
	}
	const videoSpeed = (e) => {
		emit('videoSpeed', e)
	}
	//获取字幕内容，发送一个get请求
	function GetSrtInfo(srtUrl) {
		axios
			.get(`${srtUrl}`)
			.then(function (response) {
				let textList = response.data
					.split(/\n\s\n/)
					.filter((item) => item != '')
					.map((item, index) => {
						let textItem = item.split(/\n/)
						return {
							index: index,
							sort: textItem[0],
							text: textItem[2],
							startTime: ToSeconds(textItem[1].split(' --> ')[0]),
							endTime: ToSeconds(textItem[1].split(' --> ')[1]),
							timeLine: textItem[1]
						}
					})
				itemObj.value.srtInfoList = textList
				console.log('解析之后的字幕内容', textList)
			})
			.catch(function (error) {
				console.log(error)
			})
	}
	//将时间转化为秒
	function ToSeconds(t) {
		var s = 0.0
		if (t) {
			var p = t.split(':')
			for (let i = 0; i < p.length; i++) {
				s = s * 60 + parseFloat(p[i].replace(',', '.'))
			}
		}
		return s
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
<style scoped lang="less">
	.frc {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.noteBox {
		height: 750px;
		overflow-y: auto;
	}
</style>