|
|
@@ -0,0 +1,221 @@
|
|
|
+<template>
|
|
|
+ <div class="comment">
|
|
|
+ <div class="comment-header">
|
|
|
+ <span>评论</span>
|
|
|
+ </div>
|
|
|
+ <div class="comment-publish">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ style="font-size: 12px"
|
|
|
+ :rows="8"
|
|
|
+ placeholder="发表评论"
|
|
|
+ v-model="textarea">
|
|
|
+ </el-input>
|
|
|
+ <div style="float: right;margin-top: 10px;">
|
|
|
+ <el-button type="primary" size="small" @click="onComment">发表</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="comment-header">
|
|
|
+ <span>评论记录</span>
|
|
|
+ </div>
|
|
|
+ <div style="overflow: auto;height: calc(100vh - 570px);">
|
|
|
+ <div v-if="commentList.length > 0">
|
|
|
+ <div style="padding: 10px" v-for="item in commentList" :key="item.index">
|
|
|
+ <div class="flex-align-center">
|
|
|
+ <div class="avatar" >
|
|
|
+ <img class="avatar__image" v-if="item.headpic" :src="item.headpic" alt="">
|
|
|
+ <p v-else style="font-size: 14px">{{item.createby.substr(0, 1)}}</p>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 10px;margin-top: -20px">
|
|
|
+ <small v-if="item.replyusername">
|
|
|
+ {{item.createby}}
|
|
|
+ <i class="el-icon-caret-right"></i>
|
|
|
+ {{item.replyusername}}
|
|
|
+ </small>
|
|
|
+ <small v-else>{{item.createby}}</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 40px;font-size: 12px;margin-top: -10px">
|
|
|
+ {{item.content}}
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 40px;margin-top: 10px">
|
|
|
+ <div style="float: right">
|
|
|
+ <el-button style="color: #000000;font-size: 12px;padding: 0 !important;" type="text" icon="el-icon-chat-dot-square" @click="onReply(item)" v-if="!item.isReply">回复</el-button>
|
|
|
+ <el-button style="color: #000000;font-size: 12px;padding: 0 !important;" type="text" icon="el-icon-chat-dot-square" @click="onReply(item)" v-else>取消回复</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 12px;color: #CCCCCC">
|
|
|
+ {{item.createdate}}
|
|
|
+ <el-popconfirm
|
|
|
+ title="确定删除该评论吗？"
|
|
|
+ @confirm="onDel(item)"
|
|
|
+ >
|
|
|
+ <el-button slot="reference" v-if="item.createuserid === userid" style="color: #ccc;font-size: 12px;padding: 0 !important;" type="text">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.isReply">
|
|
|
+ <el-input
|
|
|
+ style="font-size: 12px"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ :placeholder="'回复'+item.createby"
|
|
|
+ v-model="item.retextarea">
|
|
|
+ </el-input>
|
|
|
+ <div style="float: right;margin-top: 10px;">
|
|
|
+ <el-button type="primary" size="small" @click="onReComment(item)">发表</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-empty description="暂无数据" size="mini" v-else></el-empty>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ props:['id'],
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ textarea:"",
|
|
|
+ userid:JSON.parse(sessionStorage.getItem('active_account')).userid,
|
|
|
+ param:{
|
|
|
+ "id": 20240429161501,
|
|
|
+ "content": {
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 99999,
|
|
|
+ "ownertable":"sys_workreport",
|
|
|
+ "ownerid":"15",
|
|
|
+ "where": {
|
|
|
+ "condition": ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ commentList:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async getComments(id){
|
|
|
+ if (!id) return
|
|
|
+ this.param.content.ownerid = id
|
|
|
+ const res = await this.$api.requested(this.param)
|
|
|
+ this.commentList = res.data
|
|
|
+ this.commentList = this.commentList.map(item=>{
|
|
|
+ return {
|
|
|
+ "content":item.content,
|
|
|
+ "createby":item.createby,
|
|
|
+ "createdate":item.createdate,
|
|
|
+ "createuserid":item.createuserid,
|
|
|
+ "headpic":item.headpic,
|
|
|
+ "replyid":item.replyid,
|
|
|
+ "replyuserid":item.replyuserid,
|
|
|
+ "replyusername":item.replyusername,
|
|
|
+ "rowindex":item.rowindex,
|
|
|
+ "sys_datacommentid":item.sys_datacommentid,
|
|
|
+ "isReply":false,
|
|
|
+ "retextarea":"",
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(this.commentList,'33333')
|
|
|
+ },
|
|
|
+ async onComment(){
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": 20240429161601,
|
|
|
+ "content": {
|
|
|
+ "ownertable":"sys_workreport",//数据表
|
|
|
+ "ownerid":this.param.content.ownerid,//数据id
|
|
|
+ "content":this.textarea,//内容
|
|
|
+ "replyid":"0"//被回复评论id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.tool.showMessage(res,()=>{
|
|
|
+ this.textarea = ''
|
|
|
+ this.getComments(this.param.content.ownerid)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async onReComment(data){
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": 20240429161601,
|
|
|
+ "content": {
|
|
|
+ "ownertable":"sys_workreport",//数据表
|
|
|
+ "ownerid":this.param.content.ownerid,//数据id
|
|
|
+ "content":data.retextarea,//内容
|
|
|
+ "replyid":data.sys_datacommentid//被回复评论id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.tool.showMessage(res,()=>{
|
|
|
+ console.log('回复结果111')
|
|
|
+ this.retextarea = false
|
|
|
+ this.getComments(this.param.content.ownerid)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onReply(item){
|
|
|
+ this.commentList.forEach(data=>{
|
|
|
+ if (data.sys_datacommentid == item.sys_datacommentid){
|
|
|
+ data.isReply = data.isReply?false:true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async onDel(item){
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": 20240429161701,
|
|
|
+ "content": {
|
|
|
+ "sys_datacommentid":item.sys_datacommentid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.tool.showMessage(res,()=>{
|
|
|
+ this.getComments(this.param.content.ownerid)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getComments(this.id)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.comment {
|
|
|
+ border-left: 1px solid #cccccc;
|
|
|
+ height: calc(100vh - 250px);
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+.comment .comment-header{
|
|
|
+ border-bottom: 1px solid #cccccc;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 10px 10px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.comment .comment-publish{
|
|
|
+ border-bottom: 1px solid #cccccc;
|
|
|
+ height: 200px;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.avatar__image{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.avatar:hover .avatar__model{
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.avatar{
|
|
|
+ position: relative;
|
|
|
+ height:30px;
|
|
|
+ width: 30px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ border-radius: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ color:#fff;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #3874F6;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+/deep/ .el-textarea__inner{
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+</style>
|
qymljy
