OnlineEducation-student-front/src/views/student/classCentre/note.vue

<template>
	<a-form ref="formRefAdd" :model="formDataAdd" :rules="formRules" layout="vertical">
		<a-row :gutter="16">
			<a-col :span="24">
				<a-form-item name="noteContent" label="笔记">
					<xn-editor v-model="formDataAdd.noteContent" placeholder="请输入笔记" :height="400"></xn-editor>
				</a-form-item>
			</a-col>
		</a-row>
	</a-form>
	<div class="frc">
		<a-button type="primary" :loading="submitLoading" @click="submitForm">新增</a-button>
	</div>
	<a-divider />
	<a-list
		class="demo-loadmore-list"
		:loading="initLoading"
		item-layout="horizontal"
		:data-source="listData"
		:pagination="pagination"
	>
		<template #renderItem="{ item }">
			<a-list-item>
				<a-skeleton avatar :title="false" :loading="!!item.loading" active>
					<div style="width: 100%">
						<a-list-item-meta>
							<template #title>
								<div class="fcbc">
									<div>{{ item.courseName }}</div>
									<div @click="videoSpeed(item)" style="cursor: pointer">{{ item.videoStopTime }}</div>
								</div>
							</template>
							<template #avatar v-if="item.avatar">
								<a-avatar :src="item.avatar" />
							</template>
						</a-list-item-meta>
						<div v-html="item.noteContent"></div>
						<div class="frc">
							<div @click="editNote(item)">
								<a-tooltip title="编辑" :getPopupContainer="(trigger) => trigger.parentElement">
									<edit-outlined />
								</a-tooltip>
							</div>
							<div class="ml-2 mr-4" @click="delNote(item)">
								<a-tooltip title="删除" :getPopupContainer="(trigger) => trigger.parentElement">
									<delete-outlined />
								</a-tooltip>
							</div>
						</div>
					</div>
				</a-skeleton>
			</a-list-item>
		</template>
	</a-list>
	<a-modal v-model:visible="visible" title="编辑" @ok="handleOk" append-to-body width="800px" :zIndex="99999">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="16">
				<a-col :span="24">
					<a-form-item name="noteContent" label="问题">
						<xn-editor v-model="formDataAdd.noteContent" placeholder="请输入笔记" :height="400"></xn-editor>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script setup>
	import classCentre from '@/api/student/classCentre'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import { createVNode } from 'vue'
	import { Modal } from 'ant-design-vue'
	import { required } from '@/utils/formRules'
	import XnEditor from '@/components/Editor/index.vue'
	// 表单数据，也就是默认给一些数据
	const visible = ref(false)
	const formData = ref({})
	const formRef = ref()
	const formDataAdd = ref({})
	const formRefAdd = ref()
	const submitLoading = ref(false)
	// 默认要校验的
	const formRules = {
		noteContent: [required('请输入笔记')]
	}
	const props = defineProps({
		idsObj: {
			type: [Array, Object],
			required: () => {}
		}
	})
	const count = 3
	const emit = defineEmits({ videoStopTime: null, videoSpeed: null })
	const initLoading = ref(true)
	const loading = ref(false)
	const data = ref([])
	const listData = ref([])
	const itemNote = ref({})
	onMounted(() => {
		loading.value = false
		initLoading.value = false
		getList()
	})
	const pagination = ref({
		current: 1,
		onChange: (page) => {
			pagination.value.current = page
			getList()
		},
		pageSize: 10
	})
	//毫秒转 00:00:00
	const formatTime = (milliseconds) => {
		let totalSeconds = Math.floor(milliseconds / 1000)
		const hours = Math.floor(totalSeconds / 3600)
		totalSeconds %= 3600
		const minutes = Math.floor(totalSeconds / 60)
		const seconds = totalSeconds % 60
		return [hours, minutes, seconds].map((val) => val.toString().padStart(2, '0')).join(':')
	}
	const getList = () => {
		delete props.idsObj.parent
		classCentre
			.notesList(
				{
					current: pagination.value.current,
					size: pagination.value.pageSize,
					...props.idsObj
				},
				itemNote.value.noteId
			)
			.then((data) => {
				data.records = data.records.map((r) => {
					return {
						...r,
						loading: false,
						startTime: r.recordTime ?? 0,
						videoStopTime: formatTime(r.recordTime ?? 0)
					}
				})
				listData.value = data.records
				pagination.value.total = data.total
				loading.value = false
				initLoading.value = false
			})
	}
	const editNote = (e) => {
		formData.value.noteId = e.noteId
		formData.value.noteContent = e.noteContent
		itemNote.value.noteId = e.noteId
		visible.value = true
	}
	const delNote = (e) => {
		Modal.confirm({
			title: '确定要删除笔记',
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				classCentre.notesEdit([{ noteId: e.noteId }]).then((data) => {
					getList()
				})
			},
			onCancel() {
				console.log('Cancel')
			}
		})
	}
	// 修改
	const handleOk = (e) => {
		formRef.value.validate().then(() => {
			classCentre
				.notesSubmitForm(
					{
						...formData.value
					},
					formData.value.noteId
				)
				.then(() => {
					visible.value = false
					formData.value.noteId = ''
					formRef.value.resetFields()
					getList()
				})
		})
	}
	//视频暂停的时间
	const videoStopTime = ref(0)
	//添加
	const submitForm = (e) => {
		formRefAdd.value
			.validate()
			.then(() => {
				submitLoading.value = true
				emit('videoStopTime', (e) => {
					videoStopTime.value = e * 1000
					classCentre
						.notesSubmitForm({
							...props.idsObj,
							...formDataAdd.value,
							recordTime: videoStopTime.value
						})
						.then(() => {
							formRefAdd.value.resetFields()
							getList()
						})
				})
			})
			.finally(() => {
				submitLoading.value = false
			})
	}
	const videoSpeed = (e) => {
		emit('videoSpeed', e)
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		getList
	})
</script>
<style scoped lang="less">
	.flc {
		display: flex;
		align-items: center;
	}
	.fcbc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.frc {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>