diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
2 files changed, 56 insertions, 45 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html index 57e08be7..e41e1113 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html @@ -1,5 +1,5 @@ -<nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()" - (nzOnOk)="handleOk()" nzWidth="80%"> +<nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()" nzWidth="80%" + [nzFooter]="modalFooter"> <div class="subnet_params_container"> <form nz-form> <nz-form-item *ngFor="let item of comunicationFormItems; let i = index"> @@ -7,20 +7,22 @@ {{ item.title }} </nz-form-label> <nz-form-control [nzSpan]="16"> - <nz-tooltip [nzTitle]="item.scoped&&item.scopedText?item.scopedText:''" [nzPlacement]="'right'" + <nz-tooltip [nzTitle]="item.scoped&&item.scopedText?item.scopedText:''" [nzPlacement]="'right'" [nzTrigger]="'focus'"> - <input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.type === 'input'" + <input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.type === 'input'" [(ngModel)]="slicing_order_info[item.key]" [ngClass]="{'error-input-border' : validateRulesShow[i] === true}" [placeholder]="item.placeholder ? item.placeholder : ''" (blur)="item.required ? this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()" /> - <div *ngIf="item.coverflag" class="detail-wrap"> - <p> - {{ masktext }} - </p> - <img src="assets/images/coverageAreaMap.png" class="detail-img"/> - </div> - <img src="assets/images/ask-img.png" alt="" class="detail-icon" *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)" (mouseleave)="detailFn(item.coverflag)" /> + <div *ngIf="item.coverflag" class="detail-wrap"> + <p> + {{ masktext }} + </p> + <img src="assets/images/coverageAreaMap.png" class="detail-img" /> + </div> + <img src="assets/images/ask-img.png" alt="" class="detail-icon" + *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)" + (mouseleave)="detailFn(item.coverflag)" /> </nz-tooltip> <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" *ngIf="item.type === 'radio'"> @@ -44,4 +46,9 @@ </nz-form-item> </form> </div> + <ng-template #modalFooter> + <span>Modal Footer:</span> + <button nz-button nzType="default" (click)="handleCancel()">Cancel</button> + <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="loading">OK</button> + </ng-template> </nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts index 6409f008..9c3fe319 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; -import { COMMUNICATION_FORM_ITEMS,MASKTEXT } from "./constants"; +import { COMMUNICATION_FORM_ITEMS, MASKTEXT } from "./constants"; import { Util } from "../../../../../shared/utils/utils"; import { SlicingTaskServices } from "../../../../../core/services/slicingTaskServices"; import { NzMessageService } from "ng-zorro-antd"; @@ -19,26 +19,28 @@ export class BusinessOrderComponent implements OnInit { ngOnInit() {} ngOnChanges() { - let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"]; - if (this.modelParams && this.showModel) { - this.slicing_order_info = {...this.modelParams}; - if (this.slicing_order_info.coverageArea) { - areaList = []; - areaList.push(this.slicing_order_info.coverageArea.split(" ").join(";")); - } - } - this.AreaFormatting(areaList); + let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"]; + if (this.modelParams && this.showModel) { + this.slicing_order_info = { ...this.modelParams }; + if (this.slicing_order_info.coverageArea) { + areaList = []; + areaList.push( + this.slicing_order_info.coverageArea.split(" ").join(";") + ); + } + } + this.AreaFormatting(areaList); } - detailFn(flag){ - COMMUNICATION_FORM_ITEMS.forEach((item, index) => { - if(item.key=='coverageAreaNumber'){ - item["coverflag"] = flag == true ? false:true - } - }) + detailFn(flag) { + COMMUNICATION_FORM_ITEMS.forEach((item, index) => { + if (item.key == "coverageAreaNumber") { + item["coverflag"] = flag == true ? false : true; + } + }); } - @Input() showModel: boolean; - @Input() modelParams: any; + @Input() showModel: boolean; + @Input() modelParams: any; @Output() cancel = new EventEmitter<boolean>(); comunicationFormItems = COMMUNICATION_FORM_ITEMS; slicing_order_info = { @@ -56,7 +58,8 @@ export class BusinessOrderComponent implements OnInit { validateRulesShow: any[] = []; rulesText: any[] = []; areaLevel: number = 4; - masktext: string = MASKTEXT ; + masktext: string = MASKTEXT; + loading: boolean = false; AreaFormatting(areaList): void { this.areaList = areaList.map((item: any) => { let arr = item.split(";"); @@ -102,7 +105,7 @@ export class BusinessOrderComponent implements OnInit { const coverage_list: string[] = []; let coverageAreas; COMMUNICATION_FORM_ITEMS.forEach((item, index) => { - if (item.required && item.type === "input" ) { + if (item.required && item.type === "input") { this.Util.validator( item.title, item.key, @@ -116,19 +119,19 @@ export class BusinessOrderComponent implements OnInit { if (this.validateRulesShow.indexOf(true) > -1) { return; } - for(const key in this.areaList){ - const value = this.areaList[key] - let str = ""; - for(const val of value){ - const area = val - str += area.selected + ";"; - if(!area.selected){ - this.message.error("Please complete the form"); - return; - } - } - coverage_list.push(str.substring(0, str.length - 1)); - } + for (const key in this.areaList) { + const value = this.areaList[key]; + let str = ""; + for (const val of value) { + const area = val; + str += area.selected + ";"; + if (!area.selected) { + this.message.error("Please complete the form"); + return; + } + } + coverage_list.push(str.substring(0, str.length - 1)); + } if (coverage_list.length > 1) { coverageAreas = coverage_list.join("|"); } else { @@ -150,7 +153,7 @@ export class BusinessOrderComponent implements OnInit { const csmfSlicingPurchaseFailedCallback = () => { this.handleCancel(); }; - + this.loading = true; this.myhttp .csmfSlicingPurchase(paramsObj, csmfSlicingPurchaseFailedCallback) .then((res) => { @@ -164,6 +167,7 @@ export class BusinessOrderComponent implements OnInit { } else { this.message.create("error", "Network error"); } + this.loading = false; this.handleCancel(); }); } |