[제품 가격 History]
두개 이상의 테이블을 컨트롤하는 예제를 처리하기 위해 기존 예제에 적합한
제품 가격이 변경될 때마다 그 내역을 관리할 수 있는 화면을 만들어 보기로 한다.
1. 작성순서
1) 먼저 제품 가격 History를 저장할 수 있는 테이블을 생성하고 조회할 수 있는 화면을 만든다.
(이 부분은 화면생성부분을 참고하기 바랍니다. 여기서는 대략적으로 설명할 예정입니다.)
-Axboot 신규화면 만들기 1~3 참고
Axboot 신규화면 만들기 1 - DB생성 및 서버단 소스생성
Axboot 신규화면 만들기 3 - 정상적인 CRUD를 위한 JAVA소스 수정
2) 이전 단계에서 만든 제품정보의 판매가격 변경 시 제품 가격 History테이블에 저장하는 로직을 추가한다.
2. 구현
1) 제품 History테이블 생성
CREATE TABLE `prdt_price_hist` (
`id` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
`prdt_cd` VARCHAR(20) NOT NULL COMMENT '제품코드',
`ch_date` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '변경일시',
`sales_price` INT(10) NOT NULL DEFAULT '0' COMMENT '판매가격',
`CREATED_AT` DATETIME(6) NULL DEFAULT NULL,
`CREATED_BY` VARCHAR(255) NULL DEFAULT NULL,
`UPDATED_AT` DATETIME(6) NULL DEFAULT NULL,
`UPDATED_BY` VARCHAR(255) NULL DEFAULT NULL,
PRIMARY KEY (`id`)
)
COMMENT='제품가격History'
COLLATE='utf8_general_ci'
ENGINE=InnoDB
AUTO_INCREMENT=42) JAVA 코드 생성
: http://localhost:8080/modelExtractor/db 접속 후 위에서 만들어진 테이블 클릭 후 기본 JAVA코드를 생성하자.
(위 Axboot 신규화면 만들기 1 참조 - 코드생성 시 Package Name : prdt , Class Name : PrdtPriceHist 로 입력)
3) 제품 가격 History 화면소스 만들기
: 간단히 기존에 만들었던 제품 정보 화면 소스를 복사해서 PrdtPriceHist.jsp와 PrdtPriceHist.js 로
이름을 변경한 후 일부만 수정하면 된다.
(추가적으로 위 링크의 화면소스만들기 2를 참고하여 webapp하위의 axboot.config.js 에 js에서 호출할
약식이름과 full명의 mapping설정한다. - "prdtPriceHist":"/api/v1/prdtPriceHist")
- PrdtPriceHist.jsp 수정
<%@ page contentType="text/html; charset=UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="ax" tagdir="/WEB-INF/tags" %> <ax:set key="system-common-code-version" value="1.0.0"/> <ax:set key="title" value="${pageName}"/> <ax:set key="page_desc" value="${pageRemark}"/> <ax:set key="page_auto_height" value="true"/> <ax:layout name="base"> <jsp:attribute name="script"> <ax:script-lang key="ax.script" var="LANG" /> <ax:script-lang key="ax.admin" var="COL" /> <script type="text/javascript" src="<c:url value='/assets/js/view/shopmng/prdtPriceHist.js' />"></script> </jsp:attribute> <jsp:body> <ax:page-buttons></ax:page-buttons> <div role="page-header"> <ax:form name="searchView0"> <ax:tbl clazz="ax-search-tbl" minWidth="500px"> <ax:tr> <ax:td label='ax.admin.search' width="300px"> <ax:input type="text" name="filter" id="filter" clazz="form-control" placeholder="ax.admin.input.search"/> </ax:td> </ax:tr> </ax:tbl> </ax:form> <div class="H10"></div> </div> <ax:split-layout name="ax1" orientation="horizontal"> <ax:split-panel width="*" style=""> <!-- 목록 --> <div class="ax-button-group" data-fit-height-aside="grid-view-01"> <div class="left"> <h2> <i class="cqc-list"></i> <!--<ax:lang id="ax.admin.commoncode.title"/>--> 제품 가격 변경 내역 </h2> </div> <div class="right"> <button type="button" class="btn btn-default" data-grid-view-01-btn="add"><i class="cqc-circle-with-plus"></i> <ax:lang id="ax.admin.add"/></button> <button type="button" class="btn btn-default" data-grid-view-01-btn="delete"><i class="cqc-circle-with-minus"></i> <ax:lang id="ax.admin.delete"/></button> </div> </div> <div data-ax5grid="grid-view-01" data-fit-height-content="grid-view-01" style="height: 300px;"></div> </ax:split-panel> </ax:split-layout> </jsp:body> </ax:layout> |
- PrdtPriceHist.js 수정
var fnObj = {}; var ACTIONS = axboot.actionExtend(fnObj, { PAGE_SEARCH: function (caller, act, data) { axboot.ajax({ type: "GET", url: ["prdtPriceHist"], data: caller.searchView.getData(), callback: function (res) { caller.gridView01.setData(res); } }); return false; }, PAGE_SAVE: function (caller, act, data) { var saveList = [].concat(caller.gridView01.getData("modified")); saveList = saveList.concat(caller.gridView01.getData("deleted")); axboot.ajax({ type: "PUT", url: ["prdtPriceHist"], data: JSON.stringify(saveList), callback: function (res) { ACTIONS.dispatch(ACTIONS.PAGE_SEARCH); axToast.push(LANG("onsave")); } }); }, ITEM_ADD: function (caller, act, data) { caller.gridView01.addRow(); }, ITEM_DEL: function (caller, act, data) { caller.gridView01.delRow("selected"); } }); //기존 제품정보 복사 시 이 부분을 초기 셋팅으로만 변경해준다. fnObj.pageStart = function () { this.pageButtonView.initView(); this.searchView.initView(); this.gridView01.initView(); ACTIONS.dispatch(ACTIONS.PAGE_SEARCH); }; fnObj.pageResize = function () { }; fnObj.pageButtonView = axboot.viewExtend({ initView: function () { axboot.buttonClick(this, "data-page-btn", { "search": function () { ACTIONS.dispatch(ACTIONS.PAGE_SEARCH); }, "save": function () { ACTIONS.dispatch(ACTIONS.PAGE_SAVE); } }); } }); //== view 시작 /** * searchView */ fnObj.searchView = axboot.viewExtend(axboot.searchView, { initView: function () { this.target = $(document["searchView0"]); this.target.attr("onsubmit", "return ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);"); this.filter = $("#filter"); }, getData: function () { return { pageNumber: this.pageNumber, pageSize: this.pageSize, filter: this.filter.val() } } }); /** * gridView */ fnObj.gridView01 = axboot.viewExtend(axboot.gridView, { initView: function () { var _this = this;
this.target = axboot.gridBuilder({ showRowSelector: true, frozenColumnIndex: 0, sortable: true, multipleSelect: true, target: $('[data-ax5grid="grid-view-01"]'), columns: [ {key: "id", label: "id", display: false}, {key: "prdtCd", label: "제품코드", width: 100, align: "center", editor: "text"}, //내부적으로 update 일자를 관리하고 있지만, 그냥 넣어봤음. {key: "chDate", label: "변경일시", width: 150, align: "right", editor: "date"}, {key: "salesPrice", label: "판매가격", width: 150, align: "right", editor: "number"} ], body: { onClick: function () { this.self.select(this.dindex, {selectedClear: true}); } } }); axboot.buttonClick(this, "data-grid-view-01-btn", { "add": function () { ACTIONS.dispatch(ACTIONS.ITEM_ADD); }, "delete": function () { ACTIONS.dispatch(ACTIONS.ITEM_DEL); } }); }, getData: function (_type) { var list = []; var _list = this.target.getList(_type); if (_type == "modified" || _type == "deleted") { list = ax5.util.filter(_list, function () { return this.prdtCd; }); } else { list = _list; } return list; }, addRow: function () { this.target.addRow({__created__: true}, "last"); } }); |
그 다음은 서버를 실행하여 프로그램 및 매뉴관리 화면에서 제품가격History를 추가해준다.
나머지 조회 및 Update(제품정보의 판매가격 수정시 호출)을 위한 JAVA소스 수정은 다음에 게시하고,
오늘은 여기까지만 하도록 하겠습니다.
'오픈소스 > AXBoot프로그래밍' 카테고리의 다른 글
| Axboot 멀티 테이블 수정/저장 예제 (2/2) (11) | 2019.06.06 |
|---|---|
| Axboot 신규화면 만들기 7 - 중복등록체크로직 추가 -2 소스구현 (0) | 2018.11.30 |
| Axboot 신규화면 만들기 7 - 중복등록체크로직 추가 -1 현상/방안 (0) | 2018.11.28 |
| Axboot 신규화면 만들기 6 - 행추가시 초기값(default) 셋팅하기 (0) | 2018.11.28 |
