feat:Optimize the writing of tab switching, remove the writing of Ngif

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

5 files changed, 103 insertions, 67 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts
index 6ac29417..3c08463d 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts
@@ -1,12 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit,SimpleChanges} from '@angular/core';
 import {BUSINESS_STATUS} from '../../../../../../../constants/constants';
 import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskServices";
 import {NsiModelComponent} from "../nsi-model/nsi-model.component";
-import { NzModalService } from 'ng-zorro-antd';
+import {NzModalService} from 'ng-zorro-antd';
+
 @Component({
-  selector: 'app-nsi-table',
-  templateUrl: './nsi-table.component.html',
-  styleUrls: ['./nsi-table.component.less']
+    selector: 'app-nsi-table',
+    templateUrl: './nsi-table.component.html',
+    styleUrls: ['./nsi-table.component.less']
 })
 export class NsiTableComponent implements OnInit {
 
@@ -16,10 +17,16 @@ export class NsiTableComponent implements OnInit {
     ) {
     }
 
-  ngOnInit() {
-      this.getNsiList()
-  }
-    selectedValue:string = BUSINESS_STATUS[0];
+    @Input() currentTabName;
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.currentTabName.currentValue === 'Slicing Instance Management') {
+            this.getNsiList()
+        }
+    }
+    ngOnInit() {}
+
+    selectedValue: string = BUSINESS_STATUS[0];
     listOfData: any[] = [];
     pageIndex: number = 1;
     pageSize: number = 10;
