File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content">
<div class="sub-title-area mb-30">
<h2>사진 기록물</h2>
<div class="breadcrumb-list">
<ul>
<li>
<img :src="homeicon" alt="Home Icon">
<p>기록물</p>
</li>
<li><img :src="righticon" alt=""></li>
<li>사진 기록물</li>
</ul>
</div>
</div>
<form class="gallery-form mb-40" @submit.prevent>
<dl class="mb-20">
<dd>
<p>{{ findResult.sj }}</p>
<div class="date flex align-center">
<img :src="calendaricon" alt="">
<span>{{ $dotFormatDate(findResult.rgsde) }}</span>
</div>
</dd>
</dl>
<div>
<div class="gallery">
<div class="main-swiper">
<swiper :style="{ '--swiper-navigation-color': '#fff', '--swiper-pagination-color': '#fff' }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2">
<swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
<img :src="item.filePath" :alt="item.fileNm" />
</swiper-slide>
</swiper>
</div>
<div class="thumbnail">
<swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
<swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
<input type="checkbox" :id="'photo_' + idx" :value="item.fileId" v-model="selectedFiles" />
<img :src="item.filePath" :alt="item.fileNm" />
</swiper-slide>
</swiper>
</div>
</div>
<div class="btn-group">
<button class="select-down" @click="fnDownload('selected')">선택 다운로드</button>
<button class="all-down" @click="fnDownload('all')">전체 다운로드</button>
</div>
</div>
</form>
<h3>내용</h3>
<form class="info-form mb-50" @submit.prevent>
<dl>
<dd>
<ViewerComponent :content="findResult.cn" />
</dd>
</dl>
</form>
<h3>기본정보</h3>
<form class="info-form mb-50" @submit.prevent>
<dl>
<dd class="mb-20">
<img :src="addressicon" alt="">
<span>주소</span>
<p>{{ findResult.adres }}</p>
</dd>
<dd class="mb-20">
<img :src="yearicon" alt="">
<span>생산연도</span>
<p>{{ $dotFormatDate(findResult.prdctnYear) }}</p>
</dd>
<dd>
<img :src="categoryicon" alt="">
<span>카테고리</span>
<ul class="category">
<li v-for="(item, idx) of findResult.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
</ul>
</dd>
</dl>
</form>
<div class="btn-group flex-center">
<button class="red-line " type="button" @click="fnDelete">삭제</button>
<button class="blue-line " type="button" @click="fnMoveTo('edit', pageId)">수정</button>
<button class="gray-line-bg " type="button" @click="fnMoveTo('list')">목록</button>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
// Import Swiper Vue components
import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';
// import required modules
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
// COMPONENT
import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
// API
import { findDcryProc, deleteDcryProc } from '@/resources/api/dcry';
import { fileDownloadProc, multiFileDownloadProc } from '@/resources/api/file';
export default {
components: {
PauseOutlined,
CaretRightOutlined,
Swiper,
SwiperSlide,
ViewerComponent,
},
setup() {
const thumbsSwiper = ref(null);
const setThumbsSwiper = (swiper) => {
thumbsSwiper.value = swiper;
};
return {
thumbsSwiper,
setThumbsSwiper,
modules: [FreeMode, Navigation, Thumbs],
};
},
data() {
return {
// ICON
calendaricon: 'client/resources/images/icon/calendaricon.png',
homeicon: 'client/resources/images/icon/home.png',
erroricon: 'client/resources/images/icon/error.png',
righticon: 'client/resources/images/icon/right.png',
addressicon: 'client/resources/images/icon/addressicon.png',
yearicon: 'client/resources/images/icon/yearicon.png',
categoryicon: 'client/resources/images/icon/categoryicon.png',
pageId: null,
findResult: {},
selectedFiles: [],
};
},
created() {
this.pageId = this.$route.query.id;
if (this.$isEmpty(this.pageId)) {
alert("게시물 존재하지 않습니다.");
this.fnMoveTo('list');
}
},
mounted() {
this.fnFindDcry(); // 상세 조회
},
methods: {
// 상세 조회
async fnFindDcry() {
try {
const response = await findDcryProc(this.pageId);
this.findResult = response.data.data.dcry;
if (this.findResult.ty !== 'P') {
alert('올바른 접근이 아닙니다.');
this.fnMoveTo('list'); // 목록으로 이동
}
} catch (error) {
alert('조회중 오류가 발생했습니다.');
this.fnMoveTo('list');
if (error.response) {
alert(error.response.data.message);
}
console.error(error.message);
}
},
// 파일 다운로드
async fnDownload(type) {
// 유효성 검사
if (type === 'selected' && this.selectedFiles.length === 0) {
alert("파일을 1개 이상 선택하거나 전체 다운로드를 클릭해주세요.");
return;
}
let url = null;
let link = null;
try {
// 파일 ID 수집
let fileIds = this.selectedFiles[0];
if (type === 'all' && this.findResult.files.length > 1) {
fileIds = this.findResult.files.map(file => file.fileId).join(',');
}
let isMultiple = fileIds.length > 1;
const response = isMultiple ? await multiFileDownloadProc(fileIds) : await fileDownloadProc(fileIds);
// 파일명 조회
let filename = isMultiple ? 'downloadFile.zip' : 'downloadFile.bin';
const filenameRegex = /file[Nn]ame[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
const matches = filenameRegex.exec(response.headers['content-disposition']);
if (matches != null && matches[1]) {
filename = matches[1].replace(/['"]/g, '');
}
// 파일 다운로드 생성
url = window.URL.createObjectURL(new Blob([response.data]));
link = document.createElement('a');
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
} catch (error) {
alert('파일 다운로드 중 오류가 발생했습니다.');
} finally {
// 리소스 정리
setTimeout(() => {
if (url) {
window.URL.revokeObjectURL(url);
}
if (link && link.parentNode) {
document.body.removeChild(link);
}
}, 100);
}
},
// 삭제
async fnDelete() {
let isCheck = confirm("해당 페이지를 삭제하시겠습니까?");
if (!isCheck) {
return;
}
try {
const response = await deleteDcryProc(this.pageId);
alert('해당 페이지를 삭제했습니다.');
this.fnMoveTo('list');
} catch (error) {
if (error.response) {
alert(error.response.data.message);
}
console.error(error.message);
}
},
// 페이지 이동
fnMoveTo(type, id) {
const routes = {
'list': { name: 'PicHistorySearch' },
'view': { name: 'PicHistoryDetail', query: { id } },
'edit': { name: 'PicHistoryInsert', query: this.$isEmpty(id) ? {} : { id } },
};
if (routes[type]) {
this.$router.push(routes[type]);
} else {
alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
this.$router.push(routes['list']);
}
},
},
};
</script>