style24
/
STYLE24


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!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="popupQna">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>1:1문의 상세</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupQna');"><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}"/>
				
				<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:15%;"/> -->
						<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="*{custNm + ' / ' + cellPhnno + ' / ' + email}"></td>
<!-- 							<td th:text="*{relOrdNo}"></td> -->
<!-- 							<td th:utext="*{ansTransYn == 'Y' ? ansTransDt + '<br/>' + ansCompNm : ''}"></td> -->
							<td th:utext="*{ansStat == '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 style="width:30%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th>문의 제목</th>
							<td colspan="3" th:text="*{questTitle}"></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="onetooneImg">
							</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">답변저장</button>
			</li>
		</ul>
		<!-- //버튼 배치 영역 -->
	</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('popupQna');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	// 답변템플릿 선택 시
	$('select[name=ansSq]').on('change', function() {
		var ansSq = $(this).val();

		if (!gagajf.isNull(ansSq)) {
			var actionUrl = '/customer/qna/answerphase/' + ansSq + '/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'));
		}
	});
	
	$(document).ready(function() {
// 		var counsel = [[${counsel}]];

// 		if (!gagajf.isNull(counsel.sysFileNm)) {
// 			var imgTag = '<img style="height: 100px;" onclick="cfnOpenImagePreViewPopup(\'goodsImgView\', \'' + _imgUrl + '/counsel/' + counsel.sysFileNm + '\')" src="' + _imgUrl + '/counsel/' + counsel.sysFileNm + '">';
// 			$('#onetooneImg').append(imgTag);
// 		}

		cfnGetTextLength($('textarea[name=ansContent]'), 4000, $('#dpLocAnsContent'));
	});
/*]]>*/
</script>

</html>