github-mirrors/No1WMS
1
0
Fork 0
mirror of https://github.com/suhf/No1WMS.git synced 2026-02-04 19:54:00 +09:00
Code Issues Packages Projects Releases Wiki Activity

카테고리 리스트, 상세화면, 수정화면 및 기능 추가

Browse Source
This commit is contained in:
Kana
2024-01-08 18:39:44 +09:00
parent ef0437456d
commit e122d54b53
6 changed files with 425 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/main/java/com/no1/wms/category/CategoryController.java
View File

@@ -49,8 +49,8 @@ public class CategoryController {
} }
// 상세페이지 // 상세페이지
@PostMapping("/category/read/{kan_code}") @PostMapping("/category/read")
public String read(@PathVariable String kan_code, Model m) { public String read(String kan_code, Model m) {
// 선택한 kan_code를 바탕으로 원하는 상세정보 출력하는 메서드 작성 // 선택한 kan_code를 바탕으로 원하는 상세정보 출력하는 메서드 작성
CategoryDto dto = categoryService.selectByKanCode(kan_code); CategoryDto dto = categoryService.selectByKanCode(kan_code);
m.addAttribute("dto", dto); m.addAttribute("dto", dto);
@@ -58,28 +58,27 @@ public class CategoryController {
} }
// 생성 - 폼 // 생성 - 폼
@GetMapping("/category/create") @PostMapping("/category/create")
public String create() { public String create() {
return "category/create"; return "category/create";
} }
// 생성 - Ajax // 생성 - Ajax
@PostMapping("/category/create_process") @PostMapping("/category/create_process")
@ResponseBody @ResponseBody
public boolean createProcess(CategoryDto dto, Model m) { public boolean createProcess(CategoryDto dto) {
int i = categoryService.createProcess(dto); int i = categoryService.createProcess(dto);
if (i == 1) { if (i == 1) {
return true; return true;
} else { } else {
// ajax테스트후 결정
m.addAttribute("dto", dto);
return false; return false;
} }
} }
// 수정 - 폼 // 수정 - 폼
@GetMapping("/category/update/{kan_code}") @PostMapping("/category/update")
public String update(@PathVariable String kan_code, Model m) { public String update(String kan_code, Model m) {
CategoryDto dto = categoryService.selectByKanCode(kan_code); CategoryDto dto = categoryService.selectByKanCode(kan_code);
m.addAttribute("dto", dto); m.addAttribute("dto", dto);
return "category/update"; return "category/update";
@@ -88,15 +87,13 @@ public class CategoryController {
@PutMapping("/category/update_process") @PutMapping("/category/update_process")
@ResponseBody @ResponseBody
public int updateProcess(CategoryDto dto, Model m) { public boolean updateProcess(CategoryDto dto) {
int i = categoryService.updateByKanCode(dto); int i = categoryService.updateByKanCode(dto);
if (i == 1) { if (i == 1) {
return i; return true;
} else { } else {
// ajax테스트후 결정 return false;
// m.addAttribute("dto", dto);
return 0;
} }
} }

4
src/main/resources/mappers/CategoryMapper.xml
View File

@@ -14,8 +14,8 @@
<update id="updateByKanCode" parameterType="CategoryDto"> <update id="updateByKanCode" parameterType="CategoryDto">
UPDATE product_category UPDATE product_category
SET cls_nm_1 = #{dto.cls_nm_1}, cls_nm_2 = #{dto.cls_nm_2},cls_nm_3 = #{dto.cls_nm_3}, cls_nm_4 = #{dto.cls_nm_4} SET cls_nm_1 = #{cls_nm_1}, cls_nm_2 = #{cls_nm_2},cls_nm_3 = #{cls_nm_3}, cls_nm_4 = #{cls_nm_4}
WHERE kan_code = #{dto.kan_code} WHERE kan_code = #{kan_code}
</update> </update>
<update id="deactivateByKanCode" parameterType="String"> <update id="deactivateByKanCode" parameterType="String">

63
src/main/webapp/WEB-INF/views/category/create.jsp
View File

@@ -5,12 +5,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>카테고리 생성</title> <title>카테고리 생성</title>
<style> <style>
.header-white {
text-align: center;
color: white;
}
.body{ .body{
text-align: center; text-align: center;
} }
@@ -27,11 +21,11 @@
</style> </style>
</head> </head>
<body> <body>
<div class="header-white"> <div class="mt-5 mb-5 text-center">
<h1><b>제품 카테고리 생성</b></h1> <h1>제품 카테고리 생성</h1>
</div> </div>
<hr> <hr>
<div class="body"> <div style="text-align: center">
<form id="createForm"> <form id="createForm">
<div class="ulTag"> <div class="ulTag">
<div class="row"> <div class="row">
@@ -44,19 +38,19 @@
</div> </div>
<!-- 설명만 있는 입력 --> <!-- 설명만 있는 입력 -->
<div class="input-group mb-3 w-40 col-centered"> <div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon1">중분류</span> <span class="input-group-text" id="basic-addon2">중분류</span>
<input type="text" name="cls_nm_2" id="cls_nm_2" class="form-control" <input type="text" name="cls_nm_2" id="cls_nm_2" class="form-control"
placeholder="중분류를 입력하세요" aria-label="중분류" value="${dto.cls_nm_2 }" placeholder="중분류를 입력하세요" aria-label="중분류" value="${dto.cls_nm_2 }"
aria-describedby="basic-addon1"> aria-describedby="basic-addon1">
</div> </div>
<div class="input-group mb-3 w-40 col-centered"> <div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon1">소분류</span> <span class="input-group-text" id="basic-addon3">소분류</span>
<input type="text" name="cls_nm_3" id="cls_nm_3" class="form-control" <input type="text" name="cls_nm_3" id="cls_nm_3" class="form-control"
placeholder="소분류를 입력하세요" aria-label="소분류" value="${dto.cls_nm_3 }" placeholder="소분류를 입력하세요" aria-label="소분류" value="${dto.cls_nm_3 }"
aria-describedby="basic-addon1"> aria-describedby="basic-addon1">
</div> </div>
<div class="input-group mb-3 w-40 col-centered"> <div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon1">세분류</span> <span class="input-group-text" id="basic-addon4">세분류</span>
<input type="text" name="cls_nm_4" id="cls_nm_4" class="form-control" <input type="text" name="cls_nm_4" id="cls_nm_4" class="form-control"
placeholder="세분류를 입력하세요" aria-label="세분류" value="${dto.cls_nm_4 }" placeholder="세분류를 입력하세요" aria-label="세분류" value="${dto.cls_nm_4 }"
aria-describedby="basic-addon1"> aria-describedby="basic-addon1">
@@ -68,6 +62,7 @@
<button class="btn btn-outline-secondary" id="checkKan" <button class="btn btn-outline-secondary" id="checkKan"
style="background-color:#FF5E5E;" type="button" style="background-color:#FF5E5E;" type="button"
id="button-addon2">중복확인</button> id="button-addon2">중복확인</button>
<input type='hidden' id='kan_chack' value='0'>
</div> </div>
</div> </div>
</div> </div>
@@ -75,8 +70,9 @@
<div class="row"> <div class="row">
<div class="col-12 "> <div class="col-12 ">
<div class="w-40 col-centered" style="text-align: right"> <div class="w-40 col-centered" style="text-align: right">
<button class="btn btn-success" id="submit">생성</button> <button type="button" class="btn btn-success" id="submitBtn">생성</button>
<button class="btn btn-secondary" id="cancel">취소</button> <button type="button" class="btn btn-secondary" id="cancelBtn">취소</button>
</div> </div>
</div> </div>
</div> </div>
@@ -108,11 +104,12 @@
if (data == "") { if (data == "") {
$("#checkKan").css("background-color", "#4CAF50"); // 파란색 배경으로 변경 $("#checkKan").css("background-color", "#4CAF50"); // 파란색 배경으로 변경
$("#checkKan").text("사용가능"); // 버튼 텍스트 변경 $("#checkKan").text("사용가능"); // 버튼 텍스트 변경
$("#checkKan").append("<input type='hidden' id='kan_chack' value='1'>"); $("#kan_chack").val('1');
} else { } else {
$("#checkKan").css("background-color", "#FF5E5E"); // 원래의 빨간색 배경으로 변경 $("#checkKan").css("background-color", "#FF5E5E"); // 원래의 빨간색 배경으로 변경
$("#checkKan").text("사용불가"); // 버튼 텍스트 변경 $("#checkKan").text("사용불가"); // 버튼 텍스트 변경
$("#kan_chack").val('0'); $("#kan_chack").val('0');
$("#kan_code").focus();
//여기 //여기
} }
}).fail(function() { }).fail(function() {
@@ -124,8 +121,16 @@
});//kan중복체크 기능 });//kan중복체크 기능
$("#kan_code").on("change", function() {
$("#kan_chack").val('0');
$("#checkKan").css("background-color", "#FF5E5E"); // 원래의 빨간색 배경으로 변경
$("#checkKan").text("중복확인");
$("#kan_code").focus();
})//kan_code값이 바뀔때마다 초기화 스크립트
$("#submit").on("click", function(){
$("#submitBtn").on("click", function(){
var clsnm1 = $("#cls_nm_1").val(); var clsnm1 = $("#cls_nm_1").val();
var clsnm2 = $("#cls_nm_2").val(); var clsnm2 = $("#cls_nm_2").val();
var clsnm3 = $("#cls_nm_3").val(); var clsnm3 = $("#cls_nm_3").val();
@@ -133,22 +138,27 @@
var kanCode = $("#kan_code").val(); var kanCode = $("#kan_code").val();
if(!clsnm1){ if(!clsnm1){
alert("대분류를 입력해야 합니다."); alert("대분류를 입력해야 합니다.");
$("#cls_nm_1").focus();
return false; return false;
} }
if(!clsnm2){ if(!clsnm2){
alert("중분류를 입력해야 합니다."); alert("중분류를 입력해야 합니다.");
$("#cls_nm_2").focus();
return false; return false;
} }
if(!clsnm3){ if(!clsnm3){
alert("소분류를 입력해야 합니다."); alert("소분류를 입력해야 합니다.");
$("#cls_nm_3").focus();
return false; return false;
} }
if(!clsnm4){ if(!clsnm4){
alert("세분류를 입력해야 합니다."); alert("세분류를 입력해야 합니다.");
$("#cls_nm_4").focus();
return false; return false;
} }
if( $("#kan_chack").val() != 1){ if( $("#kan_chack").val() != 1){
alert("KAN코드를 입력후 중복체크를 해야합니다."); alert("KAN코드를 입력후 중복체크를 해야합니다.");
$("#kan_code").focus();
return false; return false;
} }
@@ -167,19 +177,34 @@
}).done(function(data) { }).done(function(data) {
if (data == true) { if (data == true) {
alert("카테고리가 생성되었습니다."); alert("카테고리가 생성되었습니다.");
$(location).attr("href", "/category/list")
var form = document.createElement("form");
form.action = "/category/read";
form.method = "POST";
document.body.appendChild(form);
var input = document.createElement("input");
input.type = "hidden";
input.name = "kan_code";
input.value = kanCode;
form.appendChild(input);
form.submit();
} else { } else {
alert("카테고리 생성에 실패하였습니다."); alert("카테고리 생성에 실패하였습니다.");
} }
}).fail(function() { }).fail(function() {
alert("오류가 발생했습니다."); alert("오류가 발생했습니다.");
}).always(function() { }).always(function() {
// Ajax 요청 완료 후 버튼 다시 활성화 //
}); });
}) })
$("#cancelBtn").on("click", function(){
$(location).attr("href", "/category/list");
})

