`feat:table style modification in ccvpn template

Change-Id: I3c59283cd9c7964a7acbe0ebdf837dce101e183b
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

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) {