feat: image-editor paintweb 적용 진행

src/main/java/kr/xit/fims/biz/ec/mapper/IEcCtznSttemntMapper.java

@@ -10,7 +10,7 @@ import kr.xit.fims.biz.ec.model.CtznStmtDTO;
 
 @Mapper
 public interface IEcCtznSttemntMapper {
-    List<CtznStmtDTO> selectEcCtznSttemnts(Map<String, Object> paraMap, RowBounds rowBounds);
+    List<CtznStmtDTO> selectEcCtznSttemnts(final Map<String, Object> paraMap, final RowBounds rowBounds);
     CtznStmtDTO selectEcCtznSttemnt(final CtznStmtDTO.Request dto);
     List<CtznStmtDTO.CtznStmtDtl> selectEcCtznSttemntDetails(final CtznStmtDTO.Request dto);
     CtznStmtDTO.CtznStmtDtl selectEcCtznSttemntDetail(final CtznStmtDTO.Request dto);
@@ -18,4 +18,7 @@ public interface IEcCtznSttemntMapper {
     int insertEcCtznSttemnt(final CtznStmtDTO dto);
 
     int insertEcCtznSttemntDetail(final CtznStmtDTO.CtznStmtDtl dtl);
+
+
+    List<CtznStmtDTO> selectCtznSttemnts(final Map<String, Object> paraMap, final RowBounds rowBounds);
 }

src/main/resources/sqlmapper/biz/ec/ec-ctzn-sttemnt-mysql-mapper.xml

@@ -120,10 +120,14 @@
 	<select id="selectEcCtznSttemntDetails" resultType="kr.xit.fims.biz.ec.model.CtznStmtDTO$CtznStmtDtl">
 		/* ec-ctzn-sttemnt-mysql-mapper|selectEcCtznSttemntDetails-민원연계(국민신문고) 상세(목록) 조회|julim */
 		<include refid="sqlEcCtznStmtDtl"/>
-		 WHERE interface_seq_n = #{interfaceSeqN}
+		<where>
+		 <if test='interfaceSeqN != null and interfaceSeqN != ""'>
+		   AND interface_seq_n = #{interfaceSeqN}
+		 </if>
 		 <if test='ctznSttemntDetailSn != null and ctznSttemntDetailSn != ""'>
 		   AND ctzn_sttemnt_detail_sn = #{ctznSttemntDetailSn}
 		 </if>
+		</where>
 	</select>
 
 	<select id="selectEcCtznSttemntDetail" resultType="kr.xit.fims.biz.ec.model.CtznStmtDTO$CtznStmtDtl">
@@ -174,4 +178,34 @@
 		)
 	</insert>
 
+	<resultMap id="resultMapCtznStmt" type="kr.xit.fims.biz.ec.model.CtznStmtDTO">
+		<result column="interface_seq_n"            property="interfaceSeqN"/>
+		<result column="instt_code"                 property="insttCode"/>
+		<result column="sys_code"                   property="sysCode"/>
+		<result column="cvpl_se"                    property="cvplSe"/>
+		<result column="cvpl_reqst_no"              property="cvplReqstNo"/>
+		<result column="cvpl_rcept_no"             	property="cvplRceptNo"/>
+		<result column="cvpl_applcnt_nm"            property="cvplApplcntNm"/>
+		<result column="cvpl_applcnt_zip"           property="cvplApplcntZip"/>
+		<result column="cvpl_applcnt_adres"         property="cvplApplcntAdres"/>
+		<result column="cvpl_applcnt_moblphon_no"   property="cvplApplcntMoblphonNo"/>
+		<result column="cvpl_applcnt_email_adres"   property="cvplApplcntEmailAdres"/>
+		<result column="cvpl_applcnt_tlphon_no"     property="cvplApplcntTlphonNo"/>
+		<result column="cvpl_reqst_sj"              property="cvplReqstSj"/>
+		<result column="cvpl_reqst_cn"              property="cvplReqstCn"/>
+		<result column="cvpl_reqst_dt"              property="cvplReqstDt"/>
+		<result column="cvpl_rcept_dt"              property="cvplRceptDt"/>
+		<result column="cvpl_process_pd"            property="cvplProcessPd"/>
+		<result column="cvpl_regist_dt"             property="cvplRegistDt"/>
+		<result column="ctzn_sttemnt_process_sttus" property="ctznSttemntProcessSttus"/>
+		<result column="register"                   property="register"/>
+		<result column="updt_dt"                    property="updtDt"/>
+		<result column="updusr"                     property="updusr"/>
+		<collection column="{interfaceSeqN=interface_seq_n}" property="stmtDtlDTOs" select="selectEcCtznSttemntDetails" javaType="List" />
+	</resultMap>
+
+	<select id="selectCtznSttemnts" resultMap="resultMapCtznStmt">
+		/* ec-ctzn-sttemnt-mysql-mapper|selectCtznSttemnts-민원연계(국민신문고) 목록 조회|julim */
+		<include refid="sqlEcCtznStmt"/>
+	</select>
 </mapper>

src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtForm.jsp

@@ -150,6 +150,13 @@
 					}
 				}
 			},
