From 7a788dc559f79919d7904a9b8df0fb3b8dca6464 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= <zh56462271@qq.com>
Date: Wed, 1 Jul 2020 12:08:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6-=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common-table/common-table.component.html  | 87 +++++++++++--------
 .../common-table/common-table.component.ts    | 11 ++-
 .../common-table/common-table.module.ts       | 15 +++-
 .../test-common-table.component.html          |  2 +-
 4 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/src/app/view/admin/components/common-table/common-table.component.html b/src/app/view/admin/components/common-table/common-table.component.html
index 22e3c51..d81c2ba 100644
--- a/src/app/view/admin/components/common-table/common-table.component.html
+++ b/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>
diff --git a/src/app/view/admin/components/common-table/common-table.component.ts b/src/app/view/admin/components/common-table/common-table.component.ts
index 309368f..a2e6fdf 100644
--- a/src/app/view/admin/components/common-table/common-table.component.ts
+++ b/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
         });
     }
 
diff --git a/src/app/view/admin/components/common-table/common-table.module.ts b/src/app/view/admin/components/common-table/common-table.module.ts
index 3e832b6..e546f2a 100644
--- a/src/app/view/admin/components/common-table/common-table.module.ts
+++ b/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 {
diff --git a/src/app/view/admin/test-common-table/test-common-table.component.html b/src/app/view/admin/test-common-table/test-common-table.component.html
index bbb6b23..51b3df4 100644
--- a/src/app/view/admin/test-common-table/test-common-table.component.html
+++ b/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>