style24
/
STYLE24


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsQnaDetailForm.html
 * @desc    : 상품문의 상세 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.12.25   gagamel     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1200" id="popupGoodsQnaDetail">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>상품문의 상세</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupGoodsQnaDetail');"><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}"/>
				
				<h4>상담정보</h4>
				<table class="tableStyle" aria-describedby="상담정보">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:10%;"/>
						<col style="width:8%;"/>
						<col style="width:12%;"/>
						<col/>
						<col style="width:22%;"/>
						<col style="width:22%;"/>
					</colgroup>
					<thead>
						<tr>
							<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>상품문의</td>
							<td th:text="*{questDt}"></td>
							<td th:utext="*{maskingCustNm + ' / ' + maskingCellPhnno + '<br/>' + maskingEmail}"></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:20%;"/>
						<col style="width:10%;"/>
						<col/>
						<col style="width:10%;"/>
						<col style="width:30%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th>상품코드</th>
							<td colspan="3" th:text="*{relGoodsCd}"></td>
							<th rowspan="3">상품이미지</th>
							<td rowspan="3" class="userImg">
								<img style="height: 100px;" th:src="${@environment.getProperty('upload.goods.view') + '/' + counselInfo.goodsImg}" alt="" onerror='this.src="/image/no.gif"'/>
							</td>
						</tr>
						<tr>
							<th>상품명</th>
							<td colspan="3" th:text="*{goodsNm}"></td>
						</tr>
						<tr>
							<th>비밀글여부</th>
							<td th:text="*{secretYn == 'Y' ? 'Yes' : 'No'}"></td>
							<th>SMS답변요청</th>
							<td th:text="*{smsReqYn == 'Y' ? '수신' : '미수신'}"></td>
						</tr>
						<tr>
							<th>문의 내용</th>
							<td colspan="5">
								<textarea class="textareaR4" style="resize: none;" name="questContent" th:text="*{questContent}" disabled="disabled"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
				
				<!-- 아직 업체에게 의뢰를 하지 않은 답변대기중인 입점상품이면서 권한이 "SUPER관리자, 어드민관리자, CS관리자, CS상담사"일 때 -->
				<ul class="panelBar" th:if="${counselInfo.selfGoodsYn == 'N' && counselInfo.ansTransYn == 'N' && counselInfo.ansStat == 'G060_10' && (sessionInfo.roleCd == 'G001_0000' || sessionInfo.roleCd == 'G001_A000' || sessionInfo.roleCd == 'G001_A3000' || sessionInfo.roleCd == 'G001_A301')}">
					<li class="right">
						<select name="ansCompCd" id="ansCompCd">
							<option value="">[답변의뢰업체]</option>
							<option th:if="${supplyCompList}" th:each="oneData, status : ${supplyCompList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
						</select>
						<button type="button" class="btn btn-danger btn-lg" id="btnTransferAnswer">답변의뢰</button>
					</li>
				</ul>
				
				<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>

<script th:inline="javascript">
/*<![CDATA[*/
	// 답변의뢰
	$('#btnTransferAnswer').on('click', function() {
		if (gagajf.isNull($('#ansCompCd').val())) {
			mcxDialog.alertC("답변의뢰업체를 선택해 주세요.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#ansCompCd').focus();
				}
			});
			return;
		}

		mcxDialog.confirm("답변을 의뢰하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var params = new Object;
				params.counselSq = $('input[name=counselSq]').val();
				params.ansCompCd = $('#ansCompCd').val();

				var jsonData = JSON.stringify(params);

				gagajf.ajaxJsonSubmit('/customer/goods/qna/answer/transfer/save', jsonData, function() {
					uifnPopupClose('popupGoodsQnaDetail');
					$('#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('popupGoodsQnaDetail');
					$('#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() {
		cfnGetTextLength($('textarea[name=ansContent]'), 4000, $('#dpLocAnsContent'));
	});
/*]]>*/
</script>

</html>