init dev-push code ui base design

2025-07-22 09:58:38 +07:00
parent ffdf5ccb66
commit eedbf94d56
214 changed files with 42170 additions and 28040 deletions
--- a/pages/comm/base/BatchMngPage.vue
+++ b/pages/comm/base/BatchMngPage.vue
@ -4,45 +4,38 @@
 		<v-row ref="searchFilter">
 			<v-col :cols="12">
 				<v-card class="searchFilter">
-					<v-row align="center" no-gutters>
-						<v-col :cols="2">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="배치ID"
-								valueNm="batchId"
-								:searchOption="true"
-							/>
+					<v-row align="end" no-gutters>
+						<v-col :cols="2.5">
+							<InputText :parentPrgmId="myPrgmId" label="배치ID" valueNm="batchId" :searchOption="true"
+								:customClass="'input-large'" />
 						</v-col>
-						<v-col :cols="2">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="배치명"
-								valueNm="batchNm"
-								:searchOption="true"
-							/>
+						<v-col :cols="2.5">
+							<InputText :parentPrgmId="myPrgmId" label="배치명" valueNm="batchNm" :searchOption="true"
+								:customClass="'input-large'" />
 						</v-col>
-						<v-col :cols="3">
-							<component
+						<v-col :cols="2.5">
+							<!-- <component
 								:is="'selectCodeList'"
 								:parentPrgmId="myPrgmId"
 								:label="'배치 실행 구분'"
 								:dataKey="'searchBatchExecTp'"
 								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_TP', useFg: '1' }"
 								:addAll="true"
-							/>
+								:customClass="'select-large'"
+							/> -->
 						</v-col>
-						<v-col :cols="3">
-							<component
+						<v-col :cols="2.5">
+							<!-- <component
 								:is="'selectCodeList'"
 								:parentPrgmId="myPrgmId"
 								:label="'사용여부'"
 								:dataKey="'searchUseFg'"
 								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
-							/>
-						</v-col>
-						<v-col :cols="2" class="text-right">
-							<BtnSearch />
+								:customClass="'select-large'"
+							/> -->
 						</v-col>
+						<BtnSearch size="large" />
+
 					</v-row>
 				</v-card>
 			</v-col>
@ -50,77 +43,47 @@

 		<v-row ref="contents">
 			<!-- 배치 리스트 -->
-			<v-col :cols="5" class="h100" style="height: calc(100vh - 180px);">
+			<v-col :cols="6" class="h100">
 				<v-card class="pb-5">
-					<div class="d-flex align-center justify-space-between pa-5">
+					<div class="d-flex align-center justify-space-between pa-4">
 						<!-- <v-card-title>
 					     	<span class="tit ft-size_20 ft-weight_600">배치 리스트</span>
 					    </v-card-title> -->
 						<v-card-title class="pa-0"> 배치 리스트 </v-card-title>
 						<!-- <v-card-actions> -->
-						<Buttons
-							:parentPrgmId="myPrgmId"
-							:bindingData="gridName"
-							:detailList="detailList"
-							:btnActionsFnc="btnActions"
-						/>
+						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
+							:btnActionsFnc="btnActions" />
 					</div>
-					<div class="px-5" style="height:calc(100% - 70px);">
+					<div class="px-4">
 						<div ref="gridParent" class="h100 w100">
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:parentPrgmId="myPrgmId"
-								:gridName="gridName"
-								@getRowsData="getRowData"
-							/>
+							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
+								:gridName="gridName" @getRowsData="getRowData" :dataPath="dataPathExample" />
 						</div>
 						<!-- </v-card-actions> -->
 					</div>
 				</v-card>
 			</v-col>
 			<!-- 배치 상세 -->
-			<v-col :cols="7" class="h100" style="height: calc(100vh - 180px);">
+			<v-col :cols="6" class="h100">
 				<v-card class="pd-y-20 h100">
