diff options
author | 2019-10-12 15:54:58 +0800 | |
---|---|---|
committer | 2019-10-12 16:10:11 +0800 | |
commit | bebcc76fdfcdd2caee5519626ba244da2319f968 (patch) | |
tree | a7238c3433b16ab3362989d1990892678d7111aa /usecaseui-portal/src/app/views/services/services-list/ccvpn-creation | |
parent | 3a32288d1a4053e3bf561766c35cf27d5a938b38 (diff) |
`feat:table style modification in ccvpn template
Change-Id: I3c59283cd9c7964a7acbe0ebdf837dce101e183b
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/services/services-list/ccvpn-creation')
2 files changed, 38 insertions, 29 deletions
diff --git a/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.html index 1fc9a500..6a05ff11 100644 --- a/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.html @@ -81,7 +81,7 @@ </nz-table> </div> </nz-tab> - <nz-tab nzTitle="Sdwansiteresource List"> + <nz-tab nzTitle="Sdwansiteresource List" nzVirtualScroll> <div class="site"> <div style="height: 10px"> <h3 style="float: left;color: #3C4F8C">Site List</h3> @@ -90,12 +90,12 @@ style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}} </button> </div> - <nz-table #siteTable [nzData]="siteTableData" [nzShowPagination]="false" nzSize="small"> + <nz-table #siteTable [nzData]="siteTableData" [nzShowPagination]="false" nzSize="small" nzVirtualScroll [nzScroll]="siteTableWidth"> <thead> <tr> - <th nzWidth="10%"> NO.</th> + <th nzWidth="10%" nzLeft="0px"> NO.</th> <th *ngFor="let key of getKeys(this.siteBaseData)">{{key.split("_")[1] || key}}</th> - <th nzWidth="20%" style="text-align: center"> Action</th> + <th nzWidth="20%" style="text-align: center" nzRight="0px"> Action</th> </tr> </thead> <tbody> @@ -234,17 +234,17 @@ style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} </button> </div> - <table class="siteWanTab"> + <nz-table class="siteWanTab" nzVirtualScroll #nzTable [nzData]="siteWanData" [nzScroll]="{ x: '2500px'}"> <thead> <tr> - <th width="4%"> NO.</th> + <th width="4%" nzLeft="0px"> NO.</th> <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th> - <th width="7%"> Action</th> + <th width="7%" nzRight="0px"> Action</th> </tr> </thead> <tbody> - <tr *ngFor="let item of siteWanData; let i = index;" - [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}"> + <ng-template ngFor let-item [ngForOf]="nzTable.data" let-i="index"> + <tr [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}"> <td>{{i+1}}</td> <td *ngFor="let key of getKeys(item);let a = index;"> <span *ngIf="!tabInputShowWanPort[i]" @@ -260,8 +260,9 @@ class="anticon anticon-delete"></i></span> </td> </tr> + </ng-template> </tbody> - </table> + </nz-table> </div> </div> diff --git a/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.ts index 5a94e484..752fddd6 100644 --- a/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.ts @@ -16,6 +16,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import * as d3 from 'd3'; import { ServiceListService } from '../../../../core/services/serviceList.service'; +import {Observable} from "../../../../../../node_modules/rxjs"; @Component({ selector: 'app-ccvpn-creation', @@ -29,19 +30,26 @@ export class CcvpnCreationComponent implements OnInit { @Input() ccvpn_temParametersContent; @Output() closeCreate = new EventEmitter(); + ngOnInit() { this.getccvpnTemParameters(this.ccvpn_temParametersContent); + Observable.fromEvent(window, 'resize').subscribe((event) => { + this.siteTableWidth["x"] = document.documentElement.clientWidth > 1400 ?"78%":"961px"; + }); } //tabBarStyle - tabBarStyle = { + tabBarStyle: object = { "height": "58px", "width": "694px", "box-shadow": "none", "margin": "0", "border-radius": "4px 4px 0px 0px" }; - templateParameters = { + siteTableWidth: object = { + x:"" + }; + templateParameters: any = { service: {}, sotnvpn: { info: {}, @@ -56,25 +64,25 @@ export class CcvpnCreationComponent implements OnInit { } }; - bodyTemplateParameter = {}; + bodyTemplateParameter: object = {}; // SOTN VPN List - sotnVpnTableData = []; - sotnInfo = {};//sotnmodel The first part of sotnInfo - sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table - sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data - tabInputShowSdwansitelan = [];//sdwansitelan Table input&span The status identifier of the label switching display + sotnVpnTableData: any[] = []; + sotnInfo: object = {};//sotnmodel The first part of sotnInfo + sotnSdwansitelanData: any[] = [];//sotnmodel The second part of the data sdwansitelan Table + sotnSdwansitelanParams: object = {};//sdwansitelan Table Detailed parameters of each line of data + tabInputShowSdwansitelan: any[] = [];//sdwansitelan Table input&span The status identifier of the label switching display // Site List - siteTableData = []; - siteBaseData = {}; //sitemodel one sdwansiteresource_list + siteTableData: any[] = []; + siteBaseData: object = {}; //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 + siteSdwanDevice: any[] = []; //sitemodel SdwanDevice port Table data + siteCpeData: object = {}; //sitemodel two sdwandevice_list + tabInputShowDevice: any[] = [];//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 - tabInputShowWanPort = [];//wan port Table input和span The status identifier of the label switching display + siteWanData: any[] = []; //sitemodel three wan port Table data + siteWanParams: object = {}; //wan port Table Detailed parameters of each line of data + tabInputShowWanPort: any[] = [];//wan port Table input和span The status identifier of the label switching display getKeys(item) { return Object.keys(item); } @@ -260,19 +268,19 @@ export class CcvpnCreationComponent implements OnInit { //add,edit,delete SdwanDevice addSdwanDevice() { - if (this.tabInputShowDevice.indexOf(true) > -1) {//当有正在编辑的一行数据时,不允许添加新的行 + if (this.tabInputShowDevice.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited return false; } let addNum = this.siteSdwanDevice.length; let inputsData = Object.assign({}, this.siteCpeData); - Object.keys(inputsData).forEach((item) => {//新增一行空数据 + Object.keys(inputsData).forEach((item) => {//Add a new line of empty data if (item != "description") { inputsData[item] = null; } }); this.siteSdwanDevice[addNum] = inputsData; this.tabInputShowDevice[addNum] = true; - this.siteSdwanDevice = [...this.siteSdwanDevice]; //表格刷新 + this.siteSdwanDevice = [...this.siteSdwanDevice]; //Table refresh } editDevicePort(num, item, siteSdwanDevice) { |