update Category

This commit is contained in:
Kana
2024-01-05 16:28:04 +09:00
parent 0c9d5d59ca
commit a5392ac111
7 changed files with 136 additions and 91 deletions

View File

@@ -126,13 +126,11 @@ public class CategoryController {
}
// KAN코드 중복확인 메서드
@PostMapping("/category/chackKancode")
@PostMapping("/category/checkKancode")
@ResponseBody
public int chackKancode(String kan_code) {
int chack = categoryService.checkKan(kan_code);
System.out.println(chack);
return chack;
public String chackKancode(String kan_code) {
String checkkan = categoryService.kanCheck(kan_code);
return checkkan;
}

View File

@@ -14,4 +14,5 @@ public interface CategoryMapper {
int updateByKanCode(CategoryDto dto);
int deactivateByKanCode(String kan_code);
int activateByKanCode(String kan_code);
String kanCheck(String kan_code);
}

View File

@@ -52,14 +52,8 @@ public class CategoryService {
return mapper.activateByKanCode(kan_code);
}
public int checkKan(String kan_code) {
CategoryDto dto = mapper.selectByKanCode(kan_code);
String kancode = dto.getKan_code();
if(kancode == null) {
return 0;
}else {
return 1;
}
public String kanCheck(String kan_code) {
return mapper.kanCheck(kan_code);
}

View File

@@ -51,7 +51,9 @@
select * from product_category
</select>
<select id="kanCheck" parameterType="String" resultType="String">
select kan_code from product_category where kan_code = #{kan_code}
</select>

View File

@@ -6,25 +6,28 @@
<title>카테고리 생성</title>
<style>
input {
display: inline-block;
}
#checkKan {
margin-left: 10px; /* .checkKan 버튼과 옆의 input 사이 간격 조절 */
}
.header {
.header-white {
text-align: center;
color: white;
}
.body{
text-align: center;
}
.col-centered{
margin: 0 auto;
float: none;
}
.col-margin-left-32{
margin-left: 32%;
}
</style>
</head>
<body>
<div class="header">
<div class="header-white">
<h1><b>제품 카테고리 생성</b></h1>
</div>
<hr>
@@ -32,51 +35,34 @@ input {
<form id="createForm">
<div class="ulTag">
<div class="row">
<div class="col-12">
<div class="input-group mb-3">
<div class="col-12" style="text-align: center;">
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon1">대분류</span>
<input type="text" name="cls_nm_1" class="form-control" placeholder="대분류를 입력하세요" aria-label="대분류" aria-describedby="basic-addon1">
</div>
<!-- 설명만 있는 입력 -->
<div class="input-group mb-3">
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon1">중분류</span>
<input type="text" name="cls_nm_2" class="form-control" placeholder="중분류를 입력하세요" aria-label="중분류" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon1">소분류</span>
<input type="text" name="cls_nm_3" class="form-control" placeholder="소분류를 입력하세요" aria-label="소분류" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">분류</span>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon1">분류</span>
<input type="text" name="cls_nm_4" class="form-control" placeholder="세분류를 입력하세요" aria-label="세분류" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" name="kan_code" class="form-control" placeholder="KAN 분류코드" aria-label="KAN 분류코드" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" style="background-color:#FF5E5E;" type="button" id="button-addon2">중복확인</button>
<div class="input-group mb-3 w-40 col-centered">
<input type="text" name="kan_code" id="kan_code" class="form-control" placeholder="KAN 분류코드" aria-label="KAN 분류코드" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" id="checkKan" style="background-color:#FF5E5E;" type="button" id="button-addon2">중복확인</button>
</div>
</div>
</div>
대분류
<input type="text" name="cls_nm_1">
중분류
<input type="text" name="cls_nm_2">
소분류
<input type="text" name="cls_nm_3">
세분류
<input type="text" name="cls_nm_4">
KAN 분류코드
<input type="text" name="kan_code" id="kan_code">
<input type="button" id="checkKan" value="중복확인">
<span id="chackDiv"></span>
</div>
<div class="Btn">
<button id="commit">생성</button>
<button id="cancel">취소</button>
<div class="col-margin-left-32">
<button class="btn btn-success" id="commit">생성</button>
<button class="btn btn-secondary" id="cancel">취소</button>
</div>
</form>
@@ -87,29 +73,30 @@ input {
// 중복 클릭 방지를 위해 버튼을 비활성화
$("#checkKan").prop("disabled", true);
// 이전 결과 및 메시지 초기화
$("#chackDiv").html("");
var kanCode = $("#kan_code").val();
if (!kanCode) {
$("#chackDiv").html("KAN 분류코드를 입력하세요.");
alert("KAN 분류코드를 입력하세요.");
$("#kan_code").focus();
// 버튼 다시 활성화
$("#checkKan").prop("disabled", false);
return false;
}
$.ajax({
url: "/category/checkKancode",
type: "post",
url: "/category/chackKancode",
data: { kan_code: kanCode },
dataType: text
data: {"kan_code": kanCode},
datatype:"text"
}).done(function(data) {
if (data == 0) {
$("#chackDiv").html("사용가능합니다");
$("#chackDiv").append("<input type='hidden' id='kan_chack' value='1'>");
if (data == "") {
$("#checkKan").css("background-color", "#4CAF50"); // 파란색 배경으로 변경
$("#checkKan").text("사용가능"); // 버튼 텍스트 변경
$("#checkKan").append("<input type='hidden' id='kan_chack' value='1'>");
} else {
$("#chackDiv").html("이미 사용중인 KAN 분류코드입니다.");
$("#checkKan").css("background-color", "#FF5E5E"); // 원래의 빨간색 배경으로 변경
$("#checkKan").text("사용불가"); // 버튼 텍스트 변경
}
}).fail(function() {
alert("오류가 발생했습니다.");
@@ -118,11 +105,6 @@ input {
$("#checkKan").prop("disabled", false);
});
});
// 포커스를 잃었을 때 KAN 분류코드 입력 안내 메시지를 초기화
$("#kan_code").on("blur", function() {
$("#chackDiv").html("");
});
});
</script>

View File

@@ -6,37 +6,42 @@
<meta charset="UTF-8">
<title>제품 카테고리</title>
<style type="text/css">
.header {
.header-white {
text-align: center;
color: white;
}
.w-5{
width : 5%!important;
}
</style>
</head>
<body>
<div class="header">
<h1>제품 카테고리 관리</h1>
<div class="header-white">
<h1><b>제품 카테고리 관리</b></h1>
</div>
<hr>
<div class="body">
<div class="search12">
<form action="categorysearch">
<div class="searchDropdown" id="searchDropdown">
<select>
<option value="0"></option>
<option value="1"></option>
<option value="2"></option>
<form action="categorySearch">
<div class="input-group mb-3 w-30">
<div class="w-25">
<select class="form-select">
<option selected="selected" value="cls_nm_4">세분류</option>
<option value="cls_nm_1">대분류</option>
<option value="cls_nm_2">중분류</option>
<option value="cls_nm_3">세분류</option>
<option value="kan_code">KAN코드</option>
</select>
</div>
<div class="searchInput">
<input type="text" name="searchInput" id="searchInput"
placeholder="검색어를 입력하세요" />
</div>
<div class="searchButton">
<button id="searchButton">검색</button>
</div>
<input type="text" name="categorySearch" class="form-control" aria-label="Text input with dropdown button" placeholder="검색어를 입력하세요">
<button class="btn btn-outline-secondary" style="background-color:aqua;" type="button" id="button-addon2 searchBtn">검색</button>
</div>
</form>
</div>
</div>
<div class="table12">
<table>
<tr>

View File

@@ -5,14 +5,77 @@
<head>
<meta charset="UTF-8">
<title>test상세페이지</title>
<style type="text/css">
.col-centered{
margin: 0 auto;
float: none;
}
.col-margin-left-32{
margin-left: 32%;
}
</style>
</head>
<body>
test success<br>
test success
<br>
<hr>
<c:forEach items="${dto }" var="item">
${item.kan_code} : ${item.cls_nm_1} > ${item.cls_nm_2} > ${item.cls_nm_3} > ${item.cls_nm_4}<br>
활성화 : ${item.activation}<br>
<hr>
</c:forEach>
코드테스트 버튼 :
<div class="input-group mb-3 w-40 col-centered">
<input type="text" name="kan_code" id="kan_code" class="form-control"
placeholder="KAN 분류코드" aria-label="KAN 분류코드"
aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" id="checkKan"
style="background-color: #FF5E5E;" type="button" id="button-addon2">중복확인</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#checkKan").on("click", function() {
// 중복 클릭 방지를 위해 버튼을 비활성화
$("#checkKan").prop("disabled", true);
let kanCode = $("#kan_code").val();
if (!kanCode) {
alert("KAN 분류코드를 입력하세요.");
$("#kan_code").focus();
// 버튼 다시 활성화
$("#checkKan").prop("disabled", false);
return false;
}
$.ajax({
url: "/category/checkKancode",
type: "post",
data: {"kan_code": kanCode},
datatype:"text"
}).done(function(data) {
if (data == "") {
$("#checkKan").css("background-color", "#4CAF50"); // 파란색 배경으로 변경
$("#checkKan").text("사용가능"); // 버튼 텍스트 변경
$("#checkKan").append("<input type='hidden' id='kan_chack' value='1'>");
} else {
$("#checkKan").css("background-color", "#FF5E5E"); // 원래의 빨간색 배경으로 변경
$("#checkKan").text("사용불가"); // 버튼 텍스트 변경
}
}).fail(function() {
alert("오류가 발생했습니다.");
}).always(function() {
// Ajax 요청 완료 후 버튼 다시 활성화
$("#checkKan").prop("disabled", false);
});
});
});
</script>
</body>
</html>