style24
/
style24.admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CommoncodeForm.html
 * @desc    : 공통코드관리 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.10.08   gagamel     최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->
		
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
		<!-- //메뉴 설명 -->
		
		<!-- 검색조건 영역 -->
		<div class="panelStyle">
			<!-- Search -->
			<form id="searchForm" name="searchForm" action="#" th:action="@{'/system/commoncode/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
				<input type="hidden" name="cdGb" value="ROOT"/>
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
					</li>
				</ul>
			</form>
		</div>
		<!-- //검색조건 영역 -->
		
		<div class="panelStyle">
			<!-- 다중 TABLE 배치 -->
			<ul class="division">
				<li style="width: 20%">
					<div class="panelBar">
						<h4>코드구분</h4>
					</div>
					<div id="gridList1" style="width: 100%; height: 570px" class="ag-theme-balham"></div>
				</li>
				<li style="width: 50%">
					<div class="panelBar">
						<h4>상세코드</h4>
					</div>
					<div id="gridList2" style="width: 100%; height: 570px" class="ag-theme-balham"></div>
				</li>
				<li style="width: 30%">
					<div class="panelBar">
						<h4>코드정보</h4>
					</div>
					<form id="detailForm" name="detailForm" action="#" th:action="@{'/system/commoncode/save'}">
						<input type="hidden" name="mode" value="N"/>
						
						<table class="frmStyle" aria-describedby="등록/상세">
							<colgroup>
								<col style="width:30%;"/>
								<col/>
							</colgroup>
							<tr>
								<th>코드구분<i class="required" title="필수" aria-hidden="true"></i></th>
								<td>
									<input type="text" name="cdGb" class="w200" placeholder="" maxlength="4" required="required" data-valid-type="alphaNumeric" data-valid-name="코드구분" onkeyup="$(this).val($(this).val().toUpperCase());"/>
								</td>
							</tr>
							<tr>
								<th>코드<i class="required" title="필수" aria-hidden="true"></i></th>
								<td>
									<input type="text" name="cd" class="w200" placeholder="" maxlength="20" required="required" data-valid-name="코드"/>
								</td>
							</tr>
							<tr>
								<th>코드명<i class="required" title="필수" aria-hidden="true"></i></th>
								<td>
									<input type="text" name="cdNm" class="w200" placeholder="" maxlength="50" required="required" data-valid-name="코드명"/>
								</td>
							</tr>
							<tr>
								<th>코드설명</th>
								<td>
									<textarea class="textareaR4" name="cdDesc"></textarea>
								</td>
							</tr>
							<tr>
								<th>표시순서<i class="required" title="필수" aria-hidden="true"></i></th>
								<td>
									<input type="text" class="w100 text-right" name="dispOrd" placeholder="" maxlength="4" required="required" data-valid-type="numeric" data-valid-name="표시순서" />
								</td>
							</tr>
							<tr>
								<th>사용여부<i class="required" title="필수" aria-hidden="true"></i></th>
								<td>
									<input type="hidden" name="useYn"/>
									<label class="chkBox"><input type="checkbox" name="chkUseYn" value="Y"/>사용</label>
								</td>
							</tr>
						</table>
					</form>
					
					<!-- 버튼 배치 영역 -->
					<ul class="panelBar">
						<li class="right">
							<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
							<input type="button" value="저장" class="btn btn-base btn-lg" id="btnSave"/>
						</li>
					</ul>
					<!-- //버튼 배치 영역 -->
				</li>
			</ul>
			<!--//다중 TABLE 배치 -->
		</div>
	</div>

<script th:inline="javascript">
/*<![CDATA[*/
	// specify the columns
	let columnDefs1 = [
// 		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
// 		{headerName: "CRUD", field: "crud", width: 75, minWidth: 75, hide: true},
		{
			headerName: "코드구분", field: "cd", width: 80, cellClass: 'text-center',
			cellRenderer: function(params) {
				return '<a href="javascript:void(0);">' + params.value + '</button>';
			}
		},
		{headerName: "코드구분명", field: "cdNm", width: 150},
// 		{headerName: "코드설명", field: "cdDesc", width: 300},
// 		{headerName: "표시순서", field: "dispOrd", width: 80, cellClass: 'text-right'},
// 		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'}
	];
	
	let columnDefs2 = [
// 		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
// 		{headerName: "CRUD", field: "crud", width: 75, minWidth: 75, hide: true},
		{headerName: "코드구분", field: "cdGb", width: 80, cellClass: 'text-center'},
		{
			headerName: "코드", field: "cd", width: 80, cellClass: 'text-center',
			cellRenderer: function(params) {
				return '<a href="javascript:void(0);">' + params.value + '</button>';
			}
		},
		{headerName: "코드명", field: "cdNm", width: 150},
		{headerName: "코드설명", field: "cdDesc", width: 250},
		{headerName: "표시순서", field: "dispOrd", width: 80, cellClass: 'text-right'},
		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'}
	];
	
	// Get GridOptions
	let gridOptions1 = gagaAgGrid.getGridOptions(columnDefs1);
	let gridOptions2 = gagaAgGrid.getGridOptions(columnDefs2);
	
	// 중복 선택 가능
