init dev-push code ui base design

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -4,7 +4,7 @@
 			class="d-flex justify-space-between align-center"
 			style="height: 80px;"
 		>
-			<span class="txt">공정 입출력 정보</span>
+			<span class="txt custom-title-4-new">공정 입출력 정보</span>
 			<Buttons
 				:parentPrgmId="parentPrgmId"
 				:bindingData="gridName"
@@ -19,6 +19,7 @@
 				:parentPrgmId="parentPrgmId"
 				@getRowsData="getRowData"
 				:innerTabGridInfo="innerTabGridInfo"
+				:dataPath="dataPathMock"
 			/>
 		</div>
 		<div>
@@ -59,11 +60,24 @@ export default {
 	},
 	data() {
 		return {
-			loadGrid: false,
+			loadGrid: true,
 			gridName: 'rowEccIaoGrid',
 			inputList_emMapDiv: [],
 			inputList_cmInOut: [],
 			detailList: myDetail,
+			dataPathMock: {
+				"rowEccIaoGrid": {
+				column: [
+					{ header: '검침 대상 ID', name: 'readObjId', align: 'left' },
+					{ header: '검침 대상 명', name: 'readObjNm', align: 'left' },
+					{ header: '검침 대상 유형', name: 'readObjKind', align: 'left' },
+					{ header: '그룹', name: 'grpCd', align: 'left' },
+				],
+				data: dataPathDataExample,
+				defaultRow: dataPathDataExample,
+				option: {}
+				}
+			},
 		};
 	},
 	computed: {
@@ -374,38 +388,49 @@ const myDetail = [
 		label: '대상 유형',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4',
 		list: 'emMapDivList',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
 		required: true,
 		disabled: true,
-	},
-	{
-		// 공백 처리
-		type: 'Label',
-		cols: 6,
-		class: 'py-2',
-		disabled: false,
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'ReadPlcPop',
 		label: '대상 항목',
 		valueNm: 'objId',
-		disabled: true,
+		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'pt-2 pb-0 mb-0 pl-4',
 		required: true,
 		bindNm: 'objNm',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		noText: true,
+		iconShow: true,
+	},
+	{
+		// 공백 처리
+		type: 'Label',
+		cols: 6,
+		class: 'py-2 pr-4',
+		disabled: false,
 	},
 	{
 		type: 'InputText',
 		valueNm: 'objNm',
 		readonly: true,
 		disabled: true,
-		cols: 5,
-		class: 'py-2',
+		cols: 6,
+		class: 'pl-4',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'EvtObjPop',
@@ -417,53 +442,66 @@ const myDetail = [
 		disabled: true,
 		required: true,
 		cols: 6,
-		class: 'py-2 d-none',
-		labelCols: 4,
-		textCols: 7,
+		class: 'd-none pr-4',
 		disableContent: true,
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'InputText',
-		cols: 5,
-		class: 'py-2 d-none',
+		cols: 6,
+		class: 'd-none pt-0 pl-4',
 		valueNm: 'objNm',
 		readonly: true,
 		disabled: true,
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'SelectBox',
 		label: '에너지원',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4',
 		list: 'ercNmList',
 		valueNm: 'ercId',
 		itemText: 'text',
 		itemValue: 'value',
 		required: true,
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'SelectBox',
 		label: '투입생산유형',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4',
 		list: 'cmInoutList',
 		valueNm: 'inProdKind',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
 		required: true,
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'CheckBox',
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pr-4',
 		label: '계산 여부',
 		valueNm: 'calcFg',
 		disabled: false,
 		value: { '1': true, '0': false },
 		required: true,
 		disabledFg: 'objKind',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 	{
 		type: 'InputText',
@@ -471,8 +509,19 @@ const myDetail = [
 		valueNm: 'distRt',
 		readonly: false,
 		cols: 6,
-		class: 'py-2',
+		class: 'py-2 pl-4',
 		required: true,
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
 	},
 ];
+const dataPathDataExample = [
+	{
+		readObjId: 'OBJ001',
+		readObjNm: '서울 본사',
+		readObjKind: 'TYPE01',
+		grpCd: 'GRP01',
+	},
+]
 </script>