From dacb3a062954dd023e48ddc33b42d4543126accf Mon Sep 17 00:00:00 2001
From: You Haipeng <you.haipeng@zte.com.cn>
Date: Tue, 30 Jun 2020 14:39:29 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0searchDebounce=EF=BC=8C?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=E7=BB=99=E6=90=9C=E7=B4=A2=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=98=B2=E6=8A=96=E5=92=8C=E6=95=B2=E5=87=BB=E5=9B=9E=E8=BD=A6?=
 =?UTF-8?q?=E9=94=AE=E7=AB=8B=E5=88=BB=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/table/pageable/demo.component.html   |  6 ++
 src/app/demo/table/pageable/demo.component.ts |  2 +
 src/app/demo/table/pageable/demo.module.ts    |  3 +-
 .../component/pagination/pagination.html      |  4 +-
 src/jigsaw/component/pagination/pagination.ts | 55 +++++++++++++++++++
 5 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/app/demo/table/pageable/demo.component.html b/src/app/demo/table/pageable/demo.component.html
index f7a2817450..687d610b56 100644
--- a/src/app/demo/table/pageable/demo.component.html
+++ b/src/app/demo/table/pageable/demo.component.html
@@ -13,5 +13,11 @@
     [searchable]="true"
     [showQuickJumper]="true"
     (search)="onSearch($event)"
+    [searchDebounce]="searchDebounce[0]"
 ></jigsaw-pagination>
 <span>共{{pageable.pagingInfo.totalRecord}}条记录</span>
+<div  style="padding: 10px 0; line-height: 1.5">
+    设置搜索防抖时间： <j-button-bar [data]="['none', 1000, 3000]" [(selectedItems)]="searchDebounce" ></j-button-bar>
+    <p>分页的默认搜索是没有防抖功能的。searchDebounce属性会给搜索增加一个防抖功能，并增加enter回车立刻搜索。</p>
+</div>
+
diff --git a/src/app/demo/table/pageable/demo.component.ts b/src/app/demo/table/pageable/demo.component.ts
index bf2122b6c5..52f3e5be9f 100644
--- a/src/app/demo/table/pageable/demo.component.ts
+++ b/src/app/demo/table/pageable/demo.component.ts
@@ -44,6 +44,8 @@ export class TablePageableDemoComponent {
         this.pageable.filter(filter, context);
     }
 
+    searchDebounce = ['none'];
+
     // ====================================================================
     // ignore the following lines, they are not important to this demo
     // ====================================================================
diff --git a/src/app/demo/table/pageable/demo.module.ts b/src/app/demo/table/pageable/demo.module.ts
index e1a08a2ddd..f506e3e85c 100644
--- a/src/app/demo/table/pageable/demo.module.ts
+++ b/src/app/demo/table/pageable/demo.module.ts
@@ -3,9 +3,10 @@ import {JigsawTableModule} from "jigsaw/component/table/table";
 import {JigsawPaginationModule} from "jigsaw/component/pagination/pagination";
 import {TablePageableDemoComponent} from './demo.component';
 import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {JigsawButtonBarModule} from "jigsaw/component/list-and-tile/button-bar";
 
 @NgModule({
-    imports: [JigsawTableModule, JigsawPaginationModule, JigsawDemoDescriptionModule],
+    imports: [JigsawTableModule, JigsawPaginationModule, JigsawDemoDescriptionModule, JigsawButtonBarModule],
     declarations: [TablePageableDemoComponent],
     exports: [TablePageableDemoComponent]
 })
diff --git a/src/jigsaw/component/pagination/pagination.html b/src/jigsaw/component/pagination/pagination.html
index 3da05e7ef7..c9dd8e0154 100644
--- a/src/jigsaw/component/pagination/pagination.html
+++ b/src/jigsaw/component/pagination/pagination.html
@@ -1,7 +1,7 @@
 <ng-container [ngSwitch]="mode">
     <ng-container *ngSwitchDefault>
-        <jigsaw-input class="jigsaw-paging-search" *ngIf="searchable" width="160"
-                      [placeholder]="placeholder" (valueChange)="search.emit($event)">
+        <jigsaw-input class="jigsaw-paging-search" *ngIf="searchable" width="160" [(value)]="_$searchKey"
+                      [placeholder]="placeholder" (valueChange)="_$searchKeyChange($event)" (keydown.enter)="_$enterSearch($event)">
             <span jigsaw-prefix-icon class="fa fa-search"></span>
         </jigsaw-input>
 
diff --git a/src/jigsaw/component/pagination/pagination.ts b/src/jigsaw/component/pagination/pagination.ts
index ae4810b2ae..718872f1e1 100644
--- a/src/jigsaw/component/pagination/pagination.ts
+++ b/src/jigsaw/component/pagination/pagination.ts
@@ -143,11 +143,66 @@ export class JigsawPagination extends AbstractJigsawComponent implements OnInit,
     @Input() public mode: 'complex' | 'simple' = 'complex'; // 当为「small」时，是小尺寸分页
     @Input() public placeholder: string = '';
 
+    /**
+     * 设置了此属性会给搜索增加一个防抖功能，并增加enter回车立刻搜索
+     * 设为'none'、NaN、小于0，或者不设置则表示不设置防抖
+     */
+    @Input()
+    public searchDebounce: number | 'none' = NaN;
+
     @ViewChildren(forwardRef(() => JigsawPagingItem))
     private _pages: QueryList<JigsawPagingItem> = null;
 
     @ViewChildren(JigsawInput) inputs: QueryList<JigsawInput>;
 
+    /**
+     * @internal
+     */
+    public _$searchKeyChange($event) {
+        if (this._isValidSearchDebounce()) {
+            this._debounceSearch($event);
+        } else {
+            this.search.emit($event)
+        }
+    }
+
+    private _isValidSearchDebounce() {
+        return this.searchDebounce && this.searchDebounce != 'none' && !isNaN(this.searchDebounce) && Number(this.searchDebounce) > 0
+    }
+
+    /**
+     * @internal
+     */
+    public _$searchKey: string;
+
+    /**
+     * @internal
+     */
+    public _$enterSearch($event) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        if (this._isValidSearchDebounce()) {
+            this._clearSearchTimer();
+            this.search.emit(this._$searchKey);
+        }
+    }
+
+    private _searchTimer: number;
+
+    private _debounceSearch(key: string) {
+        this._clearSearchTimer();
+        this._searchTimer = this.callLater(() => {
+            this.search.emit(key);
+        }, this.searchDebounce)
+    }
+
+    private _clearSearchTimer() {
+        if (this._searchTimer) {
+            clearTimeout(this._searchTimer);
+            this._searchTimer = null;
+        }
+    }
+
     /*
      * 根据current设置page按钮的显示，上一页，下一页，上五页，下五页的显示
      * */