src/app/view/admin/admin-comment/admin-comment.component.html

@@ -1,4 +1,7 @@
-<common-table [request]="request" [headData]="headData" cardTitle="评论管理"
+<common-table #commonTableComponent
+              [request]="request"
+              [headData]="headData"
+              cardTitle="评论管理"
               [template]="{status:{temp:status,param:{'0':' 正常 ','3':'已删除'}},content:{temp:content}}">
 </common-table>
 
@@ -16,3 +19,26 @@
                   (modalOK)="textChange($event,data)">
     </editable-tag>
 </ng-template>
+
+<nz-modal nzTitle="查看" [nzClosable]="true" [(nzVisible)]="modalData.visible" (nzOnOk)="modalData.visible=false"
+          [nzCancelText]="null">
+    <ng-template #commentTemplateRef let-comment="comment">
+        <nz-comment [nzAuthor]="comment && comment.fromUser.displayName" [nzDatetime]="comment&&comment.date">
+            <nz-avatar nz-comment-avatar nzIcon="user"
+                       [nzSrc]="comment && comment.fromUser && comment.fromUser.avatarImgUrl"></nz-avatar>
+            <nz-comment-content>
+                <p>{{ comment && comment.content }}</p>
+            </nz-comment-content>
+<!--            <nz-comment-action>Reply to</nz-comment-action>-->
+            <ng-container *ngIf="comment&&comment.children && comment.children.length">
+                <ng-template ngFor let-child [ngForOf]="comment&&comment.children">
+                    <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: child }">
+                    </ng-template>
+                </ng-template>
+            </ng-container>
+        </nz-comment>
+    </ng-template>
+
+    <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: modalData.comment }">
+    </ng-template>
+</nz-modal>

src/app/view/admin/admin-comment/admin-comment.component.ts

@@ -7,6 +7,7 @@ import {GlobalUserService} from '../../../services/global-user.service';
 import {Title} from '@angular/platform-browser';
 import {Data} from '../components/common-table/data';
 import {EditableTagComponent} from '../components/editable-tag/editable-tag.component';
+import {CommonTableComponent} from '../components/common-table/common-table.component';
 
 @Component({
     selector: 'app-admin-comment',
@@ -47,7 +48,12 @@ export class AdminCommentComponent implements OnInit {
         content: new CommentReq(null),
     }
     headData: Data<Comment>[];
+    modalData = {
+        visible: false,
+        comment: null
+    }
     @ViewChild('editableTagComponent') editableTagComponent: EditableTagComponent;
+    @ViewChild('commonTableComponent') commonTableComponent: CommonTableComponent<Comment>;
 
     ngOnInit(): void {
         this.headData = [
@@ -65,7 +71,13 @@ export class AdminCommentComponent implements OnInit {
                 show: true,
                 isActionColumns: true,
                 action: [
-                    {name: '查看', click: data => console.log(data)},
+                    {
+                        name: '查看',
+                        click: data => {
+                            this.modalData.visible = true
+                            this.modalData.comment = data;
+                        }
+                    },
                     {name: '删除', color: 'red', click: data => this.deleteComment(data), needConfirm: true},
                     {name: '编辑', color: '#2db7f5', click: data => this.editableTagComponent.getFocus(data.id)},
                 ]
@@ -74,9 +86,14 @@ export class AdminCommentComponent implements OnInit {
     }
 
     deleteComment(data: Comment) {
+        if (data.status === 3) {
+            this.messageService.error('该数据已被删除');
+            return
+        }
         this.apiService.deleteComment(data.id).subscribe({
             next: () => this.messageService.success('删除评论成功'),
-            error: err => this.messageService.error(err.msg)
+            error: err => this.messageService.error(err.msg),
+            complete: () => this.commonTableComponent.getData()
         })
     }
 

src/app/view/admin/admin-comment/admin-comment.module.ts

@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminCommentComponent} from './admin-comment.component';
 import {CommonTableModule} from '../components/common-table/common-table.module';
-import {NzTagModule} from 'ng-zorro-antd';
+import {NzAvatarModule, NzCommentModule, NzModalModule, NzTagModule} from 'ng-zorro-antd';
 import {EditableTagModule} from '../components/editable-tag/editable-tag.module';
 
 
@@ -17,6 +17,9 @@ import {EditableTagModule} from '../components/editable-tag/editable-tag.module'
         CommonTableModule,
         NzTagModule,
         EditableTagModule,
+        NzModalModule,
+        NzCommentModule,
+        NzAvatarModule,
     ]
 })
 export class AdminCommentModule {