Support NS Package Upload for VF-C

Change-Id: Id5818d125ca7ed54079ae05df93100df9d43da13
Issue-ID: USECASEUI-156
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

2 files changed, 430 insertions, 219 deletions

diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index c0e91543..c552ba73 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -13,18 +13,7 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<h3 class="title"> Onboard VNF </h3>
-<nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
-    <p class="ant-upload-drag-icon">
-        <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-    </p>
-    <p class="ant-upload-text">Click or drag file to this area to upload</p>
-    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or
-        other band files</p>
-</nz-upload>
-<button nz-button [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0" style="margin-top: 16px">
-    {{ uploading ? 'Uploading' : 'Start Upload' }}
-</button>
+
 <!-- <button nz-button nzType="primary" (click)="showModal()">
     <i class="anticon anticon-plus-circle-o"></i><span> Create </span>
 </button>
@@ -45,12 +34,32 @@
 </nz-tabset> -->
 
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, url)">
+    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab,nsdInfoId,url)">
         <!-- nsList -->
         <div class="list" *ngIf="tab === 'NS'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+            <h3 class="title"> Onboard {{tabTitle}} </h3>
+            <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
+                <p class="ant-upload-drag-icon">
+                    <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+                </p>
+                <p class="ant-upload-text">Click or drag file to this area to upload</p>
+                <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+            </nz-upload>
+            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
+                style="margin-top: 16px">
+                {{ uploading ? 'Uploading' : 'Start Upload' }}
+            </button>
+            <!-- tablist -->
+            <nz-table #nzTable [nzData]="tableData" 
+                nzShowSizeChanger [nzFrontPagination]="true" 
+                [nzShowQuickJumper]="true"
+                [nzPageSizeOptions]="[5,10,15,20]" 
+                [nzTotal]='total' [(nzPageSize)]="pageSize" 
+                [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading" 
+                nzSize="middle" 
+                (nzPageSizeChange)="searchNsData(true)">
+                <!-- (nzPageIndexChange)="searchNsData()"  -->
                 <thead (nzSortChange)="sort($event)" nzSingleSort>
                     <tr>
                         <th nzWidth="5%">NO</th>
@@ -60,7 +69,7 @@
                         <th nzWidth="15%">Onboarding State</th>
                         <th nzWidth="20%">Operational State</th>
                         <th nzWidth="20%">Usage State</th>
-                        <th nzWidth="15%"></th>
+                        <th nzWidth="15%">Operation button</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -76,61 +85,49 @@
                         <td *ngIf="item.version">{{ item.version }}</td>
                         <td>
                             <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span>
+                        'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span>
                             <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> -->
                         </td>
                         <td>{{item.nsdOperationalState}}</td>
                         <td>{{item.nsdUsageState}}</td>
                         <td>
                             <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"></i>
-                            <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i>
-                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
+                            <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> -->
+                            <i class="anticon anticon-delete" (click)="deleteNsService(i,item.id)" *ngIf="item.id"></i>
+                            <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> -->
                         </td>
                     </tr>
                 </tbody>
             </nz-table>
         </div>
         <!-- VNFList -->
-        <!-- <div class="list" *ngIf="tab === 'VNF'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
-                <thead (nzSortChange)="sort($event)" nzSingleSort>
-                    <tr>
-                        <th nzWidth="5%">NO</th>
-                        <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
-                        <th nzWidth="20%">Type</th>
-                        <th nzWidth="20%">Version</th>
-                        <th nzWidth="15%">Onboarding State</th>
-                        <th nzWidth="20%">Operational State</th>
-                    </tr>
-                </thead> -->
-        <!-- <tbody>
-                    <tr *ngFor="let item of nzTable.data; let i = index; ">
-                        <td>{{item.id}}</td>
-                        <td>{{item.name}}</td>
-                        <td>{{item.type}}</td>
-                        <td>{{item.version}}</td>
-                        <td>
-                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                        </td>
-                        <td> -->
-        <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-        <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.id)"></i>
-                            <i class="anticon anticon-download" (click)="downloadVnfService(item.id)" *ngIf="item.uuid"></i>
-                            <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id }}"></i>
-                        </td>
-                    </tr>
-                </tbody>
-            </nz-table>
-        </div> -->
         <div class="list" *ngIf="tab === 'VNF'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+            <h3 class="title"> Onboard {{tabTitle}} </h3>
