style: Split the area component from the subnet module

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: I8d79b648b9b817f39d94799cb99be61e4ae8b393
Issue-ID: USECASEUI-527

9 files changed, 404 insertions, 336 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 7559862e..be1f08a3 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -13,204 +13,207 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule  } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { HttpClient } from '@angular/common/http';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { NZ_I18N, en_US } from 'ng-zorro-antd';
-import { NgxEchartsModule } from 'ngx-echarts';
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { HttpClientModule } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
+import { NgZorroAntdModule } from "ng-zorro-antd";
+import { NZ_I18N, en_US } from "ng-zorro-antd";
+import { NgxEchartsModule } from "ngx-echarts";
 
 //Custom Directive
-import { DisableControlDirective } from './core/Directives/disable-control.directive';
+import { DisableControlDirective } from "./core/Directives/disable-control.directive";
 
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 export function HttpLoaderFactory(httpClient: HttpClient) {
-  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
+	return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
 }
 
-import { AppRoutingModule } from './app-routing.module';
+import { AppRoutingModule } from "./app-routing.module";
 
 //Registered language pack
-import { registerLocaleData } from '@angular/common';
-import en from '@angular/common/locales/en';
+import { registerLocaleData } from "@angular/common";
+import en from "@angular/common/locales/en";
 registerLocaleData(en);
 
 //Custom component
