mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 02:46:44 +08:00
1017 lines
38 KiB
Vue
1017 lines
38 KiB
Vue
<template>
|
||
<!--评论组件-->
|
||
<div class="comments">
|
||
<!-- <div v-if="showTop" class="comments-top">
|
||
<div class="comments-top-left">评论 <span style="color: #797979;">{{total}}条</span>
|
||
<el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
|
||
<el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
|
||
<span v-if="objType ==3" class="anzhu"> @案主可以给他发私信哦</span>
|
||
</div>
|
||
</div> -->
|
||
<div v-if="showTop" class="comments-top">
|
||
<div class="comments-top-left portal-title-tow" style="font-size: 18px;"> <span v-if="objType ==3">案例评论</span> <span v-if="objType ==2">文章评论</span>
|
||
<el-checkbox v-if="objType ==2" class="btn" v-model="value" type="primary">只看作者</el-checkbox>
|
||
<el-checkbox v-if="objType ==3" class="btn" v-model="value" type="primary">{{'只看案主'}}</el-checkbox>
|
||
<span v-if="objType ==3" class="anzhu">@案主可以给他发私信哦</span>
|
||
</div>
|
||
</div>
|
||
<div class="comments-input" v-if="!readonly">
|
||
<div class="grid-content bg-purple">
|
||
<div style="position: relative !important" class="at-min">
|
||
<el-popover placement="top-start" width="160" v-model="visible">
|
||
<p style="margin-bottom: 10px">请选择要@的老师</p>
|
||
|
||
<div>
|
||
<el-radio-group v-model="toUserId" @change="confirmTeacher()">
|
||
<el-radio-button
|
||
class="reference-tag"
|
||
v-for="item in toUsers"
|
||
:key="item.aid"
|
||
:label="item.aid">{{ item.name }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<el-tag ref="tag" slot="reference" class="tag-block"></el-tag>
|
||
</el-popover>
|
||
</div>
|
||
<div style="width:100%;display:flex;">
|
||
<div style="flex: 1;">
|
||
<el-input
|
||
style="line-height:45px"
|
||
v-if="objType !==3"
|
||
:autosize="{ minRows: 2, maxRows: 2 }"
|
||
type="textarea"
|
||
class="hideControl"
|
||
show-word-limit
|
||
v-model="inputValue"
|
||
maxlength="800"
|
||
placeholder="写评论～"
|
||
></el-input>
|
||
<el-input
|
||
v-if="objType ==3"
|
||
:autosize="{ minRows: 2, maxRows: 2 }"
|
||
type="textarea"
|
||
class="hideControl"
|
||
show-word-limit
|
||
v-model="inputValue"
|
||
maxlength="800"
|
||
placeholder="写下您的评论～"
|
||
></el-input>
|
||
|
||
|
||
</div>
|
||
<div style="width: 90px;display: flex;justify-content: flex-end;">
|
||
<el-button class="publish-button" @click="submit()" style="height: 30px;" type="primary">发布</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--列表内容-->
|
||
<div class="comments-items" v-show="listShow">
|
||
<!--一个评论-->
|
||
<div class="zan-wu" v-if="list.length == 0">暂无评论～</div>
|
||
<div class="comment" v-for="(com,comIdx) in list" :key="com.id">
|
||
<div class="comment-top">
|
||
<div class="comment-author">
|
||
<authorInfo :aid="com.sysCreateAid" :avatar="com.avatar" :name="com.sysCreateBy" :sex="com.sex" :info="com.orgInfo" :sign="com.sign"></authorInfo>
|
||
<!-- <span class="signtext">{{ com.sign }}</span> -->
|
||
</div>
|
||
</div>
|
||
<div class="comment-body" >
|
||
<div class="comment-info" @mouseover="showButtons(com.id)" @mouseout="hideButtons()">
|
||
<div class="comment-content" @click="cancelReply()">
|
||
<span class="portal-summary-text" style="color: #333333;text-indent:0px;" v-html="displayAll(com)"></span>
|
||
<span v-if="com.content.length>170" @click="changeIsAll(com)">
|
||
{{com.isAll?'收起':'全文'}}
|
||
</span>
|
||
</div>
|
||
<div class="comment-time portal-time">
|
||
<showTime :time="com.sysCreateTime"></showTime>
|
||
<interactBar :type="praisesType" :pageType="objType" :pageParams="objId" :shares="false" :data="com" @addAnswers="showReply(com)" :favorites="false" :views="false" :comments="false" :answers="true"></interactBar>
|
||
</div>
|
||
<div class="comment-btns">
|
||
|
||
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
|
||
<div style="display: flex" v-show="btnsShowRowId==com.id">
|
||
|
||
<a style="display: flex;align-items: center;" @click="showReply(com)">
|
||
<!-- <svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon> -->
|
||
<div class="is_comment"></div>
|
||
<span>回复</span>
|
||
</a>
|
||
<!--必须当前登录人是一个人-->
|
||
<a style="display: flex;align-items: center;" v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)">
|
||
<!-- <svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon> -->
|
||
<div class="is_remove"></div>
|
||
<span>删除</span>
|
||
</a>
|
||
<a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a>
|
||
</div>
|
||
</div>
|
||
<div v-if="replyInfo.parentId==com.id" class="comment-reply" style="padding-bottom: 5px;">
|
||
<div style="width:100%;display:flex;">
|
||
<div style="flex: 1;">
|
||
<el-input class="hideControl" type="textarea" show-word-limit v-model="replyInfo.content" maxlength="800" placeholder="回复内容..."></el-input>
|
||
</div>
|
||
<div style="width: 120px;display: flex;justify-content: flex-end;">
|
||
<el-button @click="submitReply(com)" type="primary">发布回复</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--回复内容-->
|
||
<div v-if="com.replyList && com.replyList.length>0">
|
||
<div v-for="(reply,replyIdx) in com.replyList" :key="reply.id" v-if="replyIdx<com.showNum">
|
||
<div class="comment" :class="replyIdx===com.replyList.length-1 ? 'comment-last' : ''">
|
||
<div class="comment-top">
|
||
<div class="comment-author">
|
||
<authorInfo :aid="reply.sysCreateAid" :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo" :sign="reply.sign"></authorInfo>
|
||
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">
|
||
<!-- <svg-icon style="font-size: 10px;margin-right: 0;" icon-class="triangle"></svg-icon> -->
|
||
<span>回复了</span>
|
||
</span>
|
||
<span style="margin-left: 6px;font-size:14px;" class="portal-title-tow" >{{reply.replyName || reply.toAname}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
|
||
<div class="comment-info" >
|
||
<div class="comment-content" @click="cancelReply()">
|
||
<span class="portal-summary-text" style="color: #666666;" v-html="displayAll(reply)"></span>
|
||
<span v-if="reply.content.length>170" @click="changeIsAll(reply)">
|
||
{{reply.isAll?'收起':'全文'}}
|
||
</span>
|
||
</div>
|
||
<div class="comment-time portal-time">
|
||
<showTime :time="reply.sysCreateTime"></showTime>
|
||
<interactBar :type="praisesType" :pageType="objType" :pageParams="objId" :shares="false" :data="reply" @addAnswers="showReply(reply)" :favorites="false" :views="false" :comments="false" :answers="true"></interactBar>
|
||
</div>
|
||
<div class="comment-btns">
|
||
<!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
|
||
<div v-show="btnsShowRowId==reply.id">
|
||
<a @click="showReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
|
||
<a v-if="userInfo.aid==reply.sysCreateAid" @click="delReply(com,reply,replyIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--发布回复-->
|
||
<div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
|
||
<div style="width:100%;display:flex;">
|
||
<div style="flex: 1;">
|
||
<el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content" maxlength="100" placeholder="回复内容..."></el-input>
|
||
</div>
|
||
<div style="width: 120px;display: flex;justify-content: flex-end;">
|
||
<el-button @click="submitReply(com)" type="primary">发布回复</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="com.replyList.length>com.showNum" style="padding-left: 45px;padding-bottom: 10px;" @click="loadReplyMore(com)"><span style="color: #9e9e9e;cursor: pointer; border-radius: 5px;border:1px solid #cccccc;padding: 5px 10px;font-size: 14px;">加载更多>></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pagination-div">
|
||
<!-- v-if="moreState == 1 -->
|
||
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
|
||
<span class="pag-text-msg" style="font-size:14px;color: #444444;" v-else-if="list.length !== 0 && moreState == 3">没有更多数据了</span>
|
||
</div>
|
||
<el-dialog title="全部回复内容" width="60%" :visible.sync="replyDiaglog.show" :close-on-click-modal="false" custom-class="g-dialog">
|
||
<div style="padding: 10px;max-height: 500px;overflow-y: auto;">
|
||
<div class="comment" v-for="(reply,rIdx) in replyDiaglog.list" :key="rIdx">
|
||
<div class="comment-top">
|
||
<div class="comment-author">
|
||
<authorInfo :aid="reply.sysCreateAid" :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo"></authorInfo>
|
||
<span style="margin-left: 10px;color: #8590A6;font-size:14px; ">回复</span>
|
||
<span style="margin-left: 10px; font-size:14px">{{reply.replyName || reply.toAname}}</span>
|
||
</div>
|
||
<div class="comment-time">
|
||
<showTime :time="reply.sysCreateTime"></showTime>
|
||
</div>
|
||
</div>
|
||
<div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
|
||
<div class="comment-info">
|
||
<div class="comment-content">{{reply.content}}</div>
|
||
<div class="comment-btns"><!--操作还没有加-->
|
||
<div v-show="btnsShowRowId==reply.id">
|
||
<a @click="showDlgReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
|
||
<a v-if="userInfo.aid==reply.sysCreateAid" @click="delDlgReply(reply,rIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--发布回复-->
|
||
<div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
|
||
<div style="width:100%;display:flex;">
|
||
<div style="flex: 1;">
|
||
<el-input show-word-limit class="hideControl" type="textarea" v-model="replyInfo.content" maxlength="100" placeholder="回复内容..."></el-input>
|
||
</div>
|
||
<div style="width: 120px;display: flex;justify-content: flex-end;">
|
||
<el-button @click="submitDlgReply(com)" type="primary">发布回复</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding: 20px 10px;text-align: center;">
|
||
<div v-if="replyDiaglog.pages>replyDiaglog.pageIndex">
|
||
<span class="pag-text" @click="loadMoreReply()">加载更多</span>
|
||
</div>
|
||
<div v-else >
|
||
<span class="pag-text-msg">没有更多数据了</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="replyDiaglog.show= false"> 关 闭 </el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- <el-dialog title="选择@的人" :visible.sync="toUserDig.show" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
|
||
<div style="height: 200px;padding-right: 30px;">
|
||
<el-form label-width="100px" @submit.native.prevent >
|
||
<el-form-item label="姓名">
|
||
<el-input v-model="toUserDig.name" maxlength="10" placeholder="根据姓名查找" @keyup.enter.native="findUserKeyupEnter">
|
||
<el-button @click="findUser" slot="append" icon="el-icon-search"></el-button>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="padding: 0px 20px;">
|
||
<a style="margin: 5px;cursor: pointer;">
|
||
<el-tag v-for="(u,uidx) in toUserDig.list" :key="uidx" :label="u.aid" @click="confirmUser(u)">{{u.name+'('+u.orgInfo+')'}}</el-tag>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="toUserDig.show= false">取 消</el-button>
|
||
</span>
|
||
</el-dialog> -->
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import showTime from '@/components/Portal/datetimeShow.vue'
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import apiComment from '@/api/modules/comments.js'
|
||
import apiUser from '@/api/system/user.js'
|
||
import authorInfo from '@/components/Portal/commentAuthor.vue';
|
||
// import author from '@/components/Portal/author.vue';
|
||
import { mapGetters } from 'vuex';
|
||
export default {
|
||
props:{
|
||
showTop:{
|
||
type:Boolean,
|
||
default:true
|
||
},
|
||
authorId:{
|
||
type:String,
|
||
},
|
||
objId:{
|
||
type:String,
|
||
required:true
|
||
},
|
||
objType:{
|
||
type:Number,
|
||
required:true
|
||
},
|
||
objTitle:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
toUsers:{
|
||
type:Array,
|
||
},
|
||
|
||
readonly:{
|
||
type:Boolean,
|
||
default:false
|
||
}
|
||
},
|
||
components:{showTime,authorInfo,interactBar},
|
||
computed: {
|
||
...mapGetters(['userInfo'])
|
||
},
|
||
data() {
|
||
return {
|
||
praisesType:0,//用于设定评论里点赞的type 课程评论点赞为10，文章的为20，案例的为30
|
||
radio:1,
|
||
value:false,
|
||
sex:null,
|
||
author:'',
|
||
moreState:1,
|
||
isAuthor: false,
|
||
authorList:[],//当前页面存储的用户信息，如果已经存在就不再重新请求了
|
||
toUserId: '',
|
||
loadStatus:'more',//more,loading,noMore
|
||
pageSize:10,
|
||
pageIndex:1,
|
||
total:0,
|
||
listShow:true,
|
||
inputValue:'',
|
||
list:[],
|
||
replyParent:{},
|
||
replyShow:false,
|
||
btnsShowRowId:'',
|
||
replyInfo:{
|
||
clevel:2,
|
||
parentId:'',
|
||
replyAid:'',
|
||
commentId:'',
|
||
replyName:'',
|
||
objType:'',
|
||
objId:'',
|
||
content:''
|
||
},
|
||
replyDiaglog:{
|
||
show:false,
|
||
pageIndex:1,
|
||
pageSize:8,
|
||
pages:1,
|
||
count:0,
|
||
commentId:'',
|
||
list:[]
|
||
},
|
||
toUserDig:{
|
||
show:false,
|
||
name:'',
|
||
chooseUserId:'',
|
||
chooseUserName:'',
|
||
list:[]
|
||
},
|
||
visible:false,
|
||
}
|
||
},
|
||
watch:{
|
||
value(newVal,oldVal){
|
||
if(newVal){
|
||
this.author = this.authorId;
|
||
} else {
|
||
this.author = '';
|
||
}
|
||
this.loadData();
|
||
},
|
||
radio(newVal){
|
||
if(newVal == 2){
|
||
this.author = this.authorId;
|
||
} else {
|
||
this.author = '';
|
||
}
|
||
this.loadData();
|
||
},
|
||
inputValue(val,oldVal) {
|
||
let fu = val.substr(-1);
|
||
if(fu == '@'&&!oldVal) {
|
||
this.toUserId = '';
|
||
if(this.toUsers.length == 1 && this.toUsers.length !== 0) {
|
||
this.toUserDig.chooseUserId = this.toUsers[0].aid;
|
||
this.toUserDig.chooseUserName=this.toUsers[0].name;
|
||
this.inputValue+=this.toUsers[0].name;
|
||
}else {
|
||
this.$refs.tag.$el.click();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.author = this.authorId;
|
||
this.loadData(false);
|
||
if(this.objType == 1) {
|
||
this.praisesType = 10;
|
||
}
|
||
if(this.objType == 2) {
|
||
this.praisesType = 20;
|
||
}
|
||
if(this.objType == 3) {
|
||
this.praisesType = 30;
|
||
}
|
||
//在中文输入法状态下输入光标不在文字最后，同时会被遮挡两个文字大小的长度
|
||
// let vm=document.querySelector('.hideControl input')
|
||
// vm.addEventListener('compositionstart',(e)=>{
|
||
// vm.style.padding='0 63px 0 0'
|
||
// vm.size=100
|
||
//以上两种方式都未解决
|
||
// })
|
||
},
|
||
methods: {
|
||
loadReplyMore(item){
|
||
item.showNum=item.showNum+3;
|
||
//item.showAll=true;
|
||
},
|
||
loadMore() {
|
||
this.pageIndex +=1;
|
||
this.loadData(true);
|
||
},
|
||
// lookYourself() {// 只看作者
|
||
// this.pageIndex =1;
|
||
// this.isAuthor = !this.isAuthor;
|
||
// if(this.isAuthor){
|
||
// this.author = this.authorId;
|
||
// } else{
|
||
// this.author = '';
|
||
// }
|
||
// this.loadData();
|
||
// },
|
||
loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
|
||
// console.log(list,ids)
|
||
if(ids.length==0){
|
||
return;
|
||
}
|
||
const noReapetIds=[...new Set(ids)]
|
||
apiUser.getByIds(ids).then(res=>{
|
||
if(res.status==200){
|
||
list.forEach((item,index)=>{
|
||
res.result.some(author=>{
|
||
if(author.aid==item.sysCreateAid){
|
||
item.avatar=author.avatar;
|
||
item.orgInfo=author.orgInfo;
|
||
item.sex=author.sex;
|
||
item.sign=author.sign
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
})
|
||
});
|
||
}else{
|
||
console.log('加载用户头像信息:'+res.error);
|
||
//this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
// cancelTeacher() {
|
||
// this.inputValue = this.inputValue.substr(0, this.inputValue.length -1);
|
||
// this.visible = false;
|
||
// },
|
||
confirmTeacher() {
|
||
this.toUserDig.chooseUserId = this.toUserId;
|
||
this.toUsers.forEach(item=>{
|
||
if(item.aid == this.toUserId) {
|
||
this.toUserDig.chooseUserName=item.name;
|
||
this.inputValue+=item.name;
|
||
}
|
||
})
|
||
this.visible = false;
|
||
},
|
||
loadData(append){
|
||
let params={
|
||
pageIndex:this.pageIndex,
|
||
pageSize:this.pageSize,
|
||
type:this.objType,
|
||
id:this.objId,
|
||
author: this.author,
|
||
}
|
||
let $this=this;
|
||
apiComment.pageQuery(params).then(res=>{
|
||
if(res.status==200){
|
||
let ids=[];
|
||
let allList=[];
|
||
res.result.list.forEach(item=>{
|
||
item.showNum=3;
|
||
item.answers=item.replys;
|
||
item.showAll=false;
|
||
item.avatar='';
|
||
item.orgInfo='';
|
||
item.sign='';
|
||
item.isAll=false;
|
||
//item.sex=null;
|
||
allList.push(item);
|
||
ids.push(item.sysCreateAid);
|
||
if(item.replyList && item.replyList!=''){
|
||
item.replyList.forEach(reply=>{
|
||
reply.answers=reply.replys;
|
||
reply.avatar='';
|
||
reply.orgInfo='';
|
||
reply.sex=null;
|
||
reply.sign='';
|
||
reply.isAll=false;
|
||
allList.push(reply);
|
||
ids.push(reply.sysCreateAid);
|
||
})
|
||
}
|
||
});
|
||
this.loadAuthorInfo(allList,ids);
|
||
this.total=res.result.count;
|
||
if(append){
|
||
res.result.list.forEach(item=>{
|
||
$this.list.push(item);
|
||
});
|
||
}else{
|
||
$this.list=res.result.list;
|
||
}
|
||
if($this.list.length == this.total) {
|
||
this.moreState = 3;
|
||
}
|
||
this.$emit('writeTotal',this.total);
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
showList(flag){
|
||
this.listShow=flag;
|
||
},
|
||
submit(){
|
||
if(this.inputValue.trim()!=''){
|
||
let cdata={
|
||
objType:this.objType,
|
||
objId:this.objId,
|
||
parentId:'-1',
|
||
content:this.inputValue.trim(),
|
||
clevel:1,
|
||
toAid:'',
|
||
toAname:'',
|
||
}
|
||
if(this.toUserDig.chooseUserId!=='' && this.toUserDig.chooseUserName!=''){
|
||
cdata.toAid=this.toUserDig.chooseUserId;
|
||
cdata.toAname=this.toUserDig.chooseUserName;
|
||
|
||
}
|
||
|
||
apiComment.add(cdata).then(res=>{
|
||
if(res.status==200){
|
||
// this.list.unshift(res.result);
|
||
// this.sex =
|
||
res.result.sex=null;
|
||
res.result.isAll=false;
|
||
this.list.unshift(res.result);
|
||
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
|
||
this.$message.success('发布成功');
|
||
|
||
let event = {
|
||
key: "PublishComment",//后台的事件key 发布文章且审核通过
|
||
title: "发表评论",//事件的标题
|
||
parameters:"",//用户自定义参数 name:value,name:value
|
||
content: "每发表一个评论",//事件的内容
|
||
objId: res.result.id,//关联的id
|
||
objType: '80',//关联的类型，这里关联的类型应该是评论，不是课程
|
||
objInfo: "评论",
|
||
aid: this.userInfo.aid, //当前登录人的id
|
||
aname: this.userInfo.name,//当前人的姓名
|
||
status: 1 //状态，直接写1
|
||
}
|
||
this.$store.dispatch("userTrigger", event);
|
||
|
||
this.total++;
|
||
this.$emit('success',res.result);
|
||
this.inputValue='';
|
||
this.toUserDig.chooseUserId='';
|
||
this.toUserDig.chooseUserName='';
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
},
|
||
showButtons(id){
|
||
if(!this.readonly){
|
||
this.btnsShowRowId=id;
|
||
}
|
||
},
|
||
hideButtons(){
|
||
this.btnsShowRowId='';
|
||
},
|
||
//展示全部
|
||
displayAll(item) {
|
||
let content = '';
|
||
content = item.content.replace(/(\n){2,}/,'<br>');
|
||
item.content = content;
|
||
if(!item.isAll && item.content && item.content.length > 170) {
|
||
return item.content.slice(0, 170) + "...";
|
||
}
|
||
return item.content;
|
||
},
|
||
changeIsAll(item) {
|
||
item.isAll=!item.isAll;
|
||
},
|
||
showReply(item){
|
||
this.replyInfo.objType=this.objType;
|
||
this.replyInfo.objId=this.objId;
|
||
this.replyInfo.parentId=item.id;
|
||
this.replyInfo.replyAid=item.sysCreateAid;
|
||
this.replyInfo.replyName=item.sysCreateBy;
|
||
this.replyShow=true;
|
||
},
|
||
cancelReply(){
|
||
this.replyInfo.parentId='';
|
||
},
|
||
submitReply(comment){
|
||
this.replyInfo.content = this.replyInfo.content.trim();
|
||
if(this.replyInfo.content==''){
|
||
return;
|
||
}
|
||
this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
|
||
if(this.replyInfo.content==''){
|
||
return;
|
||
}
|
||
this.replyInfo.commentId=comment.id;
|
||
if(comment.replyList==''){
|
||
comment.replyList=[];
|
||
}
|
||
apiComment.reply(this.replyInfo).then(res=>{
|
||
if(res.status==200){
|
||
res.result.sex = null;
|
||
res.result.isAll=false;
|
||
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
|
||
comment.replyList.push(res.result);
|
||
this.replyInfo.parentId='';
|
||
this.replyInfo.content='';
|
||
this.$message.success("发布成功");
|
||
let event = {
|
||
key: "ReplyComment",//后台的事件key 发布文章且审核通过
|
||
title: "回复评论",//事件的标题
|
||
parameters:"",//用户自定义参数 name:value,name:value
|
||
content: "每回一个评论",//事件的内容
|
||
objId: this.replyInfo.commentId,//关联的id
|
||
objType: "81",//关联的类型
|
||
objInfo: "回复评论",
|
||
aid: this.userInfo.aid, //当前登录人的id
|
||
aname: this.userInfo.name,//当前人的姓名
|
||
status: 1 //状态，直接写1
|
||
}
|
||
this.$store.dispatch("userTrigger", event);
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
delCommnet(com,idx){
|
||
if(com.replyList!='' && com.replyList.length>0){
|
||
this.$message.error('有回复的评论不能删除');
|
||
return;
|
||
}
|
||
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
apiComment.del(com.id,this.userInfo.aid).then(res=>{
|
||
if(res.status==200){
|
||
this.list.splice(idx,1);
|
||
this.total--;
|
||
this.$message.success("删除成功");
|
||
this.$emit('delSuccess');
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
},
|
||
delReply(com,re,idx){
|
||
// if(com.replyList!='' && com.replyList.length>0){
|
||
// this.$message.error('有回复的评论不能删除');
|
||
// }
|
||
let params={
|
||
id:re.id,
|
||
user:this.userInfo.aid,
|
||
pid:re.parentId
|
||
}
|
||
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
apiComment.delReply(params).then(res=>{
|
||
if(res.status==200){
|
||
com.replyList.splice(idx,1);
|
||
this.$message.success("删除成功");
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
})
|
||
},
|
||
delDlgReply(re,idx){ //弹出窗口中的删除操作
|
||
let params={
|
||
id:re.id,
|
||
user:this.userInfo.aid,
|
||
pid:re.parentId
|
||
}
|
||
let $this=this;
|
||
this.$confirm('您确定要删除所选评论吗?', '删除提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
apiComment.delReply(params).then(res=>{
|
||
if(res.status==200){
|
||
$this.replyDiaglog.list.splice(idx,1);
|
||
$this.$message.success("删除成功");
|
||
}else{
|
||
$this.$message.error(res.message);
|
||
}
|
||
}).catch(()=>{
|
||
|
||
})
|
||
})
|
||
},
|
||
showDlgReply(item){
|
||
this.replyInfo.objType=this.objType;
|
||
this.replyInfo.objId=this.objId;
|
||
this.replyInfo.parentId=item.id;
|
||
this.replyInfo.replyAid=item.sysCreateAid;
|
||
this.replyInfo.replyName=item.sysCreateBy;
|
||
this.replyShow=true;
|
||
},
|
||
submitDlgReply(){
|
||
this.replyInfo.content = this.replyInfo.content.trim();
|
||
if(this.replyInfo.content==''){
|
||
return;
|
||
}
|
||
this.replyInfo.content=this.replyInfo.content.replace(/^\s*|\s*$/g,"");
|
||
if(this.replyInfo.content==''){
|
||
return;
|
||
}
|
||
this.replyInfo.commentId=this.replyDiaglog.commentId;
|
||
|
||
apiComment.reply(this.replyInfo).then(res=>{
|
||
if(res.status==200){
|
||
res.result.sex = null;
|
||
res.result.isAll=false;
|
||
this.loadAuthorInfo([res.result],[res.result.sysCreateAid]);
|
||
this.replyDiaglog.list.push(res.result);
|
||
this.replyInfo.parentId='';
|
||
this.replyInfo.content='';
|
||
this.$message.success("发布成功");
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
showMoreReply(comment){
|
||
this.replyDiaglog.pages=1;
|
||
this.replyDiaglog.count=0;
|
||
this.replyDiaglog.pageIndex=1;
|
||
this.replyDiaglog.list=[];
|
||
this.replyDiaglog.show=true;
|
||
this.replyDiaglog.commentId=comment.id;
|
||
this.loadAllReplyData(false);
|
||
},
|
||
loadMoreReply(){
|
||
this.replyDiaglog.pageIndex++;
|
||
this.loadAllReplyData(true);
|
||
},
|
||
loadAllReplyData(append){
|
||
let params={
|
||
pageIndex:this.replyDiaglog.pageIndex,
|
||
pageSize:this.replyDiaglog.pageSize,
|
||
type:this.objType,
|
||
commentId:this.replyDiaglog.commentId
|
||
}
|
||
let $this=this;
|
||
apiComment.replyList(params).then(rs=>{
|
||
if(rs.status==200){
|
||
$this.replyDiaglog.count=rs.result.count;
|
||
$this.replyDiaglog.pages=rs.result.totalPages;
|
||
let ids=[];
|
||
if(append){
|
||
rs.result.list.forEach(item=>{
|
||
item.avatar='';
|
||
ids.push(item.sysCreateAid);
|
||
$this.replyDiaglog.list.push(item);
|
||
})
|
||
}else{
|
||
rs.result.list.forEach(item=>{
|
||
item.avatar='';
|
||
ids.push(item.sysCreateAid);
|
||
})
|
||
$this.replyDiaglog.list=rs.result.list;
|
||
}
|
||
this.loadAuthorInfo(rs.result.list,ids);
|
||
}else{
|
||
this.$message.error(rs.message);
|
||
}
|
||
})
|
||
},
|
||
showToUser(){
|
||
this.toUserDig.show=true;
|
||
this.toUserDig.chooseUserId='';
|
||
this.toUserDig.chooseUserName='';
|
||
},
|
||
findUserKeyupEnter(){
|
||
this.findUser();
|
||
},
|
||
findUser(){
|
||
this.toUserDig.list=[];
|
||
var name=this.toUserDig.name;
|
||
if(name==''){
|
||
return;
|
||
}
|
||
apiUser.findByName(name).then(rs=>{
|
||
if(rs.status==200){
|
||
this.toUserDig.list=rs.result;
|
||
}else{
|
||
this.$message.error('查询用户失败');
|
||
}
|
||
})
|
||
|
||
},
|
||
confirmUser(u){
|
||
this.toUserDig.chooseUserId=u.aid;
|
||
this.toUserDig.chooseUserName=u.name;
|
||
this.toUserDig.show=false;
|
||
this.toUserDig.name='';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.signtext{
|
||
|
||
}
|
||
|
||
.publish-button{
|
||
// line-height: 30px;
|
||
padding-top: 7px;
|
||
margin-top: 22px;
|
||
}
|
||
.anzhu{
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
::v-deep .el-input--medium .el-input__inner {
|
||
height: 48px;
|
||
}
|
||
|
||
::v-deep .at-min{
|
||
.el-popper[x-placement^=bottom] {
|
||
// left: 0 !important;
|
||
// bottom: 0 !important;
|
||
margin-left: 30px !important;
|
||
}
|
||
.el-popover{
|
||
|
||
}
|
||
}
|
||
.tag-block{
|
||
top:0;
|
||
left: 0;
|
||
position: absolute;
|
||
background-color: #fff;
|
||
border-color: #fff;
|
||
|
||
height: 1px;
|
||
}
|
||
.pag-text{
|
||
border: 1px solid #292828;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
}
|
||
.reference-tag{
|
||
display: block;
|
||
// width: 100%;
|
||
.el-radio-button__inner{
|
||
border: 1px solid #fff !important;
|
||
}
|
||
|
||
}
|
||
.svg-btn{
|
||
font-size: 30px;
|
||
line-height: 30px;
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
margin-top: 5px;
|
||
}
|
||
.comments{
|
||
margin-top: 20px;
|
||
background-color: #FFFFFF;
|
||
padding: 0px 16px;
|
||
.comment-time{
|
||
display: flex;
|
||
padding-left: 12px;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
color: #666666;
|
||
font-size: 12px;
|
||
}
|
||
.comments-top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding:10px;
|
||
// border-bottom: 1px solid #f4f4f4;
|
||
font-weight: 500;
|
||
font-size: 1.1em;
|
||
.comments-top-left{
|
||
.btn{
|
||
// width: 68px;
|
||
// height: 32px;
|
||
// background: #3C7EFF;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
padding: 10px;
|
||
margin-left: 24px;
|
||
::v-deep .el-radio__inner{
|
||
border-radius: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
.comments-top-center{
|
||
|
||
}
|
||
.comments-top-right{
|
||
color: #6b6b6b;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.comments-input{
|
||
padding: 20px 15px 50px 15px;
|
||
}
|
||
.comments-items{
|
||
padding: 5px 15px;
|
||
.zan-wu{
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: #6666;
|
||
}
|
||
}
|
||
}
|
||
.comment{
|
||
margin-top: 10px;
|
||
background-color: #FFFFFF;
|
||
// border-bottom: 1px solid #dddddd;
|
||
.comment-top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom:10px;
|
||
font-weight: 500;
|
||
line-height: 30px;
|
||
font-size: 1.1em;
|
||
.comment-author{
|
||
display: flex;
|
||
align-items: center;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
.comment-body{
|
||
padding-left: 40px;
|
||
.comment-content{
|
||
padding-bottom: 0px;
|
||
padding-top:5px;
|
||
padding-left: 8px;
|
||
white-space: pre-wrap;
|
||
word-break:break-all;
|
||
letter-spacing:1px;
|
||
span {
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.comment-btns{
|
||
// padding: 5px 10px 10px 0px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
a{
|
||
margin-right:15px;
|
||
&:hover{
|
||
.is_comment{
|
||
background: url('../../assets/images/case/Frame(9).png');
|
||
background-size: 100%;
|
||
}
|
||
.is_remove{
|
||
background: url('../../assets/images/case/Frame(15).png');
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
.is_comment{
|
||
width: 16px;
|
||
height: 16px;
|
||
background: url('../../assets/images/case/Frame.png');
|
||
background-size: 100%;
|
||
}
|
||
.is_remove{
|
||
width: 16px;
|
||
height: 16px;
|
||
background: url('../../assets/images/case/Frame(8).png');
|
||
background-size: 100%;
|
||
}
|
||
span{
|
||
margin-left: 6px;
|
||
color: #8590A6;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.comment-replys{
|
||
padding-left: 40px;
|
||
}
|
||
}
|
||
.comment-last{
|
||
border-bottom: none;
|
||
}
|
||
::v-deep .hideControl{
|
||
.el-input__count{
|
||
}
|
||
.el-textarea__inner{
|
||
padding-right: 60px;
|
||
padding-top: 20px;
|
||
}
|
||
}
|
||
</style>
|