style24
/
style24.admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : OneToOneQnaDetailForm.html
 * @desc    : 1:1문의 상세 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.12.24   gagamel     최초 작성
 *******************************************************************************
 -->
<div class="modelessPopup draggable" data-width="1200" data-height="900" id="popupOneToOneQnaDetail">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>1:1문의 상세</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupOneToOneQnaDetail');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- CONTENT -->
		<div class="panelContent" style="height:90%; overflow-y:auto; padding-right: 10px !important;">
			<form id="qnaDetailForm" name="qnaDetailForm" action="#" th:action="@{'/customer/qna/answer/save'}" th:method="post" th:object="${counselInfo}">
				<input type="hidden" name="counselSq" th:value="*{counselSq}"/>
				<input type="hidden" name="smsReqYn" th:value="*{smsReqYn}"/>
				<input type="hidden" name="counselType" value="C"/>
				
				<h4>상담정보</h4>
				<table class="tableStyle" aria-describedby="상담정보">
					<colgroup>
						<col style="width:10%;"/>
<!-- 						<col style="width:10%;"/> -->
						<col style="width:12%;"/>
						<col style="width:15%;"/>
						<col/>
<!-- 						<col style="width:10%;"/> -->
<!-- 						<col style="width:10%;"/> -->
						<col style="width:30%;"/>
					</colgroup>
					<thead>
						<tr>
							<th>상담일련번호</th>
<!-- 							<th>사이트</th> -->
							<th>상담분류</th>
							<th>문의일시</th>
							<th>고객정보</th>
<!-- 							<th>주문번호</th> -->
<!-- 							<th>답변의뢰</th> -->
							<th>답변상태</th>
						</tr>
					</thead>
					<tbody id="otoQnaCounselInfo">
						<tr>
							<td th:text="*{counselSq}"></td>
<!-- 							<td th:text="*{siteNm}"></td> -->
							<td th:utext="*{counselClsfNm}"></td>
							<td th:text="*{questDt}"></td>
<!-- 							<td><a href="javascript:void(0);" th:onclick="|cfnOpenCustDetailPopup(*{custNo});|"><span th:utext="*{maskingCustNm + ' / ' + maskingCellPhnno + ' / ' + maskingEmail}"></span></a></td> -->
							<td th:utext="*{maskingCustNm + ' / ' + maskingCellPhnno + ' / ' + maskingEmail}"></td>