+            <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF">
+                <p class="ant-upload-drag-icon">
+                    <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+                </p>
+                <p class="ant-upload-text">Click or drag file to this area to upload</p>
+                <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+            </nz-upload>
+            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0"
+                style="margin-top: 16px">
+                {{ uploading ? 'Uploading' : 'Start Upload' }}
+            </button>
+            <!-- tabList -->
+            <nz-table #nzTable [nzData]="tableData" 
+                nzShowSizeChanger
+                [nzFrontPagination]="true" 
+                [nzShowQuickJumper]="true" 
+                [nzPageSizeOptions]="[5,10,15,20]" 
+                [nzTotal]= 'total'
+                [(nzPageSize)]="pageSize" 
+                [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading"
+                nzSize="middle"
+                (nzPageSizeChange)="searchVnfData(true)">
+                 <!--(nzPageIndexChange)="searchVnfData()" -->
                 <thead (nzSortChange)="sort($event)" nzSingleSort>
                     <tr>
                         <th nzWidth="5%">NO</th>
@@ -146,23 +143,25 @@
                     <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
                     <tr *ngFor="let item of nzTable.data; let i = index; ">
                         <!-- <td>{{i+1}}</td> -->
-                        <td>{{item.id}}</td>
-                        <td>{{item.vnfProductName}}</td>
-                        <td>{{item.vnfdVersion}}</td>
+                        <td *ngIf="item.id">{{item.id}}</td>
+                        <td *ngIf="item.uuid">{{item.uuid}}</td>
+                        <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
+                        <td *ngIf="item.name">{{item.name}}</td>
+                        <td  *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
+                        <td  *ngIf="item.version">{{item.version}}</td>
                         <td>{{item.onboardingState}}</td>
                         <td>{{item.usageState}}</td>
                         <td>{{item.operationalState}}</td>
                         <!-- <td>
-                <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                </td> -->
+                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.operationalState}}</span>
+                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                        </td> -->
                         <td>
                             <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"
-                                *ngIf="item.uuid"></i>
-                            <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i>
-                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
+                            <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> -->
+                            <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id}}" *ngIf="item.id"></i>
                         </td>
                     </tr>
                     <!-- </ng-template> -->
@@ -170,44 +169,32 @@
             </nz-table>
         </div>
         <!-- PNFList -->
-        <!-- <div class="list" *ngIf="tab === 'PNF'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
-                <thead (nzSortChange)="sort($event)" nzSingleSort>
-                    <tr>
-                        <th nzWidth="5%">NO</th>
-                        <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
-                        <th nzWidth="20%">Type</th>
-                        <th nzWidth="20%">Version</th>
-                        <th nzWidth="15%">Onboarding State</th>
-                        <th nzWidth="20%">Operational State</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr *ngFor="let item of nzTable.data; let i = index; ">
-                        <td>{{item.id}}</td>
-                        <td>{{item.name}}</td>
-                        <td>{{item.type}}</td>
-                        <td>{{item.version}}</td>
-                        <td>
-                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                        </td>
-                        <td>
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataPnfService(item.id)"></i>
-                            <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"  *ngIf="item.uuid"></i>
-                            <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)" id="{{ item.id }}"></i>
-                        </td>
-                    </tr>
-                </tbody>
-            </nz-table>
-        </div> -->
         <div class="list" *ngIf="tab === 'PNF'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+            <h3 class="title"> Onboard {{tabTitle}} </h3>
