diff options
4 files changed, 223 insertions, 6 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css index d0479145..704b2eb2 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css @@ -147,6 +147,27 @@ hr { width: 110px; } +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ + width: 186px; + float: right; + margin-right: 60px; +} +.model .sotnnpnmodel .inputs input{ + width: 186px; + float: left; + margin-left: 20px; +} + /* addsite model */ .model .sitemodel,.model .sotnnpnmodel{ position: absolute; diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html index cf87ff16..44646234 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html @@ -179,6 +179,10 @@ <div class="sotnvpn clearfix"> <div style="clear: both;height: 10px"> <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3> + <button nz-button *ngIf="upDateShow" (click)="updateSotnvpn()" class="addListBtn" + style="float: right;margin-right: 10px"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}} + </button> </div> <nz-table #sotnVpnTable [nzData]="sotnVpnTableData" [nzShowPagination]="false" @@ -334,7 +338,60 @@ <button nz-button nzType="primary" (click)="detailsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> </div> </div> - <!-- site update model --> + <!-- sotnVpn update model --> + <div class="sotnnpnmodel" *ngIf="sotnVpnAddModelShow"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list"> + <span>{{item.lableShow}}:</span> + <input nz-input [(ngModel)]="sotnInfo[item.lable]"></li> + </ul> + </div> + <div> + <h3>Sdwansitelan List</h3> + <div> + <div style="width: 100%;text-align: right"> + <button nz-button (click)="updateSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th> + <th width="7%"> Action</th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> --> + <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" + [ngClass]="{'tr-border':item.tabInputShowSdwansitelan ==false}"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="!tabInputShowSdwansitelan[i]">{{item[key]}}</span> + <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] "> + </td> + <td> + <span class="action" (click)="editUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i + class="anticon anticon-edit" style="margin: 0 5px;"></i></span> + <span class="action" (click)="deleteUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </table> + </div> + </div> + + <div class="action"> + <button nz-button nzType="primary" (click)="updateSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + <button nz-button nzType="primary" (click)="updateSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button> + </div> + </div> + <!-- site update模态框 --> <div class="sitemodel" *ngIf="siteAddModelShow"> <h3> {{"i18nTextDefine_Base" | translate}} </h3> <div class="inputs"> @@ -396,5 +453,5 @@ <button nz-button nzType="primary" (click)="updatesite_OK()">{{"i18nTextDefine_Add" | translate}}</button> </div> </div> - <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || siteAddModelShow" (click)="hiddenModel()"></div> + <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || sotnVpnAddModelShow || siteAddModelShow" (click)="hiddenModel()"></div> </div> diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts index 484a6d93..0b138575 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts @@ -75,6 +75,8 @@ export class CcvpnDetailComponent implements OnInit { siteWanParams = {}; //wan port Table Detailed parameters of each line of data tabInputShowWanPort = [];//wan port table input and span sitenum = []; + sotnvpnnum = []; + getKeys(item) { return Object.keys(item); } @@ -95,6 +97,7 @@ export class CcvpnDetailComponent implements OnInit { //筛选 分离 sotnvpn数据 inputs["sdwanvpnresource_list"].map((item, index) => { this.sotnVpnTableData.push(item); + this.sotnvpnnum.push(false); }); let sdwanvpnresource_list = inputs["sdwanvpnresource_list"][0]; @@ -260,17 +263,152 @@ export class CcvpnDetailComponent implements OnInit { console.log(this.sitenum) } + //sotnVpn addModel + sotnVpnAddModelShow = false; + + updateSotnVpn_OK() { + let inputs = { + "sdwansitelan_list": [] + }; + inputs = Object.assign(inputs, this.sotnInfo); + inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { + return Object.assign({}, item); + }); + console.log(inputs); + if (this.isEditSotnVpn) { + + this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; + this.sotnVpnTableData = [...this.sotnVpnTableData]; + } else { + // this.siteTableData.push(inputs); + this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; + this.sotnvpnnum = [...this.sotnvpnnum, true]; + } + console.log(this.sotnVpnTableData) + + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + this.tabInputShowSdwansitelan.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnAddModelShow = false; + } + + updateSotnVpn_cancel() { + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnAddModelShow = false; + } + + editUpdateSotnVpn(num) { + this.sotnVpnAddModelShow = true; + this.isEditSotnVpn = num; + console.log(this.templateParameters.sotnvpn.sdwanvpnresource_list) + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + console.log() + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.sotnSdwansitelanData.forEach((item, index) => { + this.tabInputShowSdwansitelan[index] = false; + }); + } + + deleteUpdateSotnVpn(num) { + this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); + console.log(this.sotnVpnTableData) + this.sotnvpnnum.splice(num - 1, 1); + } + updateSotnSdwansitelan() { + if (this.tabInputShowSdwansitelan.indexOf(true) > -1) { + return false; + } + let addNum = this.sotnSdwansitelanData.length; + let inputsData = Object.assign({}, this.sotnSdwansitelanParams); + Object.keys(inputsData).forEach((item) => { + if (item != "description") { + inputsData[item] = null; + } + }); + this.sotnSdwansitelanData[addNum] = inputsData; + this.tabInputShowSdwansitelan[addNum] = true; + this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; + console.log(this.sotnSdwansitelanData) + } + editUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { + console.log(item) + if (this.tabInputShowSdwansitelan[num - 1] == false) { + this.tabInputShowSdwansitelan[num - 1] = true; + } else { + this.tabInputShowSdwansitelan[num - 1] = false; + } + console.log(sotnSdwansitelanData); + } + deleteUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.sotnSdwansitelanData.length <= 1) { + console.log("num>=1", "sotnSdwansitelanData"); + return false; + } else { + + } + this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); + console.log(this.sotnSdwansitelanData) + } // site addModel siteAddModelShow = false; - addSite() { + updateSotnvpn() { + this.sotnVpnAddModelShow = true; + this.isEditSotnVpn = 0; + } + + updateSite() { this.siteAddModelShow = true; this.isEditSite = 0; console.log(this.siteWanParams); console.log(this.templateParameters); } + editUpdateSite(num) { + this.siteAddModelShow = true; + this.isEditSite = num; + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteCpeData = Object.assign({}, this.siteTableData[num - 1].sdwandevice_list[0]); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, item) + }); + this.siteWanData.forEach((item, index) => { + this.tabInputShowWanPort[index] = false; + }); + } + updatesite_cancel() { Object.keys(this.siteBaseData).forEach((item) => { this.siteBaseData[item] = null; diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index bbc8109e..e4a2c6b3 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -150,12 +150,13 @@ hr { border-radius:2px; } .top-num .top-list:nth-child(2){ - background:url("../../../assets/images/servicelist-ns.png") no-repeat; + background:url("../../../assets/images/servicelist-e2e.png") no-repeat; + //background:url("../../../assets/images/servicelist-ns.png") no-repeat; background-size: 100% 100%; } .top-num .top-list:nth-child(3){ - //background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat; - background:url("../../../assets/images/servicelist-sotn.png") no-repeat; + background:url("../../../assets/images/servicelist-e2e.png") no-repeat; + //background:url("../../../assets/images/servicelist-sotn.png") no-repeat; background-size: 100% 100%; } .top-num .top-list:nth-child(4){ |