+			{
+				header: '순번',
+				name: 'ctznSttemntDetailSn',
+				width: 80,
+				sortable: false,
+				align: 'center'
+			},
 			{
 				header: '기관코드',
 				name: 'insttCode',
@@ -214,7 +221,8 @@
 			initialRequest: true,  // 화면 load시 조회 안함 - default
 			api: {
 				readData: {
-					url: '<c:url value="/fims/biz/ec/findCtznStmts.do"/>'
+					<%--url: '<c:url value="/fims/biz/ec/findCtznStmts.do"/>'--%>
+					url: '<c:url value="/fims/biz/ec/findCtznStmtDtls.do"/>'
 					,serializer: (params) => fnAddPageInfo(document.frmSearch, params)
 				}
 			}

src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp

@@ -255,6 +255,7 @@
 							x.style = 'height:150px;';
 							//x.setAttribute("width", "304");
 							//x.setAttribute("height", "228");
+							x.setAttribute("title", dtl.orginlFileNm);
 							x.setAttribute("alt", dtl.orginlFileNm);
 							document.querySelector('#ctznImg').appendChild(x);
 

src/main/webapp/resources/framework/js/cmm/cmmDownloadImg.js

@@ -1,4 +1,37 @@
 /* Download an img */
+function imgDownload(cmmFileDtls, appendElementId) {
+    const url = '<c:url value="/framework/biz/cmm/file/download.do"/>';
+    cmmFileDtls.forEach((dtl, idx) => {
+
+        fetch(
+            url
+            , {
+                method: 'post'
+                , body: JSON.stringify(dtl)
+            }
+        )
+            .then((response) => response.blob())
+            .then((blob) => {
+                const url = URL.createObjectURL(blob);
+
+                var x = document.createElement("img");
+                x.setAttribute("src", url);
+                //x.style = 'width:150px; display: block;';
+                x.style = 'height:150px;';
+                //x.setAttribute("width", "304");
+                //x.setAttribute("height", "228");
+                x.setAttribute("title", dtl.orginlFileNm);
+                x.setAttribute("alt", dtl.orginlFileNm);
+                document.querySelector(appendElementId).appendChild(x);
+
+                // Revoke Blob URL after DOM updates..
+                //window.URL.revokeObjectURL(objectURL);
+            }
+        );
+    })
+}
+
+
 function download(img) {
     var link = document.createElement("a");
     link.href = img.src;
@@ -23,7 +56,7 @@ function downloadAll(imgs, ext, limit) {
     /* If specified, filter images by extension */
     if (ext) {
         ext = "." + ext;
-        imgs = [].slice.call(imgs).filter(function(img) {
+        imgs = [].slice.call(imgs).filter(function (img) {
             var src = img.src;
             return (src && (src.indexOf(ext, src.length - ext.length) !== -1));
         });
@@ -61,9 +94,8 @@ function addDownloadBtn() {
     btn.style.top = btn.style.left = "0px";
     document.body.appendChild(btn);
 }
-addDownloadBtn();
-
 
+addDownloadBtn();
 
 
 images = document.querySelectorAll("img");
@@ -89,9 +121,7 @@ for (i of images) {
 }
 
 
-
+for (let i = 1; i < 35; i++) {
-
-for(let i=1; i<35; i++){
     setTimeout(() => {
         fetch(`https://testing-images/images-${i}.jpg`)
             .then(resp => resp.blob())
@@ -107,11 +137,10 @@ for(let i=1; i<35; i++){
                 window.URL.revokeObjectURL(url);
             })
             .catch(() => alert('oh no!'));
-    }, i*1000);
+    }, i * 1000);
 }
 
 
-
 urls.forEach(function (e) {
     fetch(e.download)
         .then(res => res.blob())
@@ -121,15 +150,9 @@ urls.forEach(function (e) {
 });
 
 
-
-
-
-
-
 <div id="tui-image-editor-container"></div>
 
 
-
 <link
     rel="stylesheet"
     href="/resources/3rd-party/tui/image-editor-3.15.3/tui-image-editor.css"
@@ -137,34 +160,34 @@ urls.forEach(function (e) {
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
 <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
 <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
+<script type="text/javascript"
+        src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
 <script type="text/javascript" src="/resources/3rd-party/tui/image-editor-3.15.3/tui-image-editor.js"></script>
 <script type="text/javascript">
 
 
-
+    const options = {
-
-
-const options = {
     includeUI: {
-        loadImage: {
+    loadImage: {
-            path: 'img/sampleImage2.png',
+    path: 'img/sampleImage2.png',
-            name: 'SampleImage'
+    name: 'SampleImage'
-        },
+},
-        //theme: 'blackTheme', // or whiteTheme
+    //theme: 'blackTheme', // or whiteTheme
-        initMenu: 'filter',
+    initMenu: 'filter',
-        menuBarPosition: 'right'
+    menuBarPosition: 'right'
-    },
+},
     cssMaxWidth: 700,
     cssMaxHeight: 500,
     usageStatistics: true,
     selectionStyle: {
-        cornerSize: 20,
+    cornerSize: 20,
-        rotatingPointOffset: 70,
+    rotatingPointOffset: 70,
-    }
+}
 };
-const imageEditor = new tui.ImageEditor(document.querySelector('#tui-image-editor-container'), options);
+    const imageEditor = new tui.ImageEditor(document.querySelector('#tui-image-editor-container'), options
-tui.usageStatistics = false;
+)
-// window.onresize = function() {
+;
+    tui.usageStatistics = false;
+    // window.onresize = function () {
 // 	imageEditor.ui.resizeEditor();
 // }