+            <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF">
+                <p class="ant-upload-drag-icon">
+                    <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+                </p>
+                <p class="ant-upload-text">Click or drag file to this area to upload</p>
+                <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+            </nz-upload>
+            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0"
+                style="margin-top: 16px">
+                {{ uploading ? 'Uploading' : 'Start Upload' }}
+            </button>
+            <!-- tabList -->
+            <nz-table #nzTable [nzData]="tableData" 
+                nzShowSizeChanger
+                [nzFrontPagination]="true" 
+                [nzShowQuickJumper]="true" 
+                [nzPageSizeOptions]="[5,10,15,20]" 
+                [nzTotal]= 'total'
+                [(nzPageSize)]="pageSize" 
+                [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading"
+                nzSize="middle"
+                (nzPageSizeChange)="searchPnfData(true)">
+                 <!-- (nzPageIndexChange)="searchPnfData()"  -->
                 <thead (nzSortChange)="sort($event)" nzSingleSort>
                     <tr>
                         <th nzWidth="5%">NO</th>
@@ -228,16 +215,15 @@
                         <td>{{item.pnfdOnboardingState}}</td>
                         <td>{{item.pnfdUsageState}}</td>
                         <!-- <td>
-        <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-        'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-        <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-        </td> -->
+                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                        </td> -->
                         <td>
                             <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"
-                                *ngIf="item.uuid"></i>
-                            <i class="anticon anticon-download" (click)="downloadService(item.id)"></i>
-                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                            <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> -->
+                            <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> -->
+                            <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)"></i>
                         </td>
                     </tr>
                     <!-- </ng-template> -->
@@ -245,4 +231,5 @@
             </nz-table>
         </div>
     </nz-tab>
-</nz-tabset>
\ No newline at end of file
+</nz-tabset>
+
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index 77befe17..650f2162 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -5,6 +5,7 @@ import { onboardService } from '../../onboard.service';
 import { slideToRight } from '../../animates';
 import { NzMessageService, UploadFile } from 'ng-zorro-antd';
 import { filter } from 'rxjs/operators';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-onboard-vnf-vm',
@@ -14,38 +15,185 @@ import { filter } from 'rxjs/operators';
 })
 export class OnboardVnfVmComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
-
+  //url
+  url = {
+    // ns: 'http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content',
+    // vnf: 'http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content',
+    // pnf: 'http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content'
+    ns: 'https://jsonplaceholder.typicode.com/posts/',
+    vnf: 'https://jsonplaceholder.typicode.com/posts/',
+    pnf: 'https://jsonplaceholder.typicode.com/posts/',
+  };
+  nsdInfoId = '';
+  vnfPkgId ='';
+  pnfdInfoId = '';
+  tabTitle = "NS";
   uploading = false;
-  fileList: UploadFile[] = [];
-  constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService) { }
+  fileListNS: UploadFile[] = [];
+  fileListVNF: UploadFile[] = [];
+  fileListPNF: UploadFile[] = [];
+  constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title) { }
 
+  //default 默认调用ns数据
   ngOnInit() {
+    console.log("11111111111111")
     this.getTableData();
   }
 
