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 action="" class="insert-form mb-50">
<dl>
<dd>
<label for="id" class="require">제목</label>
<div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요."></div>
</dd>
<div class="hr"></div>
<dd>
<label for="year">생산연도</label>
<input type="text" id="year" value="" placeholder="생산연도를 입력하세요">
</dd>
<div class="hr"></div>
<dd>
<label for="address">주소</label>
<div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요"></div>
</dd>
<div class="hr"></div>
<dd>
<label for="text">내용</label>
<textarea name="" id=""></textarea>
</dd>
<div class="hr"></div>
<dd>
<label for="category" class="flex align-center">
<p>카테고리</p><button type="button" class="category-add" @click="openModal">추가하기</button>
</label>
<ul class="category">
<li v-for="(category, index) in selectedCategories" :key="index" >
{{ category }}
<button type="button" class="cancel" @click="removeCategory(index)"><b>✕</b></button>
</li>
</ul>
</dd>
<div class="hr"></div>
<dd>
<label for="file" class="require">파일</label>
<ul class="wfull">
<li class="flex align-center">
<p>파일첨부</p>
<div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 10건까지 등록 가능하며, 건당 최대
100MB를 초과할 수 없습니다.</span></div>
</li>
<li class="file-insert">
<input type="file" id="fileInput" class="file-input" multiple @change="showFileNames">
<label for="fileInput" class="file-label mb-20">
<div class="flex-center align-center"><img :src="fileicon" alt="">
<p>파일첨부하기</p>
</div>
<p>파일을 첨부하시려면 이 영역으로 파일을 끌고 오거나 클릭해주세요</p>
</label>
<p class="mb-10">파일목록</p>
<div id="fileNames" class="file-names">
<span v-if="fileNames.length === 0">선택된 파일이 없습니다.</span>
<div v-for="(file, index) in fileNames" :key="index" class="flex-sp-bw mb-5 file-wrap">
<div class="file-name">
<!-- Corrected here: Use file.icon instead of fileicons.img -->
<img :src="file.icon" alt="fileicon">
<p>{{ file.name }}</p>
</div>
<button type="button" class="cancel" @click="removeFile(index)"><b>✕</b></button>
</div>
</div>
</li>
</ul>
</dd>
</dl>
</form>
<div class="btn-group flex-center">
<button class="cancel">취소</button>
<button class="register">등록</button>
</div>
<div v-if="isModalOpen" class="modal-overlay" @click="closeModal">
<div class="modal-content" @click.stop>
<div class="flex-sp-bw mb-20">
<h2>카테고리 조회</h2>
<button @click="closeModal" class="closebtn">✕</button>
</div>
<div class="modal-search flex-center mb-20">
<input type="text" placeholder="카테고리명을 입력하세요.">
<button class="search-btn"><img :src="searchicon" alt="">
<p>검색</p>
</button>
</div>
<table class="mb-10">
<thead>
<tr>
<th>카테고리 항목</th>
<th>선택</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<!-- Category 칼럼 -->
<td>
{{ item.category }}
</td>
<!-- Checkbox 칼럼 -->
<td>
<input type="checkbox" v-model="item.selected" />
</td>
</tr>
</tbody>
</table>
<div class="flex-end mb-30"><button class="register-b " @click="registerCategories">등록</button></div>
<div class="pagination">
<!-- Previous and Next Page Buttons -->
<button>
<DoubleLeftOutlined />
</button>
<button @click="previousPage" :disabled="currentPage === 1">
<LeftOutlined />
</button>
<button class="page-number clicked">1</button>
<button @click="nextPage" :disabled="currentPage === totalPages">
<RightOutlined />
</button>
<button>
<DoubleRightOutlined />
</button>
</div>
</div>
</div>
</div>
<div v-if="isModalOpen" class="modal-overlay" @click="closeModal">
<div class="modal-content" @click.stop>
<h2>모달 제목</h2>
<p>모달의 내용이 여기에 들어갑니다.</p>
<button @click="closeModal">닫기</button>
</div>
</div>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
export default {
components: {
DoubleLeftOutlined,
LeftOutlined,
RightOutlined,
DoubleRightOutlined,
},
data() {
return {
items: [
{ id: 1, category: '카테고리 1', selected: false },
{ id: 2, category: '카테고리 2', selected: false },
{ id: 3, category: '카테고리 3', selected: false },
],
isModalOpen: false,
// Define the image sources
homeicon: 'client/resources/images/icon/home.png',
erroricon: 'client/resources/images/icon/error.png',
righticon: 'client/resources/images/icon/right.png',
fileicon: 'client/resources/images/icon/file.png',
searchicon: 'client/resources/images/icon/search.png',
fileNames: [],
selectedCategories: [],
};
},
computed: {
filteredItems() {
// This could be modified to support filtering based on searchQuery
return this.items.filter(item =>
item.category.includes(this.searchQuery)
);
}
},
methods: {
registerCategories() {
// Add selected categories to the displayed list
this.selectedCategories = this.items
.filter(item => item.selected)
.map(item => item.category);
this.closeModal(); // Close modal after registration
},
removeCategory(index) {
// Remove category from the list
this.selectedCategories.splice(index, 1);
},
searchCategories() {
// You can implement search logic if needed
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
},
previousPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
showFileNames(event) {
const files = event.target.files;
this.fileNames = []; // Clear previous file names
for (let i = 0; i < files.length; i++) {
const file = files[i];
const fileType = file.name.split('.').pop().toLowerCase(); // Get file extension
// Set default icon
let iconPath = this.fileicons;
// Determine the icon based on file type
if (['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) {
iconPath = 'client/resources/images/icon/imgicon.png'; // Example for image files
} else if (['pdf'].includes(fileType)) {
iconPath = 'client/resources/images/icon/pdficon.png'; // Example for PDF files
} else if (['xls'].includes(fileType)) {
iconPath = 'client/resources/images/icon/excelicon.png'; // Example for audio files
} else if (['hwp'].includes(fileType)) {
iconPath = 'client/resources/images/icon/hwpicon.png'; // Example for video files
}
// Push the file name and corresponding icon to the fileNames array
this.fileNames.push({
name: file.name,
icon: iconPath
});
}
},
removeFile(index) {
// Remove file from the list
this.fileNames.splice(index, 1);
console.log(removeFile)
},
openModal() {
this.isModalOpen = true;
},
// 모달 닫기
closeModal() {
this.isModalOpen = false;
}
}
};
</script>