style: adjust the path of subnet module constant file and add type to parameter item

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

6 files changed, 1448 insertions, 1199 deletions

diff --git a/usecaseui-portal/src/.prettierrc b/usecaseui-portal/src/.prettierrc
new file mode 100644
index 00000000..b431f122
--- /dev/null
+++ b/usecaseui-portal/src/.prettierrc
@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "useTabs": true
+  }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
index aa5cebe0..88da11b6 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
@@ -1,428 +1,531 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
-import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices';
-import { indexDebugNode } from '@angular/core/src/debug/debug_node';
+import {
+	Component,
+	OnInit,
+	Input,
+	Output,
+	EventEmitter,
+	ViewChild,
+} from "@angular/core";
+import { SlicingTaskServices } from "@src/app/core/services/slicingTaskServices";
+import { indexDebugNode } from "@angular/core/src/debug/debug_node";
 
 @Component({
-  selector: 'app-slicing-task-model',
-  templateUrl: './slicing-task-model.component.html',
-  styleUrls: ['./slicing-task-model.component.less']
+	selector: "app-slicing-task-model",
+	templateUrl: "./slicing-task-model.component.html",
+	styleUrls: ["./slicing-task-model.component.less"],
 })
 export class SlicingTaskModelComponent implements OnInit {
-  @Input() showDetail: boolean;
-  @Input() moduleTitle: string;
-  @Input() taskId: string;
-  @Output() cancel = new EventEmitter<object>();
-  @ViewChild('notification') notification1: any;
+	@Input() showDetail: boolean;
+	@Input() moduleTitle: string;
+	@Input() taskId: string;
+	@Output() cancel = new EventEmitter<object>();
+	@ViewChild("notification") notification1: any;
 
-  constructor(private http: SlicingTaskServices) { }
+	constructor(private http: SlicingTaskServices) {}
 
-  // 配置审核详情
-  checkDetail: any[] = [{}];
-  //业务需求信息
-  businessRequirement: any[] = [];
-  //匹配NST信息 
-  NSTinfo: object[] = [{}];
-  // 共享切片实例
-  selectedServiceId: string;
-  selectedServiceName: string;
-  slicingInstances: any;
-  //an/tn/cn instances NSSI ID下拉框的开关
-  enableNSSISelectionList: any[] = []
-  // 子网实例
-  slicingSubnet: any[] = [
-    {
-      title: 'An',
-      context: 'an',
-      slicingId: '',
-      slicingName: '',
-      total: 0,
-      currentPage: '1',
-      pageSize: '10',
-      isLoading: false,
-      flag: false,
-      instances: []
-    },
-    {
-      title: 'Tn',
-      context: 'tn',
-      slicingId: '',
-      slicingName: '',
-      total: 0,
-      currentPage: '1',
-      pageSize: '10',
-      isLoading: false,
-      flag: false,
-      instances: []
-    },
-    {
-      title: 'Cn',
-      context: 'cn',
-      slicingId: '',
-      slicingName: '',
-      total: 0,
-      currentPage: '1',
-      pageSize: '10',
-      isLoading: false,
-      flag: false,
-      instances: []
-    }
-  ]
-  isDisabled: any = [true,true,true]
-  // 子网参数
-  isShowParams: boolean;
-  paramsTitle: string;
-  params: any;
-  noPassPara: string[];
-  // 获取数据loading
-  isSpinning: boolean = false;
-  loading: boolean = false;
+	// 配置审核详情
+	checkDetail: any[] = [{}];
+	//业务需求信息
+	businessRequirement: any[] = [];
+	//匹配NST信息
+	NSTinfo: object[] = [{}];
+	// 共享切片实例
+	selectedServiceId: string;
+	selectedServiceName: string;
+	slicingInstances: any;
+	//an/tn/cn instances NSSI ID下拉框的开关
+	enableNSSISelectionList: any[] = [];
+	// 子网实例
+	slicingSubnet: any[] = [
+		{
+			title: "An",
+			context: "an",
+			slicingId: "",
+			slicingName: "",
+			total: 0,
+			currentPage: "1",
+			pageSize: "10",
+			isLoading: false,
+			flag: false,
+			instances: [],
+		},
+		{
+			title: "Tn",
+			context: "tn",
+			slicingId: "",
+			slicingName: "",
+			total: 0,
+			currentPage: "1",
+			pageSize: "10",
+			isLoading: false,
+			flag: false,
+			instances: [],
+		},
+		{
+			title: "Cn",
+			context: "cn",
+			slicingId: "",
+			slicingName: "",
+			total: 0,
+			currentPage: "1",
+			pageSize: "10",
+			isLoading: false,
+			flag: false,
+			instances: [],
+		},
+	];
+	isDisabled: any = [true, true, true];
+	// 子网参数
+	isShowParams: boolean;
+	paramsTitle: string;
+	params: any;
+	noPassPara: string[];
+	// 获取数据loading
+	isSpinning: boolean = false;
+	loading: boolean = false;
 
+	ngOnInit() {}
 
-  ngOnInit() { }
+	ngOnChanges() {
+		if (this.showDetail) {
+			this.isSpinning = true;
+			this.getautidInfo();
+		} else {
+			this.isDisabled.map((item) => {
+				item = true;
+			});
+		}
+	}
 
-  ngOnChanges() {
-    if (this.showDetail) {
-      this.isSpinning = true;
-      this.getautidInfo();
-    } else {
-      this.isDisabled.map(item=>{
-        item = true
-      })
-    }
-  }
+	// used for picking some key-value pairs from a object.
+	pick(obj, arr): Object {
+		return arr.reduce((iter, val) => {
+			if (val in obj) {
+				iter[val] = obj[val];
+			}
+			return iter;
+		}, {});
+	}
 
-  // used for picking some key-value pairs from a object. 
-  pick(obj, arr): Object {
-    return arr.reduce((iter, val) => {
-      if(val in obj) {
-        iter[val] = obj[val];
-      }
-      return iter;
-    }, {});
-  }
+	getautidInfo(): void {
+		let getAuditInfoFailedCallback = () => {
+			this.isSpinning = false;
+		};
+		this.http
+			.getAuditInfo(this.taskId, getAuditInfoFailedCallback)
+			.then((res) => {
+				this.isSpinning = false;
+				const {
+					business_demand_info,
+					nst_info,
+					nsi_nssi_info,
+					...checkInfo
+				} = res.result_body;
+				// 处理配置审核详情数据
+				this.checkDetail = [
+					{
+						...checkInfo,
+						service_snssai: business_demand_info.service_snssai,
+					},
+				];
+				// 业务需求信息数据
+				if (business_demand_info.coverage_area_ta_list !== null) {
+					business_demand_info.area = business_demand_info.coverage_area_ta_list.map(
+						(item) => {
+							item = item.split(";").join(" - ");
+							return item;
+						}
+					);
+				} else {
+					business_demand_info.area = [];
+				}
+				// 前端模拟数据
+				let areaList = [
+					"Haidian District;Beijing;Beijing",
+					"Xicheng District;Beijing;Beijing",
+					"Changping District;Beijing;Beijing",
+				].map((item) => {
+					item = item.split(";").join(" - ");
+					return item;
+				});
+				this.businessRequirement = [
+					{ ...business_demand_info, area: areaList },
+				];
+				// 匹配NST信息
+				this.NSTinfo = [nst_info];
+				// 共享切片实例
+				this.selectedServiceId = nsi_nssi_info.suggest_nsi_id;
+				this.selectedServiceName = nsi_nssi_info.suggest_nsi_name;
+				// an/tn/cn 3 select box switches parameters of Matching Shared NSSI
+				this.enableNSSISelectionList = [
+					nsi_nssi_info.an_enableNSSISelection,
+					nsi_nssi_info.tn_bh_enableNSSISelection,
+					nsi_nssi_info.cn_enableNSSISelection,
+				];
+				if (!this.selectedServiceId || !this.selectedServiceName) {
+					this.isDisabled.map((item, index) => {
+						this.isDisabled[index] = false;
+					});
+				}
+				this.isDisabled.map((item, index) => {
+					if (this.enableNSSISelectionList[index]) {
+						this.isDisabled[index] = false;
+					}
+				});
+				this.slicingInstances = {
+					currentPage: "1",
+					pageSize: "10",
+					isLoading: false,
+					total: 0,
+					flag: false,
+					list: [
+						{
+							service_instance_id: this.selectedServiceId,
+							service_instance_name: this.selectedServiceName,
+						},
+					],
+				};
+				// 子网实例
+				let subnetData = this.pick(nsi_nssi_info, [
+					"an_suggest_nssi_id",
+					"an_suggest_nssi_name",
+					"tn_bh_suggest_nssi_id",
+					"tn_bh_suggest_nssi_name",
+					"cn_suggest_nssi_id",
+					"cn_suggest_nssi_name",
+				]);
+				this.subnetDataFormatting(subnetData, 0);
+				// 前端模拟数据
+				let area = [
+					"Beijing;Beijing;Haidian District",
+					"Beijing;Beijing;Xicheng District",
+					"Beijing;Beijing;Changping District",
+				];
+				this.slicingSubnet[0].params = {
+					...this.pick(nsi_nssi_info, [
+						"sliceProfile_AN_sNSSAI",
+						"sliceProfile_AN_resourceSharingLevel",
+						"sliceProfile_AN_uEMobilityLevel",
+						"an_latency",
+						"sliceProfile_AN_maxNumberofUEs",
+						"sliceProfile_AN_activityFactor",
+						"sliceProfile_AN_expDataRateDL",
+						"sliceProfile_AN_expDataRateUL",
+						"sliceProfile_AN_areaTrafficCapDL",
+						"sliceProfile_AN_areaTrafficCapUL",
+						"an_script_name",
+						"sliceProfile_AN_overallUserDensity",
+						"an_enableNSSISelection",
+						"sliceProfile_AN_maxNumberofPDUSession",
+					]),
+					an_coverage_area_ta_list: area,
+				};
+				this.slicingSubnet[1].params = this.pick(nsi_nssi_info, [
+					"tn_bh_latency",
+					"tn_bh_bandwidth",
+					"tn_bh_script_name",
+					"sliceProfile_TN_BH_jitte",
+					"sliceProfile_TN_BH_sNSSAI",
+					"tn_bh_enableNSSISelection",
+					"sliceProfile_TN_resourceSharingLevel",
+					"sliceProfile_CN_logicInterfaceId",
+					"sliceProfile_CN_ipAddress",
+					"sliceProfile_CN_nextHopInfo",
+					"sliceProfile_AN_ipAddress",
+					"sliceProfile_AN_logicInterfaceId",
+					"sliceProfile_AN_nextHopInfo",
+					"tn_connection_links",
+				]);
+				this.slicingSubnet[2].params = {
+					...this.pick(nsi_nssi_info, [
+						"cn_service_snssai",
+						"cn_resource_sharing_level",
+						"cn_ue_mobility_level",
+						"cn_latency",
+						"cn_max_number_of_ues",
+						"cn_activity_factor",
+						"cn_exp_data_rate_dl",
+						"cn_exp_data_rate_ul",
+						"cn_area_traffic_cap_dl",
+						"cn_area_traffic_cap_ul",
+						"cn_script_name",
+						"sliceProfile_CN_overallUserDensity",
+						"cn_enableNSSISelection",
+						"sliceProfile_CN_maxNumberofPDUSession",
+					]),
+				};
+			});
+	}
 
-  getautidInfo(): void {
-    let getAuditInfoFailedCallback  = () => {
-      this.isSpinning = false;
-    } 
-    this.http.getAuditInfo(this.taskId, getAuditInfoFailedCallback).then( res => {
-      this.isSpinning = false;
-      const {
-        business_demand_info,
-        nst_info,
-        nsi_nssi_info,
-        ...checkInfo
-      } = res.result_body;
-      // 处理配置审核详情数据
-      this.checkDetail = [{...checkInfo, 'service_snssai': business_demand_info.service_snssai}];
-      // 业务需求信息数据
-      if(business_demand_info.coverage_area_ta_list !== null){
-        business_demand_info.area = business_demand_info.coverage_area_ta_list.map(item => {
-          item = item.split(';').join(' - ')
-          return item
-        })
-      }else{
-        business_demand_info.area = []
-      }
-      // 前端模拟数据
-      let areaList = ["Haidian District;Beijing;Beijing", "Xicheng District;Beijing;Beijing", "Changping District;Beijing;Beijing"].map(item => {
-        item = item.split(';').join(' - ')
-        return item
-      })
-      this.businessRequirement = [{ ...business_demand_info, area: areaList }];
-      // 匹配NST信息
-      this.NSTinfo = [nst_info];
-      // 共享切片实例
-      this.selectedServiceId = nsi_nssi_info.suggest_nsi_id;
-      this.selectedServiceName = nsi_nssi_info.suggest_nsi_name;
-      // an/tn/cn 3 select box switches parameters of Matching Shared NSSI
-      this.enableNSSISelectionList = [nsi_nssi_info.an_enableNSSISelection,nsi_nssi_info.tn_bh_enableNSSISelection,nsi_nssi_info.cn_enableNSSISelection];
-      if (!this.selectedServiceId || !this.selectedServiceName) {
-        this.isDisabled.map((item,index)=>{
-          this.isDisabled[index] = false
-        })
-      }
-      this.isDisabled.map((item,index)=>{
-        if(this.enableNSSISelectionList[index]){
-          this.isDisabled[index] = false
-        }
-      })
-      this.slicingInstances = {
-        currentPage: '1',
-        pageSize: '10',
-        isLoading: false,
-        total: 0,
-        flag: false,
-        list: [{
-          service_instance_id: this.selectedServiceId,
-          service_instance_name: this.selectedServiceName
-        }]
-      }
-      // 子网实例
-      let subnetData = this.pick(nsi_nssi_info, ['an_suggest_nssi_id', 'an_suggest_nssi_name', 'tn_bh_suggest_nssi_id', 'tn_bh_suggest_nssi_name', 'cn_suggest_nssi_id', 'cn_suggest_nssi_name']);
-      this.subnetDataFormatting(subnetData, 0);
-      // 前端模拟数据
-      let area = ["Beijing;Beijing;Haidian District", "Beijing;Beijing;Xicheng District", "Beijing;Beijing;Changping District"];
-      this.slicingSubnet[0].params = {...this.pick(nsi_nssi_info, [
-              'sliceProfile_AN_sNSSAI',
-              'sliceProfile_AN_resourceSharingLevel',
-              'sliceProfile_AN_uEMobilityLevel',
-              'an_latency',
-              'sliceProfile_AN_maxNumberofUEs',
-              'sliceProfile_AN_activityFactor',
-              'sliceProfile_AN_expDataRateDL',
-              'sliceProfile_AN_expDataRateUL',
-              'sliceProfile_AN_areaTrafficCapDL',
-              'sliceProfile_AN_areaTrafficCapUL',
-              'an_script_name',
-              'sliceProfile_AN_overallUserDensity',
-              'an_enableNSSISelection',
-              'sliceProfile_AN_maxNumberofPDUSession',
-          ]), an_coverage_area_ta_list: area};
-      this.slicingSubnet[1].params = this.pick(nsi_nssi_info, [
-        'tn_bh_latency', 
-        'tn_bh_bandwidth', 
-        'tn_bh_script_name', 
-        'sliceProfile_TN_BH_jitte', 
-        'sliceProfile_TN_BH_sNSSAI',
-        'tn_bh_enableNSSISelection', 
-        'sliceProfile_TN_resourceSharingLevel',
-        'sliceProfile_CN_logicInterfaceId',
-        'sliceProfile_CN_ipAddress',
-        'sliceProfile_CN_nextHopInfo',
-        'sliceProfile_AN_ipAddress',
-        'sliceProfile_AN_logicInterfaceId',
-        'sliceProfile_AN_nextHopInfo',
-        'tn_connection_links']);
-      this.slicingSubnet[2].params = {...this.pick(nsi_nssi_info, [
-        'cn_service_snssai',
-        'cn_resource_sharing_level',
-        'cn_ue_mobility_level',
-        'cn_latency',
-        'cn_max_number_of_ues',
-        'cn_activity_factor',
-        'cn_exp_data_rate_dl',
-        'cn_exp_data_rate_ul',
-        'cn_area_traffic_cap_dl',
-        'cn_area_traffic_cap_ul',
-        'cn_script_name',
-        'sliceProfile_CN_overallUserDensity',
-        'cn_enableNSSISelection',
-        'sliceProfile_CN_maxNumberofPDUSession',
-      ])};
-    })
-  }
+	openSlicingInstance(bool: boolean): void {
+		const { total, currentPage, pageSize } = this.slicingInstances;
+		if (bool && !total) {
+			this.slicingInstances.list = [];
+			this.getSlicingInstances(currentPage, pageSize);
+		}
+	}
 
-  openSlicingInstance(bool: boolean): void {
-    const { total, currentPage, pageSize } = this.slicingInstances;
-    if (bool && !total) {
-      this.slicingInstances.list = [];
-      this.getSlicingInstances(currentPage, pageSize)
-    }
-  }
+	getNextPageData(): void {
+		const { total, currentPage, pageSize } = this.slicingInstances;
+		if (total - +currentPage * +pageSize > 0) {
+			if (this.slicingInstances.flag) return;
+			this.slicingInstances.flag = true;
+			this.getSlicingInstances(currentPage, pageSize);
+			this.slicingInstances.currentPage = (
+				+this.slicingInstances.currentPage + 1
+			).toString();
+		}
+	}
 
-  getNextPageData(): void {
-    const { total, currentPage, pageSize } = this.slicingInstances;
-    if (total - (+currentPage * +pageSize) > 0) {
-      if (this.slicingInstances.flag) return;
-      this.slicingInstances.flag = true
-      this.getSlicingInstances(currentPage, pageSize)
-      this.slicingInstances.currentPage = (+this.slicingInstances.currentPage + 1).toString();
-    }
-  }
+	getSlicingInstances(pageNo: string, pageSize: string): void {
+		this.slicingInstances.isLoading = true;
+		let getSlicingInstanceFailedCallback = () => {
+			this.slicingInstances.isLoading = false;
+			this.slicingInstances.flag = false;
+		};
+		this.http
+			.getSlicingInstance(
+				pageNo,
+				pageSize,
+				getSlicingInstanceFailedCallback
+			)
+			.then((res) => {
+				const { result_body } = res;
+				setTimeout(() => {
+					const {
+						nsi_service_instances,
+						record_number,
+					} = result_body;
+					this.slicingInstances.total = record_number;
+					this.slicingInstances.list.push(...nsi_service_instances);
+					this.slicingInstances.isLoading = false;
+					this.slicingInstances.flag = false;
+				}, 2000);
+			});
+	}
 
-  getSlicingInstances(pageNo: string, pageSize: string): void {
-    this.slicingInstances.isLoading = true;
-    let getSlicingInstanceFailedCallback  = () => {
-      this.slicingInstances.isLoading = false;
-      this.slicingInstances.flag = false;
-    }
-    this.http.getSlicingInstance(pageNo, pageSize, getSlicingInstanceFailedCallback).then(res => {
-      const { result_body } = res;
-      setTimeout(() => {
-        const { nsi_service_instances, record_number } = result_body;
-        this.slicingInstances.total = record_number;
-        this.slicingInstances.list.push(...nsi_service_instances);
-        this.slicingInstances.isLoading = false;
-        this.slicingInstances.flag = false;
-      }, 2000)
-    })
-  }
+	slicingInstanceChange(): void {
+		// choose the target nssi
+		this.isDisabled.map((item, index) => {
+			if (!this.enableNSSISelectionList[index]) {
+				this.isDisabled[index] = true;
+			}
+		});
+		this.selectedServiceName = "";
+		// 获取切片子网实例数据
 
+		let getSlicingSubnetInstanceFailedCallback = () => {
+			this.subnetDataFormatting({}, 1);
+		};
+		this.http
+			.getSlicingSubnetInstance(
+				this.selectedServiceId,
+				getSlicingSubnetInstanceFailedCallback
+			)
+			.then((res) => {
+				const { result_body, record_number } = res;
+				this.subnetDataFormatting(result_body, record_number);
+			});
+		this.slicingInstances.list.forEach((item) => {
+			if (item.service_instance_id === this.selectedServiceId) {
+				this.selectedServiceName = item.service_instance_name;
+			}
+		});
+	}
 
-  slicingInstanceChange(): void { // choose the target nssi
-    this.isDisabled.map((item,index)=>{
-      if (!this.enableNSSISelectionList[index]) {
-        this.isDisabled[index] = true
-      }
-    })
-    this.selectedServiceName = '';
-    // 获取切片子网实例数据
+	subnetDataFormatting(subnetData?: any, total?: number): void {
+		const {
+			an_suggest_nssi_id,
+			an_suggest_nssi_name,
+			tn_bh_suggest_nssi_id,
+			tn_bh_suggest_nssi_name,
+			cn_suggest_nssi_id,
+			cn_suggest_nssi_name,
+		} = subnetData;
+		this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
+		this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
+		this.slicingSubnet[0].total = total;
+		this.slicingSubnet[0].currentPage = "1";
+		this.slicingSubnet[0].instances = [
+			{
+				service_instance_id: an_suggest_nssi_id,
+				service_instance_name: an_suggest_nssi_name,
+			},
+		];
 
-    let getSlicingSubnetInstanceFailedCallback = () => {
-      this.subnetDataFormatting({}, 1);
-    };
-    this.http.getSlicingSubnetInstance(this.selectedServiceId, getSlicingSubnetInstanceFailedCallback).then(res => {
-      const { result_body, record_number} = res;
-      this.subnetDataFormatting(result_body, record_number)
-    })
-    this.slicingInstances.list.forEach(item => {
-      if (item.service_instance_id === this.selectedServiceId) {
-        this.selectedServiceName = item.service_instance_name;
-      }
-    })
-  }
+		this.slicingSubnet[1].slicingId = tn_bh_suggest_nssi_id;
+		this.slicingSubnet[1].slicingName = tn_bh_suggest_nssi_name;
+		this.slicingSubnet[1].total = total;
+		this.slicingSubnet[1].currentPage = "1";
+		this.slicingSubnet[1].instances = [
+			{
+				service_instance_id: tn_bh_suggest_nssi_id,
+				service_instance_name: tn_bh_suggest_nssi_name,
+			},
+		];
 
-  subnetDataFormatting ( subnetData?: any, total?: number): void{
-    const { an_suggest_nssi_id, an_suggest_nssi_name, tn_bh_suggest_nssi_id, tn_bh_suggest_nssi_name, cn_suggest_nssi_id, cn_suggest_nssi_name } = subnetData;
-    this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
-    this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
-    this.slicingSubnet[0].total = total;
-    this.slicingSubnet[0].currentPage = '1';
-    this.slicingSubnet[0].instances = [{
-      service_instance_id: an_suggest_nssi_id,
-      service_instance_name: an_suggest_nssi_name
-    }];
+		this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
+		this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
+		this.slicingSubnet[2].total = total;
+		this.slicingSubnet[2].currentPage = "1";
+		this.slicingSubnet[2].instances = [
+			{
+				service_instance_id: cn_suggest_nssi_id,
+				service_instance_name: cn_suggest_nssi_name,
+			},
+		];
+	}
 
-    this.slicingSubnet[1].slicingId = tn_bh_suggest_nssi_id;
-    this.slicingSubnet[1].slicingName = tn_bh_suggest_nssi_name;
-    this.slicingSubnet[1].total = total;
-    this.slicingSubnet[1].currentPage = '1';
-    this.slicingSubnet[1].instances = [{
-      service_instance_id: tn_bh_suggest_nssi_id,
-      service_instance_name: tn_bh_suggest_nssi_name
-    }];
+	resetSlicingInstance(): void {
+		this.selectedServiceId = "";
+		this.selectedServiceName = "";
+		this.slicingSubnet.map((item) => {
+			item.slicingId = "";
+			item.slicingName = "";
+		});
+		this.isDisabled.map((item, index) => {
+			this.isDisabled[index] = false;
+		});
+	}
 
-    this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
-    this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
-    this.slicingSubnet[2].total = total;
-    this.slicingSubnet[2].currentPage = '1';
-    this.slicingSubnet[2].instances = [{
-      service_instance_id: cn_suggest_nssi_id,
-      service_instance_name: cn_suggest_nssi_name
-    }];
-  }
+	openSubnetInstances(bool: boolean, instance: any): void {
+		if (bool && !instance.total) {
+			instance.instances = [];
+			this.getSubnetInstances(instance);
+		}
+	}
 
-  resetSlicingInstance(): void {
-    this.selectedServiceId = '';
-    this.selectedServiceName = '';
-    this.slicingSubnet.map(item => {
-      item.slicingId = '';
-      item.slicingName = '';
-    })
-    this.isDisabled.map((item,index)=>{
-      this.isDisabled[index] = false
-    })
-  }
+	getNextPageSubnet(instance: any): void {
+		const { total, currentPage, pageSize } = instance;
+		if (total - +currentPage * +pageSize > 0) {
+			if (instance.flag) return;
+			instance.flag = true;
+			this.getSubnetInstances(instance);
+			let count = +instance.currentPage;
+			instance.currentPage = (++count).toString();
+		}
+	}
 
-  openSubnetInstances(bool: boolean, instance: any): void {
-    if (bool && !instance.total) {
-      instance.instances = []
-      this.getSubnetInstances(instance)
-    }
-  }
+	getSubnetInstances(instance: any): void {
+		instance.isLoading = true;
+		const { context, currentPage, pageSize } = instance;
+		let getSubnetInContextFailedCallback = () => {
+			instance.isLoading = false;
+			instance.flag = false;
+		};
+		this.http
+			.getSubnetInContext(
+				context,
+				currentPage,
+				pageSize,
+				getSubnetInContextFailedCallback
+			)
+			.then((res) => {
+				const { result_body } = res;
+				const { nssi_service_instances, record_number } = result_body;
+				this.slicingSubnet.map((item) => {
+					if (item.context === context) {
+						item.total = record_number;
+						item.instances.push(...nssi_service_instances);
+					}
+				});
+				instance.isLoading = false;
+				instance.flag = false;
+			});
+	}
 
-  getNextPageSubnet(instance: any): void {
-    const { total, currentPage, pageSize } = instance;
-    if (total - (+currentPage * +pageSize) > 0) {
-      if (instance.flag) return;
-      instance.flag = true;
-      this.getSubnetInstances(instance);
-      let count = +instance.currentPage;
-      instance.currentPage = (++count).toString();
-    }
-  }
+	slicingSubnetChange(instance: any): void {
+		instance.slicingName = "";
+		instance.instances.forEach((item) => {
+			if (instance.slicingId === item.service_instance_id) {
+				instance.slicingName = item.service_instance_name;
+			}
+		});
+	}
 
-  getSubnetInstances(instance: any): void {
-    instance.isLoading = true;
-    const { context, currentPage, pageSize } = instance;
-    let getSubnetInContextFailedCallback = () => {
-      instance.isLoading = false;
-      instance.flag = false;
-    };
-    this.http.getSubnetInContext(context, currentPage, pageSize,getSubnetInContextFailedCallback).then(res => {
-      const { result_body } = res;
-      const { nssi_service_instances, record_number } = result_body;
-      this.slicingSubnet.map(item => {
-        if (item.context === context) {
-          item.total = record_number;
-          item.instances.push(...nssi_service_instances);
-        }
-      })
-      instance.isLoading = false;
-      instance.flag = false;
-    })
-  }
+	restSubnetInstance(instance: any): void {
+		instance.slicingId = "";
+		instance.slicingName = "";
+	}
 
-  slicingSubnetChange(instance: any): void {
-    instance.slicingName = ''
-    instance.instances.forEach(item => {
-      if (instance.slicingId === item.service_instance_id) {
-        instance.slicingName = item.service_instance_name;
-      }
-    })
-  }
+	showParamsModel(item: any): void {
+		this.isShowParams = true;
+		this.paramsTitle = item.title;
+		this.params = item.params;
+	}
 
-  restSubnetInstance(instance: any): void {
-    instance.slicingId = '';
-    instance.slicingName = '';
-  }
-
-  showParamsModel(item: any): void {
-    this.isShowParams = true;
-    this.paramsTitle = item.title;
-    this.params = item.params
-  }
-
-  changeParams(params: any): void {
-    const index = this.paramsTitle === 'An' ? 0 : (this.paramsTitle === 'Tn' ? 1 : 2);
-    this.slicingSubnet[index].params = params
-  }
-  noPassParaChange (noPassPara: string[]): void {
-    this.noPassPara = noPassPara
-  }
-  handleCancel(bool: boolean = false) {
-    this.showDetail = false;
-    this.cancel.emit({ showDetail: this.showDetail, bool });
-  }
-  handleOk() {
-    this.loading = true;
-    const { selectedServiceId, selectedServiceName, slicingSubnet, checkDetail, businessRequirement, NSTinfo } = this;
-    // slicingSubnet[1] is about Tn,
-    // Delete parameters that do not need to be passed
-    if (this.noPassPara.length !== 0 ) {
-      this.noPassPara.forEach((item) => {
-        for (let val in slicingSubnet[1].params) {
-          if (val === item) {
-            delete slicingSubnet[1].params[val]
-          }	
-        }
-      })
-    }
-    const nsi_nssi_info: object = {
-      suggest_nsi_id: selectedServiceId,
-      suggest_nsi_name: selectedServiceName,
-      an_suggest_nssi_id: slicingSubnet[0].slicingId,
-      an_suggest_nssi_name: slicingSubnet[0].slicingName,
-      ...slicingSubnet[0].params,
-      tn_bh_suggest_nssi_id: slicingSubnet[1].slicingId,
-      tn_bh_suggest_nssi_name: slicingSubnet[1].slicingName,
-      ...slicingSubnet[1].params,
-      cn_suggest_nssi_id: slicingSubnet[2].slicingId,
-      cn_suggest_nssi_name: slicingSubnet[2].slicingName,
-      ...slicingSubnet[2].params,
-    }
-    delete businessRequirement[0].area
-    let reqBody = { ...checkDetail[0], business_demand_info: businessRequirement[0], nst_info: NSTinfo[0], nsi_nssi_info };
-    delete reqBody.service_snssai;
-    let submitSlicingFailedCallback =  () => {
-      this.loading = false;
-      this.notification1.notificationFailed('Task', 'Sumbit', this.taskId)
-    }
-    this.http.submitSlicing(reqBody,submitSlicingFailedCallback).then(res => {
-      this.notification1.notificationSuccess('Task', 'Sumbit', this.taskId)
-      this.loading = false;
-      this.handleCancel(true);
-    })
-  }
+	changeParams(params: any): void {
+		const index =
+			this.paramsTitle === "An" ? 0 : this.paramsTitle === "Tn" ? 1 : 2;
+		this.slicingSubnet[index].params = params;
+	}
+	noPassParaChange(noPassPara: string[]): void {
+		this.noPassPara = noPassPara;
+	}
+	handleCancel(bool: boolean = false) {
+		this.showDetail = false;
+		this.cancel.emit({ showDetail: this.showDetail, bool });
+	}
+	handleOk() {
+		this.loading = true;
+		const {
+			selectedServiceId,
+			selectedServiceName,
+			slicingSubnet,
+			checkDetail,
+			businessRequirement,
+			NSTinfo,
+		} = this;
+		// slicingSubnet[1] is about Tn,
+		// Delete parameters that do not need to be passed
+		if (this.noPassPara.length !== 0) {
+			this.noPassPara.forEach((item) => {
+				for (let val in slicingSubnet[1].params) {
+					if (val === item) {
+						delete slicingSubnet[1].params[val];
+					}
+				}
+			});
+		}
+		const nsi_nssi_info: object = {
+			suggest_nsi_id: selectedServiceId,
+			suggest_nsi_name: selectedServiceName,
+			an_suggest_nssi_id: slicingSubnet[0].slicingId,
+			an_suggest_nssi_name: slicingSubnet[0].slicingName,
+			...slicingSubnet[0].params,
+			tn_bh_suggest_nssi_id: slicingSubnet[1].slicingId,
+			tn_bh_suggest_nssi_name: slicingSubnet[1].slicingName,
+			...slicingSubnet[1].params,
+			cn_suggest_nssi_id: slicingSubnet[2].slicingId,
+			cn_suggest_nssi_name: slicingSubnet[2].slicingName,
+			...slicingSubnet[2].params,
+		};
+		delete businessRequirement[0].area;
+		let reqBody = {
+			...checkDetail[0],
+			business_demand_info: businessRequirement[0],
+			nst_info: NSTinfo[0],
+			nsi_nssi_info,
+		};
+		delete reqBody.service_snssai;
+		let submitSlicingFailedCallback = () => {
+			this.loading = false;
+			this.notification1.notificationFailed(
+				"Task",
+				"Sumbit",
+				this.taskId
+			);
+		};
+		this.http
+			.submitSlicing(reqBody, submitSlicingFailedCallback)
+			.then((res) => {
+				this.notification1.notificationSuccess(
+					"Task",
+					"Sumbit",
+					this.taskId
+				);
+				this.loading = false;
+				this.handleCancel(true);
+			});
+	}
 }
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
new file mode 100644
index 00000000..e83f50e3
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts
@@ -0,0 +1,413 @@
+/*******
+    title /MUST/: MARK THE ITEM NAME,
+    key /MUST/:  MARK THE ITEM KEY,
+    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
+********/
+
+export const TRANSFRER_FORM_ITEMS = [
+	{
+		title: "S-NSSAI",
+		key: "sliceProfile_TN_BH_sNSSAI",
+		required: true,
+		type: "input",
+		disable: true,
+	},
+	{
+		title: "Latency (ms)",
+		key: "tn_bh_latency",
+		required: true,
+		type: "input",
+		disable: false,
+	},
+	{
+		title: "Jitter",
+		key: "sliceProfile_TN_BH_jitte",
+		required: false,
+		type: "input",
+		disable: false,
+	},
+	{
+		title: "MaxBandwidth",
+		key: "tn_bh_bandwidth",
+		required: true,
+		type: "input",
+		disable: false,
+	},
+	{
+		title: "Resource Sharing Level", // select
+		key: "sliceProfile_TN_resourceSharingLevel", // :new
+		required: true,
+		disable: false,
+		type: "radio",
+		options: [
+			{
+				title: "Shared",
+				key: "shared",
+			},
+			{
+				title: "Non-shared",
+				key: "non-shared",
+			},
+		],
+	},
+	{
+		title: "Connection Links", // table
+		key: "tn_connection_links", // :new
+		required: false, // combined
+		type: "table-radio",
+		disable: false,
+	},
+	{
+		title: "AN Endpoint", // input group
+		key: "an_Endpoint",
+		type: "endpoint",
+		required: false,
+		disable: false,
+		options: [
+			{
+				title: "ip_address",
+				key: "sliceProfile_AN_ipAddress",
+				holder: "IpAddress",
+			},
+			{
+				title: "logical_link",
+				key: "sliceProfile_AN_logicInterfaceId",
+				holder: "LogicId",
+			},
+			{
+				title: "nexthop_info",
+				key: "sliceProfile_AN_nextHopInfo",
+				holder: "NextHop",
+			},
+		],
+	},
+	{
+		title: "CN Endpoint",
+		key: "cn_Endpoint",
+		type: "endpoint",
+		required: false,
+		disable: false,
+		options: [
+			{
+				title: "ip_address",
+				key: "sliceProfile_CN_ipAddress",
+				holder: "IpAddress",
+			},
+			{
+				title: "logical_link",
+				key: "sliceProfile_CN_logicInterfaceId",
+				holder: "LogicId",
+			},
+			{
+				title: "nexthop_info",
+				key: "sliceProfile_CN_nextHopInfo",
+				holder: "NextHop",
+			},
+		],
+	},
+];
+
+export const CORE_FORM_ITEMS = {
+	An: [
+		{
+			title: "S-NSSAI",
+			key: "sliceProfile_AN_sNSSAI",
+			required: true,
+			type: "input",
+			disable: "true",
+		},
+		{
+			title: "Resource Sharing Level",
+			key: "sliceProfile_AN_resourceSharingLevel",
+			required: true,
+			type: "radio",
+			disable: false,
+			options: [
+				{
+					title: "Shared",
+					key: "shared",
+				},
+				{
+					title: "Non-shared",
+					key: "non-shared",
+				},
+			],
+		},
+		{
+			title: "Mobility",
+			key: "sliceProfile_AN_uEMobilityLevel",
+			required: true,
+			type: "select",
+			disable: false,
+			options: [
+				{
+					title: "Stationary",
+					key: "stationary",
+				},
+				{
+					title: "Nomadic",
+					key: "nomadic",
+				},
+				{
+					title: "Spatially Restricted Mobility",
+					key: "spatially restricted mobility",
+				},
+				{
+					title: "Fully Mobility",
+					key: "fully mobility",
+				},
+			],
+		},
+		{
+			title: "Latency (ms)",
+			key: "an_latency",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Max Number of PUD Session",
+			key: "sliceProfile_AN_maxNumberofPDUSession",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Max Number of UEs",
+			key: "sliceProfile_AN_maxNumberofUEs",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Activity Factor (%)",
+			key: "sliceProfile_AN_activityFactor",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "User Downlink Experience Rate（Mbps）",
+			key: "sliceProfile_AN_expDataRateDL",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "User Uplink Experience Rate（Mbps）",
+			key: "sliceProfile_AN_expDataRateUL",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Downlink Regional Traffic Density（Mbps/km ）",
+			key: "sliceProfile_AN_areaTrafficCapDL",
+			required: false,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Uplink Regional Traffic Density（Mbps/km ）",
+			key: "sliceProfile_AN_areaTrafficCapUL",
+			required: false,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Script Name",
+			key: "an_script_name",
+			required: false,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Overall User Density",
+			key: "sliceProfile_AN_overallUserDensity",
+			required: false,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Coverage Area Ta List",
+			key: "an_coverage_area_ta_list",
+			required: true,
+			type: "city-select",
+			disable: false,
+		},
+	],
+	Cn: [
+		{
+			title: "S-NSSAI",
+			key: "cn_service_snssai",
+			required: true,
+			type: "input",
+			disable: true,
+		},
+		{
+			title: "Resource Sharing Level",
+			key: "cn_resource_sharing_level",
+			required: true,
+			type: "radio",
+			disable: false,
+			options: [
+				{
+					title: "Shared",
+					key: "shared",
+				},
+				{
+					title: "Non-shared",
+					key: "non-shared",
+				},
+			],
+		},
+		{
+			title: "Mobility",
+			key: "cn_ue_mobility_level",
+			required: true,
+			type: "select",
+			disable: false,
+			options: [
+				{
+					title: "Stationary",
+					key: "stationary",
+				},
+				{
+					title: "Nomadic",
+					key: "nomadic",
+				},
+				{
+					title: "Spatially Restricted Mobility",
+					key: "spatially restricted mobility",
+				},
+				{
+					title: "Fully Mobility",
+					key: "fully mobility",
+				},
+			],
+		},
+		{
+			title: "Latency (ms)",
+			key: "cn_latency",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Max Number of UEs",
+			key: "cn_max_number_of_ues",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Activity Factor (%)",
+			key: "cn_activity_factor",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "User Downlink Experience Rate（Mbps）",
+			key: "cn_exp_data_rate_dl",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "User Uplink Experience Rate（Mbps）",
+			key: "cn_exp_data_rate_ul",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Downlink Regional Traffic Density（Mbps/km ）",
+			key: "cn_area_traffic_cap_dl",
+			required: false,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Uplink Regional Traffic Density（Mbps/km ）",
+			key: "cn_area_traffic_cap_ul",
+			required: false,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Script Name",
+			key: "cn_script_name",
+			required: false,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "Max Number of PUD Session",
+			key: "sliceProfile_CN_maxNumberofPDUSession",
+			required: true,
+			type: "input",
+			disable: false,
+		},
+		{
+			title: "OverAll User Density",
+			key: "sliceProfile_CN_overallUserDensity",
+			required: false,
+			type: "input",
+			disable: false,
+		},
+	],
+};
+
+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 6a9ebf6c..b0e3696c 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
@@ -1,6 +1,7 @@
 <nz-modal [(nzVisible)]="showModel" [nzTitle]="title + 'Parameter'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
 	nzWidth="960px">
 	<div class="subnet_params_container">
