评论切换通用组件1/2

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

@@ -1,3 +1,4 @@
+<!--
 <div class="inner-content">
     <nz-card nzTitle="评论管理" nzSize="small" [nzExtra]="reload">
         <nz-table #table [nzData]="pageList.list"
@@ -47,3 +48,13 @@
 <ng-template #reload>
     <a (click)="getComment()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
 </ng-template>
+-->
+
+<c-common-table [request]="request" [data]="headData" cardTitle="评论管理"
+                [template]="{status:{temp:status,param:{'0':' 正常 ','3':'已删除'}}}">
+</c-common-table>
+
+<ng-template let-originValue="originValue" let-value="value" #status>
+    <nz-tag nzColor="geekblue" *ngIf="originValue==0">{{value}}</nz-tag>
+    <nz-tag nzColor="#f50" *ngIf="originValue==3">{{value}}</nz-tag>
+</ng-template>

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

@@ -1,3 +0,0 @@
-td {
-  max-width: 300px;
-}

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

@@ -1,99 +1,111 @@
 import {Component, OnInit} from '@angular/core';
 import {NzMessageService} from 'ng-zorro-antd';
 import {ApiService} from '../../../api/api.service';
-import {PageList} from '../../../class/HttpReqAndResp';
+import {RequestObj} from '../../../class/HttpReqAndResp';
 import {Comment, CommentReq} from '../../../class/Comment';
 import {GlobalUserService} from '../../../services/global-user.service';
 import {Title} from '@angular/platform-browser';
+import {Data} from '../components/common-table/data';
 
 @Component({
     selector: 'app-admin-comment',
     templateUrl: './admin-comment.component.html',
-    styleUrls: ['./admin-comment.component.less']
 })
 export class AdminCommentComponent implements OnInit {
 
     constructor(private apiService: ApiService, private  messageService: NzMessageService, private userService: GlobalUserService,
                 private title: Title) {
         this.title.setTitle('小海博客 | 评论管理')
+        this.request = {
+            // path: `/admin/comment/pagePath/${pagePath}`,
+            path: null,
+            method: 'GET',
+            queryParam: {
+                page: 1,
+                count: 10
+            }
+        }
         this.userService.watchUserInfo({
             next: data => {
                 if (data.result) {
                     if (data.result.role === 'admin') {
-                        this.getComment = this.getCommentForAdmin;
+                        this.request.path = '/admin/comment/pagePath/*'
                     } else {
-                        this.getComment = this.getCommentForUser;
+                        this.request.path = '/user/comment/pagePath/*'
                     }
-                } else {
-                    this.getComment = this.getCommentForUser;
                 }
-                if (this.requested) return;
-                this.getComment()
-                this.requested = true
             },
-            error: null,
-            complete: null
+            error: () => null,
+            complete: () => null
         })
     }
 
-    loading: boolean = true;
-    pageIndex: number = 1;
-    pageSize: number = 10;
-    pageList: PageList<Comment> = new PageList<Comment>();
+    request: RequestObj;
     editInfo = {
         id: null,
         content: new CommentReq(null),
         editFocus: false,
     }
-    getComment: any;// 存放获取评论的方法
-    private requested: boolean = false;
-
+    headData: Data<Comment>[];
 
     ngOnInit(): void {
+        this.headData = [
+            {fieldName: '主键', fieldValue: 'id', show: false, primaryKey: true},
+            {fieldName: '评论路径', fieldValue: 'pagePath', show: true},
+            {fieldName: '评论创建者昵称', fieldValue: 'fromUser.displayName', show: true},
+            {fieldName: '评论接收者昵称', fieldValue: 'toUser.displayName', show: true},
+            {fieldName: '评论内容', fieldValue: 'content', show: false},
+            {fieldName: '评论日期', fieldValue: 'date', show: true},
+            {fieldName: '父评论id', fieldValue: 'pid', show: false},
+            {fieldName: '状态', fieldValue: 'status', show: true},
+            {
+                fieldName: '操作',
+                fieldValue: '',
+                show: true,
+                isActionColumns: true,
+                action: [
+                    {name: '查看', click: data => console.log(data)},
+                    {name: '删除', color: 'red', click: data => this.deleteComment(data), needConfirm: true},
+                    {name: '编辑', color: '#2db7f5', click: data => this.edit(data)},
+                ]
+            }
+        ];
     }
 
 
-    // TODO:: pagePath
-    getCommentForAdmin = () => this.apiService.getCommentByTypeForAdmin('*', this.pageIndex, this.pageSize).subscribe({
-        next: data => this.pageList = data.result,
-        complete: () => this.loading = false,
-        error: err => this.loading = false
-    })
+    // // TODO:: pagePath
+    // getCommentForAdmin = () => this.apiService.getCommentByTypeForAdmin('*', this.pageIndex, this.pageSize).subscribe({
+    //     next: data => this.pageList = data.result,
+    //     complete: () => this.loading = false,
+    //     error: err => this.loading = false
+    // })
 
-    getCommentForUser = () => this.apiService.getCommentByTypeForUser('*', this.pageIndex, this.pageSize).subscribe({
-        next: data => this.pageList = data.result,
-        complete: () => this.loading = false,
-        error: err => this.loading = false
-    })
+    // getCommentForUser = () => this.apiService.getCommentByTypeForUser('*', this.pageIndex, this.pageSize).subscribe({
+    //     next: data => this.pageList = data.result,
+    //     complete: () => this.loading = false,
+    //     error: err => this.loading = false
+    // })
 
-    deleteComment(id: number) {
-        this.loading = true;
-        this.apiService.deleteComment(id).subscribe({
+    deleteComment(data: Comment) {
+        this.apiService.deleteComment(data.id).subscribe({
             next: () => {
                 this.messageService.success('删除评论成功');
-                this.getComment();
             },
             error: err => {
-                this.loading = false;
                 this.messageService.error(err.msg);
-            },
-            complete: () => this.loading = false
+            }
         })
     }
 
-    edit() {
-        this.editInfo.editFocus = false;
-        this.loading = true;
+    edit(comment: Comment) {
         this.apiService.updateComment(this.editInfo.content).subscribe({
             next: data => {
                 this.messageService.success('更新评论成功');
-                this.getComment();
             },
             error: err => {
-                this.loading = false;
                 this.messageService.success(err.msg);
             },
-            complete: () => this.loading = false
+            complete: () => null
         })
     }
 

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

@@ -2,16 +2,8 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminCommentComponent} from './admin-comment.component';
-import {
-    NzButtonModule,
-    NzCardModule,
-    NzDividerModule, NzIconModule, NzInputModule,
-    NzPopconfirmModule,
-    NzTableModule,
-    NzToolTipModule,
-    NzTypographyModule
-} from 'ng-zorro-antd';
-import {FormsModule} from '@angular/forms';
+import {CommonTableModule} from '../components/common-table/common-table.module';
+import {NzTagModule} from 'ng-zorro-antd';
 
 
 @NgModule({
@@ -21,16 +13,8 @@ import {FormsModule} from '@angular/forms';
     imports: [
         CommonModule,
         RouterModule.forChild([{path: '', component: AdminCommentComponent}]),
-        NzCardModule,
-        NzTableModule,
-        NzDividerModule,
-        NzPopconfirmModule,
-        NzTypographyModule,
-        NzToolTipModule,
-        NzInputModule,
-        FormsModule,
-        NzIconModule,
-        NzButtonModule
+        CommonTableModule,
+        NzTagModule,
     ]
 })
 export class AdminCommentModule {