[IBSheet] onClick 이벤트로 이미지파일 dialog 띄우기 (직접띄우기 & 자식dialog참조하기)

1. 직접띄우기

2. 자식 dialog 참조하기

 

 

---

 

연휴 내내 놀다가 잠깐 기능하나 추가하는 김에 쓰는 나 .. 나태한 인간 ....

 

일주일이라는 시간 동안 .... 맛있는 거 먹기 + 스팀 게임 raft 하기 + 정처기 쥐똥만큼 보기 + 뜨개질 多 多 多  를 했다.

 

뭔가 시간을 잡아먹지 않고 나에게 도움이 되는 취미를 해보고 싶다는 생각이 들기도 하는데. 이를테면 운동 같은 ?

 

근데 언제 죽을지도 모르는데 .. 그냥 행복한 거 하고 사는 게 나은 것 같기도 하고 .. 모르겠다 ..... 여전히 운동은 아직 재미를 못붙여서 ..

 

가만히 앉아서 여러 가지 소품 뜨는 뜨개질이 제일 재밌고 .. 그저께부터 raft 같은 게임. 나의 수집욕을 자극하는. 그런 게임 재밌고 ....

 

뭐 맛있는 거랑 술 마시는 거는 늘 재밌긴한데 .... 내 몸은 살이 찌고 1년이나 지나버려서 이제 이 몸에 적응한 것 같기도 하고 ..언제 돌아가 ...ㅠㅠ 이젠 정말 내 몸이 아니라 옛날 몸이 되어버렸네 .. 1년이나 지났네 ........ㅎ..

 

여튼...나중에 IBSheet에서 onClick 이벤트를 어떻게 줬는지 잊을 나를 위해 .남겨둡니다. 

 

 

            onClick: function (evtParam) {
                const sheet = evtParam.sheet;
                const clickedRow = evtParam.row;
                if (clickedRow && sheet.getRowKind(clickedRow) === "Data") {
                    if(evtParam.col === 'fileUrl') {
                        const fileSeq = evtParam.row.fileSeq;
                        const fileSerl = evtParam.row.fileSerl;
                        const savedName = sheet.getValue(evtParam.row, "itemName");
                        itemNamePreview.value = savedName;

                        if(fileSeq && fileSerl) {
                            selectedFileInfo.value = {fileSeq, fileSerl};
                            previewImageUrl.value = `../../file/viewFileImage.do?fileSeq=${fileSeq}&fileSerl=${fileSerl}`;
                            // } else {
                            //     // alert.value.open("이미지 파일이 존재하지 않습니다.");
                            //
                            // }
                            fileDialog.value = true;
                        }
                    }
                }
            },

	/**
	 * 이미지 파일 클릭 시 popup 조회용
	 * @param fileSeq
	 * @return
	 * @throws Exception
	 */
	@GetMapping("/viewFileImage.do")
	public ResponseEntity<Resource> viewFileImage(
		@RequestParam Integer fileSeq,
		@RequestParam Integer fileSerl) throws Exception {

		// fileSeq + fileSerl 로 파일 조회
		FileDto.FileItem fileDto = fileService.findFileItemByPK(fileSeq, fileSerl);

		String uploadPath = properties.getFilePath("item");
		String filePath = fileDto.getFilePath();
		String fileName = fileDto.getSavedFileName();

		File file = new File(uploadPath + filePath + fileName);
		if (!file.exists()) {
			return ResponseEntity.notFound().build();
		}

		Resource resource = new UrlResource(file.toURI());

		MediaType mediaType = MediaTypeFactory
			.getMediaType(fileName)
			.orElse(MediaType.APPLICATION_OCTET_STREAM);

		return ResponseEntity.ok()
			.contentType(mediaType)
			.header(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=\"" + fileName + "\"")
			// .header(HttpHeaders.CACHE_CONTROL, "no-cache, no-store, must-revalidate") // 캐싱 방지
			.header("Pragma", "no-cache")
			.header("Expires", "0")
			.body(resource);
	}

 

 

이런 식으로 fileSeq랑 fileSerl 을 가지고 특정 이미지 하나만 출력하는 dialog를 띄웠었는데

 

이제 이미지가 여러 개 들어갈 수도 있기 때문에 + 이미지 출력 dialog를 독립된 컴포넌트로 따로 생성해서,

그걸 참조해서 여기 저기에서 쓰기 때문에.  코드를 바꿉니다.

 

            onClick: function (evtParam) {
                const sheet = evtParam.sheet;
                const clickedRow = evtParam.row;
                if (clickedRow && sheet.getRowKind(clickedRow) === "Data") {
                    if (evtParam.col === 'fileUrl') {
                        const fileSeq = evtParam.row.fileSeq;
                        // const fileSerl = evtParam.row.fileSerl;
                        const itemName = sheet.getValue(evtParam.row, "itemName");

                        if (fileSeq) {
                            imgDialog.value?.open(fileSeq, itemName);
                        }
                    }
                }
            },

 

이제 자식 컴포넌트에게 (ImgDialog.vue) fileSeq와 itemName (타이틀용) 을 넘긴다.

 

그럼 ImgDialog.vue에서

const open = async (fileSeq, itemName = "이미지") => {
    dialogTitle.value = itemName;
    // currentItemSeq.value = itemSeq;
    isOpen.value = true;

    try {
        const res = await axios.get(`../../file/getFileImages.do?fileSeq=${fileSeq}`);
        if (res.data && res.data.length) {
            images.value = res.data.map(f => ({
                fileUrl : f.fileUrl,
                fileSeq : f.fileSeq,
                fileSerl: f.fileSerl
        }));
            currentIndex.value = 0;
        } else {
            images.value = [];
        }

    } catch (e) {
        consoleLog("이미지 로드 실패", e);
        images.value = [];
    }
};

/**
	 * 특정 fileSeq의 이미지 리스트 리턴 (ImgDialog.vue)
	 * @param fileSeq
	 * @return List<Map<String,Object>> JSON
	 */
	@GetMapping("/getFileImages.do")
	public ResponseEntity<List<Map<String, Object>>> getFileImages(@RequestParam Integer fileSeq) {

		List<FileDto.FileItem> files = fileService.getFileImages(fileSeq);

		List<Map<String, Object>> result = files.stream()
			.map(f -> {
				Map<String, Object> m = new HashMap<>();
				m.put("fileSeq", f.getFileSeq());
				m.put("fileSerl", f.getFileSerl());
				m.put("fileUrl", "../../file/viewFileImage.do?fileSeq=" + f.getFileSeq() + "&fileSerl=" + f.getFileSerl());
				return m;
			})
			.collect(Collectors.toList());

		return ResponseEntity.ok(result);
	}

 

이렇게~ 하면 아까 이미지 한 개 출력했던 viewFileImage.do 를 같이 쓸 수 있습니다.