feat: drag and drop 이미지 이동 및 저장 구현

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

@@ -3,6 +3,7 @@ package kr.xit.fims.biz.ec.mapper;
 import java.util.List;
 import java.util.Map;
 
+import kr.xit.framework.biz.cmm.model.CmmFileDTO;
 import org.apache.ibatis.session.RowBounds;
 
 import egovframework.rte.psl.dataaccess.mapper.Mapper;
@@ -35,4 +36,11 @@ public interface IEcCtznSttemntMapper {
     void insertRtErppFromCtznStmt(final CtznStmtDTO.Request dto);
 
     void updateStatusAndRegltIdOfEcCtznSttemntDetail(final CtznStmtDTO.Request dto);
+
+    int dragAndDropSaveImg(CmmFileDTO.FileDtl vo);
+
+    int dragAndDropDeleteImg(CmmFileDTO.FileDtl vo);
+
+
+    List<CmmFileDTO> dragAndDropIsExists(CmmFileDTO.FileDtl vo);
 }

src/main/java/kr/xit/fims/biz/ec/service/EcCtznSttemntService.java

@@ -1,9 +1,14 @@
 package kr.xit.fims.biz.ec.service;
 
-import java.util.List;
+import java.util.*;
-import java.util.Map;
+import java.util.function.Predicate;
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
 
+import com.ctc.wstx.util.DataUtil;
+import kr.xit.fims.biz.ec.model.NatlNewspaperRcvReqDTO;
 import org.apache.ibatis.session.RowBounds;
+import org.apache.tiles.request.collection.CollectionUtil;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -15,6 +20,7 @@ import kr.xit.framework.biz.cmm.model.CmmFileDTO;
 import kr.xit.framework.biz.cmm.service.ICmmFileService;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
+import org.springframework.web.bind.annotation.RequestBody;
 
 @Slf4j
 @RequiredArgsConstructor
@@ -112,4 +118,38 @@ public class EcCtznSttemntService implements IEcCtznSttemntService {
         dto.setCtznSttemntStatusCode(FimsConst.CtznSttemntStatusCode.NOT_ACCEPTABLE.getCode());
         mapper.updateStatusAndRegltIdOfEcCtznSttemntDetail(dto);
     }
+
+    @Override
+    @Transactional
+    public void dragAndDropSaveImg(Map<String, Object> paraMap) {
+
+        paraMap.forEach((strKey, obj)->{
+            //Obj 형변환
+            List<Object> listaa = new ArrayList<>();
+            listaa = (List<Object>) obj;
+
+            for(int i=0; i<listaa.size(); i++){
+
+                //파일 마스터 아이디 셋
+                CmmFileDTO.FileDtl vo = new CmmFileDTO.FileDtl();
+                vo.setFileMastrId(strKey);
+                vo.setFileId((String) listaa.get(i));
+                log.info("[paramMap Key] : " + vo.getFileMastrId());
+                log.info("[paramMap Value] : " + vo.getFileId());
+
+
+                //파일디테일 테이블(fileMastr_id, fileId) 조회
+                List selectExist = mapper.dragAndDropIsExists(vo);
+                log.info("Result ==> " + selectExist);
+
+                if(selectExist.isEmpty()){
+                    vo.setFileMastrId(strKey);
+                    //insert
+                    mapper.dragAndDropSaveImg(vo);
+                    //delete
+                    mapper.dragAndDropDeleteImg(vo);
+                }
+            }
+        });
+    }
 }

src/main/java/kr/xit/fims/biz/ec/service/IEcCtznSttemntService.java

@@ -31,4 +31,5 @@ public interface IEcCtznSttemntService {
         return XitCmmnUtil.getUserUniqId();
     }
 
+    void dragAndDropSaveImg(Map<String, Object>paraMap);
 }

src/main/java/kr/xit/fims/biz/ec/web/EcCtznSttemntController.java

@@ -6,10 +6,7 @@ import java.util.stream.Collectors;
 
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.servlet.ModelAndView;
 
 import kr.xit.fims.biz.FimsConst;
@@ -131,4 +128,16 @@ public class EcCtznSttemntController {
         AjaxMessageMapRenderer.success(mav, MessageKey.CMM_INSERT_SUCCESS);
         return mav;
     }
+
+
+
+    @RequestMapping("/saveImg")
+    public ModelAndView saveImg (final CtznStmtDTO dto, @RequestBody Map<String, Object> paraMap) {
+        ModelAndView mav = new ModelAndView(FrameworkConstants.JSON_VIEW);
+
+        service.dragAndDropSaveImg(paraMap);
+
+        AjaxMessageMapRenderer.success(mav, MessageKey.CMM_SUCCESS);
+        return mav;
+    }
 }

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

@@ -179,6 +179,7 @@
 	</insert>
 
 
+
     <update id="updateEcCtznSttemntDetail">
 		/* ec-ctzn-sttemnt-mysql-mapper|updateEcCtznSttemntDetail-시민신고 상세 변경|julim */
 		UPDATE tb_ec_ctzn_sttemnt_detail
