OnlineEducation-student-front/src/views/student/classNotice/detail.vue

<template>
	<xn-form-container title="详情" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-descriptions :column="1" size="middle" bordered class="mb-2">
			<a-descriptions-item label="标题">{{ formData.title }}</a-descriptions-item>
			<a-descriptions-item label="发送时间">{{ formData.createTime }}</a-descriptions-item>
			<a-descriptions-item label="是否已读">
				<span v-if="formData.read" style="color: #d9d9d9">已读</span>
				<span v-else style="color: #ff4d4f">未读</span>
			</a-descriptions-item>
			<a-descriptions-item label="内容">
				<div style="width: 450px;">{{ formData.content }}</div>
			</a-descriptions-item>
		</a-descriptions>
	</xn-form-container>
</template>

<script setup name="inSiteMessageDetail">
	import classCentre from '@/api/student/classCentre'
	import EventBus from '@/utils/EventBus'
	const emits = defineEmits(['refresh'])
	const detailObj = ref()
	// 默认是关闭状态
	let visible = $ref(false)
	const formData = ref({})
	// 打开抽屉
	const onOpen = (record) => {
		visible = true
		detailObj.value = record
		getMessageList(record)
	}
	// 获取站内信列表
	const getMessageList = (record) => {
		const param = {
			noticeId: record.noticeId
		}
		classCentre.classNoticeDetail(param).then((data) => {
			Object.assign(record, data)
			formData.value = record
		})
		if(!formData.value.read){
			addRead()
		}
	}
	const addRead =()=>{
		classCentre.readAdd({funcType:2,mainId:detailObj.value.noticeId})
	}
	// 关闭抽屉
	const onClose = () => {
		visible = false
		emits('refresh')
		EventBus.emit('getReadList')
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>