style24
/
style24.admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
							<!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="modalPopup" data-width="1200" 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">
			<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:25%;"/>
					</colgroup>
					<thead>
						<tr>
							<th>상담일련번호</th>
							<th>사이트</th>
							<th>상담분류</th>
							<th>문의일시</th>
							<th>고객정보</th>
<!-- 							<th>주문번호</th> -->
<!-- 							<th>답변의뢰</th> -->
							<th>답변상태</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td th:text="*{counselSq}"></td>
							<td th:text="*{siteNm}"></td>
							<td th:utext="*{counselClsfNm}"></td>
							<td th:text="*{questDt}"></td>
							<td th:utext="*{maskingCustNm + ' / ' + maskingCellPhnno + '<br/>' + maskingEmail}"></td>
<!-- 							<td th:text="*{relOrdNo}"></td> -->
<!-- 							<td th:utext="*{ansTransYn == 'Y' ? ansTransDt + '<br/>' + ansCompNm : ''}"></td> -->
							<td th:utext="*{ansStat == 'G060_20' ? ansStatNm + ' / ' + ansDt + '<br/>' + 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}"></td>
							<th>SMS답변요청</th>
							<td th:text="*{smsReqYn == 'Y' ? '수신' : '미수신'}"></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">
								<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="textareaR4" style="resize: none;" name="ansContent" th:text="*{ansContent}" onkeyup="cfnGetTextLength(this, 4000, $('#dpLocAnsContent'));" required="required" data-valid-name="답변 내용"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		<!-- //CONTENT -->

		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnSaveAnswer" th:if="${counselInfo.ansStat == 'G060_10'}">답변저장</button>
			</li>
		</ul>
		<!-- //버튼 배치 영역 -->
	</div>
</div>

<div class="uPopupWrap off" id="layer_review_pic">
	<div class="area reviewPic" style="width:500px; height:500px;">
		<ul class="picList" th:object="${counselInfo}">
			<li><div class="img"></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" class="btnClose">닫기</button>
	</div>
</div>


<script th:inline="javascript">
/*<![CDATA[*/
	// 답변 저장
	$('#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;
		//console.log(onIdx +', '+ picTot);
		
		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"); //버튼 초기화
	});
	
	$(document).ready(function() {
		cfnGetTextLength($('textarea[name=ansContent]'), 4000, $('#dpLocAnsContent'));
		
		
	});
/*]]>*/
</script>

</html>