zheng/blog-frontEnd
1
0
Fork 0
Code Issues 2 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

通用组件-刷新

Browse Source
This commit is contained in:
禾几海
2020-07-01 12:08:47 +08:00
parent 5e2dfe056b
commit 7a788dc559
4 changed files with 72 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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