<!-- 							<td th:text="*{relOrdNo}"></td> -->
<!-- 							<td th:utext="*{ansTransYn == 'Y' ? ansTransDt + '<br/>' + ansCompNm : ''}"></td> -->
							<td th:utext="*{ansStat == 'G060_20' ? ansStatNm + ' / ' + ansDt + ' / ' + ansNm : ansStatNm}"></td>
						</tr>
					</tbody>
				</table>
				
				<h4>고객문의</h4>
				<table class="frmStyle" aria-describedby="고객문의">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:50%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tbody>
						<tr>
							<th>문의 제목</th>
							<td th:text="*{questTitle}" id="otoQnaQuestTitle"></td>
							<th>SMS답변요청</th>
							<td th:text="*{smsReqYn == 'Y' ? '수신' : '미수신'}" id="otoQnaSmsReqYn"></td>
						</tr>
						<tr>
							<th>문의 내용</th>
							<td>
								<textarea class="textareaR4" style="resize: none;" name="questContent" th:text="*{questContent}" disabled="disabled"></textarea>
							</td>
							<th>첨부 이미지</th>
							<td class="userImg" id="otoQnaUserImg">
								<img th:if="${counselInfo.sysFileNm1 != null}" style="height: 100px;" th:src="${@environment.getProperty('domain.image') + '/' + counselInfo.sysFileNm1}" onclick="fnPopupOpen('layer_review_pic', this);" alt="" onerror='this.src="/image/no.png"'/>
								<img th:if="${counselInfo.sysFileNm2 != null}" style="height: 100px;" th:src="${@environment.getProperty('domain.image') + '/' + counselInfo.sysFileNm2}" onclick="fnPopupOpen('layer_review_pic', this);" alt="" onerror='this.src="/image/no.png"'/>
							</td>
						</tr>
					</tbody>
				</table>
				
				<h4>답변등록</h4>
				<table class="frmStyle" aria-describedby="답변등록">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:90%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th>답변 템플릿</th>
							<td>
								<select name="ansSq">
									<option value="">[선택]</option>
									<option th:if="${ansPhaseList}" th:each="oneData, statue : ${ansPhaseList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>답변 제목<i class="required" title="필수" aria-hidden="true"></i></th>
							<td>
								<input type="text" class="" name="ansTitle" th:value="*{ansTitle}" required="required" data-valid-name="답변 제목"/>
							</td>
						</tr>
						<tr>
							<th>
								답변 내용<i class="required" title="필수" aria-hidden="true"></i>
								<br/>
								<span id="dpLocAnsContent">0</span>/4,000Byte
							</th>
							<td>
								<textarea class="textareaR15" style="resize: none;" name="ansContent" th:text="*{ansContent}" onkeyup="cfnGetTextLength(this, 4000, $('#dpLocAnsContent'));" required="required" data-valid-name="답변 내용"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
				
				<h4>상담사 할당</h4>
				<table class="frmStyle" aria-describedby="상담사 할당">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:40%;"/>
						<col style="width:10%;"/>
						<col style="width:40%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th>상담사</th>
							<td>
								<select name="assignedCsNo" th:if="${sessionInfo.roleCd == 'G001_A300' or sessionInfo.roleCd == 'G001_0000' or sessionInfo.roleCd == 'G001_A000'}">
									<option value="">[상담사 선택]</option>
									<option th:if="${counselorList}" th:each="oneData, status : ${counselorList}" th:value="${oneData.cd}" th:text="|${oneData.cdNm}|" th:selected="${#strings.equals(counselInfo.assignedCsNo, oneData.cd)}"></option>
								</select>
								<button type="button" class="btn btn-warning btn-lg" id="btnAssignCounselor">담당할당</button>
							</td>
							<th>할당자</th>
							<td th:if="${counselInfo.assignerNm != null}" th:utext="${counselInfo.assignerNm + ' / ' + counselInfo.assignedDt}" id="assignerNm"></td>
							<td th:if="${counselInfo.assignerNm == null}" id="assignerNm"></td>
						</tr>
					</tbody>
				</table>
			</form>
			
			<h4>1:1문의 이력</h4>
			<div id="custOneToOneCounselList" style="width: 100%; height: 300px" class="ag-theme-balham"></div>
		</div>
		<!-- //CONTENT -->

		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-gray btn-lg" id="btnSaveTemp">임시저장</button>
				<button type="button" class="btn btn-info btn-lg" id="btnSaveAnswer">답변저장</button>
			</li>
		</ul>
		<!-- //버튼 배치 영역 -->
	</div>
</div>

<!-- 사용자 레이어팝업 : 등록 파일 출력 -->
<div class="uPopupWrap off" id="layer_review_pic">
	<div class="area reviewPic" style="width:700px; height:700px;">
		<ul class="picList" th:object="${counselInfo}" id="otoQnaLayerReviewPic">
<!-- 			<li><div class="img"></div></li> -->
			<li th:if="${counselInfo.sysFileNm1 != null}"><div class="img" th:style="${'background-image:url(' + @environment.getProperty('domain.image') + '/' + counselInfo.sysFileNm1 + ');'}"></div></li>
			<li th:if="${counselInfo.sysFileNm2 != null}"><div class="img" th:style="${'background-image:url(' + @environment.getProperty('domain.image') + '/' + counselInfo.sysFileNm2 + ');'}"></div></li>
		</ul>
<!-- 		<button type="button" class="btnArr prev" onclick="fnPicPrev('layer_review_pic');">이전</button> -->
<!-- 		<button type="button" class="btnArr next" onclick="fnPicNext('layer_review_pic');">다음</button> -->
		<button type="button" id="prev" class="btnArr prev">이전</button>
		<button type="button" id="next" class="btnArr next">다음</button>
		<button type="button" class="btnClose">닫기</button>
	</div>
