From bebcc76fdfcdd2caee5519626ba244da2319f968 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Sat, 12 Oct 2019 15:54:58 +0800 Subject: `feat:table style modification in ccvpn template Change-Id: I3c59283cd9c7964a7acbe0ebdf837dce101e183b Issue-ID: USECASEUI-307 Signed-off-by: cyuamber --- .../ccvpn-creation/ccvpn-creation.component.html | 21 +++++----- .../ccvpn-creation/ccvpn-creation.component.ts | 46 +++++++++++++--------- 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 @@ - +

Site List

@@ -90,12 +90,12 @@ style="transform: scale(1.2);font-weight: 700">{{"i18nTextDefine_Add" | translate}}
- + - NO. + NO. {{key.split("_")[1] || key}} - Action + Action @@ -234,17 +234,17 @@ style="transform: scale(1.2);font-weight: 700;">{{"i18nTextDefine_Add" | translate}}
- + - + - + - + + + -
NO. NO. {{key}} Action Action
{{i+1}}
+ 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) { -- cgit 1.2.3-korg