+		<!-- TN interface -->
 		<form nz-form *ngIf="title === 'Tn'">
 			<nz-form-item *ngFor="let item of transferFormItems">
 				<nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]="item.key"
@@ -9,10 +10,9 @@
 				</nz-form-label>
 				<nz-form-control [nzSpan]="16">
 					<input nz-input [(ngModel)]="formData[item.key]" [name]="item.key" [id]="item.key"
-						[readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'"
-						[placeholder]="inputHolder(item.title)" *ngIf="specialParaTN.indexOf(item.title)===-1" />
-					<nz-radio-group [name]=" item.key" [(ngModel)]="formData[item.key]"
-						*ngIf="item.title==='Resource Sharing Level'" (ngModelChange)="changeResourceShare()">
+						[disabled]="item.disable" [placeholder]="inputHolder(item.title)" *ngIf="item.type==='input'" />
+					<nz-radio-group [name]=" item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type==='radio'"
+						(ngModelChange)="changeResourceShare()">
 						<label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
 							{{ option.title }}
 						</label>
@@ -56,7 +56,7 @@
 						</div>
 					</nz-input-group>
 					<!-- connection links table -->
-					<div *ngIf="item.title === 'Connection Links'">
+					<div *ngIf="item.type==='table-radio'">
 						<nz-table #basicTable [nzData]="connectionLinkTable" nzShowPagination="true" nzPageSize="2">
 							<thead>
 								<tr>
@@ -85,38 +85,37 @@
 							</tbody>
 						</nz-table>
 					</div>
+					<!-- Prompt whether the detection value is empty -->
 					<div class="validation_alert" *ngIf="item.required">
 						{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
 				</nz-form-control>
 			</nz-form-item>
 		</form>
+		<!-- AN interface or CN interface -->
 		<form nz-form *ngIf="title === 'An' || title === 'Cn'">
 			<nz-form-item *ngFor="let item of coreFormItems">
-				<nz-form-label [nzSpan]="item.key === 'an_coverage_area_ta_list'?7:13" [nzRequired]="item.required"
-					*ngIf=" item.title !== 'Endpoint' || EndpointEnable " [ngStyle]="labelStyle(item.required)">
+				<nz-form-label [nzSpan]="item.type === 'city-select'?7:13" [nzRequired]="item.required"
+					[ngStyle]="labelStyle(item.required)">
 					{{ item.title }}
 				</nz-form-label>
-				<nz-form-control nzSpan="8" *ngIf="item.key !== 'an_coverage_area_ta_list'">
+				<nz-form-control nzSpan="8" *ngIf="item.type !== 'city-select'">
 					<input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="formData[item.key]"
-						[readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'"
-						*ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' "
+						[disabled]="item.disable" *ngIf=" item.type === 'input'"
 						[placeholder]="inputHolder(item.title)" />
-					<nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]"
-						*ngIf="item.title === 'Resource Sharing Level'">
+					<nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type === 'radio'">
 						<label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
 							{{ option.title }}
 						</label>
 					</nz-radio-group>
-					<nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.title === 'Mobility'">
+					<nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type === 'select'">
 						<nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
 						</nz-option>
 					</nz-select>
 					<div class="validation_alert" *ngIf="item.required">
 						{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
-					<!-- Comment: The following code-->
-					<!-- Comment: Above code-->
 				</nz-form-control>
-				<div *ngIf="title === 'An' && item.key === 'an_coverage_area_ta_list'">
+				<!-- 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">
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 d6798064..bc352ad4 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
@@ -1,18 +1,23 @@
-import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
-import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants';
+import {
+	Component,
+	OnInit,
+	Input,
+	Output,
+	EventEmitter,
+	ElementRef,
+} from "@angular/core";
+import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS } from "./constants";
 import { NzMessageService } from "ng-zorro-antd";
-import { stringify } from '@angular/core/src/util';
-import { Util } from '../../../../../../shared/utils/utils';
-import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices';
-
+import { stringify } from "@angular/core/src/util";
+import { Util } from "../../../../../../shared/utils/utils";
+import { SlicingTaskServices } from "@src/app/core/services/slicingTaskServices";
 
 @Component({
-	selector: 'app-subnet-params-model',
-	templateUrl: './subnet-params-model.component.html',
-	styleUrls: ['./subnet-params-model.component.less']
+	selector: "app-subnet-params-model",
+	templateUrl: "./subnet-params-model.component.html",
+	styleUrls: ["./subnet-params-model.component.less"],
 })
 export class SubnetParamsModelComponent implements OnInit {
-
 	@Input() showModel: boolean;
 	@Input() detailData: any;
 	@Input() title: string;
@@ -21,378 +26,475 @@ export class SubnetParamsModelComponent implements OnInit {
 	@Output() noPassParaChange = new EventEmitter<any>();
 
 	transferFormItems: any[] = TRANSFRER_FORM_ITEMS;
-	regxpIP =  /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; // check for correct ip address
+	regxpIP = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; // check for correct ip address
 	formData: any;
-	coreFormItems : any = [];
+	coreFormItems: any = [];
 	areaList: any[] = [];
-    // 2020.08.17  Add 3 parameters for Endpoint, Comment: The following code
-    NexthopInfoOptions = NexthopInfo_Options;
 	ANEndpointInputs: object = {};
 	CNEndpointInputs: object = {};
 	ANkeyList: string[] = [];
 	CNkeyList: string[] = [];
-	EndpointEnable: boolean = false;  // Whether to enable the three parameters of Endpoint
+	EndpointEnable: boolean = false; // Whether to enable the three parameters of Endpoint
 	keyList: string[] = []; // keys of endPoint
-	specialParaTN: string[] = ['Resource Sharing Level', 'Connection Links', 'AN Endpoint', 'CN Endpoint'];
+	specialParaTN: string[] = [
+		"Resource Sharing Level",
+		"Connection Links",
+		"AN Endpoint",
+		"CN Endpoint",
+	];
 	// Parameters not passed to the back end
-	notPassPara: string[] = ['tn_connection_links'];
+	notPassPara: string[] = ["tn_connection_links"];
 	connectionLinkTable: any[] = [];
 	connectionTableHeader: string[] = [];
 	objectKeys = Object.keys;
-    //  Comment: Above code
+	//  Comment: Above code
 
 	constructor(
 		private message: NzMessageService,
 		private Util: Util,
 		private http: SlicingTaskServices
-		) {
-		}
+	) {}
 
-	ngOnInit() {
-	 }
+	ngOnInit() {}
 
 	ngOnChanges() {
 		if (this.title) {
 			this.formData = JSON.parse(JSON.stringify(this.detailData));
-			if (this.title === 'An' || this.title === 'Cn') {
-				this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[];
-			}
-			else if (this.title === 'Tn') {
+			if (this.title === "An" || this.title === "Cn") {
+				this.coreFormItems =
+					this.title === "An"
+						? CORE_FORM_ITEMS.An
+						: this.title === "Cn"
+						? CORE_FORM_ITEMS.Cn
+						: [];
+			} else if (this.title === "Tn") {
 				this.getConnectionLinkTable();
-				this.ANkeyList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options.map((val) => {return val.key})
-				this.CNkeyList = this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).options.map((val) => {return val.key})
-				this.keyList = this.ANkeyList.concat(this.CNkeyList)
-				if (typeof this.formData !== 'undefined' && Object.keys(this.formData).length !== 0) {
-					this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)})
+				this.ANkeyList = this.transferFormItems
+					.find((item) => {
+						return item.title === "AN Endpoint";
+					})
+					.options.map((val) => {
+						return val.key;
+					});
+				this.CNkeyList = this.transferFormItems
+					.find((item) => {
+						return item.title === "CN Endpoint";
+					})
+					.options.map((val) => {
+						return val.key;
+					});
+				this.keyList = this.ANkeyList.concat(this.CNkeyList);
+				if (
+					typeof this.formData !== "undefined" &&
+					Object.keys(this.formData).length !== 0
+				) {
+					this.EndpointEnable = this.keyList.every((item) => {
+						return this.formData.hasOwnProperty(item);
+					});
 				}
-				if(this.EndpointEnable){
-					this.ANEndpointInputs = this.Util.pick(this.formData, this.ANkeyList)
-					this.CNEndpointInputs = this.Util.pick(this.formData, this.CNkeyList)
+				if (this.EndpointEnable) {
+					this.ANEndpointInputs = this.Util.pick(
+						this.formData,
+						this.ANkeyList
+					);
+					this.CNEndpointInputs = this.Util.pick(
+						this.formData,
+						this.CNkeyList
+					);
 				} else {
-					this.transferFormItems.map((item,index)=>{
-						if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
-							this.transferFormItems.splice(index,1)
+					this.transferFormItems.map((item, index) => {
+						if (
+							item.title === "AN Endpoint" ||
+							item.title === "CN Endpoint"
+						) {
+							this.transferFormItems.splice(index, 1);
 						}
-					})
+					});
 				}
 			}
 			// If the endpoint related parameters from the back end are incomplete, delete the endpoint item
 			//-------> Comment: Above code
-			if (this.title === 'An') {
-					this.AreaFormatting();
+			if (this.title === "An") {
+				this.AreaFormatting();
 			}
 		}
 	}
 
-	addCheckStatus () {
+	addCheckStatus() {
 		this.connectionLinkTable.forEach((item) => {
-			if (item.hasOwnProperty('linkId') && typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== '' && this.formData['tn_connection_links'] !== null && item['linkId'] === this.formData['tn_connection_links']) {
-				item.checked = true
+			if (
+				item.hasOwnProperty("linkId") &&
+				typeof this.formData["tn_connection_links"] !== "undefined" &&
+				this.formData["tn_connection_links"] !== "" &&
+				this.formData["tn_connection_links"] !== null &&
+				item["linkId"] === this.formData["tn_connection_links"]
+			) {
+				item.checked = true;
 			} else {
-				item.checked = false
+				item.checked = false;
 			}
-		})
+		});
 	}
 
-	changeResourceShare () {
-		this.judgeTn()
+	changeResourceShare() {
+		this.judgeTn();
 	}
 
-	isObject (val) {
-		if (Object.prototype.toString.call(val) === '[object Object]') {
-			return true
+	isObject(val) {
+		if (Object.prototype.toString.call(val) === "[object Object]") {
+			return true;
 		} else {
-			return false
+			return false;
 		}
 	}
 
-	getConnectionLinkTable (): void{
-		this.http.getConnectionLinkTable(this.getConnetionFailed).then ((res) => {
-			this.connectionLinkTable = res.result_body.connection_links_list
-			this.addCheckStatus() // add init check status for connection link table
-			this.judgeTn() // init judge
-			this.getTableHeader()
-		})
+	getConnectionLinkTable(): void {
+		this.http
+			.getConnectionLinkTable(this.getConnetionFailed)
+			.then((res) => {
+				this.connectionLinkTable =
+					res.result_body.connection_links_list;
+				this.addCheckStatus(); // add init check status for connection link table
+				this.judgeTn(); // init judge
+				this.getTableHeader();
+			});
 	}
 
-	getTableHeader (): void { // Find the common key of all data
-		let keyList :any[] = this.connectionLinkTable.map((item) => {
-			return Object.keys(item)
-		})
-		this.connectionTableHeader = this.Util.intersection(keyList).filter((item) => {
-			return item !== 'checked'
-		})
+	getTableHeader(): void {
+		// Find the common key of all data
+		let keyList: any[] = this.connectionLinkTable.map((item) => {
+			return Object.keys(item);
+		});
+		this.connectionTableHeader = this.Util.intersection(keyList).filter(
+			(item) => {
+				return item !== "checked";
+			}
+		);
 		// Filter redundant items in table data
 		this.connectionLinkTable.forEach((item) => {
 			for (let key in item) {
-				if (key !== 'linkId' && key !== 'checked' && this.connectionTableHeader.indexOf(key) === -1) {
-					delete item[key]
+				if (
+					key !== "linkId" &&
+					key !== "checked" &&
+					this.connectionTableHeader.indexOf(key) === -1
+				) {
+					delete item[key];
 				} else {
 					// Filter out the null values in each item
 					for (let i in item[key]) {
-						if (i === 'jitter' && (item[key][i] === '' || item[key][i] === 'null' || item[key][i] === null)) {
-							delete item[key][i]
+						if (
+							i === "jitter" &&
+							(item[key][i] === "" ||
+								item[key][i] === "null" ||
+								item[key][i] === null)
+						) {
+							delete item[key][i];
 						}
 					}
 				}
 			}
-		})
+		});
 	}
 
-	getConnetionFailed () {
-		console.log('failed')
+	getConnetionFailed() {
+		console.log("failed");
 	}
 
-	judgeTn (): void {
-		if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'non-shared') {
-			this.connectionLinkTable.forEach ((item) => {
-				item.checked = false
-			})
-			this.formData['tn_connection_links'] = null
-			this.notPassPara = ['tn_connection_links']
+	judgeTn(): void {
+		if (
+			this.formData["sliceProfile_TN_resourceSharingLevel"] ===
+			"non-shared"
+		) {
+			this.connectionLinkTable.forEach((item) => {
+				item.checked = false;
+			});
+			this.formData["tn_connection_links"] = null;
+			this.notPassPara = ["tn_connection_links"];
 			this.transferFormItems.forEach((item) => {
-				if (item.title === 'Connection Links') {
-					item.disable = true
-				} else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
-					item.required = true
-					item.disable = false
+				if (item.title === "Connection Links") {
+					item.disable = true;
+				} else if (
+					item.title === "AN Endpoint" ||
+					item.title === "CN Endpoint"
+				) {
+					item.required = true;
+					item.disable = false;
 				}
-			})
-		} else if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'shared') {
+			});
+		} else if (
+			this.formData["sliceProfile_TN_resourceSharingLevel"] === "shared"
+		) {
 			this.transferFormItems.forEach((item) => {
-				if (item.title === 'Connection Links') {
-					item.disable = false
-				} else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
-					if (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== null && this.formData['tn_connection_links'] !== '') {
-						item.disable = true
-						item.required = false
-						this.notPassPara = []
-						this.notPassPara = this.notPassPara.concat(this.ANkeyList, this.CNkeyList)
-					} else { //:todo
-						this.formData['tn_connection_links'] = ''
-						item.disable = false
-						item.required = true
-						this.notPassPara = []
+				if (item.title === "Connection Links") {
+					item.disable = false;
+				} else if (
+					item.title === "AN Endpoint" ||
+					item.title === "CN Endpoint"
+				) {
+					if (
+						typeof this.formData["tn_connection_links"] !==
+							"undefined" &&
+						this.formData["tn_connection_links"] !== null &&
+						this.formData["tn_connection_links"] !== ""
+					) {
+						item.disable = true;
+						item.required = false;
+						this.notPassPara = [];
+						this.notPassPara = this.notPassPara.concat(
+							this.ANkeyList,
+							this.CNkeyList
+						);
+					} else {
+						//:todo
+						this.formData["tn_connection_links"] = "";
+						item.disable = false;
+						item.required = true;
+						this.notPassPara = [];
 					}
 				}
-			})
+			});
 		}
 	}
 
-	validateEndPoint (key: string, value: any, required: boolean): string {
+	validateEndPoint(key: string, value: any, required: boolean): string {
 		if (required) {
 			if (this.Util.isEmpty(value)) {
-				return 'can not be empty';
+				return "can not be empty";
 			}
 		}
-		if (key === 'ip_address') {
+		if (key === "ip_address") {
 			if (!this.regxpIP.test(value)) {
-				if (value !== '') {
-					return 'xxx.xxx.xxx.xxx';
+				if (value !== "") {
+					return "xxx.xxx.xxx.xxx";
 				} else {
-					return ''
+					return "";
 				}
 			} else {
-				return '';
+				return "";
 			}
-		} else if (key === 'logical_link') {
-			if (!this.Util.isInteger(value)){
-				if (value !== ''){
-					return 'integer only'
+		} else if (key === "logical_link") {
+			if (!this.Util.isInteger(value)) {
+				if (value !== "") {
+					return "integer only";
 				} else {
-					return ''
+					return "";
 				}
 			} else {
-				return ''
+				return "";
 			}
 		} else {
-			return '';
+			return "";
 		}
 	}
 
-	changeLinkCheck (id: string) : void{ // update the selection state
+	changeLinkCheck(id: string): void {
+		// update the selection state
 		this.connectionLinkTable.forEach((item) => {
-			if (item['linkId'] === id) {
-				item.checked = true
+			if (item["linkId"] === id) {
+				item.checked = true;
 			} else {
-				item.checked = false
+				item.checked = false;
 			}
-		})
-		this.formData['tn_connection_links'] = id //  get the selected id
-		this.judgeTn()
+		});
+		this.formData["tn_connection_links"] = id; //  get the selected id
+		this.judgeTn();
 	}
 
-	AreaFormatting () {
+	AreaFormatting() {
 		let areaList = [...this.formData.an_coverage_area_ta_list];
-		this.areaList = areaList.map ( (item: any) => {
-			let arr = item.split(';');
-			item = arr.map( (ite, index) => {
+		this.areaList = areaList.map((item: any) => {
+			let arr = item.split(";");
+			item = arr.map((ite, index) => {
 				let key: string;
 				if (!index) {
-					key = 'province';
-				} else if (index === 1){
-					key = 'city'
+					key = "province";
+				} else if (index === 1) {
+					key = "city";
 				} else {
-					key = 'district'
+					key = "district";
 				}
 				const obj: any = {};
 				obj.key = key;
-				obj.selected = ite
-				obj.options = [{name: ite, id: ite}]
-				return obj
-			})
+				obj.selected = ite;
+				obj.options = [{ name: ite, id: ite }];
+				return obj;
+			});
 			return item;
-		})
+		});
 	}
 
-	creatAreaList (): void {
+	creatAreaList(): void {
 		let arr = [
 			{
-				key: 'province',
-				selected: '',
-				options: []
+				key: "province",
+				selected: "",
+				options: [],
 			},
 			{
-				key: 'city',
-				selected: '',
-				options: []
+				key: "city",
+				selected: "",
+				options: [],
 			},
 			{
-				key: 'district',
-				selected: '',
-				options: []
-			}
-		]
-		this.areaList.push(arr)
+				key: "district",
+				selected: "",
+				options: [],
+			},
+		];
+		this.areaList.push(arr);
 	}
 
-	deleteAreaList (index: number): void {
-		this.areaList.splice(index,1);
+	deleteAreaList(index: number): void {
+		this.areaList.splice(index, 1);
 	}
 
-	handleChange(area: any[], areaItem: any): void{
-		if (areaItem.key === 'province' && areaItem.options.length <= 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) {
+		} 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 => {
+			});
+		} 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 = ''
+		if (areaItem.key === "province") {
+			area[1].selected = "";
 			area[1].options = [];
-			area[2].selected = '';
+			area[2].selected = "";
 			area[2].options = [];
-		} else if (areaItem.key === 'city') {
-			area[2].selected = '';
+		} else if (areaItem.key === "city") {
+			area[2].selected = "";
 			area[2].options = [];
 		}
 	}
 
-	handleCancel() : void{
-		this.showModel = false
-		this.cancel.emit(this.showModel)
+	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';
+	checkArea(area: any): string {
+		if (
+			area.every((item) => {
+				return item.selected === "";
+			})
+		) {
+			return "empty";
 		}
-		if (area.some((item) => {return item.selected === ''})) {
-			return 'incomplete';
+		if (
+			area.some((item) => {
+				return item.selected === "";
+			})
+		) {
+			return "incomplete";
 		}
-		return '';
+		return "";
 	}
 
 	// special handling for address
-	areaCheckBeforeSubmit (target: object) : Boolean{
+	areaCheckBeforeSubmit(target: object): Boolean {
 		for (const prop in target) {
-			if (target.hasOwnProperty(prop)) { 
-				if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') {
+			if (target.hasOwnProperty(prop)) {
+				if (
+					prop === "an_coverage_area_ta_list" ||
+					prop === "cn_coverage_area_ta_list"
+				) {
 					// if the vlaue is "shanghai;shanghai;", the input is incomplete
-					return target[prop].every((item) => {return this.Util.deepCheck(item.split(';'))});
+					return target[prop].every((item) => {
+						return this.Util.deepCheck(item.split(";"));
+					});
 				}
 			}
 		}
 		return true;
 	}
 
-	endCheckBeforeSubmit (endpoint, required) : Array<any>{
+	endCheckBeforeSubmit(endpoint, required): Array<any> {
 		// check params of Endpoint
-			let result: Array<any> = [true, ''];
-			let endPointList;
-			endPointList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options
-			let ipKey = '';
-			let logicalKey = '';
-			let nextKey = ''
-			for (let item of endPointList) {
-				if (item.title === 'ip_address') {
-					ipKey = item.key
-				} else if (item.title === 'logical_link') {
-					logicalKey = item.key
-				} else if (item.title === 'nexthop_info') {
-					nextKey = item.key
-				}
+		let result: Array<any> = [true, ""];
+		let endPointList;
+		endPointList = this.transferFormItems.find((item) => {
+			return item.title === "AN Endpoint";
+		}).options;
+		let ipKey = "";
+		let logicalKey = "";
+		let nextKey = "";
+		for (let item of endPointList) {
+			if (item.title === "ip_address") {
+				ipKey = item.key;
+			} else if (item.title === "logical_link") {
+				logicalKey = item.key;
+			} else if (item.title === "nexthop_info") {
+				nextKey = item.key;
 			}
-			for (let prop in endpoint) {
-				if (prop === ipKey) {
-					if (required) {
-						if (endpoint[prop] === '') {
-							result = [false, 'Endpoint can not be empty']
-						} else if (!this.regxpIP.test(endpoint[prop])) {
-							result = [false, 'Illegal IpAddress']
-						} 
-					} else if (!this.regxpIP.test(endpoint[prop]) && endpoint[prop] !== '') {
-						result = [false, 'Illegal IpAddress']
+		}
+		for (let prop in endpoint) {
+			if (prop === ipKey) {
+				if (required) {
+					if (endpoint[prop] === "") {
+						result = [false, "Endpoint can not be empty"];
+					} else if (!this.regxpIP.test(endpoint[prop])) {
+						result = [false, "Illegal IpAddress"];
 					}
-				} else if (prop === logicalKey) {
-					if (required) {
-						if (endpoint[prop] === '') {
-							result = [false, 'logical can not be empty']
-						} else if (!this.Util.isInteger(endpoint[prop])) {
-							result = [false, 'LogicalID can only be an integer']				
-						}
-					} else if (!this.Util.isInteger(endpoint[prop]) && endpoint[prop] !== '') {
-						result = [false, 'LogicalID can only be an integer']
+				} else if (
+					!this.regxpIP.test(endpoint[prop]) &&
+					endpoint[prop] !== ""
+				) {
+					result = [false, "Illegal IpAddress"];
+				}
+			} else if (prop === logicalKey) {
+				if (required) {
+					if (endpoint[prop] === "") {
+						result = [false, "logical can not be empty"];
+					} else if (!this.Util.isInteger(endpoint[prop])) {
+						result = [false, "LogicalID can only be an integer"];
 					}
-				} else if (prop === nextKey) {
-					if (required && endpoint[prop] === '') {
-						result = [false, 'Endpoint can not be empty']
-					}	
+				} else if (
+					!this.Util.isInteger(endpoint[prop]) &&
+					endpoint[prop] !== ""
+				) {
+					result = [false, "LogicalID can only be an integer"];
+				}
+			} else if (prop === nextKey) {
+				if (required && endpoint[prop] === "") {
+					result = [false, "Endpoint can not be empty"];
 				}
-			} 
-			return result;
+			}
+		}
+		return result;
 	}
 
-	inputHolder (title: string): string {
-		const titleArr = title.split(' ')
+	inputHolder(title: string): string {
+		const titleArr = title.split(" ");
 		if (titleArr.length > 1) {
-			return titleArr.slice(0, 2).join('');
+			return titleArr.slice(0, 2).join("");
 		} else {
 			return title;
 		}
 	}
-	
-	labelStyle (required: boolean) : object{
+
+	labelStyle(required: boolean): object {
 		let style;
 		if (!required) {
-			style = {'margin-left': '18px', 'margin-right': '-18px'};
+			style = { "margin-left": "18px", "margin-right": "-18px" };
 		} else {
-			style = {}
+			style = {};
 		}
 		return style;
 	}
@@ -400,17 +502,27 @@ export class SubnetParamsModelComponent implements OnInit {
 	handleOk(): void {
 		// Verify that items of EndPoint is correct
 		if (this.EndpointEnable) {
-			let endCheckResult = []
-			if (this.title === 'Tn') {
-				const ANendCheckResult = this.endCheckBeforeSubmit(this.ANEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).required)
-				const CNendCheckResult = this.endCheckBeforeSubmit(this.CNEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).required)
+			let endCheckResult = [];
+			if (this.title === "Tn") {
+				const ANendCheckResult = this.endCheckBeforeSubmit(
+					this.ANEndpointInputs,
+					this.transferFormItems.find((item) => {
+						return item.title === "AN Endpoint";
+					}).required
+				);
+				const CNendCheckResult = this.endCheckBeforeSubmit(
+					this.CNEndpointInputs,
+					this.transferFormItems.find((item) => {
+						return item.title === "CN Endpoint";
+					}).required
+				);
 				if (ANendCheckResult[0] && CNendCheckResult[0]) {
-					endCheckResult[0] = true
+					endCheckResult[0] = true;
 				} else {
 					if (ANendCheckResult[0] === false) {
-						endCheckResult = ANendCheckResult
+						endCheckResult = ANendCheckResult;
 					} else {
-						endCheckResult = CNendCheckResult
+						endCheckResult = CNendCheckResult;
 					}
 				}
 			}
@@ -420,52 +532,62 @@ export class SubnetParamsModelComponent implements OnInit {
 			}
 			// replace the params about endPoint
 			for (let prop in this.formData) {
-				if (this.title === 'Tn' && typeof this.ANEndpointInputs[prop] !== 'undefined') {
+				if (
+					this.title === "Tn" &&
+					typeof this.ANEndpointInputs[prop] !== "undefined"
+				) {
 					this.formData[prop] = this.ANEndpointInputs[prop];
-				} else if (this.title === 'Tn' && typeof this.CNEndpointInputs[prop] !== 'undefined') {
+				} else if (
+					this.title === "Tn" &&
+					typeof this.CNEndpointInputs[prop] !== "undefined"
+				) {
 					this.formData[prop] = this.CNEndpointInputs[prop];
 				}
 			}
 		}
 		let params: object;
-		if (this.title === 'An') {
+		if (this.title === "An") {
 			const an_coverage_area_ta_list: string[] = [];
-			this.areaList.forEach( item => {
-				let str: string = '';
-				item.forEach( area => {
-					str += area.selected + ';';
-				})
-				an_coverage_area_ta_list.push(str.substring(0, str.length-1));
-			})
-			params = {...this.formData, an_coverage_area_ta_list};
+			this.areaList.forEach((item) => {
+				let str: string = "";
+				item.forEach((area) => {
+					str += area.selected + ";";
+				});
+				an_coverage_area_ta_list.push(str.substring(0, str.length - 1));
+			});
+			params = { ...this.formData, an_coverage_area_ta_list };
 		} else {
-			params = {...this.formData};
+			params = { ...this.formData };
+		}
+		// Verify that each item exclude endpoint is not empty, include special handeling of area_list
+		let checkParams: object = params;
+		let requireKeyList: string[] = [];
+		let targetFormItems: any[] = [];
+		if (this.title === "An" || this.title === "Cn") {
+			targetFormItems = this.coreFormItems;
+		} else if ((this.title = "Tn")) {
+			targetFormItems = this.transferFormItems;
 		}
-        // Verify that each item exclude endpoint is not empty, include special handeling of area_list
-        let checkParams : object= params
-        let requireKeyList :string[] = []
-        let targetFormItems : any[] = []
-        if (this.title === 'An' || this.title === 'Cn') {
-            targetFormItems = this.coreFormItems
-        } else if (this.title = 'Tn') {
-            targetFormItems = this.transferFormItems
-        }
-        for (let item of targetFormItems) {
-            if (typeof item.required !== 'undefined' && item.required) {
-                if (typeof item.type !== 'undefined' && item.type !== 'endpoint')
-                    {
-                        requireKeyList.push(item.key)
-                    }
-            }
-        }
-        checkParams = this.Util.pick(params, requireKeyList)
-		if (this.Util.deepCheck(checkParams) && this.areaCheckBeforeSubmit(params)) {
+		for (let item of targetFormItems) {
+			if (typeof item.required !== "undefined" && item.required) {
+				if (
+					typeof item.type !== "undefined" &&
+					item.type !== "endpoint"
+				) {
+					requireKeyList.push(item.key);
+				}
+			}
+		}
+		checkParams = this.Util.pick(params, requireKeyList);
+		if (
+			this.Util.deepCheck(checkParams) &&
+			this.areaCheckBeforeSubmit(params)
+		) {
 			this.paramsDataChange.emit(params);
-			this.noPassParaChange.emit(this.notPassPara)
+			this.noPassParaChange.emit(this.notPassPara);
 			this.handleCancel();
 		} else {
-			this.message.error('Please complete the form');
+			this.message.error("Please complete the form");
 		}
 	}
-
 }
diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts
index 909afeb5..249d6f6d 100644
--- a/usecaseui-portal/src/constants/constants.ts
+++ b/usecaseui-portal/src/constants/constants.ts
@@ -1,535 +1,143 @@
+/*******

+    title /MUST/: MARK THE ITEM NAME,

+    key /MUST/:  MARK THE ITEM KEY,

+    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

+********/

+

 export const TASK_PROCESSING_STATUS = [

 	{

-		title: 'All',

-		value: 'all'

+		title: "All",

+		value: "all",

 	},

 	{

-		title: 'Planning',

-		value: 'Planning'

+		title: "Planning",

+		value: "Planning",

 	},

 	{

-		title: 'WaitingToConfirm',

-		value: 'WaitingToConfirm'

+		title: "WaitingToConfirm",

+		value: "WaitingToConfirm",

 	},

 	{

-		title: 'Creating',

-		value: 'Creating'

+		title: "Creating",

+		value: "Creating",

 	},

 	{

-		title: 'Completed',

-		value: 'Completed'

-	}

-]

+		title: "Completed",

+		value: "Completed",

+	},

+];

 

 export const BUSINESS_REQUIREMENT = [

-		{

-			title: 'Slicing Business Name',

-			key: 'service_name'

-		},

-		{

-			title: 'S-NSSAI',

-			key: 'service_snssai'

-		},

-		{

-			title: 'Data Rate Downlink (Mbps) ',

-			key: 'exp_data_rate_dl'

-		},

-		{

-			title: 'Data Rate Uplink (Mbps) ',

-			key: 'exp_data_rate_ul'

-		},

-		{

-			title: 'Mobility',

-			key: 'ue_mobility_level'

-		},

-		{

-			title: 'Latency (ms)',

-			key: 'latency'

-		},

-		{

-			title: 'Use Interval (Month) ',

-			key: 'use_interval'

-		},

-

-		{

-			title: 'Activity Factor（%）',

-			key: 'activity_factor'

-		},

-		{

-			title: 'Resource Sharing Level',

-			key: 'resource_sharing_level'

-		},

-		{

-			title: 'Max Number of UEs',

-			key: 'max_number_of_ues'

-		},

-		{

-			title: 'Uplink Regional Traffic Density（Mbps/km ）',

-			key: 'area_traffic_cap_ul'

-		},

-		{

-			title: 'Downlink Regional Traffic Density（Mbps/km ）',

-			key: 'area_traffic_cap_dl'

-        },

-        {

-			title: 'Availability',

-			key: 'serviceProfile_Availability'

-        },

-        {

-			title: 'PLMNIdList',

-			key: 'serviceProfile_PLMNIdList'

-        },

-        {

-			title: 'Reliability',

-			key: 'serviceProfile_Reliability'

-        },

-        {

-			title: 'Uplink throughput per UE',

-			key: 'serviceProfile_ULThptPerUE'

-        },

-        {

-			title: 'Downlink throughput per UE',

-			key: 'serviceProfile_DLThptPerUE'

-        },

-        {

-			title: 'Uplink throughput per network slice',

-			key: 'serviceProfile_ULThptPerSlice'

-        },

-        {

-			title: 'Downlink throughput per network slice',

-			key: 'serviceProfile_DLThptPerSlice'

-        },

-        {

-			title: 'Maximum packet size',

-			key: 'serviceProfile_MaxPktSize'

-        },

-        {

-			title: 'Maximum Number of Connections',

-			key: 'serviceProfile_MaxNumberofConns'

-        },

-        {

-			title: 'Terminal density',

-			key: 'serviceProfile_TermDensity'

-        },

-        {

-			title: 'jitter',

-			key: 'serviceProfile_Jitter'

-        },

-        {

-			title: 'survivalTime',

-			key: 'serviceProfile_SurvivalTime'

-        },

-        

-		[

-            {

-                title: 'Area',

-                key: 'area'

-            }

-        ]

-]

-

-

-export const TRANSFRER_FORM_ITEMS = [

-    {

-        title: 'S-NSSAI',

-        key: 'sliceProfile_TN_BH_sNSSAI',

-        required: true,

-        type: 'input'

-    },

 	{

-        title: 'Latency (ms)',

-        key: 'tn_bh_latency',

-        required: true,

-        type: 'input'

-    },

-    {

-        title: 'Jitter',

-        key: 'sliceProfile_TN_BH_jitte',

-        required: false,

-        type: 'input'

-    },

+		title: "Slicing Business Name",

+		key: "service_name",

+	},

 	{

-		title: 'MaxBandwidth',

-        key: 'tn_bh_bandwidth',

-        required: true,

-        type: 'input'

-    },

-    {

-        title: 'Resource Sharing Level', // select

-        key: 'sliceProfile_TN_resourceSharingLevel', // :new

-        required: true,

-        type: 'radio',

-        options: [

-            {

-                title: 'Shared',

-                key: 'shared'

-            },

-            {

-                title: 'Non-shared',

-                key: 'non-shared'

-            }

-        ]

-    },

-    {

-        title: 'Connection Links',// table

-        key: 'tn_connection_links', // :new

-        required: false, // combined

-        type: 'table',

-        disable: false

-    },

-    {

-        title:'AN Endpoint', // input group

-        key:"an_Endpoint",

-        type: 'endpoint',

-        required: false,

-        disable: false,

-        options: [

-            {

-                title: 'ip_address',

-                key: 'sliceProfile_AN_ipAddress',

-                holder: 'IpAddress'

-            },

-            {

-                title: 'logical_link',

-                key: 'sliceProfile_AN_logicInterfaceId',

-                holder: 'LogicId'

-            },

-            {

-                title: 'nexthop_info',

-                key: 'sliceProfile_AN_nextHopInfo',

-                holder: 'NextHop'

-            }

-        ]

-    },

-    {

-        title:'CN Endpoint',

-        key:"cn_Endpoint",

-        type: 'endpoint',

-        required: false,

-        disable: false,

-        options: [

-            {

-                title: 'ip_address',

-                key: 'sliceProfile_CN_ipAddress',

-                holder: 'IpAddress'

-            },

-            {

-                title: 'logical_link',

-                key: 'sliceProfile_CN_logicInterfaceId',

-                holder: 'LogicId'

-            },

-            {

-                title: 'nexthop_info',

-                key: 'sliceProfile_CN_nextHopInfo',

-                holder: 'NextHop'

-            }

-        ]

-    },

-]

-

-export const CORE_FORM_ITEMS = {

-    "An": [

-        {

-            title: 'S-NSSAI',

-            key: 'sliceProfile_AN_sNSSAI',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Resource Sharing Level',

-            key: 'sliceProfile_AN_resourceSharingLevel',

-            required: true,

-            type: 'radio',

-            options: [

-                {

-                    title: 'Shared',

-                    key: 'shared'

-                },

-                {

-                    title: 'Non-shared',

-                    key: 'non-shared'

-                }

-            ]

-        },

-        {

-            title: 'Mobility',

-            key: 'sliceProfile_AN_uEMobilityLevel',

-            required: true,

-            type: 'select',

-            options: [

-                {

-                    title: 'Stationary',

-                    key: 'stationary'

-                },

-                {

-                    title: 'Nomadic',

-                    key: 'nomadic'

-                },

-                {

-                    title: 'Spatially Restricted Mobility',

-                    key: 'spatially restricted mobility'

-                },

-                {

-                    title: 'Fully Mobility',

-                    key: 'fully mobility'

-                }

-            ]

-        },

-        {

-            title: 'Latency (ms)',

-            key: 'an_latency',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Max Number of PUD Session',

-            key: 'sliceProfile_AN_maxNumberofPDUSession',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Max Number of UEs',

-            key: 'sliceProfile_AN_maxNumberofUEs',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Activity Factor (%)',

-            key: 'sliceProfile_AN_activityFactor',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'User Downlink Experience Rate（Mbps）',

-            key: 'sliceProfile_AN_expDataRateDL',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'User Uplink Experience Rate（Mbps）',

-            key: 'sliceProfile_AN_expDataRateUL',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Downlink Regional Traffic Density（Mbps/km ）',

-            key: 'sliceProfile_AN_areaTrafficCapDL',

-            required: false,

-            type: 'input'

-        },

-        {

-            title: 'Uplink Regional Traffic Density（Mbps/km ）',

-            key: 'sliceProfile_AN_areaTrafficCapUL',

-            required: false,

-            type: 'input'

-        },

-        {

-            title: 'Script Name',

-            key: 'an_script_name',

-            required: false,

-            type: 'input'

-        },

-        {

-            title: 'Overall User Density',

-            key: 'sliceProfile_AN_overallUserDensity',

-            required: false,

-            type: 'input'

-        },

-        {

-            title: 'Coverage Area Ta List',

-            key: 'an_coverage_area_ta_list',

-            required: true,

-            type: 'area'

-        }

-    ],

-    "Cn": [

-        {

-            title: 'S-NSSAI',

-            key: 'cn_service_snssai',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Resource Sharing Level',

-            key: 'cn_resource_sharing_level',

-            required: true,

-            type: 'radio',

-            options: [

-                {

-                    title: 'Shared',

-                    key: 'shared'

-                },

-                {

-                    title: 'Non-shared',

-                    key: 'non-shared'

-                }

-            ]

-        },

-        {

-            title: 'Mobility',

-            key: 'cn_ue_mobility_level',

-            required: true,

-            type: 'select',

-            options: [

-                {

-                    title: 'Stationary',

-                    key: 'stationary'

-                },

-                {

-                    title: 'Nomadic',

-                    key: 'nomadic'

-                },

-                {

-                    title: 'Spatially Restricted Mobility',

-                    key: 'spatially restricted mobility'

-                },

-                {

-                    title: 'Fully Mobility',

-                    key: 'fully mobility'

-                }

-            ]

-        },

-        {

-            title: 'Latency (ms)',

-            key: 'cn_latency',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Max Number of UEs',

-            key: 'cn_max_number_of_ues',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Activity Factor (%)',

-            key: 'cn_activity_factor',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'User Downlink Experience Rate（Mbps）',

-            key: 'cn_exp_data_rate_dl',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'User Uplink Experience Rate（Mbps）',

-            key: 'cn_exp_data_rate_ul',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'Downlink Regional Traffic Density（Mbps/km ）',

-            key: 'cn_area_traffic_cap_dl',

-            required: false,

-            type: 'input'

-        },

-        {

-            title: 'Uplink Regional Traffic Density（Mbps/km ）',

-            key: 'cn_area_traffic_cap_ul',

-            required: false,

-            type: 'input'

-        },

-        {

-            title: 'Script Name',

-            key: 'cn_script_name',

-            required: false,

-            type: 'input'

-        },

-        {

-            title: 'Max Number of PUD Session',

-            key: 'sliceProfile_CN_maxNumberofPDUSession',

-            required: true,

-            type: 'input'

-        },

-        {

-            title: 'OverAll User Density',

-            key: 'sliceProfile_CN_overallUserDensity',

-            required: false,

-            type: 'input'

-        },

-        // {

-        //     title: 'ip-address',

-        //     key: 'sliceProfile_CN_ipAddress',

-        //     required: true,

-        //     holder: 'IpAddress'

-        // },

-        // {

-        //     title: 'logical_link',

-        //     key: 'sliceProfile_CN_logicInterfaceId',

-        //     required: true,

-        //     holder: 'LogicId'

-        // },

-        // {

-        //     title: 'cn_nexthop_info',

-        //     key: 'sliceProfile_CN_nextHopInfo',

-        //     required: true,

-        //     holder: 'NextHop'

-        // },

-    ]

-}

+		title: "S-NSSAI",

+		key: "service_snssai",

+	},

+	{

+		title: "Data Rate Downlink (Mbps) ",

+		key: "exp_data_rate_dl",

+	},

+	{

+		title: "Data Rate Uplink (Mbps) ",

+		key: "exp_data_rate_ul",

+	},

+	{

+		title: "Mobility",

+		key: "ue_mobility_level",

+	},

+	{

+		title: "Latency (ms)",

+		key: "latency",

+	},

+	{

+		title: "Use Interval (Month) ",

+		key: "use_interval",

+	},

 

-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"

-					}

-				]

-			}

-		]

+		title: "Activity Factor（%）",

+		key: "activity_factor",

+	},

+	{

+		title: "Resource Sharing Level",

+		key: "resource_sharing_level",

+	},

+	{

+		title: "Max Number of UEs",

+		key: "max_number_of_ues",

+	},

+	{

+		title: "Uplink Regional Traffic Density（Mbps/km ）",

+		key: "area_traffic_cap_ul",

 	},

 	{

-		"id": "2",

-		"name": "Shanghai",

-		"city": [{

-			"id": "201",

-			"name": "Shanghai City",

-			"county": [

-				{

-					"id": "2001",

-					"name": "Pudongxin District",

-				},

-				{

-					"id": "2002",

-					"name": "Jingan District"

-				}

-			]

-		}]

-	}

-]

+		title: "Downlink Regional Traffic Density（Mbps/km ）",

+		key: "area_traffic_cap_dl",

+	},

+	{

+		title: "Availability",

+		key: "serviceProfile_Availability",

+	},

+	{

+		title: "PLMNIdList",

+		key: "serviceProfile_PLMNIdList",

+	},

+	{

+		title: "Reliability",

+		key: "serviceProfile_Reliability",

+	},

+	{

+		title: "Uplink throughput per UE",

+		key: "serviceProfile_ULThptPerUE",

+	},

+	{

+		title: "Downlink throughput per UE",

+		key: "serviceProfile_DLThptPerUE",

+	},

+	{

+		title: "Uplink throughput per network slice",

+		key: "serviceProfile_ULThptPerSlice",

+	},

+	{

+		title: "Downlink throughput per network slice",

+		key: "serviceProfile_DLThptPerSlice",

+	},

+	{

+		title: "Maximum packet size",

+		key: "serviceProfile_MaxPktSize",

+	},

+	{

+		title: "Maximum Number of Connections",

+		key: "serviceProfile_MaxNumberofConns",

+	},

+	{

+		title: "Terminal density",

+		key: "serviceProfile_TermDensity",

+	},

+	{

+		title: "jitter",

+		key: "serviceProfile_Jitter",

+	},

+	{

+		title: "survivalTime",

+		key: "serviceProfile_SurvivalTime",

+	},

 

-export const NexthopInfo_Options = [

-    {

-        title:"test_info_01",

-        key:"test_info_01"

-    },

-    {

-        title:"test_info_02",

-        key:"test_info_02"

-    },

-    {

-        title:"test_info_03",

-        key:"test_info_03"

-    }

-]

+	[

+		{

+			title: "Area",

+			key: "area",

+		},

+	],

+];

 

-export const BUSINESS_STATUS = [

-	"All", "Activated", "Deactivated"

-]

+export const BUSINESS_STATUS = ["All", "Activated", "Deactivated"];