src/app/view/admin/components/common-table/common-table.component.html

@@ -1,4 +1,5 @@
-<nz-table nzTableLayout="fixed"
+<nz-card nzSize="small" [nzExtra]="refresh" [nzTitle]="title" [nzLoading]="loading">
+    <nz-table nzTableLayout="fixed"
               [nzData]="dataList.list"
               [nzTotal]="dataList.total"
               [(nzPageIndex)]="dataList.pageNum"
@@ -17,7 +18,13 @@
         <tbody>
         <tr *ngFor="let t of dataList.list">
             <ng-container *ngFor="let headData of data">
-            <td *ngIf="headData.show">
+                <td *ngIf="headData.show"
+                    nz-typography
+                    nzEllipsis
+                    nzEllipsisRows="1"
+                    [nzTooltipTitle]="headData.fieldName+' : '+t[headData.fieldValue]"
+                    nzTooltipPlacement="right"
+                    nz-tooltip>
                     <ng-template [ngIf]="!headData.isActionColumns">
                         {{t[headData.fieldValue]}}
                     </ng-template>
@@ -33,8 +40,12 @@
                     </ng-container>
                 </td>
             </ng-container>
-
         </tr>
-
         </tbody>
-</nz-table>
+    </nz-table>
+</nz-card>
+
+
+<ng-template #refresh>
+    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()"></i>
+</ng-template>

src/app/view/admin/components/common-table/common-table.component.ts

@@ -16,6 +16,8 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
 
     @Input() data: Data<T>[]
     @Input() request: RequestObj
+    @Input() title: string
+    loading: boolean = true;
 
     dataList: PageList<T> = new PageList<T>();
 
@@ -32,12 +34,17 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     }
 
     getData = () => {
+        this.loading = true;
         this.request.queryParam = {
             page: this.dataList.pageNum ? this.dataList.pageNum : 1,
             count: this.dataList.pageSize ? this.dataList.pageSize : 10
         }
-        this.httpService.Service<PageList<T>>(this.request).subscribe(resp => {
+        this.httpService.Service<PageList<T>>(this.request).subscribe({
+            next: resp => {
                 this.dataList = resp.result;
+                this.loading = false;
+            },
+            error: err => this.loading = false
         });
     }
 

src/app/view/admin/components/common-table/common-table.module.ts

@@ -1,7 +1,14 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {CommonTableComponent} from './common-table.component';
-import {NzDividerModule, NzTableModule} from 'ng-zorro-antd';
+import {
+    NzCardModule,
+    NzDividerModule,
+    NzIconModule,
+    NzTableModule,
+    NzToolTipModule,
+    NzTypographyModule
+} from 'ng-zorro-antd';
 
 
 @NgModule({
@@ -14,7 +21,11 @@ import {NzDividerModule, NzTableModule} from 'ng-zorro-antd';
     imports: [
         CommonModule,
         NzTableModule,
-        NzDividerModule
+        NzDividerModule,
+        NzTypographyModule,
+        NzToolTipModule,
+        NzCardModule,
+        NzIconModule
     ]
 })
 export class CommonTableModule {

src/app/view/admin/test-common-table/test-common-table.component.html

@@ -1 +1 @@
-<app-common-table [data]="data" [request]="req"></app-common-table>
+<app-common-table [data]="data" [request]="req" title="文章管理"></app-common-table>