feat: Added drop-down loading function to the select box of task processing component

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

1 files changed, 40 insertions, 9 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
index afec64a7..19c83728 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
@@ -8,14 +8,29 @@
 	</app-basic-info>
 
   <div>
-    <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null">
+    <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null" *ngIf="slicingInstances">
       <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
         <div nz-col nzSpan="12">
           切片实例 ID：
-          <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="slicingInstanceChange()"
-            (nzOpenChange)="getSlicingData($event)">
-            <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id"
-              [nzLabel]="item.service_instance_id"></nz-option>
+          <nz-select 
+            nzShowSearch 
+            [(ngModel)]="selectedServiceId" 
+            (nzOpenChange)="openSlicingInstance($event)"
+            (nzScrollToBottom)="getNextPageData()"
+            (ngModelChange)="slicingInstanceChange()"
+          >
+            <nz-option 
+              nzCustomContent   
+              *ngFor="let item of slicingInstances.list" 
+              [nzValue]="item.service_instance_id" 
+              [nzLabel]="item.service_instance_id"
+            >
+              <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}}
+            </nz-option>
+            <nz-option *ngIf="slicingInstances.isLoading" nzDisabled nzCustomContent>
+              <i class="anticon anticon-loading anticon-spin loading-icon"></i> 
+              Loading Data...
+            </nz-option>
           </nz-select>
         </div>
         <div nz-col nzSpan="8">
@@ -33,10 +48,26 @@
           <div nz-row [nzGutter]="8">
             <div nz-col nzSpan="12">
               切片子网实例 ID：
-              <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)"
-                (nzOpenChange)="getSubnetInstances($event, item)" [nzDisabled]="isDisabled">
-                <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id"
-                  [nzLabel]="item.service_instance_id"></nz-option>
+              <nz-select 
+                nzShowSearch 
+                [nzDisabled]="isDisabled"
+                [(ngModel)]="item.slicingId" 
+                (ngModelChange)="slicingSubnetChange(item)"
+                (nzOpenChange)="openSubnetInstances($event, item)" 
+                (nzScrollToBottom)="getNextPageSubnet(item)"
+              >
+                <nz-option 
+                  nzCustomContent 
+                  *ngFor="let item of item.instances" 
+                  [nzValue]="item.service_instance_id"
+                  [nzLabel]="item.service_instance_id" 
+                >
+                  <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}}
+                </nz-option>
+                <nz-option *ngIf="item.isLoading" nzDisabled nzCustomContent>
+                  <i class="anticon anticon-loading anticon-spin loading-icon"></i> 
+                  Loading Data...
+                </nz-option>
               </nz-select>
             </div>
             <div nz-col nzSpan="8">