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" placeholder="제목을 입력하세요."></div>
</dd>
<div class="hr"></div>
<dd>
<label for="year">생산연도</label>
<input type="text" id="year" placeholder="생산연도를 입력하세요">
</dd>
<div class="hr"></div>
<dd>
<label for="address">주소</label>
<div class="wfull"><input type="text" id="address" placeholder="URL 주소를 입력하세요"></div>
</dd>
<div class="hr"></div>
<dd>
<label for="text">내용</label>
<div class="wfull">
<EditorComponent :contents="insertDTO.cn" />
</div>
</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 selectedCtgries" :key="index"> {{ category }} <button type="button" class="cancel" @click="removeCategory(index)"><b>✕</b></button>
</li>
</ul>
</dd>
</dl>
</form>
<div class="btn-group flex-center">
<button class="cancel">취소</button>
<button class="register">등록</button>
</div>
</div>
<CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" />
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
// COMPONENT
import EditorComponent from '../../component/editor/EditorComponent.vue';
import CategorySelectModal from '../../component/modal/CategorySelectModal.vue';
export default {
components: {
DoubleLeftOutlined,
LeftOutlined,
RightOutlined,
DoubleRightOutlined,
EditorComponent, CategorySelectModal,
},
data() {
return {
// 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',
isModalOpen: false,
items: [
{ id: 1, category: '카테고리 1', selected: false },
{ id: 2, category: '카테고리 2', selected: false },
{ id: 3, category: '카테고리 3', selected: false },
],
fileNames: [],
insertDTO: {
sj: null, //제목
cn: null, //내용
adres: null, // 주소
prdctnYear: null, // 생산연도
ty: 'P', // 타입 ( P: 사진, V: 영상 )
multipartFiles: null, // 첨부파일 정보
ctgryIds: null, // 카테고리 정보
},
files: [],
selectedCtgries: [], // 카테고리 목록
};
},
computed: {
filteredItems() {
// This could be modified to support filtering based on searchQuery
return this.items.filter(item =>
item.category.includes(this.searchQuery)
);
}
},
created() {
},
methods: {
registerCategories() {
// Add selected categories to the displayed list
this.selectedCtgries = this.items
.filter(item => item.selected)
.map(item => item.category);
this.closeModal(); // Close modal after registration
},
removeCategory(index) {
// Remove category from the list
this.selectedCtgries.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>