From e1efc88103a57244f6642d6ee075e5dbbece9e8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= <zh56462271@qq.com>
Date: Thu, 2 Jul 2020 13:15:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=94=A8=E5=8F=AF=E7=BC=96=E8=BE=91ta?=
 =?UTF-8?q?g=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editable-tag/editable-tag.component.ts    | 71 +++++++++++++++++++
 .../editable-tag/editable-tag.module.ts       | 22 ++++++
 2 files changed, 93 insertions(+)
 create mode 100644 src/app/view/admin/components/editable-tag/editable-tag.component.ts
 create mode 100644 src/app/view/admin/components/editable-tag/editable-tag.module.ts

diff --git a/src/app/view/admin/components/editable-tag/editable-tag.component.ts b/src/app/view/admin/components/editable-tag/editable-tag.component.ts
new file mode 100644
index 0000000..89d185f
--- /dev/null
+++ b/src/app/view/admin/components/editable-tag/editable-tag.component.ts
@@ -0,0 +1,71 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+
+@Component({
+    selector: 'editable-tag',
+    template: `
+        <nz-tag *ngIf="!inputVisible" class="editable-tag" title="双击进入编辑" [nzColor]="color" nzNoAnimation (click)="showInput(true)">
+            <ng-content></ng-content>
+        </nz-tag>
+        <input #inputElement
+               nz-input
+               nzSize="small"
+               *ngIf="inputVisible"
+               type="text"
+               [(ngModel)]="inputValue"
+               style="width: 78px;"
+               (blur)="handleInputConfirm()"
+               (keydown.enter)="handleInputConfirm()"
+        />
+        <i nz-icon nzType="edit" nzTheme="fill" style="cursor: pointer" (click)="showInput(false)"></i>
+    `,
+    styles: [`.editable-tag {
+        background: rgb(255, 255, 255);
+        border-style: none;
+    }`]
+})
+export class EditableTagComponent implements OnInit {
+
+    constructor() {
+    }
+
+    inputVisible = false;
+    inputValue = '';
+    @ViewChild('inputElement', {static: false}) inputElement?: ElementRef;
+
+    @Output() valueChange = new EventEmitter<string>();
+    @Input() color: string;
+    private doubleClickInfo = {
+        date: null,
+    };
+
+    ngOnInit(): void {
+    }
+
+    showInput(doubleClick: boolean): void {
+        if (doubleClick) {
+            if (!this.doubleClickInfo.date) {
+                this.doubleClickInfo.date = new Date().getTime();
+                return
+            }
+            if (new Date().getTime() - this.doubleClickInfo.date < 200) {
+                this.inputVisible = true;
+                setTimeout(() => {
+                    this.inputElement?.nativeElement.focus();
+                }, 10);
+            }
+            this.doubleClickInfo.date = new Date().getTime();
+        } else {
+            this.inputVisible = true;
+            setTimeout(() => {
+                this.inputElement?.nativeElement.focus();
+            }, 10);
+        }
+    }
+
+    handleInputConfirm(): void {
+        this.valueChange.emit(this.inputValue)
+        this.inputValue = '';
+        this.inputVisible = false;
+    }
+
+}
diff --git a/src/app/view/admin/components/editable-tag/editable-tag.module.ts b/src/app/view/admin/components/editable-tag/editable-tag.module.ts
new file mode 100644
index 0000000..e3cd5cd
--- /dev/null
+++ b/src/app/view/admin/components/editable-tag/editable-tag.module.ts
@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {EditableTagComponent} from './editable-tag.component';
+import {NzIconModule, NzInputModule, NzTagModule} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
+
+
+@NgModule({
+    declarations: [EditableTagComponent],
+    exports: [
+        EditableTagComponent
+    ],
+    imports: [
+        CommonModule,
+        NzTagModule,
+        FormsModule,
+        NzInputModule,
+        NzIconModule
+    ]
+})
+export class EditableTagModule {
+}