[新增] 新增穿梭（Transfer）组件，支持大数据量的呈现和选择

Author: rdkmaster

src/app/app.interceptor.ts

@@ -8,7 +8,7 @@ import {PagingInfo} from "../jigsaw/core/data/component-data";
 @Injectable()
 export class AjaxInterceptor implements HttpInterceptor {
 
-    private static _usingRealRDK: boolean = false;
+    private static _usingRealRDK: boolean = true;
     private static _processors: any[] = [];
 
     public static registerProcessor(urlPattern: RegExp | string, processor: (req: HttpRequest<any>) => any, context?: any) {
@@ -49,9 +49,12 @@ export class AjaxInterceptor implements HttpInterceptor {
     dealServerSidePagingRequest(req: HttpRequest<any>): Observable<HttpEvent<any>> {
         const params = req.method.toLowerCase() == 'post' ? 'body' : 'params';
         const service = this.getParamValue(req, params, 'service');
-        const paging = this.getParamValue(req, params, 'paging') ? JSON.parse(this.getParamValue(req, params, 'paging')) : null;
-        const filter = this.getParamValue(req, params, 'filter') ? JSON.parse(this.getParamValue(req, params, 'filter')) : null;
-        const sort = this.getParamValue(req, params, 'sort') ? JSON.parse(this.getParamValue(req, params, 'sort')) : null;
+        let paging = this.getParamValue(req, params, 'paging') ? this.getParamValue(req, params, 'paging') : null;
+        paging = typeof paging === 'string' ? JSON.stringify(paging) : paging;
+        let filter = this.getParamValue(req, params, 'filter') ? this.getParamValue(req, params, 'filter') : null;
+        filter = typeof filter === 'string' ? JSON.stringify(filter) : filter;
+        let sort = this.getParamValue(req, params, 'sort') ? this.getParamValue(req, params, 'sort') : null;
+        sort = typeof sort === 'string' ? JSON.stringify(sort) : sort;
         return PageableData.get({service, paging, filter, sort});
     }
 
@@ -176,7 +179,7 @@ class PageableData {
     }
 
     private static _filter(dataTable, filter) {
-        return filter.hasOwnProperty('rawFunction') ?
+        return filter.hasOwnProperty('rawFunction') && !!filter.rawFunction ?
             this._filterWithFunction(dataTable.data, filter.rawFunction, filter.context) :
             this._filterWithKeyword(dataTable.data, filter.key, filter.field, dataTable.field);
     }
@@ -222,7 +225,7 @@ class PageableData {
     private static _filterWithFunction(data, rawFunction, context) {
         let func;
         try {
-            func = eval('(' + rawFunction.replace(/\b_this\b/g, 'this') + ')');
+            func = eval('(' + rawFunction + ')');
         } catch (e) {
             console.error('eval raw filter function error, detail: ' + e.message);
             return data;

src/app/demo-list.component.ts

@@ -47,6 +47,7 @@ import {routerConfig as treeConfig} from "./demo/tree/demo-set.module";
 import {routerConfig as trustedHtmlConfig} from "./demo/trusted-html/demo-set.module";
 import {routerConfig as uploadConfig} from "./demo/upload/demo-set.module";
 import {routerConfig as iconConfig} from "./demo/icon/demo-set.module";
+import {routerConfig as transferConfig} from "./demo/transfer/demo-set.module";
 import {routerConfig} from "./router-config";
 
 @Component({
@@ -140,6 +141,7 @@ export class DemoListManager {
         this._addRouterConfig(routerConfig, 'trusted-html', trustedHtmlConfig);
         this._addRouterConfig(routerConfig, 'upload', uploadConfig);
         this._addRouterConfig(routerConfig, 'icon', iconConfig);
+        this._addRouterConfig(routerConfig, 'transfer', transferConfig);
     }
 
     private static _addRouterConfig(routerConfig: any[], path: string, childConfig: any[]) {

src/app/demo/transfer/basic/demo.component.html

@@ -0,0 +1,20 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+
+<div class="live-demo-wrap">
+    <h2>Transfer</h2>
+    <div class="demo-1 live-demo">
+        <h3>普通数据</h3>
+        <j-transfer width="100%" height="500" [data]="data" labelField="zhName" subLabelField="shortName"
+                    [searchable]="true" (selectedItemsChange)="handleSelectChange($event)"
+                    [selectedItems]="selectedCountries"></j-transfer>
+        <p class="message">选择的地区：{{selectedCountriesStr}}</p>
+    </div>
+</div>
+
+
+

src/app/demo/transfer/basic/demo.component.ts

@@ -0,0 +1,37 @@
+import {Component} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {ArrayCollection, LocalPageableArray} from "jigsaw/core/data/array-collection";
+import {TableData} from "jigsaw/core/data/table-data";
+
+@Component({
+    templateUrl: './demo.component.html'
+})
+export class TransferArrayDemoComponent {
+    constructor(private _http: HttpClient) {
+        this.data = new ArrayCollection();
+        this.data.http = _http;
+        this.data.fromAjax('mock-data/countries');
+        this.data.dataReviser = (td: TableData) => TableData.toArray(td);
+
+        this.selectedCountries = new ArrayCollection();
+        this.selectedCountries.http = _http;
+        this.selectedCountries.fromAjax('mock-data/countries');
+        this.selectedCountries.dataReviser = (td: TableData) => TableData.toArray(td).slice(0,5);
+    }
+
+    data: ArrayCollection<any>;
+    selectedCountries: ArrayCollection<any>;
+    selectedCountriesStr: string;
+
+    handleSelectChange($event) {
+        this.selectedCountriesStr = $event.map(item => item.zhName).join(',');
+    }
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '';
+    description: string = '';
+
+}
+

src/app/demo/transfer/basic/demo.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {TransferArrayDemoComponent} from "./demo.component";
+import {JigsawTransferModule} from "jigsaw/component/transfer/transfer";
+
+@NgModule({
+    declarations: [TransferArrayDemoComponent],
+    exports: [ TransferArrayDemoComponent ],
+    imports: [JigsawDemoDescriptionModule, JigsawTransferModule]
+})
+export class TransferArrayDemoModule{
+
+}

src/app/demo/transfer/demo-set.module.ts

@@ -0,0 +1,37 @@
+import {NgModule} from "@angular/core";
+import {RouterModule} from "@angular/router";
+import {TransferArrayDemoComponent} from "./basic/demo.component";
+import {TransferArrayDemoModule} from "./basic/demo.module";
+import {TransferLocalPageableArrayComponent} from "./local-pageable-array/demo.component";
+import {TransferLocalPageableArrayDemoModule} from "./local-pageable-array/demo.module";
+import {TransferPageableArrayComponent} from "./pageable-array/demo.component";
+import {TransferPageableArrayDemoModule} from "./pageable-array/demo.module";
+import {TransferItemDisabledDemoComponent} from "./item-disabled/demo.component";
+import {TransferItemDisabledDemoModule} from "./item-disabled/demo.module";
+
+export const routerConfig = [
+    {
+        path: 'basic', component: TransferArrayDemoComponent
+    },
+    {
+        path: 'local-pageable-array', component: TransferLocalPageableArrayComponent
+    },
+    {
+        path: 'pageable-array', component: TransferPageableArrayComponent
+    },
+    {
+        path: 'item-disabled', component: TransferItemDisabledDemoComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routerConfig),
+        TransferArrayDemoModule,
+        TransferLocalPageableArrayDemoModule,
+        TransferPageableArrayDemoModule,
+        TransferItemDisabledDemoModule
+    ]
+})
+export class TransferDemoModule {
+}

src/app/demo/transfer/item-disabled/demo.component.html

@@ -0,0 +1,17 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+
+<div class="live-demo-wrap">
+    <h2>Transfer</h2>
+    <div class="demo-1 live-demo">
+        <h3>随机设置不可操作条目</h3>
+        <j-transfer width="100%" height="500" [data]="data" labelField="zhName" subLabelField="enName"></j-transfer>
+    </div>
+</div>
+
+
+

src/app/demo/transfer/item-disabled/demo.component.ts

@@ -0,0 +1,31 @@
+import {Component} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {ArrayCollection} from "jigsaw/core/data/array-collection";
+import {TableData} from "jigsaw/core/data/table-data";
+
+@Component({
+    templateUrl: './demo.component.html'
+})
+export class TransferItemDisabledDemoComponent {
+    constructor(private _http: HttpClient) {
+        this.data = new ArrayCollection();
+        this.data.http = _http;
+        this.data.fromAjax('mock-data/countries');
+        this.data.dataReviser = (td: TableData) => {
+            return TableData.toArray(td).map(item => {
+                item.disabled = Math.random() > 0.8;
+                return item;
+            })
+        }
+    }
+
+    data: ArrayCollection<any>;
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '';
+    description: string = '';
+
+}
+

src/app/demo/transfer/item-disabled/demo.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {JigsawTransferModule} from "jigsaw/component/transfer/transfer";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {TransferItemDisabledDemoComponent} from "./demo.component";
+
+@NgModule({
+    declarations: [TransferItemDisabledDemoComponent],
+    exports: [ TransferItemDisabledDemoComponent ],
+    imports: [JigsawDemoDescriptionModule, JigsawTransferModule]
+})
+export class TransferItemDisabledDemoModule{
+
+}

src/app/demo/transfer/local-pageable-array/demo.component.html

@@ -0,0 +1,20 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+
+<div class="live-demo-wrap">
+    <h2>Transfer</h2>
+    <div class="demo-1 live-demo">
+        <h3>本地分页数据</h3>
+        <j-transfer width="100%" height="500" [data]="data" labelField="zhName" subLabelField="shortName"
+                    [searchable]="true" (selectedItemsChange)="handleSelectChange($event)"
+                    [selectedItems]="selectedCountries"></j-transfer>
+        <p class="message">选择的地区：{{selectedCountriesStr}}</p>
+    </div>
+</div>
+
+
+