1:1문의관리 상세 화면에 "1:1문의이력" 리스트 기능 추가

src/main/java/com/style24/admin/biz/web/TsaCustomerController.java

@@ -165,6 +165,12 @@ public class TsaCustomerController extends TsaBaseController {
 		// 상담사 목록
 		mav.addObject("counselorList", rendererService.getCounselorList());
 
+		// 상담분류
+		mav.addObject("counselClsfList", rendererService.getCommonCodeList("G059", "Y", new String[] {"G596"}));
+
+		// 상담상태 목록
+		mav.addObject("ansStatList", rendererService.getAvailCommonCodeList("G060"));
+
 		mav.setViewName("customer/OneToOneQnaDetailForm");
 
 		return mav;
@@ -256,6 +262,19 @@ public class TsaCustomerController extends TsaBaseController {
 		return super.ok(message.getMessage("SUCC_0001"));
 	}
 
+	/**
+	 * 1:1문의상세 조회
+	 * @param counselSq -상담일련번호
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 12. 24
+	 */
+	@GetMapping("/onetoone/qna/detail/{counselSq}")
+	@ResponseBody
+	public Counsel getOneToOneQnaDetail(@PathVariable Integer counselSq) {
+		return counselService.getOneToOneQna(counselSq);
+	}
+
 	/**
 	 * 상품문의관리 화면
 	 * @return

src/main/java/com/style24/persistence/mybatis/shop/TsaCustomer.xml

@@ -609,7 +609,7 @@
 		     , CS.COUNSEL_TYPE
 		     , CS.QUEST_TITLE
 		     , CS.QUEST_CONTENT
-		     , CS.QUEST_DT
+		     , DATE_FORMAT(CS.QUEST_DT, '%Y%m%d%H%i%S') AS QUEST_DT
 		     , CS.ORG_FILE_NM1
 		     , CS.SYS_FILE_NM1
 		     , CS.ORG_FILE_NM2
@@ -620,18 +620,17 @@
 		     , CS.ANS_TRANS_NO
 		     , CS.ANS_TRANS_DT
 		     , CS.ASSIGNED_CS_NO
+		     , FN_GET_USER_NM(CS.ASSIGNED_CS_NO)        AS ASSIGNED_CS_NM
 		     , CS.ASSIGNED_YMD
 		     , CS.ASSIGNED_HMS
 		     , CS.ANS_TITLE
 		     , CS.ANS_CONTENT
-		     , CS.ANS_NO				 AS ANS_NO
-		     , FN_GET_USER_NM(CS.ANS_NO) AS ANS_NM
-		     , DATE_FORMAT(CS.ANS_DT, '%Y%m%d%H%i%S') AS ANS_DT
+		     , CS.ANS_NO
+		     , FN_GET_USER_NM(CS.ANS_NO)                AS ANS_NM
+		     , DATE_FORMAT(CS.ANS_DT, '%Y%m%d%H%i%S')   AS ANS_DT
 		     , CS.SECRET_YN
 		FROM  TB_COUNSEL CS
-		INNER JOIN
-		      TB_CUSTOMER C
-		ON    CS.CUST_NO = C.CUST_NO
+		INNER JOIN TB_CUSTOMER C ON CS.CUST_NO = C.CUST_NO
 		WHERE CS.COUNSEL_TYPE = 'C'
 		AND   CS.CUST_NO = #{custNo}
 		ORDER BY CS.REG_DT DESC

src/main/webapp/WEB-INF/views/customer/OneToOneQnaDetailForm.html

@@ -14,7 +14,7 @@
  * 1.0  2020.12.24   gagamel     최초 작성
  *******************************************************************************
  -->
-<div class="modalPopup" data-width="1200" id="popupOneToOneQnaDetail">
+<div class="modalPopup" data-width="1200" data-height="900" id="popupOneToOneQnaDetail">
 	<div class="panelStyle">
 		<!-- TITLE -->
 		<div class="panelTitle">
@@ -24,7 +24,7 @@
 		<!-- //TITLE -->
 		
 		<!-- CONTENT -->
-		<div class="panelContent">
+		<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}"/>
@@ -54,7 +54,7 @@
 							<th>답변상태</th>
 						</tr>
 					</thead>
-					<tbody>
+					<tbody id="otoQnaCounselInfo">
 						<tr>
 							<td th:text="*{counselSq}"></td>
 <!-- 							<td th:text="*{siteNm}"></td> -->
@@ -80,9 +80,9 @@
 					<tbody>
 						<tr>
 							<th>문의 제목</th>
-							<td th:text="*{questTitle}"></td>
+							<td th:text="*{questTitle}" id="otoQnaQuestTitle"></td>
 							<th>SMS답변요청</th>
-							<td th:text="*{smsReqYn == 'Y' ? '수신' : '미수신'}"></td>
+							<td th:text="*{smsReqYn == 'Y' ? '수신' : '미수신'}" id="otoQnaSmsReqYn"></td>
 						</tr>
 						<tr>
 							<th>문의 내용</th>
@@ -90,7 +90,7 @@
 								<textarea class="textareaR4" style="resize: none;" name="questContent" th:text="*{questContent}" disabled="disabled"></textarea>
 							</td>
 							<th>첨부 이미지</th>
-							<td class="userImg">
+							<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>
@@ -149,7 +149,7 @@
 									<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" th:if="${counselInfo.ansStat != 'G060_20' and (sessionInfo.roleCd == 'G001_A300' or sessionInfo.roleCd == 'G001_0000' or sessionInfo.roleCd == 'G001_A000')}">담당할당</button>
+								<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>
@@ -158,14 +158,17 @@
 					</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" th:if="${counselInfo.ansStat != 'G060_20'}">임시저장</button>
-				<button type="button" class="btn btn-info btn-lg" id="btnSaveAnswer" th:if="${counselInfo.ansStat != 'G060_20'}">답변저장</button>
+				<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>
 		<!-- //버튼 배치 영역 -->
@@ -175,13 +178,15 @@
 <!-- 사용자 레이어팝업 : 등록 파일 출력 -->
 <div class="uPopupWrap off" id="layer_review_pic">
 	<div class="area reviewPic" style="width:700px; height:700px;">
-		<ul class="picList" th:object="${counselInfo}">
+		<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" 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>
@@ -189,6 +194,95 @@
 
 <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);
+				$('#otoQnaSmsReqYn').html((result.smsReqYn == "Y" ? "수신" : "미수신"));
+				$('#qnaDetailForm textarea[name=questContent]').val(result.questContent);
+				
+				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);
+				$('#qnaDetailForm textarea[name=ansContent]').val(result.ansContent);
+				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())) {
@@ -212,6 +306,8 @@
 				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();
 				});
 			}
 		});
@@ -279,7 +375,6 @@
 		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");
@@ -294,8 +389,88 @@
 		$("#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);
+	}
+	
 	$(document).ready(function() {
 		cfnGetTextLength($('textarea[name=ansContent]'), 4000, $('#dpLocAnsContent'));
+		
+		gagaAgGrid.createGrid('custOneToOneCounselList', gridOneToOneCounselOptions);
+		
+		fnSearchOneToOneCustomerHistory();
+		
+		fnShowOrHideOneToOneQnaButton([[${counselInfo.ansStat}]]);
 	});
 /*]]>*/
 </script>