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

通用表格组件-更改getValue函数实现逻辑，更改Data字段名

Browse Source
This commit is contained in:
禾几海
2020-07-02 23:16:10 +08:00
parent 551dbc10e5
commit 8bd8986bdd
3 changed files with 23 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,35 +9,35 @@
[nzScroll]="{x:'1300px'}"> [nzScroll]="{x:'1300px'}">
<thead> <thead>
<tr> <tr>
<ng-container *ngFor="let headData of data"> <ng-container *ngFor="let data of headData">
<th *ngIf="headData.show"> <th *ngIf="data.show">
{{headData.fieldName}} {{data.title}}
</th> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let t of dataList.list;let index = index"> <tr *ngFor="let t of dataList.list;let index = index">
<ng-container *ngFor="let headData of data"> <ng-container *ngFor="let data of headData">
<td *ngIf="headData.show" <td *ngIf="data.show"
nz-typography nz-typography
nzEllipsis nzEllipsis
[nzEllipsisRows]="headData.isActionColumns?3:1" [nzEllipsisRows]="data.isActionColumns?3:1"
[nzTooltipTitle]="headData.isActionColumns ? null : headData.fieldName+' : '+getValue(index,headData.fieldValue)" [nzTooltipTitle]="data.isActionColumns ? null : data.title+' : '+getValue(index,data.fieldValue)"
nzTooltipPlacement="top" nzTooltipPlacement="top"
nz-tooltip> nz-tooltip>
<ng-template [ngIf]="!headData.isActionColumns"> <ng-template [ngIf]="!data.isActionColumns">
<ng-template [ngIf]="template[headData.fieldValue]"> <ng-template [ngIf]="template[data.fieldValue]">
<ng-container <ng-container
*ngTemplateOutlet="template[headData.fieldValue].temp; context:getContext(headData.fieldValue,index) "> *ngTemplateOutlet="template[data.fieldValue].temp; context:getContext(data.fieldValue,index) ">
</ng-container> </ng-container>
</ng-template> </ng-template>
<ng-template [ngIf]="!template[headData.fieldValue]"> <ng-template [ngIf]="!template[data.fieldValue]">
{{ getValue(index, headData.fieldValue) }} {{ getValue(index, data.fieldValue) }}
</ng-template> </ng-template>
</ng-template> </ng-template>
<ng-container *ngIf="headData.isActionColumns"> <ng-container *ngIf="data.isActionColumns">
<a *ngFor="let action of headData.action; let i = index" <a *ngFor="let action of data.action; let i = index"
(mouseenter)="action.hover(t)" (mouseenter)="action.hover(t)"
(mouseout)="null" (mouseout)="null"
[ngStyle]="{'color':action.color,'font-size':action.fontSize}" [ngStyle]="{'color':action.color,'font-size':action.fontSize}"
@@ -47,7 +47,7 @@
(nzOnConfirm)="action.click(t)" (nzOnConfirm)="action.click(t)"
[title]="action.name"> [title]="action.name">
{{action.name}} {{action.name}}
<ng-template [ngIf]="i!=headData.action.length-1"> <ng-template [ngIf]="i!=data.action.length-1">
<nz-divider nzType="vertical"></nz-divider> <nz-divider nzType="vertical"></nz-divider>
</ng-template> </ng-template>
</a> </a>

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

@@ -17,7 +17,7 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
/** /**
* 设置readonly data 因为后面有使用eval 为了安全 * 设置readonly data 因为后面有使用eval 为了安全
*/ */
@Input() readonly data: Data<T>[]; @Input() headData: Data<T>[];
@Input() request: RequestObj; @Input() request: RequestObj;
@Input() cardTitle: string; @Input() cardTitle: string;
@Input() template: { @Input() template: {
@@ -33,7 +33,7 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
ngOnInit(): void { ngOnInit(): void {
if (!this.template) this.template = {} if (!this.template) this.template = {}
this.data.forEach(dat => { this.headData.forEach(dat => {
if (!dat.action) return; if (!dat.action) return;
dat.action.forEach(act => { dat.action.forEach(act => {
if (!act.hover) { if (!act.hover) {
@@ -73,18 +73,14 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
} }
getValue(index: number, fieldValue: string) { getValue(index: number, fieldValue: string): string {
let str = `this.dataList.list[${index}].` + fieldValue; let value = this.dataList.list[index];
const regexp = /<|>|=|onload|$|{|}|《/
str = str.replace(regexp, '');
let value;
try { try {
// tslint:disable-next-line:no-eval for (const key of fieldValue.split('.')) value = value[key]
value = eval(str);
} catch (e) { } catch (e) {
value = null // ignore
} }
return (value != null) ? value : '————'; return (value != null) ? value.toString() : '————';
} }
getContext = (fieldValue: string, index: number) => { getContext = (fieldValue: string, index: number) => {

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

@@ -1,7 +1,7 @@
import {TemplateRef} from '@angular/core'; import {TemplateRef} from '@angular/core';
export class Data<T> { export class Data<T> {
fieldName: string; title: string;
fieldValue: string; fieldValue: string;
show: boolean = true; show: boolean = true;
primaryKey?: boolean = false; primaryKey?: boolean = false;