OnlineEducation-teacher-front/src/components/Comment/index.vue

<template>
	<div>
		<a-comment
			v-for="(item, idx) in commentList"
			:key="idx"
			:style="{ 'border-bottom': item.parentId == -1 ? '1px solid #ccc' : '' }"
		>
			<template #actions>
				<span key="comment-basic-like">
					<a-tooltip title="点赞">
						<template v-if="item.isLike == 1">
							<HeartOutlined :style="{ color: '#fa6c8d' }" @click="like(item)" />
						</template>
						<template v-else>
							<HeartOutlined @click="like(item)" />
						</template>
					</a-tooltip>
					<span style="padding-left: 8px; cursor: auto">
						{{ item.likeCount }}
					</span>
				</span>
				<a-tooltip title="编辑">
					<EditOutlined
						v-if="item.isSelf == 1"
						@click="replyFormRef.onOpen(item, props.params.targetId, item.replyId, true)"
					/>
				</a-tooltip>
				<a-tooltip title="删除">
					<DeleteOutlined v-if="item.isSelf == 1" @click="showDeleteConfirm(item)" />
				</a-tooltip>

				<span
					key="comment-basic-reply-to"
					@click="replyFormRef.onOpen(item, props.params.targetId, item.replyId, false)"
					v-if="item.parentId == -1"
				>
					回复
				</span>
			</template>
			<template #author>
				<a>{{ item.userNickname }}</a>
			</template>
			<template #avatar>
				<a-avatar :src="item.userAvatar" :alt="item.userNickname" />
			</template>
			<template #content>
				<div v-html="item.replyContent"></div>
			</template>
			<template #datetime>
				<span>{{ formatDateTime(item.createTime) }}</span>
			</template>
			<div v-if="item.children">
				<a-divider />
			</div>
			<Comment
				v-if="item.children && item.children.length > 0"
				:commentList="item.children"
				:params="params"
				@successful="emit('successful')"
			></Comment>
		</a-comment>
		<replyForm ref="replyFormRef" @successful="emit('successful')" />
	</div>
</template>

<script setup name="commentList">
	import forumApi from '@/api/forum/forumApi'
	import Comment from '@/components/Comment/index.vue'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import { createVNode } from 'vue'
	import { Modal } from 'ant-design-vue'
	import { parseTime } from '@/utils/exam'
	import replyForm from '@/views/forum/replyForm.vue'
	const emit = defineEmits({ successful: null })
	const replyFormRef = ref()

	const props = defineProps({
		commentList: {
			type: Array,
			default: () => []
		},
		params: {
			type: Object,
			default: () => {}
		},
		count: {
			type: [String , Number],
			default: 0
		}
	})
	function formatDateTime(val) {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}
	const like = (item) => {
		forumApi
			.postlikeSubmit(
				{
					...props.params,
					targetId: item.replyId
				},
				item.isLike
			)
			.then((data) => {
				item.isLike = !item.isLike
			})
	}
	const showDeleteConfirm = (item) => {
		Modal.confirm({
			title: '确定要删除回复?',
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				forumApi.postreplyDel([{ replyId: item.replyId }]).then((data) => {
					emit('successful')
				})
			},
			onCancel() {
				console.log('Cancel')
			}
		})
	}
</script>