File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
+<template>
<div class="comment-item" v-for="comment in comments" :key="comment.id">
<div class="pd10">
<div class="flex align-center mb5">
<h4 class="comment-user">{{ comment.rgtrNm }}</h4>
<span class="comment-date ml5">{{ comment.regDt }}</span>
</div>
<input v-if="'isUpdate' in comment && comment.isUpdate" class="comment-text mb10" v-model="comment.cmntCn">
<p v-else class="comment-text mb10" >{{ comment.useYn == 'Y' ? comment.cmntCn : '[ 삭제된 댓글입니다. ]' }}</p>
<div v-if="showReplyInput[comment.cmntId]" class="flex align-center mb10">
<div class="gd-10">
<input v-model="comment.replyText" class="full-input" />
</div>
<div class="gd-2">
<button class="large-btn blue-btn" @click="fnInsertCmnt(comment)">등록</button>
</div>
</div>
<div class="flex justify-end align-center">
<button @click="toggleReplyInput(comment.cmntId)" class="ml5 comment-item-btn darkg-border-btn radius pd5">
{{ showReplyInput[comment.cmntId] ? '취소' : '답글 달기' }}
</button>
<button v-if="roles[0].authority == 'ROLE_ADMIN' || mbrId == comment.rgtr" @click="fnUpdate(comment)" class="ml5 comment-item-btn darkg-border-btn radius pd5">
수정
</button>
<button v-if="roles[0].authority == 'ROLE_ADMIN' || mbrId == comment.rgtr" @click="fnDeleteCmnt(comment.cmntId)" class="ml5 comment-item-btn red-border-btn radius pd5">
삭제
</button>
</div>
<CommentItem v-if="comment.children" :comments="comment.children" :pageId="pageId" @isReply="isReply"/>
</div>
</div>
</template>
<script>
import queryParams from '../../../resources/js/queryParams';
import { saveCmnt, updateCmnt, deleteCmnt } from '../../../resources/api/cmnt.js'
export default {
mixins: [queryParams],
name: 'CommentItem',
props: {
comments: {
type: Array,
required: true
},
onDelete: {
type: Function,
required: true
},
pageId: {
type: String,
required: true
}
},
data() {
return {
roles : this.$store.state.roles,
mbrId: this.$store.state.mbrId,
upCmntId: null,
showReplyInput: {},
replyText: ""
}
},
methods: {
toggleReplyInput(commentId) {
this.showReplyInput = { ...this.showReplyInput, [commentId]: !this.showReplyInput[commentId] };
if (!this.showReplyInput[commentId]) {
this.replyText = { ...this.replyText, [commentId]: '' };
}
},
handleReply(commentId) {
// this.onReply(commentId, this.replyText);
this.showReplyInput = { ...this.showReplyInput, [commentId]: false };
},
async fnUpdate(comment) {
const vm = this;
if('isUpdate' in comment && comment.isUpdate){
//수정 로직
try {
const params = {
'cmntId' : comment.cmntId,
'cmntCn' : comment.cmntCn
}
const res = await updateCmnt(params);
if (res.status == 200) {
alert('수정되었습니다.');
comment.isUpdate = false;
}
} catch (error) {
// alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
alert(vm.$getCmmnMessage('err005'));
}
} else {
comment.isUpdate = true;
}
},
// 댓글 등록 로직
async fnInsertCmnt(comment) {
const vm = this;
// 유효성 검사
if (comment.replyText.trim() == '' || comment.replyText == null) {
alert('댓글을 입력해주세요.');
return;
}
try {
const params = {
'bbsId' : this.pageId,
'cmntCn' : comment.replyText,
'upCmntId' : comment.cmntId,
}
const res = await saveCmnt(params);
if (res.status == 200) {
alert('댓글이 등록되었습니다.');
this.replyText = '';
this.upCmntId = null;
this.$emit('isReply', true);
}
} catch (error) {
// alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
alert(vm.$getCmmnMessage('err005'));
}
},
isReply(isReply) {
this.$emit('isReply', isReply);
},
// 댓글 삭제 로직
async fnDeleteCmnt(cmntId) {
const vm = this;
try {
const params = {
'cmntId' : cmntId,
}
const res = await deleteCmnt(params);
if (res.status == 200) {
alert('댓글이 삭제되었습니다.');
this.$emit('isReply', true);
}
} catch (error) {
// alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
alert(vm.$getCmmnMessage('err005'));
}
}
},
watch: {
},
computed: {
},
mounted() {
}
}
</script>