Merge pull request NG-ZORRO#7 from HhQr/master

开单网点
SubinY · Mar 1, 2018 · ee52146 · ee52146
2 parents 38c1b91 + 58fbd1b
commit ee52146
Show file tree

Hide file tree

Showing 10 changed files with 408 additions and 1 deletion.
diff --git a/src/custom-components/department-select/departement-select.component.ts b/src/custom-components/department-select/departement-select.component.ts
@@ -0,0 +1,220 @@
+import { Component, OnInit, NgModule, ViewChild, TemplateRef, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { UISelectBoxModule } from '../select-box/select-box.component';
+import { Subject } from 'rxjs';
+import { API } from '../services/api';
+import { NgZorroAntdModule } from '../../components/ng-zorro-antd.module';
+
+export interface Department {
+    compayId: string;
+    compayName: string; 
+    departments?:any;
+    disabled?: boolean;
+}
+export interface DomOpt {
+    code: string;
+    fullName:string;
+    id: string;
+    name: string;
+    remark: string;
+}
+
+export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DepartmentSelectComponent),
+    multi: true
+};
+@Component({
+  selector: 'yzt-department',
+  template: `
+    <div class="department-select">
+    <nz-select 
+        class="department-nz-select"
+        [style.width]="_width" 
+        [nzPlaceHolder]="placeholder"
+        [nzMode]="_nzMode"
+        [nzFilter]="_filter"
+        [nzAllowClear]="_allowClear"
+        (nzSearchChange)="yztSearchChange($event)"
+        [(ngModel)]="value">
+        <nz-option #domOpt *ngFor="let option of options;let i=$index" [nzDisabled]='true' nzValue='_parent_{{i}}'>
+            <ng-template #nzOptionTemplate>
+                {{option.compayName}}
+            </ng-template>
+            <nz-option *ngFor="let obj of option.departments" [nzLabel]="obj.name" [nzValue]="obj">
+                <ng-template #nzOptionTemplate>
+                    {{obj.name}}
+                </ng-template>
+            </nz-option>
+        </nz-option>
+    </nz-select>
+    </div>`,
+  styles: [`
+    .department-select{
+        position: relative;
+    }
+    .close-icon {
+        opacity: 0;
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        margin-top: -10px;
+    }
+    .close-icon:hover {
+        opacity: 1;
+    }
+    .department-nz-select:hover +.close-icon {
+        opacity: 1;
+    }
+  `],
+  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
+})
+export class DepartmentSelectComponent implements ControlValueAccessor,OnInit {
+    @ViewChild("domOpt") domOpt: DomOpt;
+    private onTouchedCallback: () => () => {};
+    private onChangeCallback: (_: any) => () => {};
+
+    options: Array<Department> = [];
+    // 单选的时候传字符串，多选传数组
+    _value: string;
+    _width = "100%";
+    _allowClear = true;
+    _nzMode = "combobox";
+    // 下拉过滤含关键字选项，false为不过滤
+    _filter = false;
+    currentText = '';
+    canQuery = true;
+    keyWordStream = new Subject<string>()
+    keyWord$: any;
+
+    @Input() placeholder = "请输入网点";
+    // 需要获取的值类型
+    @Input() valueType = "object";
+
+    // 设置属性，并触发监听器
+    set value(v: any) {
+        if (typeof v === 'string' && v.trim() === '' || !v)
+            this.queryData('', []);
+        this._value = v;
+        // 双向绑定获取对象
+        if (this.valueType === "object") {
+            this.onChangeCallback(v);
+        } else {
+            let compayName = v.name || v;
+            let compayId = v.id || v;
+            this.valueType === "id" ? this.onChangeCallback(compayId) : this.onChangeCallback(compayName);
+        }
+    }
+
+    get value(): any {
+        return this._value;
+    };
+
+    @Input() set width(v: any) {
+        const width = parseInt(v);
+        this._width = Array.from(v).includes("%") ? `${v}%` : isNaN(width) ? this._width : `${width}px`;
+    }
+
+    @Output() openChange: EventEmitter<any> = new EventEmitter();
+    @Output() outOptions: EventEmitter<any> = new EventEmitter();
+
+    constructor(private api: API) {
+    }
+
+    ngOnInit() {
+        // 限流
+        this.keyWord$ = this.keyWordStream
+            .debounceTime(250)
+            .subscribe(word => {
+                this.queryData(word, [])
+            });
+
+    }
+
+    ngOnDestroy() {
+        this.keyWord$.unsubscribe()
+    }
+
+    yztSearchChange(event) {
+        this.canQuery = true;
+        this.currentText = event;
+        this.keyWordStream.next(event);
+    }
+
+    // 写入值
+    writeValue(value: any) {
+        if (value !== this._value) {
+            this._value = value;
+        }
+    }
+    // 注册变化处理事件
+    registerOnChange(fn: any) {
+        this.onChangeCallback = fn;
+    }
+    // 注册触摸事件
+    registerOnTouched(fn: any) {
+        this.onTouchedCallback = fn;
+    }
+    /**
+     * 查询数据
+     * @param $event
+     */
+    queryData(searchText?: string, options?: Array<Department>) {
+        if (!this.canQuery) return;
+        let qryParams = {
+            name: searchText
+        };
+        let page = {
+            first: 0,
+            rows: 9999
+        };
+
+        this.api.call("CommonController.findCompanyDepartment",page, qryParams).ok(json => {
+            const result = json.result || [];
+            const dataList = result.content || [];
+            this.options = [];
+            for (let company of dataList) {
+
+                if (!company.compayName) {
+                    continue;
+                }
+
+                let obj = {
+                    "compayId": company.compayId,
+                    "compayName": company.compayName,
+                    "departments": company.departments
+                };
+                this.options.push(obj);
+            }
+            this.outOptions.emit(this.options);
+            if (!this.options.length) {
+                const lastItem = new Array<Department>({ compayId: "empty", compayName: "没有更多选项！", disabled: true });
+                this.options = options.concat(lastItem);
+                this.canQuery = false;
+                return;
+            }
+        }).fail(err => {
+            if (!this.options.length) {
+                const lastItem = new Array<Department>({ compayId: "empty", compayName: "没有更多选项！", disabled: true });
+                this.options = options.concat(lastItem);
+                this.canQuery = false;
+                return;
+            }
+            throw new Error(err);
+        });
+    }
+
+}
+@NgModule({
+    declarations: [
+        DepartmentSelectComponent
+    ],
+    exports: [DepartmentSelectComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        NgZorroAntdModule
+    ]
+})
+export class DepartmentSelectModule { }
diff --git a/src/custom-components/yzt-custom.module.ts b/src/custom-components/yzt-custom.module.ts
@@ -27,6 +27,7 @@ import { CneeSelectModule } from "./cnee-select/cnee-select.component";
 import { MasterSelectModule } from "./master-select/master-select.component";
 import { AreaSelectModule } from './area-select/area-select.component';
 import { AbnormalSelectModule } from './abnormal-select/abnormal-select.component';
