feat : BBS 기능추가 진행
sjh88
2 years ago
parent
826bcf53c3
commit
bf7ac01143
@ -0,0 +1,30 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE form-validation PUBLIC
|
||||
"-//Apache Software Foundation//DTD Commons Validator Rules Configuration 1.1//EN"
|
||||
"http://jakarta.apache.org/commons/dtds/validator_1_1.dtd">
|
||||
|
||||
<form-validation>
|
||||
|
||||
<formset>
|
||||
<form name="boardBasic">
|
||||
<field property="nttSj" depends="required, maxlength">
|
||||
<arg0 key="nttSj" />
|
||||
<arg1 key="1200" resource="false"/>
|
||||
<var>
|
||||
<var-name>maxlength</var-name>
|
||||
<var-value>1200</var-value>
|
||||
</var>
|
||||
</field>
|
||||
<field property="nttCn" depends="required">
|
||||
<arg0 key="nttCn" />
|
||||
</field>
|
||||
<field property="ntceBeginDe" depends="required">
|
||||
<arg0 key="ntceBeginDe" />
|
||||
</field>
|
||||
<field property="ntceEndDe" depends="required">
|
||||
<arg0 key="ntceEndDe" />
|
||||
</field>
|
||||
</form>
|
||||
</formset>
|
||||
|
||||
</form-validation>
|
||||
@ -0,0 +1,226 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
|
||||
<form name="frmSearch" id="frmSearch">
|
||||
<div class="search r2">
|
||||
<table>
|
||||
<caption>검색조건</caption>
|
||||
<colgroup>
|
||||
<col style="width: 500px;"/>
|
||||
<col/>
|
||||
<col/>
|
||||
<col/>
|
||||
<col/>
|
||||
<col/>
|
||||
<col/>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<select id="searchCondition" name="searchCondition" title="조회조건">
|
||||
<option value="nttSj">제목</option>
|
||||
<option value="nttCn">내용</option>
|
||||
<option value="ntcrNm">작성자</option>
|
||||
</select>
|
||||
<input title="검색값입력" id="searchKeyword" name="searchKeyword" type="text" size="35" maxlength="35" >
|
||||
</td>
|
||||
<td rowspan="2">
|
||||
<input type="button" id="btnSearch" class="btn_search" title="검색" value="검색" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
<!-- //검색 -->
|
||||
|
||||
<div class="page_btn">
|
||||
<span class="fll">
|
||||
<div class="list clearfix" id="totCnt">전체 ㅣ <span></span></div>
|
||||
</span>
|
||||
<span class="flr">
|
||||
<a href="#" class="btn darkgray" id="btnRegist" title="권한등록">등록</a>
|
||||
</span>
|
||||
</div>
|
||||
<!-- //버튼 및 페이지정보 -->
|
||||
|
||||
<!-- 데이터 출력 -->
|
||||
<div id="grid"></div>
|
||||
|
||||
|
||||
<script type="text/javaScript">
|
||||
/**************************************************************************
|
||||
* Global Variable
|
||||
**************************************************************************/
|
||||
let GRID = null;
|
||||
const boardMaster = {
|
||||
"bbsId": '<c:out value="${boardMaster.bbsId}"/>',
|
||||
"bbsAttrbCode": '<c:out value="${boardMaster.bbsAttrbCode}"/>',
|
||||
"fileAtchPosblAt": '<c:out value="${boardMaster.fileAtchPosblAt}"/>',
|
||||
"atchPosblFileNumber": '<c:out value="${boardMaster.atchPosblFileNumber}"/>'
|
||||
};
|
||||
var callbackSearch = () => fnBiz.search();
|
||||
|
||||
|
||||
/* *******************************
|
||||
* Biz function
|
||||
******************************* */
|
||||
const fnBiz = {
|
||||
search: () => {
|
||||
GRID.reloadData();
|
||||
}
|
||||
,pagePopup: function(flag, params){
|
||||
<%--let url = '<c:url value="/framework/biz/mng/bbs/mngBoardBasicMgtPopup.do"/>';--%>
|
||||
let url = frwkApiUrl.POPUP_BOARD_BASIC;
|
||||
let popTitle;
|
||||
let popOption = {width: 950, height:550};
|
||||
switch (flag) {
|
||||
case "add": //등록
|
||||
popTitle = "게시글 생성 등록";
|
||||
break;
|
||||
case "detail": //상세
|
||||
popTitle = "게시글 생성 상세";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
$.blockUI({message: '' ,css: {width: '100%', height: '100%'}
|
||||
//모달창 외부 클릭시 닫기
|
||||
,onOverlayClick: () => {
|
||||
$.unblockUI();
|
||||
popup.self.close();
|
||||
}
|
||||
});
|
||||
CmmPopup.open(url, params, popOption, popTitle);
|
||||
}
|
||||
,onClickGrid: function(props){
|
||||
const rowData = props.grid.getRow(props.rowKey);
|
||||
fnBiz.pagePopup('detail', rowData);
|
||||
}
|
||||
,onSearchChange: () => {
|
||||
if($('#searchCondition').val() === 'tmplatSeCode'){
|
||||
$('select[name="searchKeyword"]')
|
||||
.css('display', 'inline-block')
|
||||
.attr('disabled', false);
|
||||
$('input[name="searchKeyword"]')
|
||||
.css('display', 'none')
|
||||
.attr('disabled', true);
|
||||
}else{
|
||||
$('select[name="searchKeyword"]')
|
||||
.css('display', 'none')
|
||||
.attr('disabled', true);
|
||||
$('input[name="searchKeyword"]')
|
||||
.css('display', 'inline-block')
|
||||
.attr('disabled', false);
|
||||
}
|
||||
}
|
||||
,onClickAnswerPopup: function(props) {
|
||||
const rowData = props.grid.getRow(props.rowKey);
|
||||
$.blockUI({
|
||||
message: '', css: {width: '100%', height: '100%'}
|
||||
//모달창 외부 클릭시 닫기
|
||||
, onOverlayClick: () => {
|
||||
$.unblockUI();
|
||||
popup?.self?.close();
|
||||
}
|
||||
});
|
||||
fnBiz.pagePopup('answer', {interfaceSeqN: rowData.interfaceSeqN});
|
||||
}
|
||||
}
|
||||
|
||||
/**************************************************************************
|
||||
* event
|
||||
**************************************************************************/
|
||||
$(() => {
|
||||
$('#btnSearch').on('click', () => fnBiz.search());
|
||||
|
||||
$('#btnRegist').on('click', () => {
|
||||
fnBiz.pagePopup('add', Object.assign({},boardMaster));
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/* *******************************
|
||||
* Grid
|
||||
******************************* */
|
||||
const initGrid = () => {
|
||||
const gridColumns = [
|
||||
{
|
||||
header: '제목',
|
||||
name: 'nttSj',
|
||||
minWidth: 120,
|
||||
sortable: true,
|
||||
sortingType: 'desc',
|
||||
//align: 'center',
|
||||
renderer: {
|
||||
type: CustomButtonRenderer,
|
||||
options: {
|
||||
formatter: (props) => {
|
||||
return {
|
||||
formatter: props.grid.getRow(props.rowKey).nttSj
|
||||
,element : "text"
|
||||
}
|
||||
}
|
||||
,eventFunction: fnBiz.onClickGrid
|
||||
,eventType: "click"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
header: '작성자',
|
||||
name: 'frstRegisterNm',
|
||||
width: 80,
|
||||
sortable: false,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
header: '작성일',
|
||||
name: 'frstRegistPnttm',
|
||||
width: 160,
|
||||
sortable: false,
|
||||
align: 'center',
|
||||
formatter({value}){
|
||||
return setDateTimeFmt(value.substring(0,10));
|
||||
}
|
||||
},
|
||||
{
|
||||
header: '조회수',
|
||||
name: 'inqireCo',
|
||||
width: 80,
|
||||
sortable: false,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
const gridOptions = {
|
||||
el: 'grid',
|
||||
rowHeaders: ['rowNum'],
|
||||
columns: gridColumns
|
||||
};
|
||||
|
||||
const gridDatasource = {
|
||||
initialRequest: true, // 화면 load시 조회 안함 - default
|
||||
api: {
|
||||
readData: {
|
||||
<%--url: '<c:url value="/framework/biz/mng/bbs/findBoardBasics.do"/>'--%>
|
||||
url: frwkApiUrl.FIND_BOARD_BASICS
|
||||
,serializer: (params) => {
|
||||
const schKey = $('#searchCondition').val();
|
||||
let schValue = $('input[name=searchKeyword]').val();
|
||||
params = Object.assign(params,boardMaster);
|
||||
return getPageParam({[schKey]: schValue}, params);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
GRID = TuiGrid.of(gridOptions, gridDatasource, (res) => {
|
||||
});
|
||||
}
|
||||
|
||||
/**************************************************************************
|
||||
* initialize
|
||||
**************************************************************************/
|
||||
$(document).ready(function(){
|
||||
initGrid();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,268 @@
|
||||
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
|
||||
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
|
||||
|
||||
<c:set var="isUpdate" value="${!empty boardBasic.nttSj}"/>
|
||||
<c:set var="bizName" value="게시글 생성"/>
|
||||
|
||||
<script type="text/javascript" src="<c:url value="/framework/util/validator.do"/>"></script>
|
||||
<validator:javascript formName="boardBasic" staticJavascript="false" xhtml="true" cdata="false"/>
|
||||
|
||||
<div class="popup" style="min-width: 100px;">
|
||||
<div class="popup_inner" style="max-width: 800px;">
|
||||
<%@include file="/WEB-INF/jsp/framework/biz-popup-title.jsp" %>
|
||||
|
||||
<%--@elvariable id="boardBasic" type="validator"--%>
|
||||
<form:form commandName="boardBasic" name="boardBasic" method="post" enctype="multipart/form-data">
|
||||
<table class="tbl03">
|
||||
<caption><c:out value="${bizName}"/> 등록 / 변경</caption>
|
||||
<colgroup>
|
||||
<col style="width: 15%;"/>
|
||||
<col style="width: 35%;"/>
|
||||
<col style="width: 15%;"/>
|
||||
<col style="width: 35%;"/>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="required" scope="row" nowrap>
|
||||
<label for="nttSj">게시글명</label>
|
||||
</th>
|
||||
<td colspan="3">
|
||||
<form:input path="nttSj" size="60" maxlength="60" title="게시글명"/>
|
||||
<form:errors path="nttSj" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="required" scope="row" nowrap>
|
||||
<label for="nttCn">게시글 소개</label>
|
||||
</th>
|
||||
<td colspan="3">
|
||||
<form:textarea path="nttCn" cols="75" rows="4" title="게시글소개"/>
|
||||
<form:errors path="nttCn" />
|
||||
</td>
|
||||
</tr>
|
||||
<c:choose>
|
||||
<c:when test="${boardBasic.bbsAttrbCode == 'BBSA01'}">
|
||||
<tr>
|
||||
<th class="required" scope="row" nowrap>
|
||||
<label for="ntceBeginDe">게시기간</label>
|
||||
</th>
|
||||
<td colspan="3">
|
||||
<input id="ntceBeginDe" class="inputText cal" name="ntceBeginDe" type="text" title="시작 날짜 선택" value="">
|
||||
<button type="button" name="ntceBeginDe" class="calendar"><span class="ico far fa-calendar-alt">
|
||||
<img style="width:18px;" src="${ctx }/resources/biz/content/images/common/main/calendar.png"/><em>달력</em></span>
|
||||
</button>
|
||||
~
|
||||
<input id="ntceEndDe" class="inputText cal" name="ntceEndDe" type="text" title="종료 날짜 선택" placeholder="날짜를 선택하세요">
|
||||
<button type="button" name="ntceEndDe" class="calendar"><span class="ico far fa-calendar-alt">
|
||||
<img style="width:18px;" src="${ctx }/resources/biz/content/images/common/main/calendar.png"/><em>달력</em></span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<input name="ntceBeginDe" type="hidden" value="10000101">
|
||||
<input name="ntceEndDe" type="hidden" value="99991231">
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
<c:if test="${boardBasic.fileAtchPosblAt == 'Y'}">
|
||||
<tr>
|
||||
<th height="23"><label for="files">파일첨부</label></th>
|
||||
<td colspan="3">
|
||||
<input id="files" type="file" multiple />
|
||||
<div id="preview"></div>
|
||||
<span id="warnMsg" style="color: red; font-weight: bold; display: inline-block">동일한 데이타 선택시 중복 처리될수 있습니다.</span>
|
||||
</td>
|
||||
</tr>
|
||||
</c:if>
|
||||
</tbody>
|
||||
</table>
|
||||
</form:form>
|
||||
<%@include file="/WEB-INF/jsp/framework/biz-popup-use-btn.jsp" %>
|
||||
<!-- //등록버튼 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- //popup -->
|
||||
|
||||
<script type="text/javascript">
|
||||
/**************************************************************************
|
||||
* Global Variable
|
||||
**************************************************************************/
|
||||
let orgData;
|
||||
let arrFiles = [];
|
||||
const maxFileNum = nvl('<c:out value="${boardBasic.atchPosblFileNumber}"/>', 3);
|
||||
const bbsId = '<c:out value="${boardBasic.bbsId}"/>';
|
||||
const preview = document.getElementById('preview');
|
||||
|
||||
/* *******************************
|
||||
* Biz function
|
||||
******************************* */
|
||||
const fnBiz = {
|
||||
add: () => {
|
||||
if (!fnBiz.validate()) return;
|
||||
|
||||
const formData = fnBiz.formSetting('add');
|
||||
cmmBizAjax('add', {
|
||||
<%--url: '<c:url value="/framework/biz/mng/bbs/addBoardBasic.do"/>'--%>
|
||||
url: frwkApiUrl.SAVE_BOARD_BASIC
|
||||
, data: formData
|
||||
, processData: false
|
||||
, contentType: false
|
||||
})
|
||||
}
|
||||
,modify: () => {
|
||||
if (!fnBiz.validate()) return;
|
||||
|
||||
const formData = fnBiz.formSetting('modify');
|
||||
cmmBizAjax('modify', {
|
||||
<%--url: '<c:url value="/framework/biz/mng/bbs/modifyBoardBasic.do"/>'--%>
|
||||
url: frwkApiUrl.MODIFY_BOARD_BASIC
|
||||
,data: formData
|
||||
});
|
||||
}
|
||||
,remove: () => {
|
||||
const formData = fnBiz.formSetting('remove');
|
||||
cmmBizAjax('remove', {
|
||||
<%--url: '<c:url value="/framework/biz/mng/bbs/removeBoardBasic.do"/>'--%>
|
||||
url: frwkApiUrl.REMOVE_BOARD_BASIC
|
||||
,data: formData
|
||||
});
|
||||
}
|
||||
,validate: () => {
|
||||
if(orgData === $('form').serialize()){
|
||||
alert('변경된 내용이 없습니다.');
|
||||
return false;
|
||||
}
|
||||
if(!validateBoardBasic(document.getElementById("boardBasic"))) return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
,formSetting: (e) => {
|
||||
const formTemp = new FormData($("#boardBasic")[0]);
|
||||
formTemp.append("bbsId", bbsId);
|
||||
formTemp.append("jobSeCode", "");
|
||||
if (e === "add"){
|
||||
formTemp.append("replyAt", "N");
|
||||
if(arrFiles.length > 0) arrFiles.forEach((f)=> {
|
||||
formTemp.append("files", f)
|
||||
})
|
||||
}
|
||||
if (e === "modify"){
|
||||
if(arrFiles.length > 0) arrFiles.forEach((f)=> {
|
||||
formTemp.append("files", f)
|
||||
})
|
||||
}
|
||||
if (e === "remove") formTemp.append("useAt", "N");
|
||||
return formTemp;
|
||||
}
|
||||
,fileSelect: (e) => {
|
||||
const files = e.target.files;
|
||||
|
||||
if(arrFiles.length + files.length > maxFileNum){
|
||||
let msgTemp = "업로드 파일 개수는 최대 " + maxFileNum + "개 등록 가능합니다.";
|
||||
if(files.length > maxFileNum){
|
||||
alert(msgTemp + " 다시 입력해주세요.");
|
||||
e.target.value = "";
|
||||
return false;
|
||||
}
|
||||
if(confirm(msgTemp + " \n 기존에 등록된 자료를 초기화 후 등록하시겠습니까?")) {
|
||||
arrFiles = [];
|
||||
preview.innerHTML = "";
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
fnBiz.fileArray(files, "add");
|
||||
}
|
||||
,fileRemove: (e) => {//x버튼 클릭 했을 시
|
||||
const fileInput = document.getElementById('files');
|
||||
const removeTargetId = e.dataset.index;
|
||||
let dataTranster = new DataTransfer();
|
||||
|
||||
for(let i = 0; i < arrFiles.length; i++){
|
||||
if(removeTargetId != arrFiles[i].lastModified + "_" + i) dataTranster.items.add(arrFiles[i]);
|
||||
}
|
||||
|
||||
fileInput.files = dataTranster.files;
|
||||
$("#"+removeTargetId).remove();
|
||||
fnBiz.fileArray(fileInput.files, "remove");
|
||||
}
|
||||
,fileArray: (files, proc) => {
|
||||
//초기화
|
||||
if(proc === "remove") arrFiles = [];
|
||||
|
||||
const promise1 = new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
for(let i=0; i< files.length; i++){
|
||||
arrFiles.push(files[i]);
|
||||
}
|
||||
}, 100);
|
||||
resolve("Done1");
|
||||
});
|
||||
|
||||
const promise2 = new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
preview.innerHTML = "";
|
||||
for (let i=0; i<arrFiles.length; i++) {
|
||||
preview.innerHTML +=
|
||||
"<p id='" + arrFiles[i].lastModified + "_" + i + "'> " + arrFiles[i].name
|
||||
+ "<button data-index='" + arrFiles[i].lastModified + "_" + i + "' onClick='fnBiz.fileRemove(this)' class='file-remove'>X</button> </p>";
|
||||
}
|
||||
}, 100);
|
||||
resolve("Done2");
|
||||
});
|
||||
|
||||
Promise.all([promise1, promise2])
|
||||
.then((result) => console.log(result))
|
||||
.catch((e) => console.error(e));
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
/**************************************************************************
|
||||
* event
|
||||
**************************************************************************/
|
||||
$(() => {
|
||||
$(window).on("unload", function (e) {
|
||||
window.opener?.unblockUI();
|
||||
return null;
|
||||
});
|
||||
|
||||
$("#btnClose").on('click', () => {
|
||||
window.opener?.unblockUI();
|
||||
window.close()
|
||||
});
|
||||
|
||||
$('#btnRegist').on('click', () => {
|
||||
fnBiz.add();
|
||||
});
|
||||
|
||||
$('#btnModify').on('click', () => {
|
||||
fnBiz.modify();
|
||||
});
|
||||
|
||||
$('#btnPreview').on('click', () => {
|
||||
fnBiz.preview();
|
||||
});
|
||||
|
||||
$('#btnRemove').on('click', () => {
|
||||
fnBiz.remove();
|
||||
});
|
||||
|
||||
$('#files').on('change', function(e) {
|
||||
fnBiz.fileSelect(e)
|
||||
});
|
||||
});
|
||||
|
||||
/**************************************************************************
|
||||
* initialize
|
||||
**************************************************************************/
|
||||
$(document).ready(function () {
|
||||
// $('#ntceBeginDe').datepicker('setDate', new Date());
|
||||
// $('#ntceEndDe').datepicker('setDate', new Date());
|
||||
|
||||
$('#ntceBeginDe').datepicker('setDate', new Date());
|
||||
$('#ntceEndDe').datepicker('setDate', '99991231');
|
||||
orgData = $('form').serialize();
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue