summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-10-12 15:54:58 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-10-12 16:10:11 +0800
commitbebcc76fdfcdd2caee5519626ba244da2319f968 (patch)
treea7238c3433b16ab3362989d1990892678d7111aa
parent3a32288d1a4053e3bf561766c35cf27d5a938b38 (diff)
`feat:table style modification in ccvpn template
Change-Id: I3c59283cd9c7964a7acbe0ebdf837dce101e183b Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.html21
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.ts46
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) {