+import { DepartmentSelectModule } from './department-select/departement-select.component';
 // ---------------------------------------------------------
 // | Exports
 // ---------------------------------------------------------
@@ -64,7 +65,8 @@ export { NzRootConfig } from '../components/ng-zorro-antd.module';
     CneeSelectModule,
     MasterSelectModule,
     AbnormalSelectModule,
-    AreaSelectModule
+    AreaSelectModule,
+    DepartmentSelectModule
   ]
 })
 export class YztCustomModule {

diff --git a/src/showcase/custom-demo/department-select/department-select-demo-basic.component.ts b/src/showcase/custom-demo/department-select/department-select-demo-basic.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from '../../../components/ng-zorro-antd.module';
+
+@Component({
+  selector: 'department-select-demo-basic',
+  template: `
+  <yzt-department [(ngModel)]="value"></yzt-department>
+  <button nz-button [nzType]="'primary'" (click)="handle()">获取开单网点对象</button>
+`,
+  styles: []
+})
+export class DepartmentSelectDemoBasicComponent implements OnInit {
+    value: string = "";
+    constructor(private _message: NzMessageService) { }
+
+    ngOnInit() {
+    }
+
+    handle() {
+        this._message.info('网点对象为：'+this.value);
+        console.log(this.value)
+    }
+
+}
diff --git a/src/showcase/custom-demo/department-select/department-select-demo-valueType.component.ts b/src/showcase/custom-demo/department-select/department-select-demo-valueType.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from '../../../components/ng-zorro-antd.module';
+
+@Component({
+    selector: 'department-select-demo-valueType',
+    template: `
+    <yzt-department [valueType]="'compayName'"  [(ngModel)]="value"></yzt-department>
+    <button nz-button [nzType]="'primary'" (click)="handle()">获取开单网点名称</button>
+    `,
+    styles: [``]
+})
+export class DepartmentSelectDemoValueTypeComponent implements OnInit {
+
+    value: string = "";
+    constructor(private _message: NzMessageService) { }
+
+    ngOnInit() {
+    }
+
+    handle() {
+        this._message.info('网点名称为：'+this.value);
+        console.log(this.value)
+    }
+
+}
diff --git a/src/showcase/custom-demo/department-select/department-select-demo.component.html b/src/showcase/custom-demo/department-select/department-select-demo.component.html
@@ -0,0 +1,82 @@
+<article>
+    <section class="markdown">
+        <h1>yzt-department 开单网点</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="department-select-demo-basic" [nzCode]="DepartmentSelectDemoBasicCode">
+                <department-select-demo-basic demo></department-select-demo-basic>
+                <div intro>
+                    <p>默认不传任何属性。</p>
+                </div>
+            </nz-code-box>
+        </div>
+        <div nz-col [nzSpan]="12">
+            <nz-code-box [nzTitle]="'valueType属性'" id="department-select-demo-valueType" [nzCode]="DepartmentSelectDemoValueTypeCode">
+                <department-select-demo-valueType demo></department-select-demo-valueType>
+                <div intro>
+                    <p>改变valueType可获取不同字段的值，姓名</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>department-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>valueType</td>
+                    <td>向上返回开单网点id、姓名、对象，'compayId'|'compayName'|'object'</td>
+                    <td>
+                        String
+                    </td>
+                    <td>'object'</td>
+                </tr>
+
+                <tr>
+                    <td>width</td>
+                    <td>输入框宽度，支持百分比和像素</td>
+                    <td>String | Number</td>
+                    <td>100%</td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+</article>
diff --git a/src/showcase/custom-demo/department-select/department-select-demo.component.less b/src/showcase/custom-demo/department-select/department-select-demo.component.less
@@ -0,0 +1,3 @@
+[id^="department-select-demo-"] nz-select.ant-select{
+    margin: 0 8px 10px 0;
+  }
diff --git a/src/showcase/custom-demo/department-select/department-select-demo.component.ts b/src/showcase/custom-demo/department-select/department-select-demo.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'departement-select-demo',
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './department-select-demo.component.html',
+  styleUrls: ['./department-select-demo.component.less']
+})
+export class DepartmentSelectDemoComponent {
+
+    DepartmentSelectDemoBasicCode = require('!!raw-loader!./department-select-demo-basic.component');
+    DepartmentSelectDemoValueTypeCode = require('!!raw-loader!./department-select-demo-valueType.component');
+
+}