diff options
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/city-select')
3 files changed, 270 insertions, 39 deletions
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html index e66d25f7..1da7a71b 100644 --- a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html +++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html @@ -1,6 +1,6 @@ <div class="city-select"> <div *ngFor="let area of areaList; let i = index"> - <nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0" class="subnet_params_area" + <nz-form-control [nzSpan]="computeSpan(ind)" [nzOffset]="computeOffset(ind, i)" class="subnet_params_area" *ngFor="let item of area; let ind = index"> <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind" (nzOpenChange)="handleChange(area, item)" (ngModelChange)=" handleChangeSelected(area, item) "> @@ -8,10 +8,10 @@ </nz-option> </nz-select> </nz-form-control> - <nz-form-control [nzSpan]="1"> + <nz-form-control [nzSpan]="2"> <div class="validation_alert_area">{{checkArea(area)}}</div> </nz-form-control> - <nz-form-control [nzSpan]="1" [nzOffset]="2"> + <nz-form-control [nzSpan]="1"> <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="!i" (click)="creatAreaList()"> <i nz-icon class="anticon anticon-plus subnet_params_icon"></i> diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts index 432d49de..4a172d75 100644 --- a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts +++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts @@ -1,10 +1,13 @@ /******* Input - areaList /MUST/: Selected region data + areaList /MUST/: Selected region data + level /MUST/: + - 3: province;city;district + - 4: province;city;district;street ********/ import { Component, OnInit } from "@angular/core"; import { Input } from "@angular/core"; -import { ADDRESS } from "./constants"; +import { LEVEL3ADDRESS, LEVEL4ADDRESS } from "./constants"; @Component({ selector: "app-city-select", @@ -13,16 +16,74 @@ import { ADDRESS } from "./constants"; }) export class CitySelectComponent implements OnInit { @Input() areaList: any[]; + @Input() level: number; + defaultOptions: any[]; constructor() {} ngOnInit() {} - ngOnChanges() {} + ngOnChanges() { + this.chooseDefaultOptions(); + } + chooseDefaultOptions(): void { + // options for selection box + switch (this.level) { + case 3: + this.defaultOptions = LEVEL3ADDRESS; + break; + case 4: + this.defaultOptions = LEVEL4ADDRESS; + break; + default: + this.defaultOptions = LEVEL3ADDRESS; + break; + } + } + + computeSpan(ind: number) { + // Space occupation of each selection box + let res: number = 4; + switch (this.level) { + case 4: + if (ind === 0 || ind === 1 || ind === 2) { + res = 3; + } else { + res = 4; + } + break; + default: + // 3 or others + res = 4; + break; + } + return res; + } + computeOffset(ind: number, i: number) { + // the offset of each selection box + let res: number = 0; + switch (this.level) { + case 4: + if (i && !ind) { + res = 7; + } else { + res = 0; + } + break; + default: + if (i && !ind) { + res = 7; + } else { + res = 0; + } + break; + } + return res; + } handleChange(area: any[], areaItem: any): void { if (areaItem.key === "province" && areaItem.options.length <= 1) { - areaItem.options = ADDRESS; + areaItem.options = this.defaultOptions; } else if (areaItem.key === "city" && areaItem.options.length <= 1) { - ADDRESS.forEach((item) => { + this.defaultOptions.forEach((item) => { if (item.name === area[0].selected) { areaItem.options = item.city; } @@ -31,10 +92,22 @@ export class CitySelectComponent implements OnInit { areaItem.key === "district" && areaItem.options.length <= 1 ) { - ADDRESS.forEach((item: any) => { + this.defaultOptions.forEach((item: any) => { item.city.forEach((city) => { if (city.name === area[1].selected) { - areaItem.options = city.county; + areaItem.options = city.district; + } + }); + }); + } else if (areaItem.key === "street" && areaItem.options.length <= 1) { + this.defaultOptions.forEach((item: any) => { + item.city.forEach((city) => { + if (city.name === area[1].selected) { + city.district.forEach((district) => { + if (district.name === area[2].selected) { + areaItem.options = district.street; + } + }); } }); }); @@ -42,15 +115,13 @@ export class CitySelectComponent implements OnInit { } handleChangeSelected(area: any[], areaItem: any) { - if (areaItem.key === "province") { - area[1].selected = ""; - area[1].options = []; - area[2].selected = ""; - area[2].options = []; - } else if (areaItem.key === "city") { - area[2].selected = ""; - area[2].options = []; - } + let areaItemIndex = area.indexOf(areaItem); + area.map((item, index) => { + if (index > areaItemIndex) { + item.selected = ""; + item.options = []; + } + }); } // prompt text for each item of area_list @@ -73,23 +144,51 @@ export class CitySelectComponent implements OnInit { } creatAreaList(): void { - let arr = [ - { - key: "province", - selected: "", - options: [], - }, - { - key: "city", - selected: "", - options: [], - }, - { - key: "district", - selected: "", - options: [], - }, - ]; + let arr: any[] = []; + switch (this.level) { + case 4: + arr = [ + { + key: "province", + selected: "", + options: [], + }, + { + key: "city", + selected: "", + options: [], + }, + { + key: "district", + selected: "", + options: [], + }, + { + key: "street", + selected: "", + options: [], + }, + ]; + break; + default: + arr = [ + { + key: "province", + selected: "", + options: [], + }, + { + key: "city", + selected: "", + options: [], + }, + { + key: "district", + selected: "", + options: [], + }, + ]; + } this.areaList.push(arr); } diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts index ecb2d038..82e0cf56 100644 --- a/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts +++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts @@ -1,4 +1,4 @@ -export const ADDRESS = [ +export const LEVEL3ADDRESS = [ { id: "1", name: "Beijing", @@ -6,7 +6,7 @@ export const ADDRESS = [ { id: "101", name: "Beijing", - county: [ + district: [ { id: "1001", name: "Haiding District", @@ -30,7 +30,7 @@ export const ADDRESS = [ { id: "201", name: "Shanghai City", - county: [ + district: [ { id: "2001", name: "Pudongxin District", @@ -44,3 +44,135 @@ export const ADDRESS = [ ], }, ]; +export const LEVEL4ADDRESS = [ + { + id: "1", + name: "Beijing", + city: [ + { + id: "101", + name: "Beijing", + district: [ + { + id: "1001", + name: "Haiding District", + street: [ + { + id: "100101", + name: "Wanshoulu Street", + }, + { + id: "100102", + name: "Zhongguancun Street", + }, + { + id: "100103", + name: "Haidian Street", + }, + { + id: "100104", + name: "Xisanqi Street", + }, + ], + }, + { + id: "1002", + name: "Xicheng District", + street: [ + { + id: "100201", + name: "Guang'anmenwai Street", + }, + { + id: "100202", + name: "Xuanwumen Street", + }, + { + id: "100203", + name: "West Changan Street", + }, + { + id: "100204", + name: "Financial Street", + }, + ], + }, + { + id: "1003", + name: "Changping District", + street: [ + { + id: "100301", + name: "Chengbei Street", + }, + { + id: "100302", + name: "Chengnan Street", + }, + { + id: "100303", + name: "Tiantongyuan North Street", + }, + { + id: "100304", + name: "Tiantongyuan South Street", + }, + ], + }, + ], + }, + ], + }, + { + id: "2", + name: "Shanghai", + city: [ + { + id: "201", + name: "Shanghai City", + district: [ + { + id: "2001", + name: "Pudongxin District", + street: [ + { + id: "200101", + name: "Lujiazui Street", + }, + { + id: "200102", + name: "Zhoujiadu Street", + }, + { + id: "200103", + name: "Tangqiao Street", + }, + { + id: "200104", + name: "Nanquanlu Street", + }, + ], + }, + { + id: "2002", + name: "Jingan District", + street: [ + { + id: "200201", + name: "Jiangning Lu Street", + }, + { + id: "200202", + name: "Jing'an Temple Street", + }, + { + id: "200203", + name: "Nanjing West Road Street", + }, + ], + }, + ], + }, + ], + }, +]; |