feat : totalInfo 조회결과 화면 바인딩 예제 작성

pull/9/head
Kurt92 1 month ago
parent 0d4163ddb7
commit 8b15dddfdb

@ -51,6 +51,8 @@ public class MinwonInitDto {
private String mmSgcont; //위반내용
private String asJsno; //접수번호
private String mmCarno; //차량번호
private String mmCode;
}

@ -35,7 +35,8 @@ public class MinwonInitQueryDslRepository {
cpMain.mmImagecnt,
cpMain.mmSgcont,
cpAnswer.asJsno,
cpMain.mmCarno
cpMain.mmCarno,
cpMain.mmCode
)
)
.from(cpMain)

@ -2,6 +2,7 @@ package go.kr.project.biz.totalInfo.controller;
import egovframework.constant.TilesConstants;
import egovframework.util.ApiResponseUtil;
import go.kr.project.biz.totalInfo.model.TotalInfoDto;
import go.kr.project.biz.totalInfo.service.TotalInfoService;
import lombok.RequiredArgsConstructor;
import org.springframework.http.ResponseEntity;
@ -20,13 +21,13 @@ public class TotalInfoController {
return "biz/totalInfo/totalInfo_popup" + TilesConstants.POPUP;
}
@GetMapping("/total/info/info.ajax/{mmCode}")
@GetMapping("/total/info/{mmCode}/info.ajax")
@ResponseBody
public ResponseEntity<?> findTotalInfo(@PathVariable String mmCode) {
totalInfoService.findTotalInfo(mmCode);
TotalInfoDto.Response.TotalInfo result = totalInfoService.findTotalInfo(mmCode);
return ApiResponseUtil.success("");
return ApiResponseUtil.success(result);
}

