API 신청관리 승인상태 변경처리 - 개별처리, 기관별 처리

main
유지인 2025-11-13 16:09:17 +09:00
parent 23c591c1df
commit a7975cc2e0
5 changed files with 148 additions and 21 deletions

View File

@ -69,7 +69,6 @@ public class ApiKeyManagementController {
return result; return result;
} }
/** /**
* API > API * API > API
@ -82,12 +81,16 @@ public class ApiKeyManagementController {
*/ */
@ResponseBody @ResponseBody
@RequestMapping(value = "/admins/mgmtApiKey/approve.do", method = RequestMethod.POST) @RequestMapping(value = "/admins/mgmtApiKey/approve.do", method = RequestMethod.POST)
public HashMap<String, Object> modMgmtApiKeyApprove(@RequestParam(value="apiSeq") int apiSeq, ModelMap model, HttpServletResponse response, HttpServletRequest request) throws Exception { public HashMap<String, Object> modMgmtApiKeyApprove(
@RequestParam(value="seqArr", required=false) List<Integer> seqArr,
@RequestParam(value="approveYn", required=false) String approveYn,
@RequestParam(value="otype", required=false) String otype, ModelMap model, HttpServletResponse response, HttpServletRequest request) throws Exception {
HashMap<String, Object> result = new HashMap<String, Object>(); HashMap<String, Object> result = new HashMap<String, Object>();
HashMap<String,Object> params = new HashMap<>(); HashMap<String,Object> params = new HashMap<>();
params.put("apiSeq", apiSeq); params.put("seqArr", seqArr);
params.put("approveYn", "Y"); params.put("approveYn", approveYn);
params.put("otype", otype);
apiKeyManagementService.updateWebApiKeyApprove(params); apiKeyManagementService.updateWebApiKeyApprove(params);

View File

@ -34,7 +34,20 @@
<if test="approveYn != null and approveYn !=''"> <if test="approveYn != null and approveYn !=''">
APPROVE_YN = #{approveYn} APPROVE_YN = #{approveYn}
</if> </if>
WHERE API_SEQ IN (#{apiSeq}) <where>
<!-- seqArr 조건 -->
<if test="seqArr != null and seqArr.size() > 0">
API_SEQ IN
<foreach item="item" index="index" collection="seqArr" open="(" separator=", " close=")">
#{item}
</foreach>
</if>
<!-- otype 조건 -->
<if test="otype != null and otype != ''">
AND USER_TYPE = #{otype}
</if>
</where>
</update> </update>
<!-- 사용자 API 신청 삭제하기 --> <!-- 사용자 API 신청 삭제하기 -->

View File

@ -13,7 +13,6 @@
<!-- MUI + Chart.js + jQuery --> <!-- MUI + Chart.js + jQuery -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- <link href="https://cdn.jsdelivr.net/npm/@mui/material@5.15.14/dist/material.min.css" rel="stylesheet"> -->
<style> <style>
body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; color: #333; margin: 0; padding: 20px; } body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; color: #333; margin: 0; padding: 20px; }

View File

@ -8,7 +8,6 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- MUI + Chart.js + jQuery --> <!-- MUI + Chart.js + jQuery -->
<link href="https://cdn.jsdelivr.net/npm/@mui/material@5.15.14/dist/material.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
@ -16,8 +15,83 @@
body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; margin: 0; padding: 20px; } body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; margin: 0; padding: 20px; }
.text-center {text-align: center} .text-center {text-align: center}
/* 승인 토글스위치 */
/* 스위치들을 한 줄에 나란히 */
.switch-group {
display: flex;
align-items: center;
gap: 15px; /* 스위치 간 간격 */
}
.molit-g-switch,.mois-g-switch, .mof-g-switch {
display: flex;
align-items: center;
gap: 5px;
margin-right: 10px;
}
/* 스위치 디자인 */
.mui-switch {
position: relative;
flex-shrink: 0; /* 스위치 크기 줄어들지 않게 */
display: inline-block;
width: 48px;
height: 26px;
}
.mui-switch input {
opacity: 0;
width: 0;
height: 0;
}
.mui-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
display: flex;
align-items: center;
justify-content: ${''}; /* 가운데 맞춤 */
}
.mui-slider:before {
position: absolute;
content: "OFF";
color: #fff;
font-size: 10px;
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: #999;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: 0.4s;
}
input:checked + .mui-slider {
background-color: #4A90E2;
}
input:checked + .mui-slider:before {
transform: translateX(22px);
content: "ON";
background-color: #1A73E8;
}
/* API 신청 내역 테이블 */ /* API 신청 내역 테이블 */
.table-container { .table-container {
display: flex;
align-items: center;
justify-content: space-between; /* 제목 왼쪽, 스위치 오른쪽 */
margin-top: 25px; background: #fff; border-radius: 12px; padding: 20px; margin-top: 25px; background: #fff; border-radius: 12px; padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); box-shadow: 0 2px 8px rgba(0,0,0,0.05);
} }
@ -56,6 +130,29 @@
<!-- API 신청 테이블 --> <!-- API 신청 테이블 -->
<div class="table-container home-trainning"> <div class="table-container home-trainning">
<h3>API 신청 내역</h3> <h3>API 신청 내역</h3>
<div class="switch-group">
<div class="molit-g-switch">국토교통부
<label class="mui-switch">
<input type="checkbox" class="globalSwitch" data-otype="국토교통부" onchange="toggleApproveKey(this)" checked>
<span class="mui-slider"></span>
</label>
</div>
<div class="mois-g-switch">행정안전부
<label class="mui-switch">
<input type="checkbox" class="globalSwitch" data-otype="행정안전부" onchange="toggleApproveKey(this)" checked>
<span class="mui-slider"></span>
</label>
</div>
<div class="mof-g-switch">해양수산부
<label class="mui-switch">
<input type="checkbox" class="globalSwitch" data-otype="해양수산부" onchange="toggleApproveKey(this)" checked>
<span class="mui-slider"></span>
</label>
</div>
</div>
</div>
<div class="table-container home-trainning">
<table class="Table_Main course-list-table"> <table class="Table_Main course-list-table">
<colgroup> <colgroup>
<col style="width: 3%"> <col style="width: 3%">
@ -121,13 +218,9 @@
}); });
} }
function drawApiKeyList(item) { function drawApiKeyList(item) {
// 승인 상태에 따른 표시
let approveHtml = ""; // approveYn 이 "Y"이면 체크 상태, 아니면 체크 해제
if (item.approveYn == "Y") { const isChecked = item.approveYn === "Y" ? "checked" : "";
approveHtml = "승인됨";
} else {
approveHtml = `<button class="approve-btn" data-id="\${item.apiSeq}" onclick="approveKey(this);">승인</button>`;
}
// HTML 문자열 생성 // HTML 문자열 생성
const html = ` const html = `
<tr data-idx="\${item.apiSeq}"> <tr data-idx="\${item.apiSeq}">
@ -137,20 +230,41 @@
<td>\${item.apiKey}</td> <td>\${item.apiKey}</td>
<td class="text-center">\${item.startDt}</td> <td class="text-center">\${item.startDt}</td>
<td class="text-center">\${item.endDt}</td> <td class="text-center">\${item.endDt}</td>
<td class="text-center">\${approveHtml}</td> <td class="text-center approve-switch">
<label class="mui-switch">
<input type="checkbox" class="key-toggle" data-seq="\${item.apiSeq}" onchange="toggleApproveKey(this)" \${isChecked}>
<span class="mui-slider"></span>
</label></td>
<td class="text-center"><button class="approve-btn" data-id="\${item.apiSeq}" onclick="revokeKey(this);">삭제</button></td> <td class="text-center"><button class="approve-btn" data-id="\${item.apiSeq}" onclick="revokeKey(this);">삭제</button></td>
</tr> </tr>
`; `;
return html; return html;
} }
// 승인처리하기 // 승인처리하기
function approveKey(e) { function toggleApproveKey(ele) {
let apiSeq = $(e).data("id") let apiSeq = $(ele).data("seq")
let seqArr = [];
let otype = !$(ele).data("otype") ? '' : $(ele).data("otype"); // 일괄변경 스위치 클릭한 경우
let approve = $(ele).is(":checked") ? "Y" : "N";
if (otype == '') {
seqArr.push($(ele).data("seq"));
}
// if (btnType == 'globalSwitch') {
// $('.approve-switch').each(function(i, el) {
// const idx = $(el).data('seq');
// seqArr.push(idx);
// });
// } else {
// seqArr.push($(ele).data("seq"));
// }
$.ajax({ $.ajax({
type : "POST", type : "POST",
url : "/admins/mgmtApiKey/approve.do" , url : "/admins/mgmtApiKey/approve.do" ,
data : {apiSeq:apiSeq}, data : {seqArr:seqArr, approveYn: approve, otype: otype},
traditional: true, traditional: true,
dataType :"json", dataType :"json",
success : function(res){ // res.code, res.msg, res.data success : function(res){ // res.code, res.msg, res.data

View File

@ -14,7 +14,6 @@
<!-- MUI + Chart.js + jQuery --> <!-- MUI + Chart.js + jQuery -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@mui/material@5.15.14/dist/material.min.css" rel="stylesheet">
<style> <style>
body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; margin: 0; padding: 20px; } body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; margin: 0; padding: 20px; }
@ -479,7 +478,6 @@
// API 호출 로그 목록 조회 // API 호출 로그 목록 조회
function getMgmtApiChart(){ function getMgmtApiChart(){
var chartDate = $('#chartDate').val(); var chartDate = $('#chartDate').val();
console.log($('#chartDate').val())
$.ajax({ $.ajax({
type : "POST", type : "POST",
url : "/admins/mgmtApi/charts.do" , url : "/admins/mgmtApi/charts.do" ,