-					<v-card-title class="d-flex justify-space-between align-end">
+					<v-card-title class="d-flex justify-space-between align-end pa-4">
 						<span class="tit ft-size_20 ft-weight_600">배치 상세</span>
 					</v-card-title>
 					<v-card-actions>
-						<div
-							ref="gridParent"
-							class="w100"
-							style="height: calc(100vh - 380px); padding-left:15px"
-						>
-							<component
-								:is="'Form'"
-								:parentPrgmId="myPrgmId"
-								:detailList="detailList"
-								@gridEditingFinish="gridEditingFinish"
-								@inputClick="inputClick"
-							/>
+						<div ref="gridParent" class="w100 pa-2 pb-6">
+							<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
+								@gridEditingFinish="gridEditingFinish" @inputClick="inputClick" />
 						</div>
 					</v-card-actions>
 				</v-card>
 			</v-col>
-			<v-dialog
-				ref="popModal"
-				v-model="dialog"
-				width="700"
-				overlay-color="#000"
-				overlay-opacity="0.8"
-				scrollable
-			>
+			<v-dialog ref="popModal" v-model="dialog" width="700" overlay-color="#000" overlay-opacity="0.8" scrollable>
 				<v-card style="height: 100%">
-					<v-card-title
-						class="v-card__title d-flex align-center justify-space-between"
-					>
+					<v-card-title class="v-card__title d-flex align-center justify-space-between">
 						<span class="custom-title-4">DB 프로시져 파라메터 설정</span>
 						<div>
-							<Buttons
-								:parentPrgmId="myPrgmId"
-								:bindingData="gridNameParam"
-								:btnActionsFnc="btnActionsParam"
-							/>
+							<Buttons :parentPrgmId="myPrgmId" :bindingData="gridNameParam"
+								:btnActionsFnc="btnActionsParam" />
 						</div>
 					</v-card-title>
 					<div class="pa-5">
@ -132,23 +95,16 @@
 					<v-card-text style="height: 300px;">
 						<div id="gridParent" class="mt-6" style="height:calc(100% - 36px);">
 							<div style="height:calc(100% - 36px);">
-								<Grid
-									:ref="gridNameParam"
-									:is="paramLoadGrid && dialog ? 'Grid' : null"
-									:gridName="gridNameParam"
-									:parentPrgmId="myPrgmId"
-									:editorGrid="true"
-									@getRowsData="getGridNameParamRowData"
-								/>
+								<Grid :ref="gridNameParam" :is="paramLoadGrid && dialog ? 'Grid' : null"
+									:gridName="gridNameParam" :parentPrgmId="myPrgmId" :editorGrid="true"
+									@getRowsData="getGridNameParamRowData" />
 							</div>
 						</div>
 					</v-card-text>
 					<v-divider></v-divider>
 					<v-card-actions>
 						<v-spacer></v-spacer>
-						<v-btn color="primary" dark @click="setParamChangeData()"
-							>확인</v-btn
-						>
+						<v-btn color="primary" dark @click="setParamChangeData()">확인</v-btn>
 						<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
 					</v-card-actions>
 				</v-card>
