rt-sim-training-client/src/views/messageBoard/index.vue

<template>
  <div id="elDialog" class="message-board-box">
    <div class="message-board-title">留言板</div>
    <div class="message-board-content">
      <div v-if="postCommentList.length">
        <template v-for="(item,i) in postCommentList">
          <div :key="i" class="eachPostComment">
            <div style="margin-bottom: 10px;display: flex;align-items: center;">
              <img :src="avatarUrl(item)" class="head_portrait">
              <div class="MBCcreatorNickName">{{ item.creatorNickName }}</div>
              <div style="display: inline-block;">{{ item.createTime }}</div>
            </div>
            <div style="margin-left: 60px;" v-html="$escapeHTML(`${item.content}`)" />
            <div style="width: 100%;display:flex;align-items: center;justify-content: flex-end;">
              <img :src="replyIcon" class="replyIcon" @click="replyLeaveMessage(item.id, i)">
              <img v-if="userId == item.creatorId || superAdmin" :src="deleteIcon" class="deleteIcon" @click="deleteMessage(item.id)">
            </div>
            <div v-if="item.comments && item.comments.total > 0" class="eachComment">
              <div v-if="moreMessageId == item.id">
                <template v-for="(elem,j) in allCommentList">
                  <div :key="j" style="font-size: 14px;margin-top: 10px;">
                    <span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
                    <span style="margin-right: 15px;" v-html="$escapeHTML(`${elem.content}`)" />
                    <span style="margin-right: 10px;">{{ elem.commentTime }}</span>
                    <span class="replyLeaveMessage" @click="replyLeaveMessage(item.id, i,elem.id, elem.userNickname)">回复</span>
                    <span v-if="userId == elem.userId || superAdmin" style="color:#409EFF;cursor: pointer;" type="text" @click="deleteComment(item.id, i, elem.id)">删除</span>
                  </div>
                </template>
              </div>
              <div v-else>
                <template v-for="(elem,j) in item.comments.list">
                  <div :key="j" style="font-size: 14px;margin-top: 18px;">
                    <span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
                    <span style="margin-right: 15px;" v-html="$escapeHTML(`${elem.content}`)" />
                    <span style="margin-right: 10px;">{{ elem.commentTime }}</span>
                    <span class="replyLeaveMessage" @click="replyLeaveMessage(item.id, i,elem.id, elem.userNickname)">回复</span>
                    <span v-if="userId == elem.userId || superAdmin" style="color:#409EFF;cursor: pointer;" type="text" @click="deleteComment(item.id, i, elem.id)">删除</span>
                  </div>
                </template>
              </div>
              <div v-if="item.comments.total > 3 && moreMessageId != item.id" style="margin-top: 10px;">
                <span class="view_more" @click="viewMoreComment(item)">{{ `共${item.comments.total}条回复,点击查看更多>>` }}</span>
              </div>
            </div>
            <div v-if="replyMessageId == item.id" style="width: 80%;margin-left: 10%;text-align: center;">
              <quill-editor
                :ref="'answerInput' + item.id"
                v-model="commentContent"
                style="width: 80%;margin-left: 10%;margin-top: 10px;"
                class-name="answer_input"
                :margin-bottom="20"
                editor-type="onlyEmoji"
                :no-handle-p="true"
                :height="100"
                :placeholder="replyUserName"
              />
              <div>
                <el-button type="danger" size="small" @click="commentMessage">回复</el-button>
                <el-button size="small" @click="cancelComment">取消</el-button>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div v-else class="empty-text">
        <span>暂无留言</span>
      </div>
      <div style="width: 100%;text-align: center;">
        <el-pagination
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next,jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <quill-editor ref="quillEditor" v-model="content" style="width: 80%;margin-left: 10%;" :margin-bottom="20" editor-type="imgEmoji" :no-handle-p="true" />
    <span id="boardBottom" class="dialog-footer">
      <el-button @click="handleClear">清空</el-button>
      <el-button type="danger" @click="commitComment">留言</el-button>
    </span>
    <el-button size="mini" type="danger" class="goSlide" @click="goSlide">我要留言</el-button>
    <div v-show="imgShow" class="popUpImgView" @click="handelCloseImg">
      <img id="targetImg" src="" class="popUpImg">
    </div>
  </div>