-import { AppComponent } from './app.component';
-import { HomeComponent } from './views/home/home.component';
-import { ManagementComponent } from './views/management/management.component';
-import { ServicesListComponent } from './views/services/services-list/services-list.component';
-import { OnboardVnfVmComponent } from './views/onboard-vnf-vm/onboard-vnf-vm.component';
-import { AlarmComponent } from './views/alarm/alarm.component';
-import { PerformanceComponent } from './views/performance/performance.component';
-import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component';
-import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
-import { CcvpnNetworkComponent } from './views/network/ccvpn-network/ccvpn-network.component';
-import { CcvpnDetailComponent } from './views/services/services-list/ccvpn-detail/ccvpn-detail.component';
-import { CcvpnCreationComponent } from './views/services/services-list/ccvpn-creation/ccvpn-creation.component';
-import { MdonsDetailComponent } from './views/services/services-list/mdons-detail/mdons-detail.component';
-import { MdonsCreationComponent } from './views/services/services-list/mdons-creation/mdons-creation.component';
-import { MdonsNetworkComponent } from './views/network/mdons-network/mdons-network.component';
-
-import { DetailsComponent } from './shared/components/details/details.component';
-import { GraphiclistComponent } from './shared/components/graphiclist/graphiclist.component';
-import { E2eCreationComponent } from './views/services/services-list/e2e-creation/e2e-creation.component';
-
-import { BarComponent } from './shared/components/charts/bar/bar.component';
-import { LineComponent } from './shared/components/charts/line/line.component';
-import { PieComponent } from './shared/components/charts/pie/pie.component';
-
-import { PathLocationStrategy, LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { AppComponent } from "./app.component";
+import { HomeComponent } from "./views/home/home.component";
+import { ManagementComponent } from "./views/management/management.component";
+import { ServicesListComponent } from "./views/services/services-list/services-list.component";
+import { OnboardVnfVmComponent } from "./views/onboard-vnf-vm/onboard-vnf-vm.component";
+import { AlarmComponent } from "./views/alarm/alarm.component";
+import { PerformanceComponent } from "./views/performance/performance.component";
+import { PerformanceVnfComponent } from "./views/performance/performance-vnf/performance-vnf.component";
+import { PerformanceVmComponent } from "./views/performance/performance-vm/performance-vm.component";
+import { CcvpnNetworkComponent } from "./views/network/ccvpn-network/ccvpn-network.component";
+import { CcvpnDetailComponent } from "./views/services/services-list/ccvpn-detail/ccvpn-detail.component";
+import { CcvpnCreationComponent } from "./views/services/services-list/ccvpn-creation/ccvpn-creation.component";
+import { MdonsDetailComponent } from "./views/services/services-list/mdons-detail/mdons-detail.component";
+import { MdonsCreationComponent } from "./views/services/services-list/mdons-creation/mdons-creation.component";
+import { MdonsNetworkComponent } from "./views/network/mdons-network/mdons-network.component";
+
+import { DetailsComponent } from "./shared/components/details/details.component";
+import { GraphiclistComponent } from "./shared/components/graphiclist/graphiclist.component";
+import { E2eCreationComponent } from "./views/services/services-list/e2e-creation/e2e-creation.component";
+
+import { BarComponent } from "./shared/components/charts/bar/bar.component";
+import { LineComponent } from "./shared/components/charts/line/line.component";
+import { PieComponent } from "./shared/components/charts/pie/pie.component";
+
+import {
+	PathLocationStrategy,
+	LocationStrategy,
+	HashLocationStrategy,
+} from "@angular/common";
 // common function util
-import { Util } from './shared/utils/utils';
+import { Util } from "./shared/utils/utils";
 // common function http
-import { Http } from './shared/utils/http';
+import { Http } from "./shared/utils/http";
 // Custom service
-import { ServiceListService } from './core/services/serviceList.service';
-import { HomesService } from './core/services/homes.service';
-import { onboardService } from './core/services/onboard.service';
-import { networkHttpservice } from './core/services/networkHttpservice.service';
+import { ServiceListService } from "./core/services/serviceList.service";
+import { HomesService } from "./core/services/homes.service";
+import { onboardService } from "./core/services/onboard.service";
+import { networkHttpservice } from "./core/services/networkHttpservice.service";
 // slicingTask service
-import { SlicingTaskServices } from './core/services/slicingTaskServices'
-
-import { PerformanceDetailsComponent } from './shared/components/performance-details/performance-details.component';
-import { E2eDetailComponent } from './views/services/services-list/e2e-detail/e2e-detail.component';
-import { CustomerComponent } from './views/management/customer/customer.component';
-import { ManagemencsService } from './core/services/managemencs.service';
-import { FcapsComponent } from './views/fcaps/fcaps.component';
-import { TestComponent } from './test/test.component';
-import { TextService } from './core/services/text.service';
-import { TopCardComponent } from './views/services/services-list/top-card/top-card.component';
-import { CreateModelComponent } from './views/services/services-list/create-model/create-model.component';
-import { DeleteModelComponent } from './views/services/services-list/delete-model/delete-model.component';
-import { NotificationComponent } from './shared/components/notification/notification.component';
-import { ScaleModelComponent } from './views/services/services-list/scale-model/scale-model.component';
-import { HealModelComponent } from './views/services/services-list/heal-model/heal-model.component';
-import { Monitor5gComponent } from './views/fcaps/monitor-5g/monitor-5g.component';
-import { SlicingManagementComponent } from './views/services/slicing-management/slicing-management.component';
-import { SlicingTaskManagementComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-management.component';
-import { SlicingResourceManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-resource-management.component';
-import { SlicingTaskModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component';
-import { SubnetParamsModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component';
-import { SlicingBusinessTableComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component'
-import { BasicInfoComponent } from './shared/components/basic-info/basic-info.component';
-import { CheckProcessModelComponent } from './views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component'
-import { NsiTableComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component'
-import { NssiTableComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component'
-import { SlicingBusinessModelComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component';
-import { NsiModelComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component';
-import { NssiModelComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component';
-import { CsmfSlicingBusinessManagementComponent } from './views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component';
-import { BusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component';
-import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component';
-import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
-import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component';
-import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component';
-import { fakeBackendProvider } from '../../testBE/FakeBackendInterceptor';
+import { SlicingTaskServices } from "./core/services/slicingTaskServices";
+
+import { PerformanceDetailsComponent } from "./shared/components/performance-details/performance-details.component";
+import { E2eDetailComponent } from "./views/services/services-list/e2e-detail/e2e-detail.component";
+import { CustomerComponent } from "./views/management/customer/customer.component";
+import { ManagemencsService } from "./core/services/managemencs.service";
+import { FcapsComponent } from "./views/fcaps/fcaps.component";
+import { TestComponent } from "./test/test.component";
+import { TextService } from "./core/services/text.service";
+import { TopCardComponent } from "./views/services/services-list/top-card/top-card.component";
+import { CreateModelComponent } from "./views/services/services-list/create-model/create-model.component";
+import { DeleteModelComponent } from "./views/services/services-list/delete-model/delete-model.component";
+import { NotificationComponent } from "./shared/components/notification/notification.component";
+import { ScaleModelComponent } from "./views/services/services-list/scale-model/scale-model.component";
+import { HealModelComponent } from "./views/services/services-list/heal-model/heal-model.component";
+import { Monitor5gComponent } from "./views/fcaps/monitor-5g/monitor-5g.component";
+import { SlicingManagementComponent } from "./views/services/slicing-management/slicing-management.component";
+import { SlicingTaskManagementComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-management.component";
+import { SlicingResourceManagementComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-resource-management.component";
+import { SlicingTaskModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component";
+import { SubnetParamsModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component";
+import { SlicingBusinessTableComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component";
+import { BasicInfoComponent } from "./shared/components/basic-info/basic-info.component";
+import { CheckProcessModelComponent } from "./views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component";
+import { NsiTableComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component";
+import { NssiTableComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component";
+import { SlicingBusinessModelComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component";
+import { NsiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component";
+import { NssiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component";
+import { CsmfSlicingBusinessManagementComponent } from "./views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component";
+import { BusinessOrderComponent } from "./views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component";
+import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component";
+import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component";
+import { ManageServiceComponent } from "./views/services/sotn-management/manage-service/manage-service.component";
+import { MonitorServiceComponent } from "./views/services/sotn-management/monitor-service/monitor-service.component";
+import { fakeBackendProvider } from "../../testBE/FakeBackendInterceptor";
+import { CitySelectComponent } from "./shared/components/city-select/city-select/city-select.component";
 
 @NgModule({
-  providers: [
-    { provide: LocationStrategy, useClass: HashLocationStrategy },
-    { provide: NZ_I18N, useValue: en_US },
-    Util,
-    Http,
-    ServiceListService,
-    HomesService,
-    onboardService,
-    networkHttpservice,
-    ManagemencsService,
-    TextService,
-    SlicingTaskServices,
-    // fakeBackendProvider
-  ],
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    ManagementComponent,
-    ServicesListComponent,
-    OnboardVnfVmComponent,
-
-    AlarmComponent,
-
-    PerformanceComponent,
-    PerformanceVnfComponent,
-    PerformanceVmComponent,
-    DetailsComponent,
-    PieComponent,
-    LineComponent,
-    BarComponent,
-    GraphiclistComponent,
-    E2eCreationComponent,
-
-    CcvpnNetworkComponent,
-    CcvpnDetailComponent,
-    CcvpnCreationComponent,
-    E2eDetailComponent,
-    CustomerComponent,
-    PerformanceDetailsComponent,
-    FcapsComponent,
-    TestComponent,
-    TopCardComponent,
-    CreateModelComponent,
-    DeleteModelComponent,
-    NotificationComponent,
-    ScaleModelComponent,
-    HealModelComponent,
-    Monitor5gComponent,
-    SlicingManagementComponent,
-    SlicingTaskManagementComponent,
-    SlicingResourceManagementComponent,
-    SlicingTaskModelComponent,
-    SubnetParamsModelComponent,
-    SlicingBusinessTableComponent,
-    BasicInfoComponent,
-    CheckProcessModelComponent,
-      NsiTableComponent,
-      NssiTableComponent,
-      SlicingBusinessModelComponent,
-      NsiModelComponent,
-      NssiModelComponent,
-      CsmfSlicingBusinessManagementComponent,
-      BusinessOrderComponent,
-    MdonsCreationComponent,
-    MdonsDetailComponent,
-    DisableControlDirective,
-    SotnManagementComponent,
-    OrderServiceComponent,
-    ManageServiceComponent,
-    MonitorServiceComponent,
-    MdonsNetworkComponent
-  ],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    ReactiveFormsModule ,
-    HttpClientModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [HttpClient]
-      }
-    }),
-    BrowserAnimationsModule,
-    NgZorroAntdModule.forRoot(),
-    NgxEchartsModule,
-    AppRoutingModule
-  ],
-  bootstrap: [AppComponent],
-    entryComponents: [
-        SlicingBusinessModelComponent,
-        NsiModelComponent,
-        NssiModelComponent
-    ],
-  exports: [
-    FormsModule,
-    ReactiveFormsModule
-  ]
+	providers: [
+		{ provide: LocationStrategy, useClass: HashLocationStrategy },
+		{ provide: NZ_I18N, useValue: en_US },
+		Util,
+		Http,
+		ServiceListService,
+		HomesService,
+		onboardService,
+		networkHttpservice,
+		ManagemencsService,
+		TextService,
+		SlicingTaskServices,
+		// fakeBackendProvider
+	],
+	declarations: [
+		AppComponent,
+		HomeComponent,
+		ManagementComponent,
+		ServicesListComponent,
+		OnboardVnfVmComponent,
+
+		AlarmComponent,
+
+		PerformanceComponent,
+		PerformanceVnfComponent,
+		PerformanceVmComponent,
+		DetailsComponent,
+		PieComponent,
+		LineComponent,
+		BarComponent,
+		GraphiclistComponent,
+		E2eCreationComponent,
+
+		CcvpnNetworkComponent,
+		CcvpnDetailComponent,
+		CcvpnCreationComponent,
+		E2eDetailComponent,
+		CustomerComponent,
+		PerformanceDetailsComponent,
+		FcapsComponent,
+		TestComponent,
+		TopCardComponent,
+		CreateModelComponent,
+		DeleteModelComponent,
+		NotificationComponent,
+		ScaleModelComponent,
+		HealModelComponent,
+		Monitor5gComponent,
+		SlicingManagementComponent,
+		SlicingTaskManagementComponent,
+		SlicingResourceManagementComponent,
+		SlicingTaskModelComponent,
+		SubnetParamsModelComponent,
+		SlicingBusinessTableComponent,
+		BasicInfoComponent,
+		CheckProcessModelComponent,
+		NsiTableComponent,
+		NssiTableComponent,
+		SlicingBusinessModelComponent,
+		NsiModelComponent,
+		NssiModelComponent,
+		CsmfSlicingBusinessManagementComponent,
+		BusinessOrderComponent,
+		MdonsCreationComponent,
+		MdonsDetailComponent,
+		DisableControlDirective,
+		SotnManagementComponent,
+		OrderServiceComponent,
+		ManageServiceComponent,
+		MonitorServiceComponent,
+		MdonsNetworkComponent,
+		CitySelectComponent,
+	],
+	imports: [
+		BrowserModule,
+		FormsModule,
+		ReactiveFormsModule,
+		HttpClientModule,
+		TranslateModule.forRoot({
+			loader: {
+				provide: TranslateLoader,
+				useFactory: HttpLoaderFactory,
+				deps: [HttpClient],
+			},
+		}),
+		BrowserAnimationsModule,
+		NgZorroAntdModule.forRoot(),
+		NgxEchartsModule,
+		AppRoutingModule,
+	],
+	bootstrap: [AppComponent],
+	entryComponents: [
+		SlicingBusinessModelComponent,
+		NsiModelComponent,
+		NssiModelComponent,
+	],
+	exports: [FormsModule, ReactiveFormsModule],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html
new file mode 100644
index 00000000..e66d25f7
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html
@@ -0,0 +1,25 @@
+<div class="city-select">
+  <div *ngFor="let area of areaList; let i = index">
+    <nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0" class="subnet_params_area"
+      *ngFor="let item of area; let ind = index">
+      <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind" (nzOpenChange)="handleChange(area, item)"
+        (ngModelChange)=" handleChangeSelected(area, item) ">
+        <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
+        </nz-option>
+      </nz-select>
+    </nz-form-control>
+    <nz-form-control [nzSpan]="1">
+      <div class="validation_alert_area">{{checkArea(area)}}</div>
+    </nz-form-control>
+    <nz-form-control [nzSpan]="1" [nzOffset]="2">
+      <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="!i"
+        (click)="creatAreaList()">
+        <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
+      </button>
+      <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="i"
+        (click)="deleteAreaList(i)">
+        <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
+      </button>
+    </nz-form-control>
+  </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.less b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.less
new file mode 100644
index 00000000..644c93e2
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.less
@@ -0,0 +1,19 @@
+.city-select {
+    .subnet_params_area {
+        margin-right: 5px;
+    }
+
+    .validation_alert_area {
+        color: red;
+        margin-left: 6px;
+    }
+
+    .subnet_params_button {
+        margin-top: 7px;
+        margin-left: 10px;
+    }
+
+    .subnet_params_icon {
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.spec.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.spec.ts
new file mode 100644
index 00000000..968b7ab5
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CitySelectComponent } from './city-select.component';
+
+describe('CitySelectComponent', () => {
+  let component: CitySelectComponent;
+  let fixture: ComponentFixture<CitySelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CitySelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CitySelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts
new file mode 100644
index 00000000..432d49de
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts
@@ -0,0 +1,99 @@
+/*******
+    Input
+    areaList /MUST/: Selected region data
+********/
+import { Component, OnInit } from "@angular/core";
+import { Input } from "@angular/core";
+import { ADDRESS } from "./constants";
+
+@Component({
+	selector: "app-city-select",
+	templateUrl: "./city-select.component.html",
+	styleUrls: ["./city-select.component.less"],
+})
+export class CitySelectComponent implements OnInit {
+	@Input() areaList: any[];
+
+	constructor() {}
+
+	ngOnInit() {}
+	ngOnChanges() {}
+	handleChange(area: any[], areaItem: any): void {
+		if (areaItem.key === "province" && areaItem.options.length <= 1) {
+			areaItem.options = ADDRESS;
+		} else if (areaItem.key === "city" && areaItem.options.length <= 1) {
+			ADDRESS.forEach((item) => {
+				if (item.name === area[0].selected) {
+					areaItem.options = item.city;
+				}
+			});
+		} else if (
+			areaItem.key === "district" &&
+			areaItem.options.length <= 1
+		) {
+			ADDRESS.forEach((item: any) => {
+				item.city.forEach((city) => {
+					if (city.name === area[1].selected) {
+						areaItem.options = city.county;
+					}
+				});
+			});
+		}
+	}
+
+	handleChangeSelected(area: any[], areaItem: any) {
+		if (areaItem.key === "province") {
+			area[1].selected = "";
+			area[1].options = [];
+			area[2].selected = "";
+			area[2].options = [];
+		} else if (areaItem.key === "city") {
+			area[2].selected = "";
+			area[2].options = [];
+		}
+	}
+
+	// prompt text for each item of area_list
+	checkArea(area: any): string {
+		if (
+			area.every((item) => {
+				return item.selected === "";
+			})
+		) {
+			return "empty";
+		}
+		if (
+			area.some((item) => {
+				return item.selected === "";
+			})
+		) {
+			return "incomplete";
+		}
+		return "";
+	}
+
+	creatAreaList(): void {
+		let arr = [
+			{
+				key: "province",
+				selected: "",
+				options: [],
+			},
+			{
+				key: "city",
+				selected: "",
+				options: [],
+			},
+			{
+				key: "district",
+				selected: "",
+				options: [],
+			},
+		];
+		this.areaList.push(arr);
+	}
+
+	deleteAreaList(index: number): void {
+		this.areaList.splice(index, 1);
+	}
+}
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts
new file mode 100644
index 00000000..ecb2d038
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts
@@ -0,0 +1,46 @@
+export const ADDRESS = [
+	{
+		id: "1",
+		name: "Beijing",
+		city: [
+			{
+				id: "101",
+				name: "Beijing",
+				county: [
+					{
+						id: "1001",
+						name: "Haiding District",
+					},
+					{
+						id: "1002",
+						name: "Xicheng District",
+					},
+					{
+						id: "1003",
+						name: "Changping District",
+					},
+				],
+			},
+		],
+	},
+	{
+		id: "2",
+		name: "Shanghai",
+		city: [
+			{
+				id: "201",
+				name: "Shanghai City",
+				county: [
+					{
+						id: "2001",
+						name: "Pudongxin District",
+					},
+					{
+						id: "2002",
+						name: "Jingan District",
+					},
+				],
+			},
+		],
+	},
+];
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts
index e83f50e3..5f8c3847 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts
@@ -4,12 +4,11 @@
     type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select/select/table-radio/endpoint
     required /MUST/: IF REQUIRED, 
     disable /MUST/: IF DISABLED,
-    scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT
-    scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST
     placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT
     options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
 ********/
 
+// Tn
 export const TRANSFRER_FORM_ITEMS = [
 	{
 		title: "S-NSSAI",
@@ -113,6 +112,7 @@ export const TRANSFRER_FORM_ITEMS = [
 	},
 ];
 
+// An and Cn
 export const CORE_FORM_ITEMS = {
 	An: [
 		{
@@ -364,50 +364,3 @@ export const CORE_FORM_ITEMS = {
 		},
 	],
 };
-
-export const ADDRESS = [
-	{
-		id: "1",
-		name: "Beijing",
-		city: [
-			{
-				id: "101",
-				name: "Beijing",
-				county: [
-					{
-						id: "1001",
-						name: "Haiding District",
-					},
-					{
-						id: "1002",
-						name: "Xicheng District",
-					},
-					{
-						id: "1003",
-						name: "Changping District",
-					},
-				],
-			},
-		],
-	},
-	{
-		id: "2",
-		name: "Shanghai",
-		city: [
-			{
-				id: "201",
-				name: "Shanghai City",
-				county: [
-					{
-						id: "2001",
-						name: "Pudongxin District",
-					},
-					{
-						id: "2002",
-						name: "Jingan District",
-					},
-				],
-			},
-		],
-	},
-];
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
index b0e3696c..d095237b 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
@@ -116,30 +116,7 @@
 				</nz-form-control>
 				<!-- Address selection needs special treatment -->
 				<div *ngIf="title === 'An' && item.type === 'city-select'">
-					<div *ngFor="let area of areaList; let i = index">
-						<nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0"
-							class="subnet_params_area" *ngFor="let item of area; let ind = index">
-							<nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
-								(nzOpenChange)="handleChange(area, item)"
-								(ngModelChange)=" handleChangeSelected(area, item) ">
-								<nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
-								</nz-option>
-							</nz-select>
-						</nz-form-control>
-						<nz-form-control [nzSpan]="1">
-							<div class="validation_alert_area">{{checkArea(area)}}</div>
-						</nz-form-control>
-						<nz-form-control [nzSpan]="1" [nzOffset]="2">
-							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button"
-								*ngIf="!i" (click)="creatAreaList()">
-								<i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
-							</button>
-							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button"
-								*ngIf="i" (click)="deleteAreaList(i)">
-								<i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
-							</button>
-						</nz-form-control>
-					</div>
+					<app-city-select [areaList]="areaList"></app-city-select>
 				</div>
 			</nz-form-item>
 		</form>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
index bc352ad4..c826a7ec 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
@@ -6,7 +6,7 @@ import {
 	EventEmitter,
 	ElementRef,
 } from "@angular/core";
-import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS } from "./constants";
+import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS } from "./constants";
 import { NzMessageService } from "ng-zorro-antd";
 import { stringify } from "@angular/core/src/util";
 import { Util } from "../../../../../../shared/utils/utils";
@@ -323,90 +323,11 @@ export class SubnetParamsModelComponent implements OnInit {
 		});
 	}
 
-	creatAreaList(): void {
-		let arr = [
-			{
-				key: "province",
-				selected: "",
-				options: [],
-			},
-			{
-				key: "city",
-				selected: "",
-				options: [],
-			},
-			{
-				key: "district",
-				selected: "",
-				options: [],
-			},
-		];
-		this.areaList.push(arr);
-	}
-
-	deleteAreaList(index: number): void {
-		this.areaList.splice(index, 1);
-	}
-
-	handleChange(area: any[], areaItem: any): void {
-		if (areaItem.key === "province" && areaItem.options.length <= 1) {
-			areaItem.options = ADDRESS;
-		} else if (areaItem.key === "city" && areaItem.options.length <= 1) {
-			ADDRESS.forEach((item) => {
-				if (item.name === area[0].selected) {
-					areaItem.options = item.city;
-				}
-			});
-		} else if (
-			areaItem.key === "district" &&
-			areaItem.options.length <= 1
-		) {
-			ADDRESS.forEach((item: any) => {
-				item.city.forEach((city) => {
-					if (city.name === area[1].selected) {
-						areaItem.options = city.county;
-					}
-				});
-			});
-		}
-	}
-
-	handleChangeSelected(area: any[], areaItem: any) {
-		if (areaItem.key === "province") {
-			area[1].selected = "";
-			area[1].options = [];
-			area[2].selected = "";
-			area[2].options = [];
-		} else if (areaItem.key === "city") {
-			area[2].selected = "";
-			area[2].options = [];
-		}
-	}
-
 	handleCancel(): void {
 		this.showModel = false;
 		this.cancel.emit(this.showModel);
 	}
 
-	// prompt text for each item of area_list
-	checkArea(area: any): string {
-		if (
-			area.every((item) => {
-				return item.selected === "";
-			})
-		) {
-			return "empty";
-		}
-		if (
-			area.some((item) => {
-				return item.selected === "";
-			})
-		) {
-			return "incomplete";
-		}
-		return "";
-	}
-
 	// special handling for address
 	areaCheckBeforeSubmit(target: object): Boolean {
 		for (const prop in target) {