init dev-push code ui base design

pages/ems/base/AddInfoMngPage.vue

@@ -3,7 +3,7 @@
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
-					<v-row align="center" no-gutters>
+					<v-row >
 						<v-col :cols="3">
 							<component
 								:is="'SelectAddGrp'"
@@ -12,6 +12,8 @@
 								dataKey="searchAddGrp"
 								:sendParam="{ useFg: '1' }"
 								:addAll="true"
+								:iconShow="true"
+								customClass="select-large"
 							/>
 						</v-col>
 						<v-col :cols="3">
@@ -20,6 +22,8 @@
 								label="추가 정보명"
 								valueNm="addInfoNm"
 								:searchOption="true"
+								:iconShow="true"
+								customClass="input-large"
 							/>
 						</v-col>
 						<v-col :cols="3">
@@ -30,10 +34,12 @@
 								dataKey="useFg"
 								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
 								:addAll="true"
+								:iconShow="true"
+								customClass="select-large"
 							/>
 						</v-col>
-						<v-col :cols="3" class="text-right">
-							<BtnSearch @click="search" />
+						<v-col :cols="3" class="d-flex align-end justify-end text-right">
+							<BtnSearch @click="search" size="large" />
 						</v-col>
 					</v-row>
 				</v-card>
@@ -58,6 +64,7 @@
 								:gridName="gridName"
 								:parentPrgmId="myPrgmId"
 								@getRowsData="getRowData"
+								:dataPath="dataPathMock"
 							/>
 						</div>
 					</div>
@@ -130,10 +137,24 @@ export default {
 		return {
 			myPrgmId: myPrgmId,
 			gridName: 'rowGrid',
-			loadGrid: false,
+			loadGrid: true,
 			tab: null,
 			detailList: myDetail,
 			initedFlag: false,
+			dataPathMock : {
+				'rowGrid': {
+					column: [
+						{ header: '추가 정보 그룹', name: 'addGrpId', align: 'left' },
+						{ header: '추가 정보 ID', name: 'addInfoId', align: 'left' },
+						{ header: '추가 정보 명', name: 'addInfoNm', align: 'left' },
+						{ header: 'Data 형식', name: 'addInfoDataKind', align: 'center' },
+						{ header: '사용여부', name: 'useFg', align: 'center' },
+					],
+					data: dataMockExample,
+					defaultRow: dataMockExample,
+					option: {},
+				},
+			},
 		};
 	},
 	computed: {
@@ -330,7 +351,8 @@ export default {
 			this.search();
 		},
 		async search() {
-			this.loadGrid = false;
+			//process
+			this.loadGrid = true;
 			await this.getRowGridData();
 			await this.setPageData({
 				isFind: false,
@@ -510,7 +532,10 @@ const myDetail = [
 		valueNm: 'addGrpId',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pr-4',
 		list: 'addGrpList',
 		itemText: 'addGrpNm',
 		itemValue: 'addGrpId',
@@ -522,7 +547,10 @@ const myDetail = [
 		valueNm: 'addInfoId',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pl-4',
 		required: true,
 	},
 	{
@@ -531,7 +559,10 @@ const myDetail = [
 		valueNm: 'addInfoNm',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pr-4',
 		required: true,
 	},
 	{
@@ -540,7 +571,10 @@ const myDetail = [
 		valueNm: 'addInfoDataKind',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pl-4',
 		list: 'addInfoDataKindList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@@ -552,7 +586,10 @@ const myDetail = [
 		valueNm: 'useFg',
 		disabled: false,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pr-4',
 		value: { '1': true, '0': false },
 		required: true,
 	},
@@ -562,7 +599,10 @@ const myDetail = [
 		valueNm: 'regUserNo',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pl-4',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -571,7 +611,10 @@ const myDetail = [
 		valueNm: 'regDttm',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pr-4',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -580,7 +623,10 @@ const myDetail = [
 		valueNm: 'procUserNo',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pl-4',
 		placeholder: '시스템 자동입력',
 	},
 	{
@@ -589,11 +635,50 @@ const myDetail = [
 		valueNm: 'procDttm',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		iconShow: true,
+		class: 'py-2 pr-4',
 		placeholder: '시스템 자동입력',
 	},
 ];
+
+const dataMockExample = [
+  {
+    addGrpId: 'GRP001',
+    addInfoId: 'INFO001',
+    addInfoNm: '온도 센서',
+    addInfoDataKind: 'DATA01',
+    useFg: true,
+  },
+  {
+    addGrpId: 'GRP002',
+    addInfoId: 'INFO002',
+    addInfoNm: '압력 센서',
+    addInfoDataKind: 'DATA02',
+    useFg: false,
+  },
+  {
+    addGrpId: 'GRP003',
+    addInfoId: 'INFO003',
+    addInfoNm: '압력 센서',
+    addInfoDataKind: 'DATA03',
+    useFg: false,
+  },
+  {
+    addGrpId: 'GRP004',
+    addInfoId: 'INFO004',
+    addInfoNm: '압력 센서',
+    addInfoDataKind: 'DATA04',
+    useFg: false,
+  },
+  {
+    addGrpId: 'GRP005',
+    addInfoId: 'INFO005',
+    addInfoNm: '압력 센서',
+    addInfoDataKind: 'DATA05',
+    useFg: false,
+  },
+];
+
 </script>
-<style lang="scss">
-@import '@/assets/scss/common.scss';
-</style>