diff options
author | 2019-08-19 10:21:12 +0000 | |
---|---|---|
committer | 2019-08-19 10:21:12 +0000 | |
commit | a27b6eb01165f1d5e6adf1809571b9b38506052c (patch) | |
tree | 3be094d07371be828aa3df1f49ebb7eb561910f2 /usecaseui-portal/src | |
parent | 19a945de783b6158ec48f5c5ff5bbb9858db2890 (diff) | |
parent | ccead3c273144607be1a8580b5fab122919606de (diff) |
Merge "feat:ccvpn Sdwandevice Changed to the same as site"
Diffstat (limited to 'usecaseui-portal/src')
-rw-r--r-- | usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html | 44 | ||||
-rw-r--r-- | usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts | 82 |
2 files changed, 110 insertions, 16 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html index b33a5ae9..3a337ea6 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -195,14 +195,44 @@ </div> <div> <h3>Sdwandevice</h3> - <div class="inputs"> - <ul> - <li *ngFor="let item of this.templateParameters.site.sdwandevice_list"> - <span *ngIf="item.required" style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lable}}:</span> - <input nz-input [(ngModel)]="siteCpeData[item.lable]" title="{{item.description}}" - required="{{item.required==true ? 'required':null}}"></li> - </ul> + <div> + <div style="width: 100%;text-align: right"> + <button nz-button (click)="addSdwanDevice()" 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.siteCpeData)">{{key}}</th> + <th width="7%"> Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of siteSdwanDevice; let i = index;" + [ngClass]="{'tr-border':item.tabInputShowDevice ==false}"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="!tabInputShowDevice[i]" + title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}">{{item[key]}}</span> + <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowDevice[i] " + title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}" + required="{{item.required==true ? 'required':null}}"> + </td> + <td> + <span class="action" (click)="editDevicePort(i+1,item,siteSdwanDevice)"><i + class="anticon anticon-edit" style="margin: 0 5px;"></i></span> + <span class="action" (click)="deleteDevicePort(i+1,item,siteSdwanDevice)"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </table> </div> + + <h3>Sdwansitewan List</h3> <div> <div style="width: 100%;text-align: right"> diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts index b3ff2e23..9cdd893c 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -70,7 +70,9 @@ export class CcvpnCreationComponent implements OnInit { siteTableData = []; siteBaseData = {}; //sitemodel one sdwansiteresource_list // cpe + siteSdwanDevice = []; //sitemodel SdwanDevice port Table data siteCpeData = {}; //sitemodel two sdwandevice_list + tabInputShowDevice = [];//Device port Table input和span The status identifier of the label switching display // Wan Port siteWanData = []; //sitemodel three wan port Table data siteWanParams = {}; //wan port Table Detailed parameters of each line of data @@ -221,8 +223,12 @@ export class CcvpnCreationComponent implements OnInit { } } }); + this.siteSdwanDevice.push(this.siteCpeData); this.siteWanData.push(this.siteWanParams); this.siteWanData.map((item, index) => { + this.tabInputShowDevice[index] = true; + }); + this.siteWanData.map((item, index) => { this.tabInputShowWanPort[index] = true; }); @@ -265,6 +271,43 @@ export class CcvpnCreationComponent implements OnInit { console.log(this.sotnSdwansitelanData) } + //add,edit,delete SdwanDevice + addSdwanDevice() { + if (this.tabInputShowDevice.indexOf(true) > -1) {//当有正在编辑的一行数据时,不允许添加新的行 + return false; + } + let addNum = this.siteSdwanDevice.length; + let inputsData = Object.assign({}, this.siteCpeData); + Object.keys(inputsData).forEach((item) => {//新增一行空数据 + if (item != "description") { + inputsData[item] = null; + } + }); + this.siteSdwanDevice[addNum] = inputsData; + this.tabInputShowDevice[addNum] = true; + this.siteSdwanDevice = [...this.siteSdwanDevice]; //表格刷新 + console.log(this.siteSdwanDevice) + } + + editDevicePort(num, item, siteSdwanDevice) { + console.log(item) + if (this.tabInputShowDevice[num - 1] == false) { + this.tabInputShowDevice[num - 1] = true; + } else { + this.tabInputShowDevice[num - 1] = false; + } + console.log(siteSdwanDevice); + } + + deleteDevicePort(num, item, siteSdwanDevice) { + if (this.siteSdwanDevice.length <= 1) { + console.log("num>=1", "siteSdwanDevice"); + return false; + } + this.siteSdwanDevice = this.siteSdwanDevice.filter((d, i) => i !== num - 1); + console.log(this.siteSdwanDevice) + } + //add,edit,delete siteWanPort addSiteWan() { if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited @@ -397,8 +440,9 @@ export class CcvpnCreationComponent implements OnInit { "sdwansitewan_list": [] }; inputs = Object.assign(inputs, this.siteBaseData); - console.log(this.siteBaseData, "this.siteBaseData"); - inputs["sdwandevice_list"][0] = Object.assign({}, this.siteCpeData); + inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => { + return Object.assign({}, item); + }); inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { return Object.assign({}, item); }); @@ -414,8 +458,16 @@ export class CcvpnCreationComponent implements OnInit { Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box this.siteBaseData[item] = null; }); - Object.keys(this.siteCpeData).forEach((item) => { //Clear modal box - this.siteCpeData[item] = null; + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + this.tabInputShowDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } }); this.siteWanData.forEach((item, index) => { if (index > 0) { @@ -427,7 +479,6 @@ export class CcvpnCreationComponent implements OnInit { }); this.tabInputShowWanPort[index] = true; } - }); console.log(this.siteTableData); this.drawImage(this.siteTableData); @@ -438,9 +489,17 @@ export class CcvpnCreationComponent implements OnInit { Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box this.siteBaseData[item] = null; }) - Object.keys(this.siteCpeData).forEach((item) => { //Clear modal box - this.siteCpeData[item] = null; - }) + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); this.siteWanData.forEach((item, index) => { if (index > 0) { this.siteWanData.splice(index, 1); @@ -461,7 +520,12 @@ export class CcvpnCreationComponent implements OnInit { Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box this.siteBaseData[item] = this.siteTableData[num - 1][item]; }); - this.siteCpeData = Object.assign({}, this.siteTableData[num - 1].sdwandevice_list[0]); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, item) + }); + this.siteSdwanDevice.forEach((item, index) => { + this.tabInputShowDevice[index] = false; + }); this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { return Object.assign({}, item) }); |