-  beforeUpload = (file: UploadFile): boolean => {
-    this.fileList.push(file);
-    console.log('beforeUpload')
-    // this.myhttp.getCreatensData()
-    //   .subscribe((data) => {
-    //     console.log(33, data);
-    //   }, (err) => {
-    //     console.log(err);
-    //   })
+  //表格数据
+  tableData:any;
+  sdcData:any;
+  vfcData:any;
+  pageIndex = 1;
+  pageSize = 10;
+  total;
+  loading = false;
+  sortName = null;
+  sortValue = null;
+  tabs = ['NS', 'VNF', 'PNF'];
+  
+  isVisible = false;
+  isOkLoading = false;
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleCancel(): void {
+    this.isVisible = false;
+  }
+
+  // 处理tab切换 请求数据
+  handleTabChange(tab,nsdInfoId,url) {
+    this.tabTitle = tab;
+    console.log(tab);
+    console.log(this.url);
+    switch (tab) {
+      case 'NS':
+        // this.pageIndex = 1;
+        // this.pageSize = 10;
+          this.getTableData();
+        break
+      case 'VNF':
+        // this.pageIndex = 1;
+        // this.pageSize = 10;
+          this.getTableVnfData()
+        break
+      case 'PNF':
+        // this.pageIndex = 1;
+        // this.pageSize = 10;
+          this.getTablePnfData()
+        break
+    }
+  }
+
 
+  //before put 创建--上传之前将文件拖拽到页面时
+    // requestBody = {
+    //        "userDefinedData": {
+    //             "additionalProp1": "string",
+    //             "additionalProp2": "string",
+    //             "additionalProp3": "string"
+    //        }
+    //   }
+    //  requestBody = {};
+   // ns  beforeUpload
+  beforeUploadNS = (file: UploadFile): boolean => {
+    this.fileListNS.push(file);
+    console.log('beforeUpload');
+      // this.myhttp.getCreatensData("createNetworkServiceData",requestBody)//线上
+      this.myhttp.getCreatensData("creatensDataNS")  //本地
+        .subscribe((data) => {
+          console.log("拖拽文件后返回的数据NS-->", data);
+          this.nsdInfoId = data["id"];
+          console.log("拖拽文件后返回的数据的id-->",this.nsdInfoId);
+        }, (err) => {
+          console.log(err);
+        })
     return false;
   }
 
-  handleUpload(): void {
+  //vnf  beforeUpload
+  beforeUploadVNF = (file: UploadFile,tab): boolean => {
+    this.fileListVNF.push(file);
+    console.log('beforeUpload');
+      // this.myhttp.getCreatensData("createVnfData",requestBody)//线上
+      this.myhttp.getCreatensData("creatensDataVNF") //本地
+        .subscribe((data) => {
+          console.log("拖拽文件后返回的数据VNF-->", data);
+          this.vnfPkgId = data["id"];
+          console.log("拖拽文件后返回的数据的id-->",this.vnfPkgId);
+        }, (err) => {
+          console.log(err);
+        })
+    return false;
+  }
+
+  // //pnf eforeUpload
+  beforeUploadPNF = (file: UploadFile,tab): boolean => {
+    this.fileListPNF.push(file);
+    console.log('beforeUpload');
+      // this.myhttp.getCreatensData("createPnfData",requestBody)  //线上
+      this.myhttp.getCreatensData("creatensDataPNF")  //本地
+        .subscribe((data) => {
+          console.log("拖拽文件后返回的数据PNF-->", data);
+          this.pnfdInfoId = data["id"];
+          console.log("拖拽文件后返回的数据的id-->",this.pnfdInfoId);
+        }, (err) => {
+          console.log(err);
+        })
+    return false;
+  }
+    
+
+  //拖拽后点击上传按钮
+  onClick (tab) {
+    switch (tab) {
+      case 'NS':
+      console.log(this.nsdInfoId);
+      // this.handleUpload('http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content');
+        this.handleUpload(this.url.ns,tab);
+        this.getTableData();
+        break
+      case 'VNF':
+      console.log(this.vnfPkgId);
+     // this.handleUpload('http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content'); 
+        this.handleUpload(this.url.vnf,tab); 
+        this.getTableVnfData()
+        break
+      case 'PNF':
+      console.log(this.pnfdInfoId);
+      // this.handleUpload('http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content');
+        this.handleUpload(this.url.pnf,tab);  
+        this.getTablePnfData();  
+        break
+    }
+  }
+
+  //put Upload 上传
+  handleUpload(url,tab): void { 
     console.log('startUpload')
     const formData = new FormData();
     // tslint:disable-next-line:no-any
-    this.fileList.forEach((file: any) => {
-      formData.append('files[]', file);
-    });
+    switch (tab) {
+      case 'NS':
+      this.fileListNS.forEach((file: any) => {
+        formData.append('files[]', file);
+      });
+    break
+    case 'VNF':
+      this.fileListVNF.forEach((file: any) => {
+        formData.append('files[]', file);
+      });
+    break
+    case 'PNF':
+      this.fileListPNF.forEach((file: any) => {
+        formData.append('files[]', file);
+      });
+    break
+    }
     this.uploading = true;
     // You can use any AJAX library you like
-    const req = new HttpRequest('POST', 'https://jsonplaceholder.typicode.com/posts/', formData, {
+    const req = new HttpRequest('POST', url, formData, {
       reportProgress: true,
       withCredentials: true
     });
@@ -55,7 +203,6 @@ export class OnboardVnfVmComponent implements OnInit {
       .subscribe(
         (event: {}) => {
           this.uploading = false;
-          this.getTableData();
           console.log('upload successfully')
           this.msg.success('upload successfully.');
         },
@@ -66,30 +213,9 @@ export class OnboardVnfVmComponent implements OnInit {
         }
       );
   }
-  //表格数据
-  tableData = [];
-  sdData = [];
-  vfcData = [];
-  pageIndex = 1;
-  pageSize = 10;
-  total = 100;
-  loading = false;
-  sortName = null;
-  sortValue = null;
-  tabs = ['NS', 'VNF', 'PNF'];
-  
-  isVisible = false;
-  isOkLoading = false;
-  showModal(): void {
-    this.isVisible = true;
-  }
 
-  handleCancel(): void {
-    this.isVisible = false;
-  }
-  // getCreatensData() {
+//----------------------------------------------------------------------------------------------
 
-  // }
   // 获取NS列表
   getTableData() {
     // 查询参数: 当前页码，每页条数，排序方式
@@ -98,31 +224,31 @@ export class OnboardVnfVmComponent implements OnInit {
       pageSize: this.pageSize,
       nameSort: this.sortValue
     }
-
+    //vfc
     this.myhttp.getOnboardTableData(paramsObj)
-      .subscribe((data) => {
-        console.log(99, data);
-        this.total = data.body.total;
-        this.sdData = data.body.tableList;
-        console.log(this.sdData);
-      }, (err) => {
-        console.log(err);
-      })
-
-    this.myhttp.getOnboardTablePnfData(paramsObj)
-      .subscribe((data) => {
-        console.log(222, data);
-        this.total = data.body.total;
-        this.vfcData = data.body.tableList;
-        console.log(this.vfcData);
-        this.tableData = this.vfcData.concat(this.sdData)
-        console.log(99, this.tableData)
-      }, (err) => {
-        console.log(err);
-      })
+    .subscribe((data) => {
+      console.log(data)
+      this.total = data["body"].length; //body length
+      console.log( this.total)
+      // this.sdData = data.body.tableList;
+      this.vfcData = data.body;
+      console.log(typeof this.vfcData)
+      console.log("NSlist-vfc-->",data.body)
+    }, (err) => {
+      console.log(err);
+    })
+    // sdc
+    this.myhttp.getSDC_NSTableData(paramsObj)
+    .subscribe((data) => {
+      console.log('NSlist-sdc-->',data)
+      this.sdcData = data.body;
+      this.tableData = this.vfcData.concat(this.sdcData)
+    }, (err) => {
+     console.log(err);
+    })
   }
 
-  // 获取VNF列表
+  // 获取vnf列表
   getTableVnfData() {
     // 查询参数: 当前页码，每页条数，排序方式
     let paramsObj = {
@@ -133,15 +259,28 @@ export class OnboardVnfVmComponent implements OnInit {
 
     this.myhttp.getOnboardTableVnfData(paramsObj)
       .subscribe((data) => {
-        console.log(222, data);
-        this.total = data.body.total;
-        this.tableData = data.body.tableList;
+        console.log("vnfList-->", data);
+        // this.total = data["body"].length; //body length
+        // console.log( this.total)
+        this.vfcData = data.body;
+        // this.tableData = data.body;
+        console.log("vnfList-vfc-->",data.body)
+      }, (err) => {
+        console.log(err);
+      })
+
+    // sdc
+    this.myhttp.getSDC_VNFTableData()
+      .subscribe((data) => {
+        console.log('vnfList-sdc-->',data)
+        this.sdcData = data;
+        this.tableData = this.vfcData.concat(this.sdcData)
       }, (err) => {
         console.log(err);
       })
   }
 
-  // 获取VNF列表
+  // 获取pnf列表
   getTablePnfData() {
     // 查询参数: 当前页码，每页条数，排序方式
     let paramsObj = {
@@ -152,30 +291,14 @@ export class OnboardVnfVmComponent implements OnInit {
 
     this.myhttp.getOnboardTablePnfData(paramsObj)
       .subscribe((data) => {
-        console.log(222, data);
-        this.total = data.body.total;
-        this.tableData = data.body.tableList;
+        console.log("pnfList-->", data);
+        this.total = data["body"]; //body length
+        this.tableData = data.body;
       }, (err) => {
         console.log(err);
       })
   }
-  // 处理tab切换
-  handleTabChange(tab) {
-    console.log(tab)
-    switch (tab) {
-      case 'NS':
-        // this.tableData = []
-        
-        this.getTableData()
-        break
-      case 'VNF':
-        this.getTableVnfData()
-        break
-      case 'PNF':
-        this.getTablePnfData()
-        break
-    }
-  }
+
 
   sort(sort: { key: string, value: string }): void {
     console.log(sort);
@@ -183,16 +306,66 @@ export class OnboardVnfVmComponent implements OnInit {
     this.sortValue = sort.value;
     this.getTableData();
   }
-  searchData(reset:boolean = false){
-    console.log(reset)
-    this.getTableData();
-  }
-  // onboard
-  updataService(id) {
+  
+//-----------------------------------------------------------------------------------
+
+  //选择条数
+  // searchNsData(reset: boolean = false) {
+  //   console.log('dddd',reset)
+  //   this.getTableData();
+  // }
+
+
+  /* onboard  上传按钮 */
+  // ns onboard
+  updataNsService(id) {
     console.log(id);
+    let requestBody = {
+        "csarId": id
+    }
+    this.myhttp.getNsonboard(requestBody)
+      .subscribe((data) => {
+        console.log('onboard ns sdc', data);
+      }, (err) => {
+        console.log(err);
+      })
+    
+  }
+
+  // searchVnfData(reset: boolean = false) {
+  //   console.log('vvvv',reset)
+  //   this.getTableVnfData();
+  // }
+
+  // vnf onboard
+  updataVnfService(id) {
+    console.log(id)
+    let requestBody = {
+      "csarId": id
   }
-  //delete
-  deleteService(index,pkgid) {
+  this.myhttp.getVnfonboard(requestBody)
+    .subscribe((data) => {
+      console.log('onboard vnf sdc', data);
+    }, (err) => {
+      console.log(err);
+    })
+  }
+
+  // searchPnfData(reset: boolean = false) {
+  //   console.log('pppp',reset)
+  //   this.getTablePnfData();
+  // }
+
+  // pnf onboard ?
+  updataPnfService(id) {
+    console.log('pnf',id);
+  }
+
+
+  //--------------------------------------------------------------------------------
+  /* delete  删除按钮 */
+  //delete nsItem
+  deleteNsService(index,pkgid) {
     console.log(pkgid)
     console.log("deleteService!");
     this.myhttp.deleteNsIdData(pkgid)
@@ -201,16 +374,67 @@ export class OnboardVnfVmComponent implements OnInit {
       }, (err) => {
         console.log(err);
       })
+      console.log(index)
+    this.tableData.splice(index, 1)
+    console.log(this.tableData.length)
+	//  this.getTableData()
+   }
+
+  //delete vnfItem
+  deleteVnfService(index,pkgid) {
+    console.log(pkgid)
+    console.log("deleteVnfService!");
+    this.myhttp.deleteVnfIdData(pkgid)
+      .subscribe((data) => {
+        console.log(44, data);
+      }, (err) => {
+        console.log(err);
+      })
+      console.log(index)
     this.tableData.splice(index, 1)
+    console.log(this.tableData.length)
+    this.getTableVnfData()
   }
-  downloadService(id) {
-    console.log('download')
-    console.log(id)
-    this.myhttp.downloadNsData(id)
-    .subscribe((data) => {
-      console.log(44, data);
-    }, (err) => {
-      console.log(err);
-    })
+
+  //delete PnfItem
+  deletePnfService(index,pkgid) {
+    console.log(pkgid)
+    console.log("deletePnfService!");
+    this.myhttp.deletePnfIdData(pkgid)
+      .subscribe((data) => {
+        console.log(44, data);
+      }, (err) => {
+        console.log(err);
+      })
+      console.log(index)
+    this.tableData.splice(index, 1)
+    console.log(this.tableData.length)
+    this.getTablePnfData()
   }
+
+
+//--------------------------------------------------------------------------------------
+  //download 下载
+  // downloadNsService(id) {
+  //   console.log('download')
+  //   console.log(id)
+  //   this.myhttp.downloadNsData(id)
+  //   .subscribe((data) => {
+  //     console.log(44, data);
+  //   }, (err) => {
+  //     console.log(err);
+  //   })
+  // }
+
+  // downloadVnfService() {
+  //   console.log('downloadVnf')
+  //   this.myhttp.downloadVnfData()
+  //   .subscribe((data) => {
+  //     console.log('downloadVnf pack', data);
+  //   }, (err) => {
+  //     console.log(err);
+  //   })
+  // }
+
+
 }