rt-sim-training-client/src/views/newMap/displayNew/demon/messageBoard.vue

<template>
  <el-dialog
    id="elDialog"
    title="留言板"
    :visible.sync="dialogVisible"
    fullscreen
    center
    :before-close="handleClose"
  >
    <el-card class="box-card" style="width: 80%;margin-left: 10%;padding: 20px;margin-bottom: 20px;background-color: rgba(255,255,255,0)">
      <div v-if="postCommentList.length">
        <template v-for="(item,i) in postCommentList">
          <div :key="i" style="border: 1px solid #C0C0C0;border-radius: 5px;margin-bottom: 20px;box-shadow: 2px 2px 3px #808080;padding: 10px 20px;background-color: #fff">
            <div style="margin-bottom: 10px;display: flex;align-items: center;">
              <img :src="avatarUrl(item)" class="head_portrait">
              <div style="display: inline-block;margin-right: 20px;margin-left:10px;font-size: 18px;color: #000;">{{ 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="lickIcon" style="width: 20px;height: auto;margin-right: 30px;">-->
              <!--<img :src="unlikeIcon" style="width: 20px;height: auto;margin-right: 30px;">-->
              <img :src="replyIcon" style="width: 16px;height: auto;margin-right: 30px;" @click="replyLeaveMessage(item.id, i)">
              <img v-if="userId == item.creatorId || superAdmin" :src="deleteIcon" style="width: 16px;height: auto;" @click="deleteMessage(item.id)">
            </div>
            <div v-if="item.comments && item.comments.total > 0" style="background: #F5F5F5;margin-top: 10px; width: calc(100% - 120px);margin-left: 60px; border-radius: 5px;padding: 0 10px 10px;">
              <div v-if="moreMessageId == item.id">
                <template v-for="(elem,j) in allCommentList">
                  <div :key="j" style="font-size: 14px">
                    <span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
                    <span style="margin-right: 15px;">{{ elem.content }}</span>
                    <span style="margin-right: 10px;">{{ elem.commentTime }}</span>
                    <el-button type="text" @click="replyLeaveMessage(item.id, i,elem.id)">回复</el-button>
                    <el-button v-if="userId == elem.userId || superAdmin" type="text" @click="deleteComment(item.id, i, elem.id)">删除</el-button>
                  </div>
                </template>
              </div>
              <div v-else>
                <template v-for="(elem,j) in item.comments.list">
                  <div :key="j" style="font-size: 14px">
                    <span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
                    <span style="margin-right: 15px;">{{ elem.content }}</span>
                    <span style="margin-right: 10px;">{{ elem.commentTime }}</span>
                    <el-button type="text" @click="replyLeaveMessage(item.id, i,elem.id)">回复</el-button>
                    <el-button v-if="userId == elem.userId || superAdmin" type="text" @click="deleteComment(item.id, i, elem.id)">删除</el-button>
                  </div>
                </template>
              </div>
              <div v-if="item.comments.total > 10 && moreMessageId != item.id">
                <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;">
              <el-input :id="'answerInput' + item.id" v-model="commentContent" type="textarea" placeholder="请输入内容" maxlength="300" style="margin-top: 10px;" :autosize="{ minRows: 2, maxRows: 4}" show-word-limit />
              <div style="margin-top: 10px;">
                <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 style="text-align: center;width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #ccc;">
        <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>
    </el-card>
    <quill-editor ref="quillEditor" v-model="content" style="width: 80%;margin-left: 10%;" placeholder="请输入内容" :margin-bottom="20" :unload-img="true" :no-handle-p="true" />
    <span id="boardBottom" class="dialog-footer">
      <el-button @click="handleClear">清空</el-button>
      <el-button type="primary" @click="commitComment">留言</el-button>
      <el-button type="danger" @click="dialogVisible = false">返回</el-button>
    </span>
    <el-button size="mini" type="danger" style="position: fixed; right: 100px;top: 80px;" @click="goSlide">我要留言</el-button>
    <div v-show="imgShow" style="position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,0.5);cursor: zoom-out;" @click="handelCloseImg">
      <img id="targetImg" src="" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);min-width: 500px;max-height: 80%;height: auto;">
    </div>
  </el-dialog>
</template>

<script>
import { answerPost, queryPostPaging, deleteMessageByAdmin, deleteMessageBySelf, commentLevelMessage, commentComents, queryMessageCommentList, deleteCommentByAdmin, deleteCommentBySelf } 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_APP_TARGET';
export default {
    name: 'MessageBoard',
    data() {
        return {
            dialogVisible: false,
            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: ''
        };
    },
    computed: {
        userId() {
            return this.$store.state.user.id;
        },
        superAdmin() {
            return this.$store.state.user.roles.includes(superAdmin);
        }
    },
    created() {
        const that = this;
        window.handleZoomImg = function () {
            that.imgShow = true;
            document.getElementById('targetImg').src = event.target.currentSrc;
        };
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        doShow() {
            this.handleCurrentChange();
            this.dialogVisible = true;
        },
        commitComment() {
            const images = this.content.match(/<img/g);
            if (images && images.length > 3) {
                this.$message.error('留言内容使用图片应小于三张！');
                return;
            }
            if (this.content.length > 1000) {
                this.$message.error('留言内容超出最大长度！');
                return;
            }
            answerPost({postId: 1, content: this.content}).then(resp => {
                this.pageNum = Math.ceil(resp.data / this.pageSize);
                this.handleCurrentChange();
                this.content = '';
            }).catch(error => {
                this.$message.error('留言失败 ！');
                console.log(error);
            });
        },
        handleCurrentChange() {
            queryPostPaging(1, {pageSize: this.pageSize, pageNum: this.pageNum}).then(resp => {
                this.postCommentList = [];
                (resp.data.list || []).forEach(item => {
                    const value = item.content.replace(/<img/g, '<img style="width: 100px;height: auto;cursor: zoom-in;" onclick="handleZoomImg()"');
                    item.content = value;
                    this.postCommentList.push(item);
                });
                this.total = resp.data.total;
            });
        },
        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 'https://joylink.club/oss/joylink' + val.creatorAvatarPath;
            } else {
                return 'https://joylink.club/oss/wxmicro_assistant/userhead/defaultuser.png';
            }
        },

        handleClear() {
            this.content = '';
        },
        handelCloseImg() {
            this.imgShow = false;
            document.getElementById('targetImg').src = '';
            document.getElementById('targetImgInner').src = '';
        },
        replyLeaveMessage(messageId, messageIndex, commentId) {
            this.replyMessageId = messageId;
            this.replyCommentId = commentId;
            this.replyMessageIndex = messageIndex;
            this.$nextTick(()=>{
                document.getElementById('answerInput' + messageId).focus();
            });
        },
        cancelComment() {
            this.replyMessageId = '';
            this.commentContent = '';
            this.replyCommentId = '';
            this.replyMessageIndex = '';
        },
        commentMessage() {
            if (this.replyCommentId) {
                commentComents(this.replyMessageId, this.replyCommentId, {content:this.commentContent}).then(resp => {
                    this.getCommentList(this.replyMessageId, this.replyMessageIndex);
                    this.replyMessageId = '';
                    this.commentContent = '';
                    this.replyCommentId = '';
                    this.replyMessageIndex = '';
                }).catch(error => {
                    this.$message.error('评论留言失败！');
                    this.console.error(error);
                });
            } else {
                commentLevelMessage(this.replyMessageId, {content:this.commentContent}).then(resp => {
                    this.getCommentList(this.replyMessageId, this.replyMessageIndex);
                    this.replyMessageId = '';
                    this.commentContent = '';
                    this.replyCommentId = '';
                    this.replyMessageIndex = '';
                }).catch(error => {
                    this.$message.error('评论留言失败！');
                    this.console.error(error);
                });
            }
        },
        getCommentList(messageId, messageIndex) {
            queryMessageCommentList(messageId).then(resp => {
                if (this.moreMessageId == messageId) {
                    this.allCommentList = resp.data;
                }
                if (resp.data.length > 10) {
                    this.postCommentList[messageIndex].comments.list = resp.data.slice(0, 10);
                    this.postCommentList[messageIndex].comments.total = resp.data.length;
                } else {
                    this.postCommentList[messageIndex].comments.list = resp.data;
                    this.postCommentList[messageIndex].comments.total = resp.data.length;
                }
            }).catch(error => {
                this.$message.error('更新回复失败！');
                this.console.error(error);
            });
        },
        computedCommentName(elem) {
            if (elem.replyUserNickName && elem.replyUserId != elem.userId) {
                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('删除留言失败！');
                    this.console.error(error);
                });
            } else {
                deleteMessageBySelf(messageId).then(resp => {
                    // this.$message.success('删除留言成功！');
                    this.handleCurrentChange();
                }).catch(error => {
                    this.$message.error('删除留言失败！');
                    this.console.error(error);
                });
            }
        },
        deleteComment(messageId, messageIndex, commentId) {
            if (this.superAdmin) {
                deleteCommentByAdmin(commentId).then(resp => {
                    this.getCommentList(messageId, messageIndex);
                }).catch(error => {
                    this.$message.error('删除回复失败！');
                    this.console.error(error);
                });
            } else {
                deleteCommentBySelf(commentId).then(resp => {
                    this.getCommentList(messageId, messageIndex);
                }).catch(error => {
                    this.$message.error('删除回复失败！');
                    this.console.error(error);
                });
            }
        },
        viewMoreComment(data) {
            queryMessageCommentList(data.id).then(resp => {
                this.allCommentList = resp.data;
                this.moreMessageId = data.id;
            }).catch(error => {
                this.console.error(error);
            });
        }
    }
};
</script>

<style scoped>
	.dialog-footer{
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
	.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;
	}
	/deep/.el-dialog.is-fullscreen{
		background-image:url('../../../../assets/bg_board.jpg');
	}
	/deep/.ql-container{
		height: 80%;
	}
</style>