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

@@ -0,0 +1,58 @@
+<nz-card nzSize="small" [nzExtra]="refresh" [nzTitle]="cardTitle" [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;let index = index">
+            <ng-container *ngFor="let headData of data">
+                <td *ngIf="headData.show"
+                    nz-typography
+                    nzEllipsis
+                    nzEllipsisRows="1"
+                    [nzTooltipTitle]="headData.isActionColumns ? null : headData.fieldName+' : '+getValue(index,headData.fieldValue)"
+                    nzTooltipPlacement="top"
+                    nz-tooltip>
+                    <ng-template [ngIf]="!headData.isActionColumns">
+                        <ng-template [ngIf]="template[headData.fieldValue]">
+                            <ng-container
+                                    *ngTemplateOutlet="template[headData.fieldValue].temp; context:getContext(headData.fieldValue,index) ">
+                            </ng-container>
+                        </ng-template>
+                        <ng-template [ngIf]="!template[headData.fieldValue]">
+                            {{ getValue(index, headData.fieldValue) }}
+                        </ng-template>
+                    </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>
+
+
+<ng-template #refresh>
+    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()" style="cursor: pointer"></i>
+</ng-template>

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

@@ -0,0 +1,92 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef} 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',
+    templateUrl: './common-table.component.html',
+    styleUrls: ['./common-table.component.less']
+})
+export class CommonTableComponent<T> implements OnInit, OnChanges {
+
+    constructor(private httpService: HttpService) {
+
+    }
+
+    /**
+     * 设置readonly data 因为后面有使用eval 为了安全
+     */
+    @Input() readonly data: Data<T>[];
+    @Input() request: RequestObj;
+    @Input() cardTitle: string;
+    @Input() template: {
+        [fieldValue: string]: {
+            temp: TemplateRef<any>,
+            param?: { [key: string]: string }
+        }
+    };
+    @Output() pageInfo = new EventEmitter<{ page: number, pageSize: number }>();
+    loading: boolean = true;
+
+    dataList: PageList<T> = new PageList<T>();
+
+    ngOnInit(): void {
+        this.getData();
+        this.data.forEach(dat => {
+            if (!dat.action) return;
+            dat.action.forEach(act => {
+                if (!act.hover) {
+                    act.hover = () => null;
+                }
+            })
+        })
+    }
+
+    getData = () => {
+        this.loading = true;
+        const pageValue = this.dataList.pageNum ? this.dataList.pageNum : 1;
+        const countValue = this.dataList.pageSize ? this.dataList.pageSize : 10
+        this.request.queryParam = {
+            page: pageValue,
+            count: countValue
+        }
+        this.pageInfo.emit({page: pageValue, pageSize: countValue})
+        this.httpService.Service<PageList<T>>(this.request).subscribe({
+            next: resp => {
+                this.dataList = resp.result;
+                this.loading = false;
+            },
+            error: err => this.loading = false
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+    }
+
+
+    getValue(index: number, fieldValue: string) {
+        let str = `this.dataList.list[${index}].` + fieldValue;
+        const regexp = /<|>|=|onload|$|{|}|《/
+        str = str.replace(regexp, '');
+        // tslint:disable-next-line:no-eval
+        const value = eval(str);
+        return value !== undefined ? value : '暂无数据';
+    }
+
+    getContext = (fieldValue: string, index: number) => {
+        const valueData = this.getValue(index, fieldValue);
+        let context: { value: string, originValue?: string };
+        if (this.template[fieldValue].param) {
+            context = {
+                value: this.template[fieldValue].param[valueData],
+                originValue: valueData
+            }
+        } else {
+            context = {
+                value: valueData
+            }
+        }
+        return context;
+    }
+}

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

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

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

@@ -0,0 +1,23 @@
+import {TemplateRef} from '@angular/core';
+
+export class Data<T> {
+    fieldName: string;
+    fieldValue: string;
+    show: boolean = true;
+    primaryKey?: boolean = false;
+    isActionColumns?: boolean = false;
+    template?: {
+        template: TemplateRef<any>,
+        keymap?: {
+            [value: string]: string
+        }
+    };
+    action ?: {
+        name: string,
+        color?: string,
+        order?: number,
+        fontSize?: string,
+        click: (data: T) => void,
+        hover?: (data: T) => void | null;
+    }[] = []
+}

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

@@ -0,0 +1,23 @@
+<app-common-table [data]="data" [request]="req" cardTitle="文章管理"
+                  [template]="{
+                      dislikeCount:{temp:tag},
+                      readingNumber:{temp:readingNumber},
+                      open:{temp:open},
+                      original:{temp:original,param:{true:'原创',false:'转载'}
+                  }}">
+</app-common-table>
+<ng-template #tag let-value="value">
+    <nz-tag [nzColor]="'#87d068'">{{value}}</nz-tag>
+</ng-template>
+
+<ng-template #readingNumber let-value="value">
+    <nz-tag [nzColor]="'#f50'">{{value}}</nz-tag>
+</ng-template>
+
+<ng-template #original let-value="value" let-originValue="originValue">
+    <nz-tag [nzColor]="originValue?'#87d068':'#f50'">{{value}}</nz-tag>
+</ng-template>
+
+<ng-template #open let-value="value">
+    <label nz-checkbox nzDisabled [ngModel]="value"></label>
+</ng-template>

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

@@ -0,0 +1,78 @@
+import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {Data} from '../components/common-table/data';
+import {Article} from '../../../class/Article';
+import {RequestObj} from '../../../class/HttpReqAndResp';
+
+@Component({
+    selector: 'app-test-common-table',
+    templateUrl: './test-common-table.component.html',
+    styleUrls: ['./test-common-table.component.less']
+})
+export class TestCommonTableComponent implements OnInit {
+
+    /*
+    * author: {id: 1, email: "a@celess.cn", displayName: "禾几海",…}
+category: "前端"
+dislikeCount: 0
+id: 1293
+likeCount: 0
+open: true
+original: true
+publishDateFormat: "2020-03-17 01:22:35"
+readingNumber: 234
+summary:    a
+tags: [{id: 26, name: "脚本"}, {id: 27, name: "网课"}]
+title: "教你动手写一个刷课脚本"
+updateDateFormat: "2020-05-27 00:55:05"*/
+    // @ViewChild('tag') tagTemp: TemplateRef<any>;
+
+    constructor() {
+        this.data = [
+            {fieldName: '主键', fieldValue: 'id', show: false, primaryKey: true},
+            {fieldName: '标题', fieldValue: 'title', show: true},
+            {fieldName: '发布日期', fieldValue: 'publishDateFormat', show: true},
+            {fieldName: '更新日期', fieldValue: 'updateDateFormat', show: true},
+            {fieldName: '文章类型', fieldValue: 'original', show: true},
+            {fieldName: '阅读量', fieldValue: 'readingNumber', show: true},
+            {fieldName: '分类', fieldValue: 'category', show: true},
+            {fieldName: '👎数', fieldValue: 'dislikeCount', show: true},
+            {fieldName: '👍数', fieldValue: 'likeCount', show: true},
+            {fieldName: '状态', fieldValue: 'open', show: true},
+            {fieldName: '简介', fieldValue: 'summary', show: false},
+            {fieldName: '作者', fieldValue: 'author.displayName', show: true},
+            {fieldName: '标签数', fieldValue: 'tags.length', show: true},
+            {
+                fieldName: '操作', fieldValue: '', show: true, isActionColumns: true,
+                action: [
+                    {
+                        name: '新增',
+                        click: (d) => console.log('新增', d)
+                    }, {
+                        name: '删除',
+                        color: '#ff0000',
+                        click: (d) => console.log('删除', d)
+                    }, {
+                        name: '编辑',
+                        color: 'blue',
+                        click: (d) => console.log('编辑', d)
+                    },
+                ]
+            }
+        ]
+    }
+
+    data: Data<Article>[];
+    req: RequestObj;
+
+    ngOnInit(): void {
+        this.req = {
+            path: '/admin/articles',
+            method: 'GET',
+            queryParam: {
+                page: 1,
+                count: 10
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TestCommonTableComponent} from './test-common-table.component';
+import {Router, RouterModule} from '@angular/router';
+import {CommonTableModule} from '../components/common-table/common-table.module';
+import {NzCheckboxModule, NzTagModule} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
+
+
+@NgModule({
+    declarations: [TestCommonTableComponent],
+    imports: [
+        CommonModule,
+        RouterModule.forChild([{path: '', component: TestCommonTableComponent}]),
+        CommonTableModule,
+        NzTagModule,
+        NzCheckboxModule,
+        FormsModule
+    ]
+})
+export class TestCommonTableModule {
+}