init dev-push code ui base design

components/pages/ems/ReadPlcInfo/ReadPlcImgInfoTab.vue

@@ -1,36 +1,18 @@
 <template>
 	<div>
-		<div
-			class="d-flex justify-space-between align-center"
-			style="height: 80px;"
-		>
-			<span class="txt">가상 검침 정보</span>
-			<Buttons
-				:parentPrgmId="parentPrgmId"
-				:bindingData="gridName"
-				:detailList="detailReadPlcImgList"
-				:btnActionsFnc="btnActions"
-			/>
+		<div class="d-flex justify-space-between">
+			<v-card-title class="px-0 pt-0 custom-title-4">가상 검침 정보</v-card-title>
+			<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailReadPlcImgList"
+				:btnActionsFnc="btnActions" />
 		</div>
 
 		<div ref="gridParent" style="height: calc((100vh - 520px) /2);">
-			<Grid
-				:ref="gridName"
-				:is="loadGrid ? 'Grid' : null"
-				:gridName="gridName"
-				:parentPrgmId="parentPrgmId"
-				@getRowsData="getRowData"
-				:innerTabGridInfo="innerTabGridInfo"
-			/>
+			<Grid :ref="gridName" :gridName="gridName" :parentPrgmId="parentPrgmId" @getRowsData="getRowData"
+				:innerTabGridInfo="innerTabGridInfo" :dataPath="imgInfoTabData" />
 		</div>
-		<div ref="formParent" style="height: calc((100vh - 520px) /2);">
-			<component
-				:is="'Form'"
-				:parentPrgmId="parentPrgmId"
-				:bindingData="gridName"
-				:detailList="detailReadPlcImgList"
-				@gridEditingFinish="gridEditingFinish"
-			/>
+		<div ref="formParent">
+			<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName"
+				:detailList="detailReadPlcImgList" @gridEditingFinish="gridEditingFinish" />
 		</div>
 	</div>
 </template>
@@ -62,9 +44,26 @@ export default {
 	},
 	data() {
 		return {
-			loadGrid: false,
+			loadGrid: true,
 			gridName: 'rowReadPlcImgGrid',
 			detailReadPlcImgList: myReadPlcImgDetail,
+			imgInfoTabData: {
+				"rowReadPlcImgGrid": {
+					data:
+						[
+							{ "objReadPlcId": "1001", "objReadPlcNm": "서울역", "distRt": 12 },
+							{ "objReadPlcId": "1002", "objReadPlcNm": "강남역", "distRt": 8 },
+							{ "objReadPlcId": "1003", "objReadPlcNm": "잠실역", "distRt": 15 },
+						]
+					,
+					column: [
+						{ header: '대상 검침개소 번호', name: 'objReadPlcId', align: 'center' },
+						{ header: '대상 검침개소명', name: 'objReadPlcNm', align: 'left' },
+						{ header: '분배율(1~100)', name: 'distRt', align: 'right' },
+					]
+
+				}
+			}
 		};
 	},
 	computed: {
@@ -223,7 +222,7 @@ export default {
 		gridEditingFinish(data, bindingData) {
 			this.$refs[this.gridName].editingFinish(data);
 		},
-		search() {},
+		search() { },
 	},
 };
 
@@ -235,15 +234,11 @@ const myReadPlcImgDetail = [
 		valueNm: 'objReadPlcId',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4 pb-2',
 		required: true,
-	},
-	{
-		type: 'InputText',
-		valueNm: 'objReadPlcNm',
-		readonly: true,
-		cols: 5,
-		class: 'py-2',
+		iconShow:true
 	},
 	{
 		type: 'InputNumber',
@@ -251,11 +246,25 @@ const myReadPlcImgDetail = [
 		valueNm: 'distRt',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-3 pl-4',
+		labelCols: 12,
+		textCols: 12,
 		inputType: 'number',
 		min: 1,
 		max: 100,
 		required: true,
+		iconShow:true
+	},
+	{
+		type: 'InputText',
+		valueNm: 'objReadPlcNm',
+		readonly: true,
+		cols: 6,
+		textCols: 12,
+		class: 'pt-1 py-3 pr-4',
+	},
+	{
+		showValue: false
 	},
 	{
 		type: 'SelectBox',
@@ -263,11 +272,14 @@ const myReadPlcImgDetail = [
 		valueNm: 'ddctKind',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
 		list: 'ddctKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
 		required: true,
+		iconShow: true
 	},
 ];
 </script>