|
@@ -5,35 +5,44 @@
|
5
|
5
|
</div>
|
6
|
6
|
<div class="app-container">
|
7
|
7
|
<div class="pl">
|
8
|
|
- <el-checkbox><span class="comment">全部评论</span></el-checkbox>
|
|
8
|
+ <el-checkbox @change="selectAllFunc" v-model="selectAll"><span class="comment" >全部评论</span></el-checkbox>
|
|
9
|
+ <el-button size="small" icon="el-icon-delete" @click="openDeleteReply">批量删除</el-button>
|
9
|
10
|
</div>
|
10
|
11
|
<div class="border2"></div>
|
11
|
|
- <div v-for="item in comments" :key="item.id">
|
12
|
|
- <div class="check"><el-checkbox></el-checkbox></div>
|
13
|
|
- <div class="img">
|
|
12
|
+
|
|
13
|
+ <div v-for="(item,index) in comments" :key="item.id">
|
|
14
|
+ <div class="check"><el-checkbox v-model='item.checked' @change="selectProduct"></el-checkbox></div>
|
|
15
|
+ <div class="img">
|
14
|
16
|
<img :src="item.comment_user_avater" style="width:50px;height:50px">
|
15
|
|
- </div>
|
16
|
|
- <div>
|
17
|
|
- <div class="commentname">{{item.comment_user_name}}<span class="time">{{item.ctime}}</span></div>
|
|
17
|
+ </div>
|
|
18
|
+ <div>
|
|
19
|
+ <div class="commentname">{{item.comment_user_name}}
|
|
20
|
+ <span class="time">{{format(item.ctime)}}</span>
|
|
21
|
+ </div>
|
18
|
22
|
<div class="reply">
|
19
|
|
- | <span @click="replay()">回复</span>
|
20
|
|
- | 展开
|
21
|
|
- | 删除
|
|
23
|
+ | <span @click="replay(item.id)">回复</span>
|
|
24
|
+ | <span @click="spreadReplay(item.article_id,item.id)" id="span">展开</span>
|
|
25
|
+ | <span @click="deleteReply(item.id,index)">删除</span>
|
22
|
26
|
</div>
|
23
|
27
|
<div class="content">
|
24
|
28
|
{{item.content}}
|
25
|
29
|
</div>
|
26
|
|
- <div class="reply_box" v-if="show">
|
27
|
|
- <textarea name="" id="" cols="163" rows="5" class="reply " placeholder="回复:"></textarea>
|
|
30
|
+
|
|
31
|
+ <div class="reply_box" v-show="showindex===item.id">
|
|
32
|
+ <textarea name="" id="" cols="162" rows="5" class="reply " placeholder="回复:" v-model="form.content"></textarea>
|
28
|
33
|
<div class="clearfix"></div>
|
29
|
34
|
<div class="button" style="display: block;" myAttr="123">
|
30
|
35
|
<el-button @click="cancel()">取消</el-button>
|
31
|
|
- <el-button type="primary" @click="send()">发送</el-button>
|
32
|
|
- </div>
|
|
36
|
+ <el-button type="primary" @click="sendInformation(item.article_id,item.id)">发送</el-button>
|
|
37
|
+ </div>
|
33
|
38
|
</div>
|
34
|
|
- <div class="reviewed" v-if="shows">
|
35
|
|
- 你 回复了 :
|
36
|
|
- </div>
|
|
39
|
+
|
|
40
|
+ <div>
|
|
41
|
+ <div class="reviewed" v-for="(items,index) in Replycomments" :key="items.id" v-show="showReply==item.id">
|
|
42
|
+ <div> 你 回复了{{items.comment_user_name}}:{{items.content}} </div>
|
|
43
|
+ <div id="tub" class="el-icon-error" @click="clearRelyInfo(items.id,index)"></div>
|
|
44
|
+ </div>
|
|
45
|
+ </div>
|
37
|
46
|
<div class="border"></div>
|
38
|
47
|
</div>
|
39
|
48
|
</div>
|
|
@@ -53,8 +62,10 @@
|
53
|
62
|
|
54
|
63
|
<script>
|
55
|
64
|
import BreadCrumb from '../components/bread-crumb'
|
56
|
|
- import {getReplyAllComents} from '@/api/act/submitinfo'
|
|
65
|
+ import {getReplyAllComents,sendInformation,spreadReplay,clearRelyInfo,deleteReply,openDeleteReply} from '@/api/act/submitinfo'
|
|
66
|
+ import {getFileExtension,uParseTime} from '@/utils/tools'
|
57
|
67
|
import { constants } from 'crypto';
|
|
68
|
+import { copyFile } from 'fs';
|
58
|
69
|
export default {
|
59
|
70
|
name: 'commentList',
|
60
|
71
|
components:{
|
|
@@ -76,18 +87,21 @@ import { constants } from 'crypto';
|
76
|
87
|
comment_user_avater:'',
|
77
|
88
|
},
|
78
|
89
|
comments:[],
|
|
90
|
+ Replycomments:[],
|
79
|
91
|
total:0,
|
|
92
|
+ showindex:-1,
|
|
93
|
+ showReply:-1,
|
|
94
|
+ checked: false,
|
|
95
|
+ selectAll:false,
|
|
96
|
+ selectReply:[],
|
80
|
97
|
}
|
81
|
98
|
},
|
82
|
99
|
methods:{
|
83
|
|
- replay(){
|
84
|
|
- this.show = true;
|
|
100
|
+ replay(id){
|
|
101
|
+ this.showindex = id;
|
85
|
102
|
},
|
86
|
103
|
cancel(){
|
87
|
|
- this.show = false;
|
88
|
|
- },
|
89
|
|
- send(){
|
90
|
|
- this.shows = true;
|
|
104
|
+ this.showindex = 0;
|
91
|
105
|
},
|
92
|
106
|
handleSizeChange(limit){
|
93
|
107
|
this.form.limit = limit;
|
|
@@ -108,6 +122,123 @@ import { constants } from 'crypto';
|
108
|
122
|
console.log("总条数",total)
|
109
|
123
|
}
|
110
|
124
|
});
|
|
125
|
+ },
|
|
126
|
+ format(time){
|
|
127
|
+ return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
|
|
128
|
+ },
|
|
129
|
+ sendInformation(artilcid,parentid){
|
|
130
|
+ console.log("文章id",artilcid,parentid);
|
|
131
|
+ sendInformation(artilcid,parentid,this.form.content).then(response=>{
|
|
132
|
+ if(response.data.state ==1){
|
|
133
|
+ var comment = response.data.data.comment;
|
|
134
|
+ this.$message.success("发送成功");
|
|
135
|
+ console.log("comment",comment)
|
|
136
|
+ }
|
|
137
|
+ })
|
|
138
|
+ },
|
|
139
|
+ spreadReplay(artilcid,parentid){
|
|
140
|
+ // document.getElementById("span").innerHTML="收起";
|
|
141
|
+ var spancontent = document.getElementById("span").innerHTML;
|
|
142
|
+ if(spancontent == "展开"){
|
|
143
|
+ document.getElementById("span").innerHTML="收起";
|
|
144
|
+ this.showReply = parentid;
|
|
145
|
+ }
|
|
146
|
+ if(spancontent == "收起"){
|
|
147
|
+ document.getElementById("span").innerHTML = "展开";
|
|
148
|
+ this.showReply = 0;
|
|
149
|
+ }
|
|
150
|
+ console.log("文章id",artilcid,parentid);
|
|
151
|
+ spreadReplay(artilcid,parentid).then(response=>{
|
|
152
|
+ if(response.data.state == 1){
|
|
153
|
+ var Replycomments = response.data.data.comments;
|
|
154
|
+ this.Replycomments = response.data.data.comments;
|
|
155
|
+ console.log("回复列表",Replycomments);
|
|
156
|
+ }
|
|
157
|
+ })
|
|
158
|
+ },
|
|
159
|
+ clearRelyInfo(id,index){
|
|
160
|
+ console.log("id为",id);
|
|
161
|
+ this.$confirm("确定删除此评论?",'删除提示',{
|
|
162
|
+ dangerouslyUseHTMLString:true,
|
|
163
|
+ confirmButtonText: '确定',
|
|
164
|
+ cancelButtonText: '取消',
|
|
165
|
+ type: 'warning'
|
|
166
|
+ }).then(()=>{
|
|
167
|
+ clearRelyInfo(id).then(response=>{
|
|
168
|
+ if(response.data.state ==1){
|
|
169
|
+ this.Replycomments.splice(index,1)
|
|
170
|
+ this.$message.success("删除成功");
|
|
171
|
+ }else{
|
|
172
|
+ this.$message.error("删除失败");
|
|
173
|
+ }
|
|
174
|
+ }).catch(e=>{});
|
|
175
|
+ }).catch(() => {
|
|
176
|
+ return false
|
|
177
|
+ });
|
|
178
|
+ },
|
|
179
|
+ selectProduct(val){
|
|
180
|
+ for(let i=0,len=this.comments.length;i<len;i++){
|
|
181
|
+ if(!this.comments[i].checked){
|
|
182
|
+ this.selectAll = false;
|
|
183
|
+ }else{
|
|
184
|
+ this.selectAll = true;
|
|
185
|
+ }
|
|
186
|
+ }
|
|
187
|
+ this.selectReply = val;
|
|
188
|
+ },
|
|
189
|
+ selectAllFunc(val){
|
|
190
|
+ this.comments.map((item,i)=>{
|
|
191
|
+ item.checked = val;
|
|
192
|
+ })
|
|
193
|
+ },
|
|
194
|
+ deleteReply(id,index){
|
|
195
|
+ this.$confirm("确定删除此评论?",'删除提示',{
|
|
196
|
+ dangerouslyUseHTMLString:true,
|
|
197
|
+ confirmButtonText: '确定',
|
|
198
|
+ cancelButtonText: '取消',
|
|
199
|
+ type: 'warning'
|
|
200
|
+ }).then(()=>{
|
|
201
|
+ deleteReply(id).then(response=>{
|
|
202
|
+ if(response.data.state ==1 ){
|
|
203
|
+ this.comments.splice(index,1)
|
|
204
|
+ this.$message.success("删除成功");
|
|
205
|
+ }else{
|
|
206
|
+ this.$message.error("删除失败");
|
|
207
|
+ }
|
|
208
|
+ }).catch(e=>{});
|
|
209
|
+ }).catch(() => {
|
|
210
|
+ return false
|
|
211
|
+ });
|
|
212
|
+ },
|
|
213
|
+ openDeleteReply(){
|
|
214
|
+ if(this.selectReply.length == 0){
|
|
215
|
+ this.$message.error("请选择你要删除的信息");
|
|
216
|
+ return false;
|
|
217
|
+ }
|
|
218
|
+ this.$confirm("确定删除此评论?",'删除提示',{
|
|
219
|
+ dangerouslyUseHTMLString:true,
|
|
220
|
+ confirmButtonText: '确定',
|
|
221
|
+ cancelButtonText: '取消',
|
|
222
|
+ type: 'warning'
|
|
223
|
+ }).then(()=>{
|
|
224
|
+ var ids = [];
|
|
225
|
+ var idMap = {};
|
|
226
|
+ for (const index in this.selectReply) {
|
|
227
|
+ ids.push(this.selectReply[index].id);
|
|
228
|
+ idMap[this.selectReply[index].id] = this.selectReply[index].id;
|
|
229
|
+ }
|
|
230
|
+ openDeleteReply({ids:ids}).then(response=>{
|
|
231
|
+ if(response.data.state==1){
|
|
232
|
+ // var commentslength = this.comments.length;
|
|
233
|
+ // for (let index = commentslength-1; index>=0; index--) {
|
|
234
|
+ // if(this.comments[index].id in idMap){
|
|
235
|
+ // this.comments.splice(index,1);
|
|
236
|
+ // }
|
|
237
|
+ // }
|
|
238
|
+ // this.$message.success("删除会员成功");
|
|
239
|
+ }
|
|
240
|
+ })
|
|
241
|
+ })
|
111
|
242
|
}
|
112
|
243
|
},
|
113
|
244
|
created(){
|
|
@@ -120,15 +251,17 @@ import { constants } from 'crypto';
|
120
|
251
|
|
121
|
252
|
.border{
|
122
|
253
|
border: 1px #dcdfe6 solid;
|
123
|
|
- margin-top: 140px;
|
|
254
|
+ margin-top: 50px;
|
124
|
255
|
}
|
125
|
256
|
.border2{
|
126
|
257
|
border: 1px #dcdfe6 solid;
|
|
258
|
+ margin-top: 20px;
|
127
|
259
|
}
|
128
|
260
|
.comment{
|
129
|
261
|
font-size: 20px;
|
130
|
262
|
color: black;
|
131
|
263
|
font-weight: 700;
|
|
264
|
+
|
132
|
265
|
}
|
133
|
266
|
|
134
|
267
|
.commentname{
|
|
@@ -136,17 +269,20 @@ import { constants } from 'crypto';
|
136
|
269
|
font-size: 20px;
|
137
|
270
|
color: blue;
|
138
|
271
|
margin-left: 100px;
|
|
272
|
+
|
139
|
273
|
}
|
140
|
274
|
.reply{
|
141
|
275
|
float: right;
|
142
|
276
|
margin-top: -20px;
|
143
|
277
|
font-size: 20px;
|
144
|
278
|
color: #495060;
|
|
279
|
+
|
145
|
280
|
}
|
146
|
281
|
.content{
|
147
|
282
|
font-size: 20px;
|
148
|
283
|
margin-top: 15px;
|
149
|
284
|
margin-left: 100px;
|
|
285
|
+
|
150
|
286
|
}
|
151
|
287
|
.check{
|
152
|
288
|
margin-top: 20px;
|
|
@@ -154,27 +290,25 @@ import { constants } from 'crypto';
|
154
|
290
|
}
|
155
|
291
|
.time{
|
156
|
292
|
color: #495060;
|
|
293
|
+ font-size: 15px;
|
157
|
294
|
}
|
158
|
295
|
.reply_box{
|
159
|
|
- margin-top: 30px;
|
|
296
|
+ margin-top: 40px;
|
160
|
297
|
}
|
161
|
298
|
.button{
|
162
|
299
|
float: right;
|
163
|
300
|
margin-top: 5px;
|
164
|
301
|
|
165
|
302
|
}
|
166
|
|
- .reviewed{
|
167
|
|
- float: right;
|
168
|
|
- margin-top: 30px;
|
169
|
|
- margin-left: 100px;
|
170
|
|
- padding-top: 16px;
|
|
303
|
+ .reviewed{
|
|
304
|
+ margin-top: 50px;
|
171
|
305
|
width: 1650px;
|
172
|
306
|
height:50px;
|
173
|
|
- font-size: 15px;
|
174
|
|
- border:1px solid #f4f7fa;
|
|
307
|
+ margin-left: 35px;
|
175
|
308
|
background-color: #f4f7fa;
|
176
|
|
- }
|
177
|
|
-
|
|
309
|
+ padding-top: 15px;
|
|
310
|
+ }
|
|
311
|
+
|
178
|
312
|
.pl{
|
179
|
313
|
margin-bottom: 50px;
|
180
|
314
|
}
|
|
@@ -183,4 +317,8 @@ import { constants } from 'crypto';
|
183
|
317
|
margin-left: 20px;
|
184
|
318
|
margin-top: 20px;
|
185
|
319
|
}
|
|
320
|
+ #tub{
|
|
321
|
+ float: right;
|
|
322
|
+ margin-top: -15px;
|
|
323
|
+ }
|
186
|
324
|
</style>
|