// 	gridOptions1.rowSelection = 'multiple';
// 	gridOptions2.rowSelection = 'multiple';

	// Cell Click
	gridOptions1.onCellClicked = function(event) {
		if (event.colDef.field != 'cd')
			return;

		fnBindDetail(event.data, 1);
		fnUnEscapeHtml();	//XSS변환
	}
	
	gridOptions2.onCellClicked = function(event) {
		if (event.colDef.field != 'cd')
			return;

		fnBindDetail(event.data, 2);
		fnUnEscapeHtml();	//XSS변환
	}
	
	// 목록 > row 클릭 시
	let lvl = 1;
	let fnBindDetail = function(rowData, flag) {
		lvl = flag;
		
		$('#detailForm input[name=mode]').val('U');
		$('#detailForm input[name=cdGb]').val(rowData.cdGb);
		$('#detailForm input[name=cd]').val(rowData.cd);
		$('#detailForm input[name=cdNm]').val(rowData.cdNm);
		$('#detailForm input[name=dispOrd]').val(rowData.dispOrd);
		$('#detailForm textarea[name=cdDesc]').val(rowData.cdDesc);
		
		$("#detailForm input[name=useYn]").val(rowData.useYn);
		if (rowData.useYn == 'Y') {
			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', true);
			$("#detailForm input:checkbox[name=chkUseYn]").parent().addClass('checked');
		} else {
			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', false);
			$("#detailForm input:checkbox[name=chkUseYn]").parent().removeClass('checked');
		}
		
		if (flag == 1) {
			fnGetDetailCode(rowData.cd);
		}
	}
	
	// 코드구분 조회
	$('#btnSearch').on('click', function() {
		let actionUrl = $('#searchForm').prop('action') + '?' + $('#searchForm').serialize();
		
		// Fetch data
		gagaAgGrid.fetch(actionUrl, gridOptions1,null,fnChangeGrid);
	});
	
	// 상세코드 조회
	let gCd = '';
	let fnGetDetailCode = function(cd) {
		gCd = cd;
		let actionUrl = $('#searchForm').prop('action') + '?cdGb=' + cd;
		gagaAgGrid.fetch(actionUrl, gridOptions2,null,fnChangeGrid1);
	}
	
	// 신규
	$('#btnNew').on('click', function() {
		$('#detailForm')[0].reset();
		$('#detailForm input[name=mode]').val('N');
		$('#detailForm input:checkbox[name=chkUseYn]').attr('checked', true);
		$('#detailForm input:checkbox[name=chkUseYn]').attr('disabled', true);
		$('#detailForm input[name=cdGb]').focus();
	});
	
	// 저장
	$('#btnSave').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#detailForm'))
			return false;
		
		$('#detailForm input[name=useYn]').val($('#detailForm input:checkbox[name=chkUseYn]').is(":checked") ? 'Y' : 'N');
		
		gagajf.ajaxFormSubmit('/system/commoncode/save', '#detailForm', function(result) {
			if (lvl == 1) {
				$('#btnSearch').trigger('click');
			} else {
				fnGetDetailCode(gCd);
			}
		});
	});
	
	var fnUnEscapeHtml = function(){	//XSS변환
		$('#detailForm input[name=cd]').val($('#detailForm input[name=cd]').val().replaceXSS());
		$('#detailForm input[name=cdNm]').val($('#detailForm input[name=cdNm]').val().replaceXSS());
		$('#detailForm textarea[name=cdDesc]').val($('#detailForm textarea[name=cdDesc]').val().replaceXSS());
	};
	
	var fnChangeGrid = function(){	//XSS 그리드 내 변환
		var data = gagaAgGrid.getAllRowData(gridOptions1);
		let modifyList = [];
		$.each(data, function(idx, item) {
			let cdNm = item.cdNm;
			
			item.cdNm = cdNm.replaceXSS();
			
			modifyList.push(item);
		});
		gridOptions1.api.setRowData(modifyList);
	};
	
	var fnChangeGrid1 = function(){	//XSS 그리드 내 변환
		var data = gagaAgGrid.getAllRowData(gridOptions2);
		let modifyList = [];
		$.each(data, function(idx, item) {
			
			let cdNm = item.cdNm;
			let cdDesc = item.cdDesc;
			
			item.cdNm = cdNm.replaceXSS();
			item.cdDesc = cdDesc.replaceXSS();
			
			modifyList.push(item);
		});
		gridOptions2.api.setRowData(modifyList);
	};
	
	$(document).ready(function() {
		// Create a agGrid
		gagaAgGrid.createGrid('gridList1', gridOptions1);
		gagaAgGrid.createGrid('gridList2', gridOptions2);
	});
/*]]>*/
</script>

</html>