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>
<div class="gallery-form mb-40">
<dl class="mb-20">
<dd>
<p>{{ dcry.sj }}</p>
<div class="date flex align-center">
<img :src="calendaricon" alt="">
<span>{{ $dotFormatDate(dcry.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 dcry.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 dcry.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>
</div>
<h3>내용</h3>
<div class="info-form mb-50">
<dl>
<dd>
<ViewerComponent :content="dcry.cn" />
</dd>
</dl>
</div>
<h3>기본정보</h3>
<div class="info-form mb-50">
<dl>
<dd class="mb-20">
<img :src="addressicon" alt="">
<span>주소</span>
<p>{{ dcry.adres }}</p>
</dd>
<dd class="mb-20">
<img :src="yearicon" alt="">
<span>생산연도</span>
<p>{{ $dotFormatDate(dcry.prdctnYear) }}</p>
</dd>
<dd>
<img :src="categoryicon" alt="">
<span>카테고리</span>
<ul class="category">
<li v-for="(item, idx) of dcry.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
</ul>
</dd>
</dl>
</div>
<div class="btn-group flex-center">
<button class="red-line " type="button" @click="fnDelete">삭제</button>
<button class="blue-line " type="button" @click="fnMoveTo('PicHistoryInsert', pageId)">수정</button>
<button class="gray-line-bg " type="button" @click="fnMoveTo('PicHistorySearch')">목록</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,
dcry: {},
selectedFiles: [],
};
},
created() {
this.pageId = this.$route.query.id;
if (this.pageId === null) {
alert("게시물 존재하지 않습니다.");
this.fnMoveTo('PicHistorySearch');
}
},
mounted() {
this.fnFindDcry(); // 상세 조회
},
methods: {
// 상세 조회
async fnFindDcry() {
try {
const response = await findDcryProc(this.pageId);
this.dcry = response.data.data.dcry;
} catch (error) {
alert('조회중 오류가 발생했습니다.');
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.dcry.files.length > 1) {
fileIds = this.dcry.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('PicHistorySearch');
} catch (error) {
if (error.response) {
alert(error.response.data.message);
}
console.error(error.message);
}
},
// 페이지 이동
fnMoveTo(page, id) {
if (this.$isEmpty(id)) {
this.$router.push({ name: page });
} else {
this.$router.push({ name: page, query: { id: id } });
}
},
},
};
</script>