</div>
<!-- //사용자 레이어팝업 : 등록 파일 출력 -->

<script th:inline="javascript">
/*<![CDATA[*/
	let counselClsfList = gagajf.convertToArray([[${counselClsfList}]]); // 상담분류
	let ansStatList = gagajf.convertToArray([[${ansStatList}]]); // 답변상태
	
	const columnOneToOneCounselDefs = [
		{ headerName: "상담일련번호", field: "counselSq", width: 100, cellClass: 'text-center' },
		{
			headerName: "상담분류", field: "counselClsf", width: 150, cellClass: 'text-center',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(counselClsfList, params.value); }
		},
		{
			headerName: "문의일시", field: "questDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) { return gagaAgGrid.toDateTimeFormat(params.value); }
		},
		{
			headerName: "문의제목", field: "questTitle", width: 380,
			cellRenderer: function (params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
		},
		{ headerName: "상담사", field: "assignedCsNm", width: 90, cellClass: 'text-center' },
		{
			headerName: "답변상태", field: "ansStat", width: 90, cellClass: 'text-center',
			valueGetter: function (params) { return gagaAgGrid.lookupValue(ansStatList, params.data.ansStat); }
		},
		{
			headerName: "답변일시", field: "ansDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) { return gagaAgGrid.toDateTimeFormat(params.value); }
		}
	];
	
	let gridOneToOneCounselOptions = gagaAgGrid.getGridOptions(columnOneToOneCounselDefs);	// 1:1문의이력
	
	// 셀 클릭 이벤트
	gridOneToOneCounselOptions.onCellClicked = function(event) {
		if (event.colDef.field == 'questTitle') {
			fnSetOneToOneQnaDetail(event.data.counselSq);
		}
	}
	
	// 1:1문의 상세 데이터 설정
	var fnSetOneToOneQnaDetail = function(counselSq) {
		const actionUrl = 'customer/onetoone/qna/detail/' + counselSq;
		
		$.getJSON(actionUrl
			, function(result) {
				$('#qnaDetailForm input[name=counselSq]').val(result.counselSq);
				$('#qnaDetailForm input[name=smsReqYn]').val(result.smsReqYn);
			
				let tag = '';
				tag += '<tr>\n';
				tag += '	<td>' + result.counselSq + '</td>\n';
				tag += '	<td>' + result.counselClsfNm + '</td>\n';
				tag += '	<td>' + result.questDt + '</td>\n';
				tag += '	<td>' + result.maskingCustNm + ' / ' + result.maskingCellPhnno + ' / ' + result.maskingEmail + '</td>\n';
				tag += '	<td>' + (result.ansStat == "G060_20" ? (result.ansStatNm + ' / ' + result.ansDt + ' / ' + result.ansNm) : result.ansStatNm) + '</td>\n';
				tag += '</tr>\n';
				$('#otoQnaCounselInfo').html(tag);
				
				$('#otoQnaQuestTitle').html(result.questTitle.replaceXSS());
				$('#otoQnaSmsReqYn').html((result.smsReqYn == "Y" ? "수신" : "미수신"));
				$('#qnaDetailForm textarea[name=questContent]').val(result.questContent.replaceXSS());
				
				tag = '';
				if (!gagajf.isNull(result.sysFileNm1)) {
					tag += '<img style="height: 100px;" src="' + _imgUrl + '/' + result.sysFileNm1 + '" onclick=\"fnPopupOpen(\'layer_review_pic\', this);\" alt=\"\" onerror=\'this.src=\"/image/no.png\"\'/>\n';
				}
				if (!gagajf.isNull(result.sysFileNm2)) {
					tag += '<img style="height: 100px;" src="' + _imgUrl + '/' + result.sysFileNm2 + '" onclick=\"fnPopupOpen(\'layer_review_pic\', this);\" alt=\"\" onerror=\'this.src=\"/image/no.png\"\'/>\n';
				}
				$('#otoQnaUserImg').html(tag);
				
				tag = '';
				if (!gagajf.isNull(result.sysFileNm1)) {
					tag += '<li><div class="img" style=\"background-image:url(' + _imgUrl + '/' + result.sysFileNm1 + ');\"></div></li>\n';
				}
				if (!gagajf.isNull(result.sysFileNm2)) {
					tag += '<li><div class="img" style=\"background-image:url(' + _imgUrl + '/' + result.sysFileNm2 + ');\"></div></li>\n';
				}
				$('#otoQnaLayerReviewPic').html(tag);
				
				$('#qnaDetailForm input[name=ansTitle]').val(result.ansTitle.replaceXSS());
				$('#qnaDetailForm textarea[name=ansContent]').val(result.ansContent.replaceXSS());
				cfnGetTextLength($('textarea[name=ansContent]'), 4000, $('#dpLocAnsContent'));
				
				$('#qnaDetailForm select[name=assignedCsNo]').val(result.assignedCsNo);
				$('#assignerNm').html(gagajf.isNull(result.assignerNm) ? '' : (result.assignerNm + ' / ' + result.assignedDt));
				
				fnShowOrHideOneToOneQnaButton(result.ansStat);
			});
	}
	
	// 담당할당
	$('#btnAssignCounselor').on('click', function() {
		if (gagajf.isNull($('#qnaDetailForm select[name=assignedCsNo]').val())) {
			mcxDialog.alertC('상담사를 선택해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#qnaDetailForm select[name=assignedCsNo]').focus();
				}
			});
			return;
		}
		
		mcxDialog.confirm("담당을 할당하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var jsonData = JSON.stringify({
					counselSq : $('#qnaDetailForm input[name=counselSq]').val(),
					assignedCsNo : $('#qnaDetailForm select[name=assignedCsNo]').val()
				});
				gagajf.ajaxJsonSubmit('/customer/onetoone/qna/assign', jsonData, function() {
					let assignerNm = [[${sessionInfo.userNm}]] + ' / ' + new Date().format("YYYY-MM-DD HH:mm:ss");
					$('#assignerNm').html(assignerNm);
					
					fnSearchOneToOneCustomerHistory();
				});
			}
		});
	});
	
	// 임시 저장
	$('#btnSaveTemp').on('click', function() {
		mcxDialog.confirm("임시로 저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit('/customer/qna/answer/temp/save', '#qnaDetailForm', function() {
					uifnPopupClose('popupOneToOneQnaDetail');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	// 답변 저장
	$('#btnSaveAnswer').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#qnaDetailForm'))
			return false;
		
		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#qnaDetailForm').prop('action'), '#qnaDetailForm', function() {
					uifnPopupClose('popupOneToOneQnaDetail');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	// 답변템플릿 선택 시
	$('select[name=ansSq]').on('change', function() {
		var ansSq = $(this).val();

		if (!gagajf.isNull(ansSq)) {
			var actionUrl = '/customer/qna/answerphase/' + ansSq + '/G061_20';
			$.get(actionUrl
				, function(data) {
					if (!gagajf.isNull(data.ansSq)) {
						$('input[name=ansTitle]').val(data.ansTitle);
						$('textarea[name=ansContent]').val(data.ansContent);
						cfnGetTextLength($('textarea[name=ansContent]'), 4000, $('#dpLocAnsContent'));
					}
				});
		} else {
			// 답변 내용 초기화
			$('input[name=ansTitle]').val('');
			$('textarea[name=ansContent]').val('');
			cfnGetTextLength($('textarea[name=ansContent]'), 4000, $('#dpLocAnsContent'));
		}
	});
	
	// 팝업 열기
	function fnPopupOpen(id,el,kind) {
		$("#"+id).removeClass("off");	//레이어 Open
		$("#"+id).find(".picList li").removeClass("on");
		$(".picList").find("div").attr("style","background-image:url("+el.src+")");
		let onIdx = $(el).index();
		$("#"+id).find(".picList li").eq(onIdx).addClass("on");
		let picTot = $("#"+id).find(".picList li").length - 1;
		
		if (onIdx == 0) {
			$("#"+id).find("button.prev").addClass("off");
		}
		if (onIdx == picTot) {
			$("#"+id).find("button.next").addClass("off");
		}
	}
	
	$("#layer_review_pic .btnClose").click(function() {
		$("#layer_review_pic").addClass("off"); //레이어 닫기
		$("#layer_review_pic").find("button.btnArr").removeClass("off"); //버튼 초기화
	});
	
	//등록파일 상세보기 팝업 버튼
	var togglePlayer = function (type) {
		let layers = document.querySelectorAll('#layer_review_pic .picList li');
		let len = layers.length - 1
		let activePlayerIndex = -1;
		layers.forEach(function (item, index) {
			if (item.classList.contains('on')) {
				activePlayerIndex = index;
				item.classList.remove('on');
			}
		});
		if (type === 'next') {
			if (activePlayerIndex >= len ) {
				activePlayerIndex = 0
			} else {
				activePlayerIndex += 1;
			}
		} else if (type === 'prev') {

			if (activePlayerIndex <= 0) {
				activePlayerIndex = len;
			} else {
				activePlayerIndex -= 1;
			}
		} else {
			activePlayerIndex = type;
		};

		//버튼 비활성화
		if (activePlayerIndex == 0 ) {
			document.getElementById('prev').classList.add("off");
		} else if (activePlayerIndex == len ) {
			document.getElementById('next').classList.add("off");
		} else {
			document.getElementById('prev').classList.remove("off");
			document.getElementById('next').classList.remove("off");
		};
		layers[activePlayerIndex].classList.add('on');
	};
	
	//이전버튼
	var prev = document.getElementById('prev');
	prev.addEventListener('click', function () {
		togglePlayer('prev');
	});
	//다음버튼
	var next = document.getElementById('next');
	next.addEventListener('click', function () {
		togglePlayer('next');
	});
	
	var fnShowOrHideOneToOneQnaButton = function(ansStat) {
		let roleCd = [[${sessionInfo.roleCd}]];
		if (ansStat != 'G060_20') {
			if (roleCd == 'G001_A300' || roleCd == 'G001_0000' || roleCd == 'G001_A000') {
				$('#btnAssignCounselor').show();
			} else {
				$('#btnAssignCounselor').hide();
			}
			
			$('#btnSaveTemp').show();
			$('#btnSaveAnswer').show();
		} else {
			$('#btnAssignCounselor').hide();
			$('#btnSaveTemp').hide();
			$('#btnSaveAnswer').hide();
		}
	}
	
	var fnSearchOneToOneCustomerHistory = function() {
		const actionUrl = '/customer/counsel/list/' + [[${counselInfo.custNo}]];
		gagaAgGrid.fetch(actionUrl, gridOneToOneCounselOptions);
	}
	
	var fnUnEscapeHtml = function(){	//XSS변환
	 	$('#qnaDetailForm textarea[name=questContent]').val($('#qnaDetailForm textarea[name=questContent]').val().replaceXSS());
	 	$('#qnaDetailForm input[name=ansTitle]').val($('#qnaDetailForm input[name=ansTitle]').val().replaceXSS());
	 	$('#qnaDetailForm textarea[name=ansContent]').val($('#qnaDetailForm textarea[name=ansContent]').val().replaceXSS());
	};
	
	$(document).ready(function() {
		cfnGetTextLength($('textarea[name=ansContent]'), 4000, $('#dpLocAnsContent'));
		
		gagaAgGrid.createGrid('custOneToOneCounselList', gridOneToOneCounselOptions);
		
		fnSearchOneToOneCustomerHistory();
		
		fnShowOrHideOneToOneQnaButton([[${counselInfo.ansStat}]]);
		
		$('#popupOneToOneQnaDetail .modelessPopup').draggable({'cancel':'.panelContent'});
	});
/*]]>*/
</script>

</html>