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

<template>
	<a-form ref="formRefAdd" :model="formDataAdd" :rules="formRules" layout="vertical">
		<a-row :gutter="16">
			<a-col :span="24">
				<a-form-item name="infoType" label="请选择类型">
					<a-select
						v-model:value="formDataAdd.infoType"
						placeholder="请选择类型"
						style="width: 100%"
						:options="typeOptions"
						:getPopupContainer="(trigger) => trigger.parentElement"
					></a-select>
				</a-form-item>
			</a-col>
			<a-col :span="24">
				<a-form-item name="info" label="问题">
					<xn-editor v-model="formDataAdd.info" placeholder="请输入问题" :toolbar="toolbar" :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 class="flc">
										<div class="askName">{{ item.userIdName }}</div>
										<div class="askName mr-1 ml-1" v-if="item.infoType">|</div>
										<div class="askName">{{ infoTypeName(item.infoType) }}</div>
									</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.info"></div>
						<div class="frc mt-2" v-if="item.userId == userInfo.id">
							<div class="flc">
								<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 class="ml-2" @click="giveFun(item)">
									<a-tooltip title="点赞" :getPopupContainer="(trigger) => trigger.parentElement">
										<like-outlined :style="{ color: item.isLike == 1 ? '#fa6c8d' : '' }" />
									</a-tooltip>
								</div> -->
							</div>
						</div>
						<div
							v-for="(item, idx) in item.recordChildList"
							:key="item.id"
							v-if="item.recordChildList"
							class="askitemBox"
						>
							<div class="flc">
								<div class="askName">{{ item.userIdName }}</div>
								<div v-if="item.avatar">
									<a-avatar :src="item.avatar" />
								</div>
							</div>
							<div v-html="item.info"></div>
						</div>
					</div>
				</a-skeleton>
			</a-list-item>
		</template>
	</a-list>
	<a-modal
		v-model:visible="visible"
		title="编辑"
		@ok="handleOk"
		:confirmLoading="confirmLoading"
		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-col :span="24">
						<a-form-item name="infoType" label="请选择类型">
							<a-select
								v-model:value="formData.infoType"
								placeholder="请选择类型"
								style="width: 100%"
								:options="typeOptions"
								:getPopupContainer="(trigger) => trigger.parentElement"
							></a-select>
						</a-form-item>
					</a-col>
					<a-form-item name="info" label="问题">
						<xn-editor v-model="formData.info" :toolbar="toolbar" 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 askDiv from './ask.vue'
	import tool from '@/utils/tool'
	import { required } from '@/utils/formRules'
	import XnEditor from '@/components/Editor/index.vue'
	const userInfo = tool.data.get('USER_INFO')
	const typeOptions = tool.dictList('ANSWER_INFO_TYPE')
	const infoTypeName = computed(() => (e) => typeOptions.find((r) => r.value == e)?.label)
	// 表单数据，也就是默认给一些数据
	const visible = ref(false)
	const formData = ref({})
	const formRef = ref()
	const formDataAdd = ref({})
	const formRefAdd = ref()
	const submitLoading = ref(false)
	const confirmLoading = ref(false)
	const toolbar = ref(
		'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
				alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \ table  preview | code selectall'
	)
	// 默认要校验的
	const formRules = {
		info: [required('请输入问题')],
		infoType: [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
			.askList(
				{
					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: parseFloat(r.recordTime) / 1000 ?? 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 = Object.assign(formData.value, { id: e.id, info: e.info, infoType: e.infoType })
		visible.value = true
	}
	const delNote = (e) => {
		Modal.confirm({
			title: '确定要删除问题?',
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				classCentre.askDel([{ id: e.id }]).then((data) => {
					getList()
				})
			},
			onCancel() {
				console.log('Cancel')
			}
		})
	}
	const giveFun = (e) => {
		classCentre.askLike({ giveId: e.id }, e.giveNumSelf).then(() => {
			getList()
		})
	}
	//修改
	const handleOk = (e) => {
		confirmLoading.value = true
		formRef.value.validate().then(() => {
			classCentre
				.askSubmitForm(
					{
						...formData.value
					},
					formData.value.id
				)
				.then(() => {
					visible.value = false
					formData.value.id = ''
					formRef.value.resetFields()
					getList()
				})
				.finally(() => {
					confirmLoading.value = false
				})
		})
	}
	//视频暂停的时间
	const videoStopTime = ref(0)
	//添加
	const submitForm = (e) => {
		submitLoading.value = true
		formRefAdd.value
			.validate()
			.then(() => {
				emit('videoStopTime', (e) => {
					videoStopTime.value = e * 1000
					classCentre
						.askSubmitForm({
							...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;
	}
	.askitemBox {
		border-top: 1px solid #f0f0f0;
		padding-top: 10px;
		margin-top: 10px;
		margin-left: 15px;
	}
	.askName {
		font-size: 12px;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.425);
	}
	.frc {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>