编写通用组件

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

@@ -45,6 +45,10 @@ const routes: Routes = [
                 loadChildren: () => import('./admin-visitor/admin-visitor.module').then(mod => mod.AdminVisitorModule),
                 // canActivate: [AuthGuard]
             },
+            {
+                path: 'test',
+                loadChildren: () => import('./test-common-table/test-common-table.module').then(Mod => Mod.TestCommonTableModule)
+            },
             {
                 path: '**',
                 loadChildren: () => import('./admin-dashboard/admin-dashboard.module').then(mod => mod.AdminDashboardModule),

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

@@ -1,24 +1,33 @@
 <nz-table>
     <thead>
     <tr>
-        <td *ngFor="let headData of data">
+        <ng-container *ngFor="let headData of data">
+            <th *ngIf="headData.show">
                 {{headData.fieldName}}
-        </td>
+            </th>
+        </ng-container>
     </tr>
     </thead>
     <tbody>
-    <tr>
-        <td *ngFor="let headData of data">
+    <tr *ngFor="let t of dataList.list">
+        <ng-container *ngFor="let headData of data">
+            <td *ngIf="headData.show">
                 <ng-template [ngIf]="!headData.isActionColumns">
-                {{headData.fieldName}}
+                    {{t[headData.fieldValue]}}
                 </ng-template>
-            <ng-template *ngIf="headData.isActionColumns">
-                <a *ngFor="let action of headData.action" (mouseenter)="action.hover(headData)" (mouseout)="null"
-                   (click)="action.click(headData)" [ngStyle]="{'color':action.color,'font-size':action.fontSize}">
+                <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}}
-                </a>
+                        <ng-template [ngIf]="i!=headData.action.length-1">
+                            <nz-divider nzType="vertical"></nz-divider>
                         </ng-template>
+                    </a>
+                </ng-container>
             </td>
+        </ng-container>
+
     </tr>
 
     </tbody>

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

@@ -1,5 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Data} from './data';
+import {PageList, RequestObj} from '../../../../class/HttpReqAndResp';
+import {HttpService} from '../../../../api/http/http.service';
 
 @Component({
     selector: 'app-common-table',
@@ -8,12 +10,27 @@ import {Data} from './data';
 })
 export class CommonTableComponent<T> implements OnInit {
 
-    constructor() {
+    constructor(private httpService: HttpService) {
+
     }
 
     @Input() data: Data<T>[]
+    @Input() request: RequestObj
+
+    dataList: PageList<T> = new PageList<T>();
 
     ngOnInit(): void {
+        this.httpService.Service<PageList<T>>(this.request).subscribe(resp => {
+            this.dataList = resp.result;
+        });
+        this.data.forEach(dat => {
+            if (!dat.action) return;
+            dat.action.forEach(act => {
+                if (!act.hover) {
+                    act.hover = () => null;
+                }
+            })
+        })
     }
 
 }

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

@@ -1,16 +1,20 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {CommonTableComponent} from './common-table.component';
-import {NzTableModule} from "ng-zorro-antd";
+import {NzDividerModule, NzTableModule} from 'ng-zorro-antd';
 
 
 @NgModule({
     declarations: [
         CommonTableComponent
     ],
+    exports: [
+        CommonTableComponent
+    ],
     imports: [
         CommonModule,
-        NzTableModule
+        NzTableModule,
+        NzDividerModule
     ]
 })
 export class CommonTableModule {

src/app/view/admin/components/common-table/data.d.ts

@@ -1,15 +0,0 @@
-export class Data<T> {
-    fieldName: string;
-    fieldValue: string;
-    show: boolean;
-    bindData?: T;
-    isActionColumns: boolean;
-    action: {
-        name: string,
-        color: string,
-        order: number,
-        fontSize: string,
-        click: (data: T) => void,
-        hover: (data: T) => void;
-    }[]
-}

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

@@ -0,0 +1,15 @@
+export class Data<T> {
+    fieldName: string;
+    fieldValue: string;
+    show: boolean = true;
+    primaryKey?: boolean = false;
+    isActionColumns?: boolean = false;
+    action?: {
+        name: string,
+        color?: string,
+        order?: number,
+        fontSize?: string,
+        click: (data: T) => void,
+        hover?: (data: T) => void | null;
+    }[] = []
+}