179
src/main/webapp/WEB-INF/views/category/list.jsp
View File

@@ -5,80 +5,137 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>제품 카테고리</title> <title>제품 카테고리</title>
<style type="text/css">
.header-white {
text-align: center;
color: white;
}
</style>
</head> </head>
<body> <body>
<div class="mt-5 mb-5 text-center">
<h1>제품 카테고리 관리</h1>
<div class="header-white">
<h1><b>제품 카테고리 관리</b></h1>
</div> </div>
<hr> <hr>
<div class="body"> <div class="body">
<div class="search12"> <div class="container-fluid">
<form action="categorySearch"> <div class="col-12">
<div class="input-group mb-3 w-30"> <form action="categorySearch">
<div class="w-25"> <div class="input-group mb-3 w-30 col-centered">
<select class="form-select"> <div class="w-25">
<option selected="selected" value="cls_nm_4">세분류</option> <select class="form-select">
<option value="cls_nm_1">대분류</option> <option selected="selected" value="cls_nm_4">세분류</option>
<option value="cls_nm_2">중분류</option> <option value="cls_nm_1">대분류</option>
<option value="cls_nm_3">세분류</option> <option value="cls_nm_2">중분류</option>
<option value="kan_code">KAN코드</option> <option value="cls_nm_3">세분류</option>
</select> <option value="kan_code">KAN코드</option>
</select>
</div>
<input type="text" name="categorySearch" class="form-control" aria-label="Text input with dropdown button" placeholder="검색어를 입력하세요">
<button class="btn btn-info" type="button" id="button-addon2 searchBtn">검색</button>
</div> </div>
<input type="text" name="categorySearch" class="form-control" aria-label="Text input with dropdown button" placeholder="검색어를 입력하세요"> </form>
<button class="btn btn-outline-secondary" style="background-color:aqua;" type="button" id="button-addon2 searchBtn">검색</button> </div>
</div>
<div class="container-fluid">
<div class="row row-table">
<div class="col-12">
<table class="table">
<thead class="table-dark">
<tr>
<th>대분류</th>
<th>중분류</th>
<th>소분류</th>
<th>세분류</th>
<th>KAN코드</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list }" var="dto">
<tr class="detailTr" data-kan_code="${dto.kan_code}" >
<td>${dto.cls_nm_1 }</td>
<td>${dto.cls_nm_2 }</td>
<td>${dto.cls_nm_3 }</td>
<td>${dto.cls_nm_4 }</td>
<td>${dto.kan_code }</td>
</tr>
</c:forEach>
</tbody>
</table>
</div> </div>
</form> </div>
</div> </div>
<div class="table12"> <div class="container-fluid">
<table> <div class="row row-buttons">
<tr> <div class="col-3 text-start">
<th>KAN코드</th> <img alt="엑셀이미지" src="엑셀이미지">
<th>대분류</th> <button type="button" class="btn btn-success" id="uploadExcel">업로드</button>
<th>중분류</th> </div>
<th>소분류</th> <div class="col-6 d-flex justify-content-center">
<th>세분류</th> <nav>
</tr> <ul class="pagination">
<li class="page-item">
<c:forEach items="${list }" var="dto"> <a class="page-link" href="#">&lt;</a>
<tr> </li>
<td>${dto.kan_code }</td> <li class="page-item">
<td>${dto.cls_nm_1 }</td> <a class="page-link" href="#">1</a>
<td>${dto.cls_nm_2 }</td> </li>
<td>${dto.cls_nm_3 }</td> <li class="page-item active">
<td>${dto.cls_nm_4 }</td> <a class="page-link" href="#">2</a>
</tr> </li>
</c:forEach> <li class="page-item">
</table> <a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">6</a>
</li>
<li class="page-item">
<a class="page-link" href="#">&gt;</a>
</li>
</ul>
</nav>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-primary" id="createButton">생성</button>
</div>
</div><!-- row row-buttons -->
</div> </div>
<br>
<div class="uploadExcel">
<img alt="엑셀다운로드 이미지" src="엑셀다운로드 이미지">
<button id="uploadExcel" value="업로드">업로드</button>
</div>
<div class="paging12">
<!-- 페이징 -->
</div>
<div class="createButton">
<button id="createButton" value="생성">생성</button>
</div>
</div> </div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> <script>
$("#createButton").click(function(){
$(location).attr("href", "/category/create")
}) $(document).ready(function(){
//POST방식으로 create폼화면 출력
$("#createButton").on("click",function(){
var form = document.createElement("form");
form.action = "/category/create";
form.method = "POST";
document.body.appendChild(form);
form.submit();
});
$("body").on("click", ".detailTr", function(){
var kan_code = $(this).data("kan_code");
var form = document.createElement("form");
form.action = "/category/read";
form.method = "POST";
document.body.appendChild(form);
var input = document.createElement("input");
input.type = "hidden";
input.name = "kan_code";
input.value = kan_code;
form.appendChild(input);
form.submit();
});
});//ready
</script> </script>
</body> </body>
</html> </html>

