公共组件 #18

Merged
xiaohai2271 merged 45 commits from dev into master 2020-07-11 10:41:50 +08:00
2 changed files with 43 additions and 16 deletions
Showing only changes of commit efa1f0bee2 - Show all commits

View File

@@ -85,15 +85,17 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
getContext = (fieldValue: string, index: number) => { getContext = (fieldValue: string, index: number) => {
const valueData = this.getValue(index, fieldValue); const valueData = this.getValue(index, fieldValue);
let context: { value: string, originValue?: string }; let context: { value: string, originValue?: string, data: T };
if (this.template[fieldValue].param) { if (this.template[fieldValue].param) {
context = { context = {
value: this.template[fieldValue].param[valueData], value: this.template[fieldValue].param[valueData],
originValue: valueData originValue: valueData,
data: this.dataList.list[index]
} }
} else { } else {
context = { context = {
value: valueData value: valueData,
data: this.dataList.list[index]
} }
} }
return context; return context;

View File

@@ -1,9 +1,19 @@
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; import {
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
ViewChild
} from '@angular/core';
@Component({ @Component({
selector: 'editable-tag', selector: 'editable-tag',
template: ` template: `
<nz-tag *ngIf="!inputVisible" class="editable-tag" title="双击进入编辑" [nzColor]="color" nzNoAnimation <nz-tag *ngIf="!inputVisible" title="双击进入编辑" [nzColor]="color" nzNoAnimation
(click)="showInput(true)" (click)="showInput(true)"
[style.border-style]="showBorder ? 'solid': 'none'"> [style.border-style]="showBorder ? 'solid': 'none'">
{{text}} {{text}}
@@ -23,14 +33,14 @@ import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} f
style="cursor: pointer;margin-right: 8px;" style="cursor: pointer;margin-right: 8px;"
(click)="showInput(false)"> (click)="showInput(false)">
</i> </i>
`, `
styles: [`.editable-tag {
background: rgb(255, 255, 255);
}`]
}) })
export class EditableTagComponent implements OnInit { export class EditableTagComponent implements OnInit, OnChanges {
private static instanceArray: EditableTagComponent[] = []
constructor() { constructor() {
EditableTagComponent.instanceArray.push(this);
} }
inputVisible = false; inputVisible = false;
@@ -42,7 +52,9 @@ export class EditableTagComponent implements OnInit {
@Input() showEditIcon: boolean; @Input() showEditIcon: boolean;
@Input() showBorder: boolean; @Input() showBorder: boolean;
@Input() text: string; @Input() text: string;
@Input() key: any;
private tmpKey: any;
private doubleClickInfo = { private doubleClickInfo = {
date: null, date: null,
}; };
@@ -56,6 +68,13 @@ export class EditableTagComponent implements OnInit {
} }
} }
ngOnChanges(changes: SimpleChanges): void {
if (changes.key && !changes.key.isFirstChange()) {
this.key = changes.key.currentValue;
this.getFocus(this.tmpKey);
}
}
showInput(doubleClick: boolean): void { showInput(doubleClick: boolean): void {
this.inputValue = this.text; this.inputValue = this.text;
if (doubleClick) { if (doubleClick) {
@@ -65,19 +84,25 @@ export class EditableTagComponent implements OnInit {
} }
if (new Date().getTime() - this.doubleClickInfo.date < 200) { if (new Date().getTime() - this.doubleClickInfo.date < 200) {
this.inputVisible = true; this.inputVisible = true;
setTimeout(() => { setTimeout(() => this.inputElement?.nativeElement.focus(), 10);
this.inputElement?.nativeElement.focus();
}, 10);
} }
this.doubleClickInfo.date = new Date().getTime(); this.doubleClickInfo.date = new Date().getTime();
} else { } else {
this.inputVisible = true; this.inputVisible = true;
setTimeout(() => { setTimeout(() => this.inputElement?.nativeElement.focus(), 10);
this.inputElement?.nativeElement.focus();
}, 10);
} }
} }
getFocus(key: any) {
this.tmpKey = key;
EditableTagComponent.instanceArray.forEach(tag => {
if (tag.key === this.tmpKey) {
tag.showInput(false);
}
})
}
handleInputConfirm(): void { handleInputConfirm(): void {
this.valueChange.emit({ this.valueChange.emit({
value: this.inputValue, value: this.inputValue,