Merge pull request NG-ZORRO#4 from HhQr/develop

Develop
SubinY · Feb 3, 2018 · a2e2b26 · a2e2b26
2 parents e867a9d + b2ce33e
commit a2e2b26
Show file tree

Hide file tree

Showing 11 changed files with 264 additions and 25 deletions.
diff --git a/src/custom-components/shipper-select/shipper-select.component.ts b/src/custom-components/shipper-select/shipper-select.component.ts
@@ -29,7 +29,7 @@ export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
     template: `
     <nz-select 
         [style.width]="_width" 
-        [nzPlaceHolder]="placeHolder" 
+        [nzPlaceHolder]="placeholder" 
         [nzMode]="_nzMode"
         [nzFilter]="nzFilter"
         [nzAllowClear]="_allowClear"
@@ -75,7 +75,7 @@ export class ShipperSelectComponent implements ControlValueAccessor, OnInit {
     keyWordStream = new Subject<string>()
     keyWord$: any;
 
-    @Input() placeholder = "请选择品名";
+    @Input() placeholder = "请选择发货人";
     @Input() valueType = "";
 
     set value(v: string) {
@@ -99,7 +99,7 @@ export class ShipperSelectComponent implements ControlValueAccessor, OnInit {
         this._width = Array.from(v).includes("%") ? `${v}%` : isNaN(width) ? this._width : `${width}px`;
     }
 
-    @Input() set goodMode(v) {
+    @Input() set shipperMode(v) {
         this._nzMode = v;
         this._allowClear = v === "combobox" ? true : false;
     };

diff --git a/src/showcase/custom-demo/shipper-select/shipper-select-demo-basic.component.ts b/src/showcase/custom-demo/shipper-select/shipper-select-demo-basic.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from "../../../components/ng-zorro-antd.module";
+
+@Component({
+    selector: 'shipper-select-demo-basic',
+    template: `
+    <shipper-select [(ngModel)]="value"></shipper-select>
+    <button nz-button [nzType]="'primary'" (click)="handle()">获取发货人编号</button>
+  `,
+    styles: []
+})
+export class ShipperSelectDemoBasicComponent implements OnInit {
+    value: string = "";
+    constructor(private _message: NzMessageService) { }
+
+    ngOnInit() {
+    }
+
+    handle() {
+        this._message.info('发货人编号值为：'+this.value);
+    }
+
+}
diff --git a/src/showcase/custom-demo/shipper-select/shipper-select-demo-multiple.component.ts b/src/showcase/custom-demo/shipper-select/shipper-select-demo-multiple.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from "../../../components/ng-zorro-antd.module";
+
+@Component({
+    selector: 'shipper-select-demo-multiple',
+    template: `
+    <shipper-select [(ngModel)]="value" [shipperMode]="'multiple'"></shipper-select>
+    <button nz-button [nzType]="'primary'" (click)="handle()">获取发货人编号数组</button>
+  `,
+    styles: []
+})
+export class ShipperSelectDemoMultipleComponent implements OnInit {
+    value: any[] = [];
+    constructor(private _message: NzMessageService) { }
+
+    ngOnInit() {
+    }
+    handle() {
+        this._message.info("发货人编号数组为："+this.value);
+    }
+
+}
diff --git a/src/showcase/custom-demo/shipper-select/shipper-select-demo-template.component.ts b/src/showcase/custom-demo/shipper-select/shipper-select-demo-template.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from "../../../components/ng-zorro-antd.module";
+
+@Component({
+    selector: 'shipper-select-demo-template',
+    template: `
+     <shipper-select [(ngModel)]="value" [customTemplate]="content"  [valueType]="'object'">
+      <ng-template #content let-name="name" let-idBak="idBak">
+        <div class="wrap">
+          <span class="font-style border-right">{{name}}</span>
+          <span class="font-style">{{idBak}}</span>
+        </div>
+      </ng-template>
+    </shipper-select>
+    <button nz-button [nzType]="'primary'" (click)="handle()">获取发货人编号</button>
+  `,
+    styles: [`
+        .border-right{
+            border-right:1px solid #ECECEC;
+            padding-right: 10px;
+            margin-right: 10px; 
+        }
+    `]
+})
+export class ShipperSelectDemoTemplateComponent implements OnInit {
+    value: any;
+    constructor(private _message: NzMessageService) { }
+
+    ngOnInit() {
+    }
+    handle() {
+        this._message.info('获取发货人编号为:'+this.value);
+    }
+
+}
diff --git a/src/showcase/custom-demo/shipper-select/shipper-select-demo.component.html b/src/showcase/custom-demo/shipper-select/shipper-select-demo.component.html
@@ -0,0 +1,101 @@
+<article>
+    <section class="markdown">
+        <h1>shipper-select 发货人选择</h1>
+        <section class="markdown">
+            <p>使用nz-select组件封装发货人选择组件</p>
+            <h2 id="何时使用"><span>如何使用</span>
+                <a class="anchor">#</a>
+            </h2>
+            <p>输入发货人关键字，显示发货人</p>
+        </section>
+        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
+    </section>
+    <div nz-row [nzGutter]="8">
+        <div nz-col [nzSpan]="12">
+            <nz-code-box [nzTitle]="'基本使用'" id="shipper-select-demo-basic" [nzCode]="ShipperSelectDemoBasicCode">
+                <shipper-select-demo-basic demo></shipper-select-demo-basic>
+                <div intro>
+                    <p>基本使用。</p>
+                </div>
+            </nz-code-box>
+        </div>
+        <div nz-col [nzSpan]="12">
+            <nz-code-box [nzTitle]="'多选发货人'" id="shipper-select-demo-multiple" [nzCode]="ShipperSelectDemoMultipleComponent">
+                <shipper-select-demo-multiple demo></shipper-select-demo-multiple>
+                <div intro>
+                    <p>下拉框支持多选功能，并返回数组的形式</p>
+                </div>
+            </nz-code-box>
+        </div>
+        <div nz-col [nzSpan]="12">
+            <nz-code-box [nzTitle]="'自定义模板'" id="shipper-select-demo-multiple" [nzCode]="ShipperSelectDemoTemplateComponent">
+                <shipper-select-demo-template demo></shipper-select-demo-template>
+                <div intro>
+                    <p>使用[customTemplate]传入template模板，可以实现自定义下拉框样式及定制内容</p>
+                </div>
+            </nz-code-box>
+        </div>
+    </div>
+    <section class="markdown api-container">
+        <h2 id="API"><span>API</span>
+            <!-- <a class="anchor">#</a> -->
+        </h2>
+        <h3 id="Select props"><span>shipper-select</span>
+            <!-- <a class="anchor">#</a> -->
+        </h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>参数</th>
+                    <th>说明</th>
+                    <th>类型</th>
+                    <th>默认值</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>ngModel</td>
+                    <td>指定当前选中的条目，支持双向绑定</td>
+                    <td>
+                        Array（多选）/String/Object（单选）
+                    </td>
+                    <td>无</td>
+                </tr>
+                <tr>
+                    <td>placeholder</td>
+                    <td>输入框默认提示</td>
+                    <td>
+                        String
+                    </td>
+                    <td>请选择发货人</td>
+                </tr>
+                <tr>
+                    <td>shipperMode</td>
+                    <td>设置 Select 的模式,默认单选</td>
+                    <td>
+                        'multiple'
+                    </td>
+                    <td>-</td>
+                </tr>
+                <tr>
+                    <td>valueType</td>
+                    <td>单选模式下返回发货人值或者对象，默认字符串</td>
+                    <td>"object"</td>
+                    <td>-</td>
+                </tr>
+                <tr>
+                    <td>width</td>
+                    <td>输入框宽度，支持百分比和像素</td>
+                    <td>String | Number</td>
+                    <td>100%</td>
+                </tr>
+                <tr>
+                    <td>customTemplate</td>
+                    <td>支持自定义下拉选项，传入模板</td>
+                    <td>TemplateRef</td>
+                    <td>-</td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+</article>
diff --git a/src/showcase/custom-demo/shipper-select/shipper-select-demo.component.less b/src/showcase/custom-demo/shipper-select/shipper-select-demo.component.less
@@ -0,0 +1,3 @@
+[id^="shipper-select-demo-"] nz-select.ant-select{
+  margin: 0 8px 10px 0;
+}
diff --git a/src/showcase/custom-demo/shipper-select/shipper-select-demo.component.ts b/src/showcase/custom-demo/shipper-select/shipper-select-demo.component.ts
@@ -0,0 +1,14 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'shipper-select-demo',
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './shipper-select-demo.component.html',
+  styleUrls: ['./shipper-select-demo.component.less']
+})
+export class ShipperSelectDemoComponent {
+    ShipperSelectDemoBasicCode = require('!!raw-loader!./shipper-select-demo-basic.component');
+    ShipperSelectDemoMultipleComponent = require('!!raw-loader!./shipper-select-demo-multiple.component');
+    ShipperSelectDemoTemplateComponent = require('!!raw-loader!./shipper-select-demo-template.component');
+
+}
diff --git a/src/showcase/custom-demo/shipper-select/shipper-select-demo.module.ts b/src/showcase/custom-demo/shipper-select/shipper-select-demo.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { JsonpModule } from '@angular/http';
+
+import { NzCodeBoxModule } from '../../share/nz-codebox/nz-codebox.module';
+import { YztCustomModule } from '../../../custom-components/yzt-custom.module';
+import { ShipperSelectDemoComponent } from "./shipper-select-demo.component";
+import { ShipperSelectDemoRoutingModule } from "./shipper-select-demo.routing.module";
+import { ShipperSelectDemoBasicComponent } from "./shipper-select-demo-basic.component";
+import { ShipperSelectDemoMultipleComponent } from "./shipper-select-demo-multiple.component";
+import { ShipperSelectDemoTemplateComponent } from "./shipper-select-demo-template.component";
+
+
+
+@NgModule({
+    imports: [ShipperSelectDemoRoutingModule, CommonModule, NzCodeBoxModule, YztCustomModule, FormsModule, JsonpModule],
+    declarations: [ShipperSelectDemoComponent, ShipperSelectDemoBasicComponent, ShipperSelectDemoMultipleComponent, ShipperSelectDemoTemplateComponent]
+})
+export class ShipperSelectDemoModule { }
diff --git a/src/showcase/custom-demo/shipper-select/shipper-select-demo.routing.module.ts b/src/showcase/custom-demo/shipper-select/shipper-select-demo.routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ShipperSelectDemoComponent } from "./shipper-select-demo.component";
+
+@NgModule({
+  imports: [ RouterModule.forChild([
+    { path: '', component: ShipperSelectDemoComponent }
+  ]) ],
+  exports: [ RouterModule ]
+})
+export class ShipperSelectDemoRoutingModule { }
diff --git a/src/showcase/router.ts b/src/showcase/router.ts
@@ -48,6 +48,12 @@ export const ROUTER_LIST = {
           // 'loadChildren': './nz-demo-button/nz-demo-button.module#NzDemoButtonModule',
           'zh'          : '数据表格'
         },
+        {
+          'label'       : 'shipper-select',
+          'path'        : 'components/shipper-select',
+          // 'loadChildren': './nz-demo-button/nz-demo-button.module#NzDemoButtonModule',
+          'zh'          : '发货人选择'
+        },
       ]
     },
     {
@@ -578,6 +584,10 @@ export const DEMO_ROUTES = [
     'path'        : 'components/ui-grid',
     'loadChildren': './custom-demo/ui-grid/ui-grid-demo.module#UIGridDemoModule'
   },
+  {
+    'path'        : 'components/shipper-select',
+    'loadChildren': './custom-demo/shipper-select/shipper-select-demo.module#ShipperSelectDemoModule'
+  },
 ];
 
 // export const INTRO_ROUTES = ROUTER_LIST.intro.map(route => {