init dev-push code ui base design

components/common/modal/FtnPlcFormPop.vue

@@ -1,26 +1,32 @@
 <template>
-	<v-row class="search-box" align="center" no-gutters>
-		<v-col :cols="option.labelCols">
+	<v-row class="search-box " align="center" no-gutters >
+		<v-col :cols="option.labelCols" class="py-0">
 			<label for="" class="search-box-label">
 				<v-icon
-					x-small
+					v-if="iconShow"
+					small
 					:color="item.required ? '#fb8200' : 'primary'"
-					class="mr-1"
-					>mdi-record-circle</v-icon
+					:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
+					>$icoBulletPoint</v-icon
 				>
 				{{ option.labelContent }}
 			</label>
 		</v-col>
 		<v-col :cols="option.textCols">
+			<!-- append-icon="mdi-magnify" -->
 			<v-text-field
 				readonly
 				v-model="selectValue"
-				append-icon="mdi-magnify"
 				class="v-input__custom"
 				@click="dialogOpenCloseEvent(dialog)"
 				outlined
 				:hide-details="true"
-			></v-text-field>
+			>
+			<template v-slot:append>
+					<!-- Custom SVG icon -->
+					<v-icon>$icoSearch</v-icon>
+			</template>
+		</v-text-field>
 		</v-col>
 
 		<v-dialog v-model="dialog" scrollable width="700px">
@@ -137,6 +143,11 @@ export default {
 			type: String,
 			require: false,
 		},
+		iconShow: {
+			type: Boolean,
+			require: false,
+			default: true
+		},
 	},
 	components: {
 		Grid,
@@ -146,7 +157,7 @@ export default {
 		return {
 			dialog: false,
 
-			loadGrid: false,
+			loadGrid: true,
 			grid_01: 'grid_01',
 			myModalKey: 'FtnPlcFormPop',
 			modalDataKey: 'modalData3',
@@ -285,27 +296,48 @@ export default {
 			});
 		},
 		async getGridData() {
-			this.loadGrid = false;
+			// this.loadGrid = false;
 
-			const res = await this.postApiReturn({
-				apiKey: 'selectEccBaseInfo',
-				resKey: 'eccBaseInfoData',
-				sendParam: {
-					blocId: this.myBindingData.blocId,
-					eqpmYn: '0',
-					search: this.searchWord,
-				},
-			});
+			// const res = await this.postApiReturn({
+			// 	apiKey: 'selectEccBaseInfo',
+			// 	resKey: 'eccBaseInfoData',
+			// 	sendParam: {
+			// 		blocId: this.myBindingData.blocId,
+			// 		eqpmYn: '0',
+			// 		search: this.searchWord,
+			// 	},
+			// });
 
-			const setTreeData = await this.setTree({
-				gridKey: this.gridNameTree,
-				treeKey: 'ECC_ID',
-				value: res.map(item => ({
+			// const setTreeData = await this.setTree({
+			// 	gridKey: this.gridNameTree,
+			// 	treeKey: 'ECC_ID',
+			// 	value: res.map(item => ({
+			// 		...item,
+			// 		eccNm: item.eccNm,
+			// 	})),
+			// });
+			
+			//mockdata eccNm
+
+			
+			let res = [
+				{ ECC_ID: 'ECC001', eccNm: '서울 본사', iconShow: false, align: 'center' },
+				{ ECC_ID: 'ECC002', eccNm: '부산 지사', useIcon: false, align: 'center' },
+				{ ECC_ID: 'ECC003', eccNm: '대구 센터', useIcon: false, align: 'center' },
+				{ ECC_ID: 'ECC004', eccNm: '광주 사무소' , useIcon: false, align: 'center'},
+				{ ECC_ID: 'ECC005', eccNm: '인천 물류창고' , useIcon: false, align: 'center'},
+			];
+
+			
+			const setTreeData = {
+				ROOT: res.map(item => ({
 					...item,
 					eccNm: item.eccNm,
-				})),
-			});
+				}))
+			};
 
+			console.log(res);
+			
 			this.setModalGridData({
 				modalKey: this.myModalKey,
 				gridKey: this.grid_01,