-<nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
+<nz-spin nzTip='Loading...' [nzSpinning]="isSpinning">
+<nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()"
+ (nzOnOk)="handleOk()"
nzWidth="900px">
+ <div class="subnet_params_container">
+ <form nz-form>
+ <nz-form-item *ngFor="let item of comunicationFormItems">
+ <nz-form-label [nzSpan]="6" nzRequired [nzFor]="item.key">
+ {{ item.title }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="15">
+ <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
+ *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "/>
+ <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
+ *ngIf="item.title === 'Resource Sharing Level'">
+ <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
+ {{ option.title }}
+ </label>
+ </nz-radio-group>
+ <nz-select [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
+ *ngIf="item.title === 'Mobility'">
+ <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
+ </nz-option>
+ </nz-select>
+ </nz-form-control>
+ <div *ngIf="item.key === 'coverageArea'">
+ <div *ngFor="let area of areaList; let i = index">
+ <nz-form-control [nzSpan]="!ind ? 3 : 4" [nzOffset]="i && !ind ? 6 : 0"
+ 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) ">
+ <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
+ </nz-option>
+ </nz-select>
+ </nz-form-control>
+ <nz-form-control [nzSpan]="1" [nzOffset]="1">
+ <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="!i"
+ (click)="creatAreaList()">
+ <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
+ </button>
+ <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="i"
+ (click)="deleteAreaList(i)">
+ <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
+ </button>
+ </nz-form-control>
+ </div>
+ </div>
+ </nz-form-item>
+ </form>
+ </div>
</nz-modal>
+</nz-spin>
\ No newline at end of file
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {COMMUNICATION_FORM_ITEMS} from "../../../../../../constants/constants";
+import {COMMUNICATION_FORM_ITEMS, COMMUNICATION_FORM_ADDRESS} from "../../../../../../constants/constants";
+import {SlicingTaskServices} from "../../../../../core/services/slicingTaskServices";
+import {NzMessageService} from "ng-zorro-antd";
+
@Component({
selector: 'app-business-order',
templateUrl: './business-order.component.html',
})
export class BusinessOrderComponent implements OnInit {
- constructor() { }
+ constructor(
+ private myhttp: SlicingTaskServices,
+ private message: NzMessageService
+ ) {
+ }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
+ ngOnChanges() {
+ this.AreaFormatting();
+ }
@Input() showModel: boolean;
@Output() cancel = new EventEmitter<boolean>();
+ comunicationFormItems = COMMUNICATION_FORM_ITEMS;
+ slicing_order_info = {
+ name: null,
+ maxNumberofUEs: null,
+ expDataRateDL: null,
+ latency: null,
+ expDataRateUL: null,
+ resourceSharingLevel: "shared",
+ uEMobilityLevel: null,
+ useInterval: null,
+ coverageArea: ''
+ };
+ areaList: any[] = [];
+ isSpinning: boolean = false;
+ AreaFormatting() {
+ let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street'];
+ this.areaList = areaList.map((item: any) => {
+ let arr = item.split(';');
+ item = arr.map((ite, index) => {
+ let key: string;
+ if (!index) {
+ key = 'province';
+ } else if (index === 1) {
+ key = 'city'
+ } else if (index === 2) {
+ key = 'district'
+ } else {
+ key = 'street'
+ }
+ const obj: any = {};
+ obj.key = key;
+ obj.selected = ite
+ obj.options = [{name: ite, id: ite}]
+ return obj
+ })
+ return item;
+ })
+ }
+
+ creatAreaList (): void {
+ let arr = [
+ {
+ key: 'province',
+ selected: '',
+ options: []
+ },
+ {
+ key: 'city',
+ selected: '',
+ options: []
+ },
+ {
+ key: 'district',
+ selected: '',
+ options: []
+ },
+ {
+ key: 'street',
+ selected: '',
+ options: []
+ }
+ ]
+ this.areaList.push(arr)
+ }
+
+ deleteAreaList (index: number): void {
+ this.areaList.splice(index,1);
+ }
+
+ handleChange(area: any[], areaItem: any): void{
+ if (areaItem.key === 'province' && areaItem.options.length <= 1) {
+ areaItem.options = COMMUNICATION_FORM_ADDRESS;
+ } else if (areaItem.key === 'city' && areaItem.options.length <= 1) {
+ COMMUNICATION_FORM_ADDRESS.forEach( item => {
+ if(item.name === area[0].selected) {
+ areaItem.options = item.city;
+ }
+ })
+ }else if (areaItem.key === 'district' && areaItem.options.length <= 1) {
+ COMMUNICATION_FORM_ADDRESS.forEach( (item: any) => {
+ item.city.forEach(city => {
+ if (city.name === area[1].selected) {
+ areaItem.options = city.county;
+ }
+ })
+ })
+ }else if (areaItem.key === 'street' && areaItem.options.length <= 1) {
+ COMMUNICATION_FORM_ADDRESS.forEach( (item: any) => {
+ item.city.forEach(city => {
+ if (city.name === area[1].selected) {
+ city.county.forEach(county => {
+ if (county.name === area[2].selected) {
+ areaItem.options = county.street;
+ }
+ })
+ }
+ })
+ })
+ }
+ }
+
+ handleChangeSelected(area: any[], areaItem: any) {
+ if (areaItem.key === 'province') {
+ area[1].selected = ''
+ area[1].options = [];
+ area[2].selected = '';
+ area[2].options = [];
+ area[3].selected = '';
+ area[3].options = [];
+ } else if (areaItem.key === 'city') {
+ area[2].selected = '';
+ area[2].options = [];
+ area[3].selected = '';
+ area[3].options = [];
+ }else if (areaItem.key === 'district') {
+ area[3].selected = '';
+ area[3].options = [];
+ }
+ }
handleCancel() {
this.showModel = false;
this.cancel.emit(this.showModel)
}
- handleOk() {
- console.log(1)
+
+ handleOk(): void {
+ const coverage_list: string[] = [];
+ this.areaList.forEach( item => {
+ let str: string = '';
+ item.forEach( area => {
+ str += area.selected + ';';
+ });
+ coverage_list.push(str.substring(0, str.length-1));
+ });
+ if(coverage_list.length>1){
+ this.slicing_order_info.coverageArea = coverage_list.join('|')
+ }else {
+ this.slicing_order_info.coverageArea = coverage_list.toString();
+ }
+ let paramsObj = {
+ slicing_order_info:this.slicing_order_info
+ };
+ console.log(paramsObj,"-----paramsObj");
+ this.isSpinning = true;
+ this.myhttp.csmfSlicingPurchase(paramsObj).subscribe(res => {
+ const { result_header: { result_code, result_message }, result_body: { service_id,operation_id } } = res;
+ if (+result_code === 200) {
+ this.isSpinning = false;
+ this.handleCancel();
+ }
+ }, (err) => {
+ this.message.error(err);
+ this.handleCancel();
+ this.isSpinning = false;
+ })
}
}
Code Review / usecase-ui.git / commitdiff