95
src/main/webapp/WEB-INF/views/category/read.jsp Normal file
View File

@@ -0,0 +1,95 @@
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제품 카테고리 상세페이지</title>
</head>
<body>
<div class="mt-5 mb-5 text-center">
<h1>제품 카테고리 상세페이지</h1>
</div>
<hr>
<div style="text-align: center">
<form>
<div class="ulTag">
<div class="row">
<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" class="form-control" placeholder="대분류"
aria-label="대분류" value="${dto.cls_nm_1 }" readonly>
</div>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon2">중분류</span> <input
type="text" class="form-control" placeholder="중분류"
aria-label="중분류" value="${dto.cls_nm_2 }" readonly>
</div>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon3">소분류</span> <input
type="text" class="form-control" placeholder="소분류"
aria-label="소분류" value="${dto.cls_nm_3 }" readonly>
</div>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon4">세분류</span> <input
type="text" class="form-control" placeholder="세분류"
aria-label="세분류" value="${dto.cls_nm_4 }" readonly>
</div>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon5">KAN 코드</span> <input
type="text" class="form-control" placeholder="KAN 코드"
aria-label="KAN 코드" value="${dto.kan_code }" id="kan_code" readonly>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 ">
<div class="w-40 col-centered" style="text-align: right">
<button type="button" class="btn btn-primary" id="checkBtn">확인</button>
<button type="button" class="btn btn-warning" id="modifyBtn">수정</button>
</div>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#checkBtn").on("click", function() {
$(location).attr("href", "/category/list");
})//checkBtn click
$("#modifyBtn").on("click", function() {
var kan_code = $("#kan_code").val();
var form = document.createElement("form");
form.action = "/category/update";
form.method = "POST";
document.body.appendChild(form);
var input = document.createElement("input");
input.type = "hidden";
input.name = "kan_code";
input.value = kan_code;
form.appendChild(input);
form.submit();
})//modifyBtn click
});//ready
</script>
</body>
</html>

