From 42d09d86ba10ae541f8901e73b6d700b72f1d95b Mon Sep 17 00:00:00 2001 From: minuk926 Date: Thu, 8 Dec 2022 19:23:44 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90?= =?UTF-8?q?=EB=94=94=ED=84=B0=20=EC=A7=84=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../framework/biz/cmm/model/CmmFileDTO.java | 2 + .../biz/cmm/web/CmmFileMgtController.java | 26 ++++++++- .../jsp/fims/biz/ec/ecCtznSttemntMgtForm.jsp | 3 +- .../jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp | 14 +++-- .../jsp/fims/biz/ec/ecNatlNewspaperPopup.jsp | 17 ++++++ .../biz/cmm/file/cmmImageViewPopup.jsp | 42 ++++++++++++++ .../cmm/file/cmmPaintwebImageEditorPopup.jsp | 55 +++++++++++++++++++ src/main/webapp/WEB-INF/jsp/imageEditor.jsp | 36 ++++++------ .../framework/js/cmm/cmmDownloadImg.js | 47 ++++++++++++++-- 9 files changed, 211 insertions(+), 31 deletions(-) create mode 100644 src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmImageViewPopup.jsp create mode 100644 src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp diff --git a/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java b/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java index 7f55982a..b5444261 100644 --- a/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java +++ b/src/main/java/kr/xit/framework/biz/cmm/model/CmmFileDTO.java @@ -106,6 +106,8 @@ public class CmmFileDTO { private String register; private String registDt; + + private String downloadUrl; } @Getter diff --git a/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java b/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java index 62bdb65d..be6a7949 100644 --- a/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java +++ b/src/main/java/kr/xit/framework/biz/cmm/web/CmmFileMgtController.java @@ -17,7 +17,6 @@ import org.springframework.beans.factory.annotation.Value; import org.springframework.http.HttpHeaders; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; -import org.springframework.web.bind.annotation.Mapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; @@ -45,6 +44,22 @@ public class CmmFileMgtController { private String uploadRoot; private final ICmmFileService cmmFileService; + @RequestMapping("/cmmImageViewPopup") + public ModelAndView cmmImageViewPopup(final CmmFileDTO.FileDtl dto) { + ModelAndView mav = new ModelAndView(FrameworkConstants.FRAMEWORK_JSP_BASE_PATH + "cmm/file/cmmImageViewPopup.popup"); + mav.addObject("fileDtlDTO", dto); + // mav.addObject("downloadUrl", downloadUrl); + return mav; + } + + @RequestMapping("/cmmPaintwebImageEditorPopup") + public ModelAndView cmmPaintwebImageEditorPopup(final String imageTagId) { + ModelAndView mav = new ModelAndView(FrameworkConstants.FRAMEWORK_JSP_BASE_PATH + "cmm/file/cmmPaintwebImageEditorPopup.popup"); + mav.addObject("imageTagId", imageTagId); + // mav.addObject("downloadUrl", downloadUrl); + return mav; + } + @GetMapping("/{fileMstId}") public ModelAndView findFiles(@PathVariable("fileMstId") final String fileMstId) { if(Checks.isEmpty(fileMstId)) throw BizRuntimeException.create(MessageKey.CUSTOM_MSG, "대상 파일[fileMstId]을 선택해 주세요."); @@ -130,17 +145,22 @@ public class CmmFileMgtController { //throw new CustomBaseException(ErrorCode.FILE_NOT_FOUND); } - response.setContentType(contentType); response.setHeader(HttpHeaders.CONTENT_TYPE, contentType); response.setHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true"); + response.setHeader("Pragma", "no-cache"); + response.setHeader(HttpHeaders.CACHE_CONTROL, "no-cache, must-revalidate"); + response.setDateHeader(HttpHeaders.EXPIRES, 0); try { response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + URLEncoder.encode(fileName, String.valueOf(StandardCharsets.UTF_8)) + "\";"); } catch (UnsupportedEncodingException e) { throw BizRuntimeException.create(MessageKey.CUSTOM_MSG, e.getMessage()); } - //response.setHeader(HttpHeaders.CONTENT_ENCODING, "binary"); response.setHeader(HttpHeaders.CONTENT_LENGTH, String.valueOf(fileSize)); + response.setContentType(contentType); + + //response.setHeader(HttpHeaders.CONTENT_ENCODING, "binary"); + try { response.getOutputStream().write(fileByte); response.getOutputStream().flush(); diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtForm.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtForm.jsp index a45033f4..8d226b2a 100644 --- a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtForm.jsp +++ b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtForm.jsp @@ -57,6 +57,7 @@ /************************************************************************** * Global Variable **************************************************************************/ + var popup; let GRID = null; var callbackSearch = () => fnBiz.search(); @@ -87,7 +88,7 @@ default: break; } - CmmPopup.open(url, params, popOption, popTitle); + popup = CmmPopup.open(url, params, popOption, popTitle); //var w = window.open("/imageEditor.do", "", "width=800,height=650,top=0px,left=200px,status=,resizable=false,scrollbars=no"); } ,onClickGrid: function(props){ diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp index 75ab85f7..d80e117b 100644 --- a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp +++ b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp @@ -241,6 +241,7 @@ * Global Variable **************************************************************************/ // let orgData; + var imageEditorPopup = (flag, params) => fnBiz.pagePopup(flag, params); /* ******************************* @@ -256,8 +257,8 @@ ,url: '' ,data: {interfaceSeqN: '${reqDTO.interfaceSeqN}'} ,success: (res) => { - console.log('~~~'); - imgDownload(res.data?.contents, '#ctznImg', '${reqDTO.ctznSttemntDetailSn}'); + // 이미지 클릭시 image editor open + imgDownload(res.data?.contents, '#ctznImg', '${reqDTO.ctznSttemntDetailSn}', true); } }) } @@ -267,14 +268,19 @@ let popOption; switch (flag) { case "imageEditor": - url = ''; + url = ''; popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'}; popTitle = "이미지 에디터"; break; + case "imageView": + url = ''; + popOption = {width: 1000, height: 800, resizable:false,scrollbars:'no'}; + popTitle = "이미지 보기"; + break; default: break; } - CmmPopup.open(url, params, popOption, popTitle); + window.opener.popup = CmmPopup.open(url, params, popOption, popTitle); //var w = window.open("/imageEditor.do", "", "width=800,height=650,top=0px,left=200px,status=,resizable=false,scrollbars=no"); } ,viewImg: () => { diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecNatlNewspaperPopup.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecNatlNewspaperPopup.jsp index b1f7995b..7232497b 100644 --- a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecNatlNewspaperPopup.jsp +++ b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecNatlNewspaperPopup.jsp @@ -213,6 +213,7 @@ + + diff --git a/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp b/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp new file mode 100644 index 00000000..278fb48f --- /dev/null +++ b/src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp @@ -0,0 +1,55 @@ +<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> +<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> + + + + + + + PaintWeb + + + + + + + + +
+ + + + + diff --git a/src/main/webapp/WEB-INF/jsp/imageEditor.jsp b/src/main/webapp/WEB-INF/jsp/imageEditor.jsp index 0e006acb..e764deb9 100644 --- a/src/main/webapp/WEB-INF/jsp/imageEditor.jsp +++ b/src/main/webapp/WEB-INF/jsp/imageEditor.jsp @@ -23,23 +23,23 @@ var srcImg = null, img1 =null; (function () { srcImg = window.opener.document.getElementById("uploadImage"); - // img1 = document.getElementById('editableImage'); - // alert(srcImg.src) - // console.log(srcImg) - // img1.src = srcImg.src; - // img1.onload = function () { - // initEditor(); - // img1.style.display = 'none'; - // } + img1 = document.getElementById('editableImage'); + alert(srcImg.src) + console.log(srcImg) + img1.src = srcImg.src; + img1.onload = function () { + initEditor(); + img1.style.display = 'none'; + } - // img1 = document.getElementById('editableImage'); - // alert(srcImg.src) - // console.log(srcImg) - // img1.src = srcImg.src; - srcImg.onload = function () { - initEditor(); - srcImg.style.display = 'none'; - } + // // img1 = document.getElementById('editableImage'); + // // alert(srcImg.src) + // // console.log(srcImg) + // // img1.src = srcImg.src; + // srcImg.onload = function () { + // initEditor(); + // srcImg.style.display = 'none'; + // } })(); @@ -48,8 +48,8 @@ function initEditor() { pw = new PaintWeb(); pw.config.guiPlaceholder = target; pw.config.configFile = 'paintweb-config.json'; - //pw.config.imageLoad = img1; - pw.config.imageLoad = srcImg; + pw.config.imageLoad = img1; + //pw.config.imageLoad = srcImg; pw.config.imageSaveURL = "/saveImage.do"; // imageSave == image upload pw.config.imageDownloadURL = "/fileDownload.do"; diff --git a/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js b/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js index 13400440..3b3a52b8 100644 --- a/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js +++ b/src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js @@ -1,13 +1,54 @@ /* Download an img */ + +/** + * 
+ * 첨부파일 정보 목록으로 부터 이미지 download
+ * 이미지 url 사용
+ * @param {object} cmmFileDtls
+ * @param {string} appendElementId - '#ctznImg'
+ * @param {string} dtlSeq - 시민신고상세순번
+ *
+ */ +function imgDownload(cmmFileDtls, appendElementId, dtlSeq, isEditor) { + const downloadUrl = '/framework/biz/cmm/file/download.do'; + cmmFileDtls.forEach((dtl, idx) => { + + const params = "?" + $.param(dtl); + const title = dtlSeq ? dtl.orginlFileNm+'['+dtlSeq+']' : dtl.orginlFileNm; + const x = document.createElement("img"); + x.setAttribute("src", downloadUrl+params); + x.setAttribute("id", dtl.fileId); + //x.style = 'width:150px; display: block;'; + x.style = 'height:300px;'; + //x.setAttribute("width", "304"); + //x.setAttribute("height", "228"); + x.setAttribute("title", title); + x.setAttribute("alt", dtl.orginlFileNm); + //x.setAttribute("id", dtl.fileMastrId); + x.setAttribute("name", dtl.orginlFileNm); + x.setAttribute("ctznSttemntDetailSn", dtlSeq); + x.addEventListener('click', (e)=>{ + if(isEditor) { + fnBiz.pagePopup('imageEditor', {imageTagId: dtl.fileId}); + }else{ + dtl.downloadUrl = downloadUrl+params; + fnBiz.pagePopup('imageView', dtl); + } + }) + document.querySelector(appendElementId).appendChild(x); + }) +} + /** * 
  * 첨부파일 정보 목록으로 부터 이미지 download
+ * binary 사용시
  * @param {object} cmmFileDtls
  * @param {string} appendElementId - '#ctznImg'
  * @param {string} dtlSeq - 시민신고상세순번
  *
*/ -function imgDownload(cmmFileDtls, appendElementId, dtlSeq) { +function imgDownload2(cmmFileDtls, appendElementId, dtlSeq) { const downloadUrl = '/framework/biz/cmm/file/download.do'; cmmFileDtls.forEach((dtl, idx) => { @@ -35,14 +76,11 @@ function imgDownload(cmmFileDtls, appendElementId, dtlSeq) { x.setAttribute("name", dtl.orginlFileNm); x.setAttribute("ctznSttemntDetailSn", dtlSeq); x.addEventListener('click', (e)=>{ -console.log('~~~~~~~',e); -console.log('~~~~~~~',e.target); $('#uploadImage').attr("src", url); $('#imageEditor').css('display', 'inline-block'); fnBiz.pagePopup('imageEditor'); }) document.querySelector(appendElementId).appendChild(x); - document.querySelector(appendElementId).appendChild(x); // Revoke Blob URL after DOM updates.. //window.URL.revokeObjectURL(objectURL); @@ -51,7 +89,6 @@ console.log('~~~~~~~',e.target); } - function fn_uploadImage() { $("#uploadImageFile").click(); }