@@ -28,7 +35,7 @@ export class NsiTableComponent implements OnInit {
     isSelect: boolean = false;
     statusOptions: any[] = BUSINESS_STATUS;
 
-    getNsiList (): void{
+    getNsiList(): void {
         this.loading = true;
         this.isSelect = false;
         this.listOfData = [];
@@ -36,17 +43,17 @@ export class NsiTableComponent implements OnInit {
             pageNo: this.pageIndex,
             pageSize: this.pageSize
         };
-        if(this.selectedValue !== BUSINESS_STATUS[0]){
+        if (this.selectedValue !== BUSINESS_STATUS[0]) {
             paramsObj["instanceStatus"] = this.selectedValue.toLocaleLowerCase();
             this.isSelect = true;
         }
-        this.myhttp.getSlicingNsiList(paramsObj,this.isSelect).subscribe (res => {
-            const { result_header: { result_code }, result_body: { nsi_service_instances,record_number } } = res;
+        this.myhttp.getSlicingNsiList(paramsObj, this.isSelect).subscribe(res => {
+            const {result_header: {result_code}, result_body: {nsi_service_instances, record_number}} = res;
             this.loading = false;
             if (+result_code === 200) {
                 this.total = record_number;
                 this.loading = false;
-                if(nsi_service_instances !== null  && nsi_service_instances.length >0) {
+                if (nsi_service_instances !== null && nsi_service_instances.length > 0) {
                     this.listOfData = nsi_service_instances;
                 }
             }
@@ -55,23 +62,26 @@ export class NsiTableComponent implements OnInit {
             console.error(res);
         })
     }
-    getListOfProcessingStatus(){
+
+    getListOfProcessingStatus() {
         this.pageIndex = 1;
         this.pageSize = 10;
         this.getNsiList();
     }
+
     searchData(reset: boolean = false) {
         this.getNsiList();
     }
+
     showdetail(data) {
         const nsiModal = this.modalService.create({
-            nzTitle:"Detail",
+            nzTitle: "Detail",
             nzContent: NsiModelComponent,
-            nzWidth:"70%",
+            nzWidth: "70%",
             nzOkText: null,
             nzCancelText: null,
-            nzComponentParams:{
-                nsiId:data.service_instance_id
+            nzComponentParams: {
+                nsiId: data.service_instance_id
             }
         })
     }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts
index 5e90bcee..6dec5c72 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts
@@ -1,12 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit,SimpleChanges} from '@angular/core';
 import {BUSINESS_STATUS} from '../../../../../../../constants/constants';
 import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskServices";
-import { NzModalService } from 'ng-zorro-antd';
+import {NzModalService} from 'ng-zorro-antd';
 import {NssiModelComponent} from "../nssi-model/nssi-model.component";
+
 @Component({
-  selector: 'app-nssi-table',
-  templateUrl: './nssi-table.component.html',
-  styleUrls: ['./nssi-table.component.less']
+    selector: 'app-nssi-table',
+    templateUrl: './nssi-table.component.html',
+    styleUrls: ['./nssi-table.component.less']
 })
 export class NssiTableComponent implements OnInit {
 
@@ -16,10 +17,16 @@ export class NssiTableComponent implements OnInit {
     ) {
     }
 
-  ngOnInit() {
-      this.getNssiList()
-  }
-    selectedValue:string = BUSINESS_STATUS[0];
+    @Input() currentTabName;
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.currentTabName.currentValue === 'Slicing Subnet Instance Management') {
+            this.getNssiList()
+        }
+    }
+    ngOnInit() {}
+
+    selectedValue: string = BUSINESS_STATUS[0];
     listOfData: any[] = [];
     pageIndex: number = 1;
     pageSize: number = 10;
@@ -28,7 +35,7 @@ export class NssiTableComponent implements OnInit {
     isSelect: boolean = false;
     statusOptions: any[] = BUSINESS_STATUS;
 
-    getNssiList (): void{
+    getNssiList(): void {
         this.loading = true;
         this.isSelect = false;
         this.listOfData = [];
@@ -36,42 +43,45 @@ export class NssiTableComponent implements OnInit {
             pageNo: this.pageIndex,
             pageSize: this.pageSize
         };
-        if(this.selectedValue !== BUSINESS_STATUS[0]){
+        if (this.selectedValue !== BUSINESS_STATUS[0]) {
             paramsObj["instanceStatus"] = this.selectedValue.toLocaleLowerCase();
             this.isSelect = true;
         }
-        this.myhttp.getSlicingNssiList(paramsObj,this.isSelect).subscribe (res => {
-            const { result_header: { result_code }, result_body: { nssi_service_instances,record_number } } = res;
+        this.myhttp.getSlicingNssiList(paramsObj, this.isSelect).subscribe(res => {
+            const {result_header: {result_code}, result_body: {nssi_service_instances, record_number}} = res;
             this.loading = false;
             if (+result_code === 200) {
                 this.total = record_number;
                 this.loading = false;
-                if(nssi_service_instances !== null && nssi_service_instances.length >0) {
+                if (nssi_service_instances !== null && nssi_service_instances.length > 0) {
                     this.listOfData = nssi_service_instances;
                 }
             }
-        },(res) => {
+        }, (res) => {
             this.loading = false;
             console.error(res);
         })
     }
-    getListOfProcessingStatus(){
+
+    getListOfProcessingStatus() {
         this.pageIndex = 1;
         this.pageSize = 10;
         this.getNssiList();
     }
+
     searchData(reset: boolean = false) {
         this.getNssiList();
     }
+
     showdetail(data) {
         const nssiModal = this.modalService.create({
-            nzTitle:"Detail",
+            nzTitle: "Detail",
             nzContent: NssiModelComponent,
-            nzWidth:"70%",
+            nzWidth: "70%",
             nzOkText: null,
             nzCancelText: null,
-            nzComponentParams:{
-                nssiId:data.service_instance_id
+            nzComponentParams: {
+                nssiId: data.service_instance_id
             }
         })
     }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
index fc07efc9..fbce729f 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {Component, Input, OnInit, ViewChild,SimpleChanges} from '@angular/core';
 import { SlicingTaskServices } from '.././../../../../../core/services/slicingTaskServices';
 import { BUSINESS_STATUS } from '../../../../../../../constants/constants';
 import { NzModalService, NzMessageService } from 'ng-zorro-antd';
@@ -17,14 +17,20 @@ export class SlicingBusinessTableComponent implements OnInit {
     ) {
     }
 
-    ngOnInit() {
-        this.getBusinessList()
+    @Input() currentTabName;
+
+    ngOnChanges(changes: SimpleChanges) {
+        if(changes.currentTabName.currentValue === 'Slicing Business Management'){
+            this.getBusinessList()
+        }else {
+            this.progressingTimer.forEach((item) => {
+                clearInterval(item.timer);
+            });
+            this.progressingTimer = [];
+        }
     }
-    ngOnDestroy() {
-        this.progressingTimer.forEach((item) => {
-            clearInterval(item.timer);
-        })
-        this.progressingTimer = [];
+    ngOnInit() {
+
     }
     selectedValue: string = BUSINESS_STATUS[0];
     listOfData: any[] = [];
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
index eed187ea..adbe769f 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
@@ -1,11 +1,11 @@
-<nz-tabset class="slicing-resource_tab"  (nzSelectChange)="handleTabChange($event)">
-  <nz-tab nzTitle="Slicing Business Management">
-      <app-slicing-business-table *ngIf="currentTab ==='Slicing Business Management'"></app-slicing-business-table>
-  </nz-tab>
-  <nz-tab nzTitle="Slicing Instance Management">
-      <app-nsi-table *ngIf="currentTab ==='Slicing Instance Management'"></app-nsi-table>
-  </nz-tab>
-  <nz-tab nzTitle="Slicing Subnet Instance Management">
-      <app-nssi-table *ngIf="currentTab ==='Slicing Subnet Instance Management'"></app-nssi-table>
-  </nz-tab>
+<nz-tabset class="slicing-resource_tab" (nzSelectChange)="handleTabChange($event)">
+    <nz-tab nzTitle="Slicing Business Management">
+        <app-slicing-business-table [currentTabName]="currentTab"></app-slicing-business-table>
+    </nz-tab>
+    <nz-tab nzTitle="Slicing Instance Management">
+        <app-nsi-table [currentTabName]="currentTab"></app-nsi-table>
+    </nz-tab>
+    <nz-tab nzTitle="Slicing Subnet Instance Management">
+        <app-nssi-table [currentTabName]="currentTab"></app-nssi-table>
+    </nz-tab>
 </nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
index b88b9073..a2a0aaf7 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
@@ -1,19 +1,29 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit, SimpleChanges} from '@angular/core';
 
 @Component({
-  selector: 'app-slicing-resource-management',
-  templateUrl: './slicing-resource-management.component.html',
-  styleUrls: ['./slicing-resource-management.component.less']
+    selector: 'app-slicing-resource-management',
+    templateUrl: './slicing-resource-management.component.html',
+    styleUrls: ['./slicing-resource-management.component.less']
 })
 export class SlicingResourceManagementComponent implements OnInit {
 
-  constructor() { }
+    constructor() {}
+
+    @Input() currentTabTitle;
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.currentTabTitle.currentValue === 'Slicing Resource Management') {
+            this.currentTab = 'Slicing Business Management'
+        }else {
+            this.currentTab = ''
+        }
+    }
+
+    ngOnInit() {}
+
+    currentTab = '';
 
-  ngOnInit() {
-  }
-    currentTab = 'Slicing Business Management';
     handleTabChange($event): void {
-       console.log($event,"$event");
-       this.currentTab = $event.tab._title;
+        this.currentTab = $event.tab._title;
     }
 }