通用组件-刷新

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

@@ -1,40 +1,51 @@
-<nz-table nzTableLayout="fixed"
-          [nzData]="dataList.list"
-          [nzTotal]="dataList.total"
-          [(nzPageIndex)]="dataList.pageNum"
-          [nzPageSize]="dataList.pageSize"
-          (nzPageIndexChange)="getData()"
-          nzFrontPagination="false">
-    <thead>
-    <tr>
-        <ng-container *ngFor="let headData of data">
-            <th *ngIf="headData.show">
-                {{headData.fieldName}}
-            </th>
-        </ng-container>
-    </tr>
-    </thead>
-    <tbody>
-    <tr *ngFor="let t of dataList.list">
-        <ng-container *ngFor="let headData of data">
-            <td *ngIf="headData.show">
-                <ng-template [ngIf]="!headData.isActionColumns">
-                    {{t[headData.fieldValue]}}
-                </ng-template>
-                <ng-container *ngIf="headData.isActionColumns">
-                    <a *ngFor="let action of headData.action; let i = index" (mouseenter)="action.hover(t)"
-                       (mouseout)="null" (click)="action.click(t)"
-                       [ngStyle]="{'color':action.color,'font-size':action.fontSize}">
-                        {{action.name}}
-                        <ng-template [ngIf]="i!=headData.action.length-1">
-                            <nz-divider nzType="vertical"></nz-divider>
-                        </ng-template>
-                    </a>
-                </ng-container>
-            </td>
-        </ng-container>
+<nz-card nzSize="small" [nzExtra]="refresh" [nzTitle]="title" [nzLoading]="loading">
+    <nz-table nzTableLayout="fixed"
+              [nzData]="dataList.list"
+              [nzTotal]="dataList.total"
+              [(nzPageIndex)]="dataList.pageNum"
+              [nzPageSize]="dataList.pageSize"
+              (nzPageIndexChange)="getData()"
+              nzFrontPagination="false">
+        <thead>
+        <tr>
+            <ng-container *ngFor="let headData of data">
+                <th *ngIf="headData.show">
+                    {{headData.fieldName}}
+                </th>
+            </ng-container>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let t of dataList.list">
+            <ng-container *ngFor="let headData of data">
+                <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>
+                    <ng-container *ngIf="headData.isActionColumns">
+                        <a *ngFor="let action of headData.action; let i = index" (mouseenter)="action.hover(t)"
+                           (mouseout)="null" (click)="action.click(t)"
+                           [ngStyle]="{'color':action.color,'font-size':action.fontSize}">
+                            {{action.name}}
+                            <ng-template [ngIf]="i!=headData.action.length-1">
+                                <nz-divider nzType="vertical"></nz-divider>
+                            </ng-template>
+                        </a>
+                    </ng-container>
+                </td>
+            </ng-container>
+        </tr>
+        </tbody>
+    </nz-table>
+</nz-card>
 
-    </tr>
 
-    </tbody>
-</nz-table>
+<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.dataList = resp.result;
+        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 {