|
|
@@ -0,0 +1,230 @@
|
|
|
+<!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="popupQna">
|
|
|
+ <div class="panelStyle">
|
|
|
+ <!-- TITLE -->
|
|
|
+ <div class="panelTitle">
|
|
|
+ <strong>상품문의 상세</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:15%;"/>
|
|
|
+ <col style="width:25%;"/>
|
|
|
+ </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 th:utext="*{counselClsfNm}"></td>
|
|
|
+ <td th:text="*{questDt}"></td>
|
|
|
+ <td th:utext="*{custNm + ' / ' + cellPhnno + ' / ' + email}"></td>
|
|
|
+ <td th:utext="*{ansTransYn == 'Y' ? ansTransDt + ' / ' + 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/>
|
|
|
+ </colgroup>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <th>상품</th>
|
|
|
+ <td>
|
|
|
+ <p th:text="*{goodsNm + ' (' + relGoodsCd + ')'}"></p>
|
|
|
+ <p class="userImg" id="onetooneImg"></p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>문의 내용</th>
|
|
|
+ <td>
|
|
|
+ <textarea class="textareaR4" style="resize: none;" name="questContent" th:text="*{questContent}" disabled="disabled"></textarea>
|
|
|
+ </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">
|
|
|
+ <!-- 아직 업체에게 의뢰를 하지 않은 답변대기중인 입점상품이면서 권한이 "SUPER관리자, 어드민관리자, CS관리자, CS상담사"일 때 -->
|
|
|
+ <span th:if="${counsel.selfGoodsYn == 'N' && counsel.ansTransYn == 'N' && counsel.ansStat == '10' (sessionInfo.roleCd == 'G001_0000' || sessionInfo.roleCd == 'G001_A000' || sessionInfo.roleCd == 'G001_A3000' || sessionInfo.roleCd == 'G001_A301')}">
|
|
|
+ <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>
|
|
|
+ </span>
|
|
|
+ <button type="button" class="btn btn-info btn-lg" id="btnSaveAnswer">답변저장</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/answer/transfer/save', jsonData, function() {
|
|
|
+ uifnPopupClose('popupQna');
|
|
|
+ $('#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('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>
|
gagamel