</template>

<script>
import { answerPost, queryMessagePagingByProjectCode, deleteMessageByAdmin, deleteMessageBySelf, commentLevelMessage, commentComents,
    queryMessageCommentList, deleteCommentByAdmin, deleteCommentBySelf, getPostByProjectCode } from '@/api/learn';
import lick_icon from '@/assets/like.png';
import unlike_icon from '@/assets/unlike.png';
import reply_icon from '@/assets/reply.png';
import delete_icon from '@/assets/delete.png';
import { superAdmin } from '@/router/index';
import { ProjectCode } from '@/scripts/ProjectConfig';
import QuillEditor from '@/components/QuillEditor/index';
export default {
    name: 'MessageBoard',
    components: {
        QuillEditor
    },
    data() {
        return {
            content: '',
            postCommentList: [],
            pageSize: 10,
            pageNum: 0,
            total: 0,
            imgShow: false,
            lickIcon: lick_icon,
            unlikeIcon: unlike_icon,
            replyIcon: reply_icon,
            deleteIcon: delete_icon,
            replyMessageId: '',
            commentContent: '',
            replyCommentId: '',
            replyMessageIndex: '',
            allCommentList: [],
            moreMessageId: '',
            replyUserName: '',
            postId: ''
        };
    },
    computed: {
        userId() {
            return this.$store.state.user.id;
        },
        superAdmin() {
            return this.$store.state.user.roles.includes(superAdmin);
        },
        projectCode() {
            const project = this.$route.query.project;
            return ProjectCode[project];
        }
    },
    created() {
        const that = this;
        window.handleZoomImg = function () {
            that.imgShow = true;
            document.getElementById('targetImg').src = event.target.currentSrc;
        };
    },
    mounted() {
        getPostByProjectCode(this.projectCode).then(resp => {
            this.postId = resp.data.id;
        });
        this.handleCurrentChange();
    },
    methods: {
        commitComment() {
            const images = this.content.match(/<img/g);
            const answerContent = this.handleEmojiContent(this.content);
            if (images && images.length > 3) {
                this.$message.error('留言内容使用图片应小于三张！');
                return;
            }
            if (answerContent.length > 1000) {
                this.$message.error('留言内容超出最大长度！');
                return;
            }
            if (!answerContent) {
                this.$message.error('留言内容不能为空！');
                return;
            }
            answerPost({postId: this.postId, content: answerContent}).then(resp => {
                this.pageNum = 1;
                this.handleCurrentChange();
                this.content = '';
            }).catch(error => {
                this.$message.error('留言失败 ！');
                console.log(error);
            });
        },
        handleCurrentChange() {
            queryMessagePagingByProjectCode(this.projectCode, {pageSize: this.pageSize, pageNum: this.pageNum}).then(resp => {
                this.postCommentList = [];
                (resp.data.list || []).forEach(item => {
                    item.content = this.replaceEmoji(item.content);
                    item.comments && item.comments.list && item.comments.list.forEach(elem => {
                        elem.content = this.replaceEmoji(elem.content);
                    });
                    this.postCommentList.push(item);
                });
                this.total = resp.data.total;
            });
        },
        replaceEmoji(content) {
            let value = content.replace(/<img/g, '<img style="width: 100px;height: auto;cursor: zoom-in;" onclick="handleZoomImg()"');
            const list = value.match(/<<<([^>]*)>>>/g);
            (list || []).forEach(elem => {
                const targetValue = elem.substring(3, elem.length - 3);
                value = value.replace(elem, `<span class="ql-emojiblot" data-name="${targetValue}"><span contenteditable="false"><span class="ap ap-${targetValue}">ss</span></span></span>`);
            });
            return value;
        },
        goSlide() {
            const bottom = document.getElementById('boardBottom');
            const element = document.getElementById('elDialog').childNodes[0];
            element.scrollTop = bottom.offsetTop;
            this.$refs.quillEditor.getFocus();
        },
        avatarUrl(val) {
            if (val && val.creatorAvatarPath) {
                return this.$store.user.state.resourcesUrl + val.creatorAvatarPath;
            } else {
                return 'https://joylink.club/oss/wxmicro_assistant/userhead/defaultuser.png';
            }
        },

        handleClear() {
            this.content = '';
        },
        handelCloseImg() {
            this.imgShow = false;
            document.getElementById('targetImg').src = '';
        },
        replyLeaveMessage(messageId, messageIndex, commentId, userNickname) {
            this.cancelComment();
            this.replyMessageId = messageId;
            this.replyCommentId = commentId;
            this.replyMessageIndex = messageIndex;
            if (commentId) {
                this.replyUserName = '@' + userNickname + ' ';
                this.commentContent = '';
            }
            this.$nextTick(()=>{
                this.$refs['answerInput' + messageId][0].getFocus();
            });
        },
        cancelComment() {
            this.replyMessageId = '';
            this.commentContent = '';
            this.replyCommentId = '';
            this.replyMessageIndex = '';
            this.replyUserName = '';
        },
        commentMessage() {
            const contentValue = this.handleEmojiContent(this.commentContent);
            if (contentValue.length > 300) {
                this.$message.error('回复内容超出最大长度！');
                return;
            }
            if (this.replyCommentId) {
                commentComents(this.replyMessageId, this.replyCommentId, {content:contentValue}).then(resp => {
                    this.getCommentList(this.replyMessageId, this.replyMessageIndex);
                    this.cancelComment();
                }).catch(error => {
                    this.$message.error('评论回复失败！');
                    console.error(error);
                });
            } else {
                commentLevelMessage(this.replyMessageId, {content:contentValue}).then(resp => {
                    this.getCommentList(this.replyMessageId, this.replyMessageIndex);
                    this.cancelComment();
                }).catch(error => {
                    this.$message.error('评论回复失败！');
                    console.error(error);
                });
            }
        },
        getCommentList(messageId, messageIndex) {
            queryMessageCommentList(messageId).then(resp => {
                const replaceValue = [];
                resp.data && resp.data.forEach(item => {
                    item.content = this.replaceEmoji(item.content);
                    replaceValue.push(item);
                });
                if (this.moreMessageId == messageId) {
                    this.allCommentList = replaceValue;
                }
                if (replaceValue.length > 3) {
                    this.postCommentList[messageIndex].comments.list = replaceValue.slice(0, 3);
                    this.postCommentList[messageIndex].comments.total = replaceValue.length;
                } else {
                    this.postCommentList[messageIndex].comments.list = replaceValue;
                    this.postCommentList[messageIndex].comments.total = replaceValue.length;
                }
            }).catch(error => {
                this.$message.error('更新回复失败！');
                console.error(error);
            });
        },
        computedCommentName(elem) {
            if (elem.replyUserNickName) {
                return `${elem.userNickname} 回复@ ${elem.replyUserNickName}：`;
            } else {
                return elem.userNickname + '：';
            }
        },
        deleteMessage(messageId) {
            if (this.superAdmin) {
                deleteMessageByAdmin(messageId).then(resp => {
                    // this.$message.success('删除留言成功！');
                    this.handleCurrentChange();
                }).catch(error => {
                    this.$message.error('删除留言失败！');
                    console.error(error);
                });
            } else {
                deleteMessageBySelf(messageId).then(resp => {
                    // this.$message.success('删除留言成功！');
                    this.handleCurrentChange();
                }).catch(error => {
                    this.$message.error('删除留言失败！');
                    console.error(error);
                });
            }
        },
        deleteComment(messageId, messageIndex, commentId) {
            if (this.superAdmin) {
                deleteCommentByAdmin(commentId).then(resp => {
                    this.getCommentList(messageId, messageIndex);
                }).catch(error => {
                    this.$message.error('删除回复失败！');
                    console.error(error);
                });
            } else {
                deleteCommentBySelf(commentId).then(resp => {
                    this.getCommentList(messageId, messageIndex);
                }).catch(error => {
                    this.$message.error('删除回复失败！');
                    console.error(error);
                });
            }
        },
        viewMoreComment(data) {
            queryMessageCommentList(data.id).then(resp => {
                this.allCommentList = [];
                resp.data && resp.data.forEach(item => {
                    item.content = this.replaceEmoji(item.content);
                    this.allCommentList.push(item);
                });
                this.moreMessageId = data.id;
            }).catch(error => {
                console.error(error);
            });
        },
        handleEmojiContent(content) {
            const list = content.match(/<span class="ql-emojiblot" data-name="(\S*)"><span contenteditable="false"><span class="ap ap-(\S*)<\/span><\/span><\/span>/g);
            (list || []).forEach(item => {
                let targetValue = item.split(' ')[2];
                targetValue = targetValue.substring(11, targetValue.length - 8);
                content = content.replace(item, '<<<' + targetValue + '>>>');
            });
            return content;
        }
    }
};
</script>

<style lang="scss" scoped>
	.dialog-footer{
		margin: 0 auto;
		padding: 10px 0 30px;
		display: flex;
		justify-content: center;
	}
	.empty-text{
		text-align: center;
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		color: #ccc;
	}
	.head_portrait{
		width: 50px;
		height: 50px;
		border-radius: 25px;
	}
	.view_more {
		cursor: pointer;
	}
	.view_more:hover {
		cursor: pointer;
		color: #409EFF;
	}
	.img-box{
		width: 100px;
		height: auto;
	}
	.message-board-box{
		width: 100%;
		background-image:url('../../assets/bg_board.jpg');
		background-size: 100% 100%;
		min-height: 100%;
	}
	/deep/.ql-container{
		height: 80%;
	}
	.message-board-title{
		font-size: 30px;
		color: #F00;
		font-family: 'fangsong';
		font-weight: bolder;
		width: 100%;
		text-align: center;
		height: 80px;
		line-height: 80px;
	}
    .message-board-content{
        width: 80%;
        margin-left: 10%;
        padding: 20px;
        margin-bottom: 20px;
        background-color: rgba(255,255,255,0);
        border: 1px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .eachPostComment{
        border: 1px solid #C0C0C0;
        border-radius: 5px;
        margin-bottom: 20px;
        box-shadow: 2px 2px 3px #808080;
        padding: 10px 20px;
        background-color: #fff
    }
    .eachComment{
        background: #F5F5F5;
        margin-top: 10px;
        width: calc(100% - 120px);
        margin-left: 60px;
        border-radius: 5px;
        padding: 1px 10px 10px;
    }
    .replyLeaveMessage{color:#409EFF;cursor: pointer;margin-right: 10px;}
    .MBCcreatorNickName{display: inline-block;margin-right: 20px;margin-left:10px;font-size: 18px;color: #000;}
    .replyIcon{width: 16px;height: auto;margin-right: 30px;cursor: pointer;}
    .deleteIcon{width: 16px;height: auto;cursor:pointer;}
    .goSlide{position: fixed; left: 91%;top: 80px;width: 90px;}
    .popUpImgView{position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,0.5);cursor: zoom-out;}
    .popUpImg{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);min-width: 500px;max-height: 80%;height: auto;}
</style>
<style>
.ql-size-small {
	font-size: 0.75em;
}
.ql-size-large{
	font-size: 1.5em;
}
.ql-size-huge{
	font-size: 2.5em;
}
</style>