公共组件 #18
@@ -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>
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user