@ -3,6 +3,8 @@ package go.kr.project.biz.totalInfo.model;
import lombok.Getter;
import lombok.Setter;
import javax.persistence.Column;
public class TotalInfoDto {
@ -25,9 +27,64 @@ public class TotalInfoDto {
public static class Response {
@Getter
@Setter
public static class TotalInfo {
//CP_MAIN
private String mmCode;
private String mmSggcode;
private String mmDlgb;
private String mmIngb;
private String mmDate;
private String mmTime;
private String mmLawgb;
private String mmSgnm;
private String mmSgtel;
private String mmSgcont;
private String mmSgpos;
private String mmBdcode;
private String mmGpsX;
private String mmGpsY;
private String mmTrac;
private String mmSno;
private Integer mmImagecnt;
private String mmImagegb;
private String mmCarno;
private String mmVhmno;
private String mmCargb;
private String mmCarkind;
private String mmOmcode;
private String mmSdate;
private String mmEdate;
private Integer mmKeum1;
private Integer mmKeum2;
private Integer mmSukeum;
private Integer mmMinusKeum;
private Integer mmAddKeum;
private String mmRecall;
private Integer mmInuser;
private String mmIndt;
private String mmState;
private String mmStateDt;
private String mmCarcheck;
private String mmPrecode;
private String mmEtc;
private String mmVideofilenm;
private String mmSafezone;
private String mmViorcnt;
private String mmTime2;
private String mmCarname;
private String mmCarcolor;
private String mmCarfuel;
private String mmTransmitSgg;
private String mmTransmitTeam;
//CP_ANSWER

@ -28,8 +28,53 @@ public class TotalInfoQueryDslRepository {
.select(
Projections.fields(
TotalInfoDto.Response.TotalInfo.class,
cpMain.mmCode
cpMain.mmCode,
cpMain.mmSggcode,
cpMain.mmDlgb,
cpMain.mmIngb,
cpMain.mmDate,
cpMain.mmTime,
cpMain.mmLawgb,
cpMain.mmSgnm,
cpMain.mmSgtel,
cpMain.mmSgcont,
cpMain.mmSgpos,
cpMain.mmBdcode,
cpMain.mmGpsX,
cpMain.mmGpsY,
cpMain.mmTrac,
cpMain.mmSno,
cpMain.mmImagecnt,
cpMain.mmImagegb,
cpMain.mmCarno,
cpMain.mmVhmno,
cpMain.mmCargb,
cpMain.mmCarkind,
cpMain.mmOmcode,
cpMain.mmSdate,
cpMain.mmEdate,
cpMain.mmKeum1,
cpMain.mmKeum2,
cpMain.mmSukeum,
cpMain.mmMinusKeum,
cpMain.mmAddKeum,
cpMain.mmRecall,
cpMain.mmInuser,
cpMain.mmIndt,
cpMain.mmState,
cpMain.mmStateDt,
cpMain.mmCarcheck,
cpMain.mmPrecode,
cpMain.mmEtc,
cpMain.mmVideofilenm,
cpMain.mmSafezone,
cpMain.mmViorcnt,
cpMain.mmTime2,
cpMain.mmCarname,
cpMain.mmCarcolor,
cpMain.mmCarfuel,
cpMain.mmTransmitSgg,
cpMain.mmTransmitTeam
)
)
.from(cpMain)
@ -39,7 +84,7 @@ public class TotalInfoQueryDslRepository {
.fetchOne();
return null;
return result;
}
}

@ -1,7 +1,9 @@
package go.kr.project.biz.totalInfo.service;
import go.kr.project.biz.totalInfo.model.TotalInfoDto;
public interface TotalInfoService {
String findTotalInfo(String mmCode);
TotalInfoDto.Response.TotalInfo findTotalInfo(String mmCode);
}

@ -1,5 +1,6 @@
package go.kr.project.biz.totalInfo.service.impl;
import go.kr.project.biz.totalInfo.model.TotalInfoDto;
import go.kr.project.biz.totalInfo.repository.TotalInfoQueryDslRepository;
import go.kr.project.biz.totalInfo.service.TotalInfoService;
import lombok.RequiredArgsConstructor;
@ -14,11 +15,8 @@ public class TotalInfoServiceImpl implements TotalInfoService {
private final TotalInfoQueryDslRepository totalInfoQueryDslRepository;
@Override
public String findTotalInfo(String mmCode) {
public TotalInfoDto.Response.TotalInfo findTotalInfo(String mmCode) {
totalInfoQueryDslRepository.findTotalInfo(mmCode);
return "";
return totalInfoQueryDslRepository.findTotalInfo(mmCode);
}
}

@ -216,6 +216,13 @@
name: 'mmCarno',
width: 150,
align: 'center'
},
{
header: 'mmCode',
name: 'mmCode',
width: 150,
align: 'center',
hidden: false
}
]);
@ -277,19 +284,17 @@
});
// 행 더블클릭 이벤트 - 게시물 상세 페이지로 이동
this.instance.on('dblclick', function(ev) {
this.instance.on('dblclick', (ev) => {
var popUrl = '${pageContext.request.contextPath}/total/info.do';
var popTitle = "비밀번호 변경";
var popTitle = "";
var popOption = "width=1400px, height=900px, resizable=yes, scrollbars=yes, location=no, top=100px, left=100px";
window.open(popUrl, popTitle, popOption);
<%--if (ev.rowKey !== undefined && ev.columnName !== '_number') {--%>
<%-- var rowData = self.instance.getRow(ev.rowKey);--%>
<%-- if (rowData && rowData.noticeId) {--%>
<%-- // 새로운 함수를 사용하여 URL 생성 및 페이지 이동--%>
<%-- window.location.href = "<c:url value="/minwon/init/init.do"/>";--%>
<%-- console.log("asd11`11")--%>
<%-- }--%>
<%--}--%>
// 팝업 띄우기
const mmCode = this.instance.getValue(ev.rowKey, 'mmCode'); // tuiGrid의 해당 행 컬럼값
const $openPop = window.open(popUrl, popTitle, popOption);
$($openPop).prop('mmCode', mmCode);
});
}

@ -7,10 +7,10 @@
<div class="main_body">
<input type="text" id="input1" value="샘플 인풋1"></br>
<input type="text" id="input2" value="샘플 인풋2"></br>
<input type="text" id="input3" value="샘플 인풋3"></br>
<input type="text" id="input4" value="샘플 인풋4"></br>
<input type="text" id="" id="input1" value="샘플 인풋1"></br>
<input type="text" id="" id="input2" value="샘플 인풋2"></br>
<input type="text" id="" id="input3" value="샘플 인풋3"></br>
<input type="text" id="" id="input4" value="샘플 인풋4"></br>

@ -31,6 +31,9 @@
<!-- 상단 네비/페이지 인디케이터 -->
<div class="card-toolbar">
<%-- 부모창에서 받아오는 리스트 배열 --%>
<input type="hidden" id="mmCodes" />
<div class="page-indicator"><span id="pageNow">2</span> of <span id="pageTotal">4</span></div>
<div class="nav-group">
<button type="button" class="nav-btn" data-act="first">◀◀</button>
@ -48,60 +51,72 @@
<div class="form-grid">
<div class="lbl">등록구분</div>
<div class="fld"><input type="text" value="자동등록" readonly></div>
<div class="fld">
<input type="text" id="" value="" readonly>
</div>
<div class="lbl">자료출처</div>
<div class="fld"><input type="text" value="생활불편" readonly></div>
<div class="fld">
<input type="text" id="" value="" readonly>
</div>
<div class="lbl">위반일시</div>
<div class="fld"><input type="text" value="2025-06-04 20:01" readonly></div>
<div class="fld">
<input type="text" id="mmDate" value="" readonly>
</div>
<div class="lbl">위반명</div>
<div class="fld"><input type="text" value="주차위반" readonly></div>
<div class="fld">
<input type="text" id="" value="" readonly>
</div>
<div class="lbl">신고자</div>
<div class="fld"><input type="text" value="손관기" readonly></div>
<div class="fld">
<input type="text" id="mmSgnm" value="" readonly>
</div>
<div class="lbl">연락처</div>
<div class="fld"><input type="text" value="01096686113" readonly></div>
<div class="fld">
<input type="text" id="" value="" readonly>
</div>
<div class="lbl">담당자</div>
<div class="fld"><input type="text" value="부선영" readonly></div>
<div class="fld"><input type="text" id="mmSgtel" value="" readonly></div>
<div class="lbl">공개여부</div>
<div class="fld">
<input type="text" value="미공개" readonly>
<input type="text" id="" value="" readonly>
</div>
<div class="lbl">신고내용</div>
<div class="fld block">
<textarea readonly>[예시] …신고 내용이 여기에 표시됩니다…</textarea>
<textarea id="mmSgcont" value="" readonly></textarea>
</div>
<div class="lbl">위반장소</div>
<div class="fld"><input type="text" value="대장동 592" readonly></div>
<div class="fld"><input type="text" id="" value="" readonly></div>
<div class="lbl">접수번호</div>
<div class="fld"><input type="text" value="1AA-2506-0104234" readonly></div>
<div class="fld"><input type="text" id="" value="" readonly></div>
<div class="lbl">접수일자</div>
<div class="fld"><input type="text" value="2025-06-04" readonly></div>
<div class="fld"><input type="text" id="" value="" readonly></div>
<div class="lbl">목록번호</div>
<div class="fld"><input type="text" value="0159002" readonly></div>
<div class="fld"><input type="text" id="" value="" readonly></div>
<div class="lbl">법정동</div>
<div class="fld"><input type="text" value="대장동" readonly></div>
<div class="fld"><input type="text" id="" value="" readonly></div>
<div></div><div></div>
<div class="lbl">사진등록금액</div>
<div class="fld"><input type="text" value="80,000" readonly></div>
<div class="fld"><input type="text" id="mmKeum1" value="" readonly></div>
<div class="lbl">부과금액</div>
<div class="fld"><input type="text" value="100,000" readonly></div>
<div class="fld"><input type="text" id="" value="" readonly></div>
<div class="lbl">감액금액</div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="fld"><input type="text" id="" value="" readonly></div>
<div class="lbl">총수납액</div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="fld"><input type="text" id="" value="" readonly></div>
<div class="lbl">잔액</div>
<div class="fld"><input class="hl" type="text" value="80,000" readonly></div>
<div class="fld"><input class="hl" type="text" value="" readonly></div>
<div class="lbl">특기사항</div>
<div class="fld">
<button type="button" class="btn btn-light" id="btnSpecial">특기사항 보기</button>
@ -110,14 +125,14 @@
<div class="block bar"></div>
<div class="lbl">처리상태일시</div>
<div class="fld"><input type="text" value="2025-07-29 09:05" readonly></div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">처리상태</div>
<div class="fld"><input class="hl" type="text" value="차적조회완료" readonly></div>
<div class="fld"><input class="hl" type="text" value="" readonly></div>
<div class="lbl">차량명</div>
<div class="fld"><input type="text" value="쎄토스71" readonly></div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">차량색상</div>
<div class="fld"><input type="text" value="차량색상" readonly></div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">연료구분</div>
<div class="fld"><input type="text" value="" readonly></div>
@ -128,22 +143,22 @@
<div class="section-title block">소유주 정보</div>
<div class="lbl">소유주</div>
<div class="fld"><input type="text" value="고선묵66" readonly></div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">등록구분</div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">주민번호</div>
<div class="fld"><input type="text" value="******-*******" readonly></div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">우편번호</div>
<div class="fld"><input type="text" value="17613" readonly></div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">주소</div>
<div class="fld block"><input type="text" value="경기도 안성시 공도읍 마장공단3길 43, 201호66" readonly></div>
<div class="fld block"><input type="text" value="" readonly></div>
<div class="lbl">번지</div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">차대번호</div>
<div class="fld"><input type="text" value="KLAYA75ADEK598855" readonly></div>
<div class="fld"><input type="text" value="" readonly></div>
<div class="lbl">도로코드</div>
<div class="fld"><input type="text" value="" readonly></div>
@ -208,20 +223,47 @@
const fnBiz = {
init: () => {
// fnBiz.search();
},
// 조회결과 바인딩 샘플
search: () => {
console.log("search!!!!")
let mmCode = $("#mmCodes").val();
console.log('mmcode check', mmCode)
$.ajax({
url: "",
type: "POST",
data: { id : "" },
// PathVariable 형태로 url를 동적으로 쓰는방식이다.
// 해당 방식 이외에 그냥 쿼리스트링으로 넘기는 방법도 있다.
url: "/total/info/" + mmCode + "/info.ajax",
type: "GET",
dataType: 'json',
success: function(response) {
// 리스폰스로 받아온 결과를 태그에 바인딩 해준다.
// 태그 id = 유니크 / 태그 name = 중복가능
// 묶음단위 혹은 동일한 값을 넣어야할때 name을 쓰고 보통은 id를 통해 바인딩 한다.
// 정확한 개념은 바인딩보다는 태그 value를 갈아끼는 것이다.
// 25.11.03 샘플로 작성한거라 main테이블 정보만 가져와서 뿌려주고 있다.
// f12 개발자 모드 > 콘솔창을 보면 아래 넘어오는 데이트를 볼수 있다.
console.log(response.data)
// .val 은 제이쿼리 함수로 테그의 value를 세팅하는 함수이다.
// 기본적으로 제이쿼리를 쓸텐데 아래 링크를 참조한다.
// https://xianeml.tistory.com/70
$("#mmKeum1").val(response.data.mmKeum1);
$("#mmKeum2").val(response.data.mmKeum2);
$("#mmSgcont").val(response.data.mmSgcont);
$("#mmSgnm").val(response.data.mmSgnm);
$("#mmSgtel").val(response.data.mmSgtel);
$("#mmDate").val(response.data.mmDate);
},
error: function(xhr, status, error) {
$("#result").text("조회 실패");
}
});
}
@ -235,9 +277,22 @@
$(function () {
console.log("init")
$("#tabs").tabs();
fnBiz.init();
//mmcode 리스트 가져오기
$("#mmCodes").val(window.mmCode);
console.log($('#mmCodes').val());
// mmCodes 값이 세팅되면 search() 호출
const checkMmCode = setInterval(() => {
const val = $("#mmCodes").val();
if (val) {
clearInterval(checkMmCode);
fnBiz.search(); // 값이 들어온 시점에 호출
}
}, 100);
});

@ -475,7 +475,7 @@ body {
<h2 class="search-title">주소 검색</h2>
</div>
<div class="search-box">
<input type="text" id="keyword" placeholder="도로명주소, 지번주소, 건물명으로 검색" onkeypress="handleKeyPress(event)">
<input type="text" id="" id="keyword" placeholder="도로명주소, 지번주소, 건물명으로 검색" onkeypress="handleKeyPress(event)">
<button id="searchBtn" onclick="searchAddress(1)">검색</button>
</div>
<p class="search-example">예시) 도로명(반포대로 58), 지번(삼성동 25), 건물명(독립기념관)</p>

Loading…
Cancel
Save