@ -199,15 +155,76 @@ export default {
 	data() {
 		return {
 			myPrgmId: myPrgmId,
-			loadGrid: false,
+			loadGrid: true,
 			gridName: 'rowGrid',
+			dataPathExample: {
+				"rowGrid": {
+					data: [
+						{
+							"batchId": "BATCH001",
+							"batchNm": "일일 데이터 백업",
+							"batchExecTp": "자동 실행",
+							"batchDupExecFg": "N",
+							"useFg": "사용"
+						},
+						{
+							"batchId": "BATCH002",
+							"batchNm": "월간 리포트 생성",
+							"batchExecTp": "수동 실행",
+							"batchDupExecFg": "Y",
+							"useFg": "사용"
+						},
+						{
+							"batchId": "BATCH003",
+							"batchNm": "로그 정리 작업",
+							"batchExecTp": "자동 실행",
+							"batchDupExecFg": "N",
+							"useFg": "미사용"
+						},
+						{
+							"batchId": "BATCH004",
+							"batchNm": "사용자 통계 수집",
+							"batchExecTp": "예약 실행",
+							"batchDupExecFg": "Y",
+							"useFg": "사용"
+						},
+						{
+							"batchId": "BATCH005",
+							"batchNm": "서버 상태 점검",
+							"batchExecTp": "수동 실행",
+							"batchDupExecFg": "N",
+							"useFg": "미사용"
+						}
+					]
+
+					,
+					column: [
+						{ header: '배치ID', name: 'batchId', align: 'center', width: 100 },
+						{ header: '배치명', name: 'batchNm', minWidth: 200 },
+						{
+							header: '배치 실행 구분',
+							name: 'batchExecTp',
+							align: 'left',
+							minWidth: 190,
+						},
+						{ header: '배치 중복 여부', name: 'batchDupExecFg', hidden: true },
+						{
+							header: '사용여부',
+							name: 'useFg',
+							align: 'center',
+							width: 145,
+						},
+					],
+
+				}
+			},
 			// rowGridOrigin: [],
 			detailList: myDetail,

 			// 파라메터 셋팅용 변수
 			dialog: false,
 			gridNameParam: 'paramGrid',
-			paramLoadGrid: false,
+			paramLoadGrid: true,
 			selectedGridNameParamRow: null,
 		};
 	},
@ -275,7 +292,7 @@ export default {
 		}),
 		init() {
 			// this.layoutInit();
-			this.gridInit();
+			// this.gridInit();
 			this.gridParamInit();
 		},
 		// layoutInit() {
@ -367,7 +384,7 @@ export default {
 		},
 		async search() {
 			// console.log("search");
-			await this.getRowGridData();
+			// await this.getRowGridData();
 			await this.setPageData({
 				isFind: false,
 			});
@ -410,12 +427,12 @@ export default {
 						//rowKey: this.chkRowGridSelectKey || 0,
 						rowKey:
 							this.pageData.rowGridSelectKey == '' ||
-							this.pageData.rowGridSelectKey == null
+								this.pageData.rowGridSelectKey == null
 								? 0
 								: this.pageData.rowGridSelectKey ==
-								  this.$refs[this.gridName].getData().length - 1
-								? this.pageData.rowGridSelectKey
-								: 0,
+									this.$refs[this.gridName].getData().length - 1
+									? this.pageData.rowGridSelectKey
+									: 0,
 						setScroll: true,
 					});
 				}
