xit-app
/
adds-fo
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

폐기이미지 추가 기능 추가

Browse Source
dev
이범준 5 months ago
parent a1c5603a54
commit c96bd383d4
2 changed files with 110 additions and 10 deletions
Show Stats Download Patch File Download Diff File

118
src/main/webapp/WEB-INF/jsp/adds/nims/dsuseMgtRslt-info.jsp
Unescape Escape View File

@ -75,13 +75,28 @@
<label for="dsuseLoc--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">폐기장소</label>
<input type="text" class="form-control w-80" id="dsuseLoc--${pageName}" name="dsuseLoc" data-map="DSUSE_LOC">
</div>
<div class="col-md-4">
<label for="dsuseImg--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">폐기이미지</label>
<input type="text" class="form-control w-60" id="dsuseImg--${pageName}" name="dsuseImg" data-map="DSUSE_IMG" readonly>
<div class="col-md-12">
<span class="d-inline-flex">
<label for="dsuseImg--${pageName}"
class="w-px-130 h-px-30 bg-lighter pe-2 col-form-label text-sm-end">폐기이미지</label>
<button type="button" class="btn btn-primary mx-1"
onclick="$('#inputUploadSet--${pageName}').trigger('click');">추가</button>
<button type="button" class="btn btn-primary mx-1"
id="btnImageDel--${pageName}" hidden>삭제</button>
</span>
</div>
<div class="col-md-12">
<div class="border-card rounded w-100 h-px-250 ox-scroll align-content-center">
<ul id="dragAndDrop--${pageName}" class="d-inline-flex">
</ul>
</div>
</div>
</div>
<div class="row my-1 mx-1 g-1 border-card rounded"></div>
</form> <!-- /입력 영역 -->
<input type="file" accept="image/*" id="inputUploadSet--${pageName}" hidden multiple />
</div> <!-- <div class="card"> -->
<!-- 업무 버튼 표시 -->
@ -98,6 +113,17 @@
</div> <!-- / Content <div class="container flex-grow-1 px-0"> -->
</div> <!-- / inner page html <div class="content-wrapper"> -->
<template id="imgRadioTemplate--${pageName}">
<li class="d-flex">
<label class='mx-1 d-flex flex-row'>
<input type="radio" name="{name}" class="form-check-input" value="{value}" checked="" />
<div class="position-relative">
<img src="{src}" width='200' height='200' />
</div>
</label>
</li>
</template>
<script>
/**************************************************************************
* Global Variable
@ -110,7 +136,9 @@
$(document).ready(function() {
// pageObject
let $P = pageObject["${pageName}"];
$P.fileArr = [];
// FormFields
$P.formFields = new FimsFormFields("#frmEdit--${pageName}");
@ -164,8 +192,7 @@
// Dataset 셋팅
$P.formFields.set($P.control, item);
// 업무구분에 따른 URL 변경
$P.fnSetURL(item.data.TASK_SE_CD);
}
// 저장 callback
@ -217,7 +244,22 @@
});
}
//uploadSupport 생성
$P.uploadSet = uploadSupport("#inputUploadSet--${pageName}");
$P.uploadSet.onDatasetChange = () => {
var files = $P.uploadSet.getDataset();
if(files != null && files.length > 0){
for(var i=0;i < files.length; i++){
$P.fileArr.push(files[i]);
}
}
$P.fnDisplay();
};
/**************************************************************************
* DataTables 이벤트
**************************************************************************/
@ -266,12 +308,44 @@
/**************************************************************************
* 사용자 함수(function)
**************************************************************************/
// 업무구분에 따른 URL 설정
$P.fnSetURL = (taskSeCd) => {
//$P.control.urls.create = wctx.url("/" + taskSeCd + "${infoPrefixUrl}" + "/040/create.do"); // 등록
//$P.control.urls.update = wctx.url("/" + taskSeCd + "${infoPrefixUrl}" + "/040/update.do"); // 수정
// 이미지 표시
$P.fnDisplay = () => {
if($P.fileArr.length > 0){
var tagsText = $P.fnMakeImgTags($P.fileArr);
document.querySelector("#dragAndDrop--${pageName}").innerHTML = tagsText;
$("#btnImageDel--${pageName}").removeAttr("hidden");
} else {
document.querySelector("#dragAndDrop--${pageName}").innerHTML = "";
$("#btnImageDel--${pageName}").attr("hidden","hidden");
}
}
// HTML 태그(img,radio) 문자열 생성
$P.fnMakeImgTags = (fileArr) => {
var tagsTextArr = [];
for(var index = 0; index < fileArr.length; index++){
var item = fileArr[index];
var template = document.getElementById("imgRadioTemplate--${pageName}").innerHTML;
template = template.replace(/{name}/gi, "dsusePrdImgFilesSlector");
template = template.replace(/{value}/gi, item.id);
if(index != 0){
template = template.replace("checked=\"\"", "");
}
template = template.replace(/{src}/gi, item.url);
tagsTextArr.push(template);
}
return tagsTextArr.join("");
}
// 전자우편 안내문 등록 버튼 이벤트
$P.fnSearchBssh = (title) => {
$P.control.getBsshInfo();
@ -304,12 +378,36 @@
$P.fnSearchBssh($(this).attr("title"));
});
//이미지 삭제 버튼
$("#btnImageDel--${pageName}").on("click", function() {
var key = $("#dragAndDrop--${pageName}").find(":radio[name='dsusePrdImgFilesSlector']:checked").val();
$P.fileArr = $P.fileArr.filter((element) => element.id != key);
$P.fnDisplay();
});
// 버튼 이벤트
$("#btnSave--${pageName}").on("click", () => $P.fnSave()); // 저장
}
// 초기 화면 설정
$P.initForm = () => {
//드래그로 이미지 순서 변경
Sortable.create(document.getElementById("dragAndDrop--${pageName}"), {
onEnd : function(evt){
if(evt.oldIndex != evt.newIndex){
let tmp = $P.fileArr[evt.oldIndex];
$P.fileArr[evt.oldIndex] = $P.fileArr[evt.newIndex];
$P.fileArr[evt.newIndex] = tmp;
$P.fnDisplay();
}
}
});
// Dialog 마우스로 드래그 할 수 있도록 설정.
// fnMakeDraggableDialog(document.getElementById($P.control.prefix + "Dialog"));

2
src/main/webapp/WEB-INF/jsp/include/tail.jsp
Unescape Escape View File

@ -33,6 +33,7 @@
<!-- 전체화면 비활성화 -->
<script src="<c:url value="/webjars/3rd-party/sneat/libs/block-ui/block-ui.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/libs/sortablejs/sortable.js"/>"></script>
<script src="<c:url value="/resources/js/base/fimsFormFields.js?${ver}"/>"></script>
@ -46,6 +47,7 @@
<script src="<c:url value="/webjars/applib/js/componentization.js?${ver}"/>"></script>
<script src="<c:url value="/resources/js/adds/cmmn/componentization.js?${ver}"/>"></script>
<!-- endbuild -->
<c:set var="functions" scope="request">
wctx.path = "${pageContext.request.contextPath}";

Write Preview
Loading…
Cancel
Save