feat(abc:simplate-table): add reset method

ng-alain · Jan 24, 2018 · 49cba4e · 49cba4e
1 parent e11e2d8
commit 49cba4e
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 36 deletions.
diff --git a/src/core/abc/simple-table/demo/form.md b/src/core/abc/simple-table/demo/form.md
@@ -0,0 +1,37 @@
+---
+order: 3
+title: 搜索表单
+---
+
+配合 `load()` & `reset()` 完成搜索表单。
+
+```ts
+import { Component } from '@angular/core';
+import { SimpleTableColumn } from '@delon/abc';
+
+@Component({
+    selector: 'app-demo',
+    template: `
+    <div class="mb-md">
+        <nz-input [(ngModel)]="params.name" name="name" nzPlaceHolder="请输入姓名" style="width: 100px"></nz-input>
+        <button nz-button (click)="st.load(1)" [nzType]="'primary'">搜索</button>
+        <button nz-button (click)="params = {}; st.reset()">重置</button>
+    </div>
+    <simple-table #st [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
+                [resReName]="{list: 'results' }"></simple-table>
+    `
+})
+export class DemoComponent {
+    url = `https://randomuser.me/api/?results=3`;
+    params: any = { name: 'asdf' };
+    // mock
+    total = 100;
+    columns: SimpleTableColumn[] = [
+        { title: '编号', index: 'id.value' },
+        { title: '头像', type: 'img', width: '50px', index: 'picture.thumbnail' },
+        { title: '邮箱', index: 'email' },
+        { title: '电话', index: 'phone' },
+        { title: '注册时间', type: 'date', index: 'registered' }
+    ];
+}
+```
diff --git a/src/core/abc/simple-table/index.md b/src/core/abc/simple-table/index.md
@@ -198,7 +198,10 @@ modalParamsName | 指定模态框目标组件的接收参数名 | `string` | rec
 
 ## 刷新表格
 
+一般用于表单搜索时。
+
 ```html
 <simple-table #st></simple-table>
 <button (click)="st.load()"></button>
+<button (click)="st.reset()">重置</button>
 ```
diff --git a/src/core/abc/simple-table/interface.ts b/src/core/abc/simple-table/interface.ts
@@ -298,6 +298,11 @@ export interface SimpleTableChange {
     total: number;
 }
 
+export interface ResReNameType {
+    total?: string | string[];
+    list?: string | string[];
+}
+
 export interface STExportOptions {
     /** @private */
     _d: any[];

diff --git a/src/core/abc/simple-table/simple-table.component.html b/src/core/abc/simple-table/simple-table.component.html
@@ -50,7 +50,7 @@
                         </ul>
                         <ul nz-menu *ngIf="!c.filterMultiple">
                             <li nz-menu-item *ngFor="let filter of c.filters">
-                                <label nz-radio-extra [ngModel]="filter.checked" (ngModelChange)="filterRadio(c, filter, $event)">
+                                <label nz-radio [ngModel]="filter.checked" (ngModelChange)="filterRadio(c, filter, $event)">
                                     <span>{{filter.text}}</span>
                                 </label>
                             </li>

diff --git a/src/core/abc/simple-table/simple-table.component.ts b/src/core/abc/simple-table/simple-table.component.ts
@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs/Subscription';
 import { tap, map } from 'rxjs/operators';
 import { of } from 'rxjs/observable/of';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { SimpleTableColumn, SimpleTableChange, CompareFn, SimpleTableSelection, SimpleTableFilter, SimpleTableData, SimpleTableButton, STExportOptions } from './interface';
+import { SimpleTableColumn, SimpleTableChange, CompareFn, SimpleTableSelection, SimpleTableFilter, SimpleTableData, SimpleTableButton, STExportOptions, ResReNameType } from './interface';
 import { SimpleTableConfig } from './simple-table.config';
 import { deepGet, deepCopy } from '../utils/utils';
 import { SimpleTableRowDirective } from './simple-table-row.directive';
@@ -34,6 +34,7 @@ export class SimpleTableComponent implements OnInit, OnChanges, AfterViewInit, O
     _sortIndex: number;
     _footer = false;
     _columns: SimpleTableColumn[] = [];
+    _resRN: ResReNameType = { total: ['total'], list: ['list'] };
 
     // region: fields
 
@@ -66,7 +67,7 @@ export class SimpleTableComponent implements OnInit, OnChanges, AfterViewInit, O
      * 重命名返回参数 `total`、`list`
      * - `{ total: 'Total' }` => Total 会被当作 `total`
      */
-    @Input() resReName: { total?: string | string[], list?: string | string[] } = { total: ['total'], list: ['list'] };
+    @Input() resReName: ResReNameType;
     /** 列描述  */
     @Input() columns: SimpleTableColumn[] = [];
     /** 每页数量，当设置为 `0` 表示不分页，默认：`10` */
@@ -189,6 +190,7 @@ export class SimpleTableComponent implements OnInit, OnChanges, AfterViewInit, O
         private yn: YNPipe
     ) {
         Object.assign(this, deepCopy(defConfig));
+        this.updateResName();
     }
 
     // region: data
@@ -202,19 +204,19 @@ export class SimpleTableComponent implements OnInit, OnChanges, AfterViewInit, O
             body: this.reqBody,
             headers: this.reqHeaders
         }).pipe(map((res: any) => {
-            const ret = deepGet(res, this.resReName.list as string[], null);
+            const ret = deepGet(res, this._resRN.list as string[], null);
             if (typeof ret === 'undefined') {
-                console.warn(`results muse contain '${(this.resReName.list as string[]).join('.')}' attribute.`);
+                console.warn(`results muse contain '${(this._resRN.list as string[]).join('.')}' attribute.`);
                 return;
             }
             if (!Array.isArray(ret)) {
-                console.warn(`'${(this.resReName.list as string[]).join('.')}' muse be array type.`);
+                console.warn(`'${(this._resRN.list as string[]).join('.')}' muse be array type.`);
                 return;
             }
             // total
-            const retTotal = this.resReName.total && deepGet(res, this.resReName.total as string[], null);
+            const retTotal = this._resRN.total && deepGet(res, this._resRN.total as string[], null);
             if (typeof retTotal === 'undefined') {
-                if (this.resReName.total) console.warn(`results muse contain '${(this.resReName.total as string[]).join('.')}' attribute.`);
+                if (this._resRN.total) console.warn(`results muse contain '${(this._resRN.total as string[]).join('.')}' attribute.`);
             } else {
                 this.total = +retTotal;
             }
@@ -227,6 +229,11 @@ export class SimpleTableComponent implements OnInit, OnChanges, AfterViewInit, O
         this._change('pi');
     }
 
+    reset() {
+        this.extraParams = null;
+        this.load(1);
+    }
+
     _change(type: 'pi' | 'ps') {
         this._genAjax();
         this._genData();
@@ -548,12 +555,18 @@ export class SimpleTableComponent implements OnInit, OnChanges, AfterViewInit, O
         if (col) col.__render = row.templateRef;
     }
 
-    private updateStatus() {
-        if (this.data && this.url) throw new Error(`data & url property muse be either-or`);
+    private setClass() {
+        this._classMap.forEach(cls => this.renderer.removeClass(this.el.nativeElement, cls));
 
-        this.setClass();
+        this._classMap = [];
+        if (this.pagePlacement)
+            this._classMap.push('page-' + this.pagePlacement);
+
+        this._classMap.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls));
+    }
 
-        // columns
+    private updateColumns() {
+        this._columns = [];
         if (!this.columns || this.columns.length === 0) throw new Error(`the columns property muse be define!`);
         if (this._columns.length === 0) {
             let checkboxCount = 0;
@@ -650,43 +663,39 @@ export class SimpleTableComponent implements OnInit, OnChanges, AfterViewInit, O
             if (radioCount > 1) throw new Error(`just only one column radio`);
             this._sortMap = sortMap;
         }
-        // reqReName
-        if (this.reqReName) {
-        }
-        // resReName
-        if (this.resReName) {
-            if (this.resReName.list)
-                if (!Array.isArray(this.resReName.list)) this.resReName.list = this.resReName.list.split('.');
+    }
+
+    private updateResName() {
+        let ret: ResReNameType = {};
+        const cur = this.resReName;
+        if (cur) {
+            if (cur.list)
+                if (!Array.isArray(cur.list)) ret.list = cur.list.split('.');
             else
-                this.resReName.list = ['list'];
+                ret.list = ['list'];
 
-            if (this.resReName.total)
-                if (!Array.isArray(this.resReName.total)) this.resReName.total = this.resReName.total.split('.');
+            if (cur.total)
+                if (!Array.isArray(cur.total)) ret.total = cur.total.split('.');
             else
-                this.resReName.total = ['total'];
+                ret.total = ['total'];
         } else {
-            this.resReName = { total: ['total'], list: ['list'] };
+            ret = { total: ['total'], list: ['list'] };
         }
-    }
-
-    private setClass() {
-        this._classMap.forEach(cls => this.renderer.removeClass(this.el.nativeElement, cls));
-
-        this._classMap = [];
-        if (this.pagePlacement)
-            this._classMap.push('page-' + this.pagePlacement);
-
-        this._classMap.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls));
+        this._resRN = ret;
     }
 
     ngOnChanges(changes: { [P in keyof this]?: SimpleChange } & SimpleChanges): void {
-        if (changes.columns) this._columns = [];
 
-        this.updateStatus();
+        if (this.data && this.url) throw new Error(`data & url property muse be either-or`);
+
+        if (changes.columns) this.updateColumns();
+        if (changes.resReName) this.updateResName();
 
         if (changes.data || changes.url) {
             this.processData();
         }
+
+        this.setClass();
     }
 
     ngOnDestroy(): void {