155
src/main/webapp/WEB-INF/views/category/update.jsp Normal file
View File

@@ -0,0 +1,155 @@
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제품 카테고리 수정페이지</title>
</head>
<body>
<div class="mt-5 mb-5 text-center">
<h1>제품 카테고리 수정페이지</h1>
</div>
<hr>
<div style="text-align: center">
<form>
<div class="ulTag">
<div class="row">
<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" class="form-control" placeholder="대분류" id="cls_nm_1"
aria-label="대분류" value="${dto.cls_nm_1 }">
</div>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon2">중분류</span> <input
type="text" class="form-control" placeholder="중분류" id="cls_nm_2"
aria-label="중분류" value="${dto.cls_nm_2 }">
</div>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon3">소분류</span> <input
type="text" class="form-control" placeholder="소분류" id="cls_nm_3"
aria-label="소분류" value="${dto.cls_nm_3 }">
</div>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon4">세분류</span> <input
type="text" class="form-control" placeholder="세분류" id="cls_nm_4"
aria-label="세분류" value="${dto.cls_nm_4 }">
</div>
<div class="input-group mb-3 w-40 col-centered">
<span class="input-group-text" id="basic-addon5">KAN 코드</span> <input
type="text" class="form-control" placeholder="KAN 코드"
aria-label="KAN 코드" value="${dto.kan_code }" id="kan_code" readonly>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 ">
<div class="w-40 col-centered" style="text-align: right">
<button type="button" class="btn btn-primary" id="updateBtn">수정 완료</button>
<button type="button" class="btn btn-secondary" id="cancelBtn">취소</button>
</div>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#updateBtn").on("click", function() {
var clsnm1 = $("#cls_nm_1").val();
var clsnm2 = $("#cls_nm_2").val();
var clsnm3 = $("#cls_nm_3").val();
var clsnm4 = $("#cls_nm_4").val();
var kan_code = $("#kan_code").val();
if(!clsnm1){
alert("대분류를 입력해야 합니다.");
$("#cls_nm_1").focus();
return false;
}
if(!clsnm2){
alert("중분류를 입력해야 합니다.");
$("#cls_nm_2").focus();
return false;
}
if(!clsnm3){
alert("소분류를 입력해야 합니다.");
$("#cls_nm_3").focus();
return false;
}
if(!clsnm4){
alert("세분류를 입력해야 합니다.");
$("#cls_nm_4").focus();
return false;
}
$.ajax({
url: "/category/update_process",
type: "put",
data: {
"cls_nm_1": clsnm1,
"cls_nm_2": clsnm2,
"cls_nm_3": clsnm3,
"cls_nm_4": clsnm4,
"kan_code": kan_code,
"activation": true
},
datatype:"json"
}).done(function(data) {
if (data == true) {
alert("카테고리를 수정하였습니다.");
var form = document.createElement("form");
form.action = "/category/read";
form.method = "POST";
document.body.appendChild(form);
var input = document.createElement("input");
input.type = "hidden";
input.name = "kan_code";
input.value = kan_code;
form.appendChild(input);
form.submit();
} else {
alert("카테고리 수정에 실패하였습니다.");
}
}).fail(function() {
alert("오류가 발생했습니다.");
}).always(function() {
//
});
});//updateBtn
$("#cancelBtn").on("click", function(){
var kan_code = $("#kan_code").val();
var form = document.createElement("form");
form.action = "/category/read";
form.method = "POST";
document.body.appendChild(form);
var input = document.createElement("input");
input.type = "hidden";
input.name = "kan_code";
input.value = kan_code;
form.appendChild(input);
form.submit();
})
});//ready
</script>
</body>
</html>