@@ -336,4 +337,35 @@
 		/* ec-ctzn-sttemnt-mysql-mapper|selectCtznSttemnts-민원연계(국민신문고) 목록 조회|julim */
 		<include refid="sqlEcCtznStmt"/>
 	</select>
+
+
+	<select id="dragAndDropIsExists" resultType="kr.xit.framework.biz.cmm.model.CmmFileDTO$FileDtl">
+		/* ec-ctzn-sttemnt-mysql-mapper|isExists-드래그앤 드롭 사진저장 조회|cjm */
+		select * from tb_cmm_file_detail
+		where file_mastr_id = #{fileMastrId}
+		and file_id = #{fileId}
+	</select>
+
+	<insert id="dragAndDropSaveImg">
+		insert into tb_cmm_file_detail (
+			select #{fileMastrId},
+			   file_id,
+			   orginl_file_nm,
+			   file_cntnts_ty,
+			   file_extsn,
+			   file_cpcty,
+			   file_cours,
+			   regist_dt,
+			   register
+			from tb_cmm_file_detail
+			where file_id = #{fileId}
+		)
+	</insert>
+	<delete id="dragAndDropDeleteImg">
+		delete from tb_cmm_file_detail
+		where file_mastr_id != #{fileMastrId}
+		and file_id = #{fileId}
+	</delete>
+
+
 </mapper>

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

@@ -220,6 +220,12 @@
 
 		</form>
 
+		<div class="popup_btn">
+				<span class="flr" >
+					<a href="#" class="btn blue" onclick="fnBiz.savePhoto()">save</a>
+				</span>
+		</div>
+
 
 <%--		FIXME: id 고정(변경불가)--%>
 		<div id="imgList"></div>
@@ -261,7 +267,6 @@
 			
 			cmmAjax({
 				showSuccessMsg: false
-				,async: false
 				,url: '<c:url value="/fims/biz/ec/findNatlNewspaperAttchFiles.do"/>'
 				,data: {interfaceSeqN: '${reqDTO.interfaceSeqN}'}
 				,success: (res) => {
@@ -356,6 +361,9 @@
 				,data: $.param(data)
 			})
 		}
+		,savePhoto: () => {
+			dragableSave();
+		}
 	};
 
 	/**************************************************************************

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

@@ -32,6 +32,7 @@ function sttemntImgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
             imgEl = document.createElement("div");
             //FIXME: id 고정(#ctznImg - 변경불가)
             imgEl.setAttribute("id", dtl.fileJobId);
+            imgEl.setAttribute("value", dtl.fileMastrId);
             imgEl.setAttribute("class", "dragDiv")
         }
 
@@ -71,6 +72,9 @@ function sttemntImgDownload(cmmFileDtls, appendElementId, reqDTO, isEditor) {
         document.querySelector('#imgList').appendChild(imgEl);
     })
     dragable();
+    /*orgJSON = dragableOrgdata();*/
+
+    /*orgImg = cmmFileDtls;*/
     //<img src="/resources/framework/images/common/noImage.png"/>
 }
 
@@ -171,18 +175,17 @@ function downloadAll(imgs, ext, limit) {
 function dragable() {
     const draggables = document.querySelectorAll(".draggable");
     const containers = document.querySelectorAll(".dragDiv");
-    console.log('draggable', draggables);
+
 
 
     draggables.forEach(draggable => {
-        console.log(draggable);
         draggable.addEventListener("dragstart", () => {
-            console.log('drag start')
+            console.log('drag start => ', draggable.getAttribute('id'));
             draggable.classList.add("dragging");
         });
 
         draggable.addEventListener("dragend", () => {
-            console.log('drag end')
+            console.log('drag end => ', draggable.getAttribute('data-file-mastr-id'));
             draggable.classList.remove("dragging");
         });
     });
@@ -221,3 +224,39 @@ function getDragAfterElement(container, x) {
 }
 /*이미지 드레그앤 드롭 end*/
 
+
+/*이미지 드레그앤 드롭 저장 start*/
+function dragableSave() {
+    let imgData = {};
+    let imgNode = document.querySelector("#imgList").childNodes;
+    console.log(imgNode);
+
+    for(let i=0; i<imgNode.length; i++) {
+        console.log('imgNode',imgNode[i]);
+        let imgNodeNo = imgNode[i];
+        imgNodeNo = imgNodeNo.attributes.value.value;
+        let imgNodeChild = imgNode[i].children;
+
+        var arr = new Array();
+        imgData[imgNodeNo] = arr;
+
+        for(let i=0; i<imgNodeChild.length; i++){
+            imgData[imgNodeNo].push(imgNodeChild[i].id);
+        }
+    }
+    console.log('final', imgData);
+    const imgEl = imgData;
+    dragableSaveAjax(imgEl);
+}
+
+function dragableSaveAjax(imgEl){
+    cmmAjax({
+        showSuccessMsg: false
+        ,url: "/fims/biz/ec/saveImg.do"
+        ,data: JSON.stringify(imgEl)
+        ,contentType: 'application/json'
+        ,success: (res) => {
+            alert('저장되었습니다.')
+        }
+    })
+}