@ -596,6 +613,7 @@ export default {
 			}
 		},
 		gridParamInit() {
+			
 			const gridHeight = this.$refs.gridParent.offsetHeight - 36;
 			const myOptions = {
 				columnOptions: {
@ -611,20 +629,20 @@ export default {
 				gridKey: this.gridNameParam,
 				value: myOptions,
 			});
-			setTimeout(() => {});
+			// setTimeout(() => { });

-			let modeList = [];
-			const modeIn = { text: 'IN', value: 'IN' };
-			const modeOut = { text: 'OUT', value: 'OUT' };
-			modeList.push(modeIn);
-			modeList.push(modeOut);
-			let typeList = [];
-			const typeInt = { text: 'INT', value: 'int' };
-			const typeStr = { text: 'STRING', value: 'str' };
-			const typeFunc = { text: 'FUNCTION', value: 'function' };
-			typeList.push(typeInt);
-			typeList.push(typeStr);
-			typeList.push(typeFunc);
+			// let modeList = [];
+			// const modeIn = { text: 'IN', value: 'IN' };
+			// const modeOut = { text: 'OUT', value: 'OUT' };
+			// modeList.push(modeIn);
+			// modeList.push(modeOut);
+			// let typeList = [];
+			// const typeInt = { text: 'INT', value: 'int' };
+			// const typeStr = { text: 'STRING', value: 'str' };
+			// const typeFunc = { text: 'FUNCTION', value: 'function' };
+			// typeList.push(typeInt);
+			// typeList.push(typeStr);
+			// typeList.push(typeFunc);

 			const myColumns = [
 				{ header: 'ID', name: 'id', editor: 'text' },
@ -646,27 +664,27 @@ export default {
 					header: 'Type',
 					name: 'type',
 					align: 'center',
-					formatter({ value }) {
-						let retVal = '';
-						switch (value) {
-							case 'int':
-								retVal = 'INT';
-								break;
-							case 'str':
-								retVal = 'STRING';
-								break;
-							case 'function':
-								retVal = 'FUNCTION';
-								break;
-						}
-						return retVal;
-					},
-					editor: {
-						type: 'select',
-						options: {
-							listItems: typeList,
-						},
-					},
+					// formatter({ value }) {
+					// 	let retVal = '';
+					// 	switch (value) {
+					// 		case 'int':
+					// 			retVal = 'INT';
+					// 			break;
+					// 		case 'str':
+					// 			retVal = 'STRING';
+					// 			break;
+					// 		case 'function':
+					// 			retVal = 'FUNCTION';
+					// 			break;
+					// 	}
+					// 	return retVal;
+					// },
+					// editor: {
+					// 	type: 'select',
+					// 	options: {
+					// 		listItems: typeList,
+					// 	},
+					// },
 				},
 				{ header: '값', name: 'val', editor: 'text' },
 				{ header: 'rowStat', name: 'rowStat', hidden: true },
@ -676,56 +694,95 @@ export default {
 				gridKey: this.gridNameParam,
 				value: myColumns,
 			});
-			this.getRowParamData();
+			this.paramLoadGrid = true;
+			// this.getRowParamData();
 		},
 		getRowParamData() {
 			this.paramLoadGrid = false;
-			let res = [];
+			// let res = [];

-			/* this.pageData.paramStrData 처리 */
-			// console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData));
-			let rowData = {};
-			if (
-				this.pageData.paramStrData.startsWith('{') &&
-				this.pageData.paramStrData.endsWith('}')
-			) {
-				rowData = JSON.parse(this.pageData.paramStrData);
-			}
-			var keys = Object.keys(rowData); //키를 가져옵니다. 이때, keys 는 반복가능한 객체가 됩니다.
-			for (var i = 0; i < keys.length; i++) {
-				var key = keys[i];
-				res.push(rowData[key]);
-			}
+			// /* this.pageData.paramStrData 처리 */
+			// // console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData));
+			// let rowData = {};
+			// if (
+			// 	this.pageData.paramStrData.startsWith('{') &&
+			// 	this.pageData.paramStrData.endsWith('}')
+			// ) {
+			// 	rowData = JSON.parse(this.pageData.paramStrData);
+			// }
+			// var keys = Object.keys(rowData); //키를 가져옵니다. 이때, keys 는 반복가능한 객체가 됩니다.
+			// for (var i = 0; i < keys.length; i++) {
+			// 	var key = keys[i];
+			// 	res.push(rowData[key]);
+			// }

-			const newRes = res.map(item => {
-				const newObj = {
-					...item,
-					rowStat: null,
-					id: item.id || '',
-					mode: item.mode || 'in',
-					type: item.type || 'str',
-					val: item.val || '',
-				};
-				return newObj;
-			});
+			// const newRes = res.map(item => {
+			// 	const newObj = {
+			// 		...item,
+			// 		rowStat: null,
+			// 		id: item.id || '',
+			// 		mode: item.mode || 'in',
+			// 		type: item.type || 'str',
+			// 		val: item.val || '',
+			// 	};
+			// 	return newObj;
+			// });
+
+			const newRes = [
+				{
+					"id": "VAR001",
+					"mode": "OUT",
+					"type": "int",
+					"val": "100",
+					"rowStat": "C"
+				},
+				{
+					"id": "VAR002",
+					"mode": "IN",
+					"type": "str",
+					"val": "Hello World",
+					"rowStat": "U"
+				},
+				{
+					"id": "FUNC001",
+					"mode": "out",
+					"type": "function",
+					"val": "calculateSum()",
+					"rowStat": "C"
+				},
+				{
+					"id": "VAR003",
+					"mode": "IN",
+					"type": "int",
+					"val": "42",
+					"rowStat": "D"
+				},
+				{
+					"id": "VAR004",
+					"mode": "OUT",
+					"type": "str",
+					"val": "Sample Text",
+					"rowStat": "C"
+				}
+			];

 			this.setGridData({
 				gridKey: this.gridNameParam,
 				value: newRes,
 			});
-			this.$nextTick(() => {
-				if (newRes.length > 0) {
-					try {
-						this.$refs[this.gridNameParam].focus({
-							//rowKey: 0,
-							rowKey: 0,
-							setScroll: true,
-						});
-					} catch (error) {
-						console.log('error[nextTick grid] : ', error);
-					}
-				}
-			});
+			// this.$nextTick(() => {
+			// 	if (newRes.length > 0) {
+			// 		try {
+			// 			this.$refs[this.gridNameParam].focus({
+			// 				//rowKey: 0,
+			// 				rowKey: 0,
+			// 				setScroll: true,
+			// 			});
+			// 		} catch (error) {
+			// 			console.log('error[nextTick grid] : ', error);
+			// 		}
+			// 	}
+			// });
 			this.paramLoadGrid = true;
 		},
 		xlsDataBind(res) {
@ -754,21 +811,22 @@ export default {
 		},
 		inputClick(event, item, valueNm) {
 			if (valueNm == 'refVal1') {
-				const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke(
-					'getFocusedCell',
-				).rowKey;
-				const selectRowData = this.$refs[this.gridName].gridInstance.invoke(
-					'getRow',
-					rowIdxKey,
-				);
+				this.dialog = true;
+				// const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke(
+				// 	'getFocusedCell',
+				// ).rowKey;
+				// const selectRowData = this.$refs[this.gridName].gridInstance.invoke(
+				// 	'getRow',
+				// 	rowIdxKey,
+				// );

-				if (selectRowData.batchExecTp == 'DP') {
-					// 여기에 팝업 레이어 띠우기 기능 추가
-					this.pageData.paramStrData = event.target.value;
-					this.pageData.paramChangeDataTarget = event.target;
-					this.getRowParamData();
-					this.dialog = true;
-				}
+				// if (selectRowData.batchExecTp == 'DP') {
+				// 	// 여기에 팝업 레이어 띠우기 기능 추가
+				// 	this.pageData.paramStrData = event.target.value;
+				// 	this.pageData.paramChangeDataTarget = event.target;
+				// 	this.getRowParamData();
+				// 	this.dialog = true;
+				// }
 			}
 		},
 		setParamChangeData() {
@ -835,10 +893,10 @@ const defaultData = {

 	/* 파라메터 설정요 변수 */
 	/* { "1": {"id": "comId", "type": "str", "val": "COM01"},  
-       "2": {"id": "toStrDt", "type": "function", "val": "DATE_FORMAT(NOW(), '%Y%h%d')"},  
-       "3": {"id": "userId", "type": "str", "val": "3"},  
-       "4": {"id": "retCd", "mode":"OUT","type": "int", "val": "-1"},  
-       "5": {"id": "retMsg", "mode":"OUT","type": "str", "val": "전달"}} */
+	   "2": {"id": "toStrDt", "type": "function", "val": "DATE_FORMAT(NOW(), '%Y%h%d')"},  
+	   "3": {"id": "userId", "type": "str", "val": "3"},  
+	   "4": {"id": "retCd", "mode":"OUT","type": "int", "val": "-1"},  
+	   "5": {"id": "retMsg", "mode":"OUT","type": "str", "val": "전달"}} */
 	paramStrData: '',
 	paramChangeDataStr: '',
 	paramChangeDataTarget: null,
@ -920,7 +978,10 @@ const myDetail = [
 		valueNm: 'batchId',
 		readonly: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		required: false,
 		placeholder: '시스템 자동입력',
 	},
@ -929,7 +990,10 @@ const myDetail = [
 		label: '배치명',
 		valueNm: 'batchNm',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -937,7 +1001,10 @@ const myDetail = [
 		label: '배치 실행 구분',
 		valueNm: 'batchExecTp',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		list: 'batchExecTpList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@ -948,7 +1015,10 @@ const myDetail = [
 		label: '배치 중복 여부',
 		valueNm: 'batchDupExecFg',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		list: 'batchDupExecFgList',
 		itemText: 'commCdNm',
 		itemValue: 'commCd',
@ -959,7 +1029,10 @@ const myDetail = [
 		label: '실행주기(초)',
 		valueNm: 'execCyclSecVal',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -967,7 +1040,10 @@ const myDetail = [
 		label: '실행주기(분)',
 		valueNm: 'execCyclMinVal',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -975,7 +1051,10 @@ const myDetail = [
 		label: '실행주기(시)',
 		valueNm: 'execCyclHhVal',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -983,7 +1062,10 @@ const myDetail = [
 		label: '실행주기(일)',
 		valueNm: 'execCyclDdVal',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -991,7 +1073,10 @@ const myDetail = [
 		label: '실행주기(월)',
 		valueNm: 'execCyclMmVal',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -999,7 +1084,10 @@ const myDetail = [
 		label: '실행주기(요일)',
 		valueNm: 'execCyclWdayVal',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -1007,7 +1095,10 @@ const myDetail = [
 		label: '실행주기(년)',
 		valueNm: 'execCyclYyyyVal',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -1015,7 +1106,10 @@ const myDetail = [
 		label: '후속배치',
 		valueNm: 'fllwBatchId',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		list: 'fllwBatchIdList',
 		itemText: 'batchIdNm',
 		itemValue: 'batchId',
@ -1026,7 +1120,10 @@ const myDetail = [
 		label: '실행명령',
 		valueNm: 'execCmnd',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -1034,7 +1131,10 @@ const myDetail = [
 		label: '실행 명령 경로',
 		valueNm: 'execCmndPath',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -1042,7 +1142,10 @@ const myDetail = [
 		label: '참조값1',
 		valueNm: 'refVal1',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		required: true,
 	},
 	{
@ -1050,21 +1153,30 @@ const myDetail = [
 		label: '참조값2',
 		valueNm: 'refVal2',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 	},
 	{
 		type: 'InputText',
 		label: '참조값3',
 		valueNm: 'refVal3',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 	},
 	{
 		type: 'CheckBox',
 		label: '사용여부',
 		valueNm: 'useFg',
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		value: { '1': true, '0': false },
 		required: true,
 	},
@ -1074,7 +1186,10 @@ const myDetail = [
 		valueNm: 'regUserNo',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		placeholder: '시스템 자동입력',
 	},
 	{
@ -1083,7 +1198,10 @@ const myDetail = [
 		valueNm: 'regDttm',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		placeholder: '시스템 자동입력',
 	},
 	{
@ -1092,7 +1210,10 @@ const myDetail = [
 		valueNm: 'procUserNo',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pr-4',
+		iconShow: true,
 		placeholder: '시스템 자동입력',
 	},
 	{
@ -1101,11 +1222,11 @@ const myDetail = [
 		valueNm: 'procDttm',
 		disabled: true,
 		cols: 6,
-		class: 'py-2',
+		labelCols: 12,
+		textCols: 12,
+		class: 'py-3 pl-4',
+		iconShow: true,
 		placeholder: '시스템 자동입력',
 	},
 ];
 </script>
-<style lang="scss">
-@import '@/assets/scss/common.scss';
-</style>