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>
<!-- Bind the image source dynamically for homeicon -->
<li><img :src="homeicon" alt="Home Icon">
<p>언론에서 바라본 구미시</p>
</li>
<li><img :src="righticon" alt=""></li>
<li>미디어 영상</li>
</ul>
</div>
</div>
<div action="search" class="search-form form ">
<dl>
<dd class="mb-15">
<p>검색범위</p>
<ul>
<li>
<input type="checkbox" id="allScope" v-model="isChkAllScope"
@change="fnChkAllOptions('scope')" />
<label for="allScope">전체</label>
</li>
<li v-for="(scope, idx) in searchType" :key="idx">
<input type="checkbox" :id="idx" :name="searchType" :value="scope.key"
v-model="searchReqDTO.searchType" @change="fnChkOption('scope')" />
<label :for="idx">{{ scope.value }}</label>
</li>
</ul>
</dd>
<dd class="mb-15">
<p>검색어</p>
<div class="wfull"><input type="text" v-model="searchReqDTO.searchText"></div>
</dd>
<dd class="mb-15">
<p>생산연도</p>
<input type="date" v-model="searchReqDTO.startYear">
<p class="mark">~</p>
<input type="date" v-model="searchReqDTO.endYear">
</dd>
<dd class="mb-20">
<p>카테고리</p>
<ul>
<li v-for="(category, idx) of categorys" :key="idx">
<input type="checkbox" :id="category.ctgryId" name="categorys" :value="category.ctgryId"
v-model="searchReqDTO.searchCtgry" />
<label :for="category.ctgryId">{{ category.ctgryNm }}</label>
</li>
</ul>
</dd>
<dd class="mb-15">
<p>정렬</p>
<ul>
<li v-for="(order, idx) of orders" :key="idx">
<input type="radio" :id="order.key" name="orders" :value="order.key"
v-model="searchReqDTO.order" />
<label :for="order.key">{{ order.value }}</label>
</li>
</ul>
</dd>
<div class="btn-group">
<button class="reset"><img :src="reseticon" alt="">
<p>초기화</p>
</button>
<button class="search"><img :src="searchicon" alt="">
<p>검색</p>
</button>
</div>
</dl>
</div>
<div class="search-result">
<div class="tabs">
<div class="flex-sp-bw mb-20 align-center">
<div class="resultext ">
<img :src="resulticon" alt="">
<p>총 <b>{{ count }}개</b>의 미디어 영상이 검색되었습니다. </p>
</div>
<div class="flex ">
<ul class="tab-box mb-20">
<li v-for="(tab, index) in tabs" :key="index" class="tab-title"
:class="{ active: selectedTab === tab.id }" @click="selectTab(tab.id)">
<img :src="selectedTab === tab.id ? tab.activeImage : tab.inactiveImage"
:alt="tab.title" class="tab-icon" />
<p><b>{{ tab.title }}</b></p>
</li>
</ul>
<div class="select-box">
<select v-model="itemsPerPage" @change="changeItemsPerPage">
<option :value="5" selected>5개</option>
<option :value="10">10개</option>
<option :value="15">15개</option>
</select>
</div>
</div>
</div>
<div class="tab-content">
<!-- Loop through tabContents, and only display content that matches selectedTab -->
<div v-for="(tabContent, idx) in tabContents" :key="idx">
<!-- Display content only if the tab's ID matches the selectedTab -->
<div v-show="tabContent.id === selectedTab">
<!-- 카드형 Section (Card Layout) -->
<div v-if="tabContent.viewType === 'card'">
<ul class="card-wrap">
<li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
<div class="result-box">
<!-- Main Image Section -->
<div class="main-img">
<img :src="resultitem.img" alt="" class="tab-image" />
</div>
<!-- Text Section -->
<div class="text-box">
<router-link :to="{ path: '/MediaVideoDetail.page' }">
<h5>{{ resultitem.title }}</h5>
</router-link>
<p class="address">{{ resultitem.address }}</p>
<p class="text">{{ resultitem.content }}</p>
<div class="mb-20">
<ul class="category">
<li v-if="resultitem.category1" class="category1">카테고리1</li>
<li v-if="resultitem.category2" class="category2">카테고리2</li>
</ul>
</div>
<div class="date">
<ul>
<li>생산연도 <b>{{ resultitem.year }}</b></li>
<li>|</li>
<li>등록 <b>{{ resultitem.date }}</b></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<!-- Empty State if no results in paginatedItems -->
<div v-if="paginatedItems.length === 0" class="no-results">
<p>등록된 게시물이 없습니다.</p>
</div>
</div>
<!-- 리스트형 Section (List Layout) -->
<div v-if="tabContent.viewType === 'list'">
<ul class="list-wrap">
<li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
<div class="text-box">
<router-link :to="{ path: '/MediaVideoDetail.page' }">
<h5>{{ resultitem.title }}</h5>
</router-link>
<p class="address">{{ resultitem.address }}</p>
<div class="flex-sp-bw">
<div class="mb-20">
<ul class="category">
<li v-if="resultitem.category1" class="category1">카테고리1</li>
<li v-if="resultitem.category2" class="category2">카테고리2</li>
</ul>
</div>
<div class="date ">
<ul>
<li>생산연도 <b>{{ resultitem.year }}</b></li>
<li>|</li>
<li>등록 <b>{{ resultitem.date }}</b></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<!-- Empty State if no results in paginatedItems -->
<div v-if="paginatedItems.length === 0" class="no-results">
<p>등록된 게시물이 없습니다.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-group flex-end mt-40"><button class="register"> <router-link
:to="{ path: '/MediaVideoInsert.page' }">등록</router-link></button></div>
<div class="pagination flex-center mt-40">
<!-- 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>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
import { findAllCategoryProc } from "../../../resources/api/category"; // 카테고리 목록 검색
export default {
components: {
DoubleLeftOutlined,
LeftOutlined,
RightOutlined,
DoubleRightOutlined,
},
data() {
return {
selectedTab: 1,
// 검색용 객체
searchReqDTO: {
searchType: [],
searchText: null,
startYear: null,
endYear: null,
searchTy: null,
searchCtgry: [],
order: "rgsde",
},
tabs: [
{
id: 1,
title: "카드형",
activeImage: "client/resources/images/list_icon01_on.png", // Active tab image
inactiveImage: "client/resources/images/list_icon01_off.png",
},
{
id: 2,
title: "리스트형",
activeImage: "client/resources/images/list_icon02_on.png", // Active tab image
inactiveImage: "client/resources/images/list_icon02_off.png",
},
],
tabContents: [
{ id: 1, viewType: 'card', list: [{ sj: 'Item 1', rgsde: '2025-03-01', files: [{ filePath: 'image1.png' }] }] },
{ id: 2, viewType: 'list', list: [{ sj: 'Item 2', rgsde: '2025-03-02', files: [{ filePath: 'image2.png' }] }] },
],
paginatedItems: [],
resultitems: [
{
img: 'client/resources/images/img6.png',
title: '미디어 영상 제목',
address: '경상북도 구미시 송정대로 55',
content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
category1: true,
category2: true,
year: 2020,
date: '2021-01-01'
},
],
currentPage: 1, // Current page number
itemsPerPage: 5,
resulticon: "client/resources/images/icon/r-check.png",
homeicon: 'client/resources/images/icon/home.png',
searchicon: 'client/resources/images/icon/search.png',
reseticon: 'client/resources/images/icon/reset.png',
righticon: 'client/resources/images/icon/right.png',
count: 23,
checkOptions: [
'전체',
'사진',
'영상',
'미디어 영상',
'보도자료',
],
checkOptions2: [
'전체',
'제목',
'내용',
'주소',
],
checkOptions3: [
'카테고리1',
'카테고리2',
'카테고리3',
'카테고리4',
'카테고리5',
],
checkOptions4: [
'최신',
'인기',
],
isChkAllScope: false, // 검색범위 전체 체크 여부
searchType: [
{ key: "sj", value: "제목" },
{ key: "cn", value: "내용" },
{ key: "adres", value: "주소" },
], // 검색범위 목록
categorys: [], // 카테고리 목록
orders: [
{ key: "rgsde", value: "최신" },
{ key: "rdcnt", value: "인기" },
], // 정렬 목록
};
},
computed: {
// Total number of pages
totalPages() {
return Math.ceil(this.resultitems.length / this.itemsPerPage);
},
// Paginated items based on current page and items per page
paginatedItems() {
const start = (this.currentPage - 1) * this.itemsPerPage;
const end = start + this.itemsPerPage;
return this.resultitems.slice(start, end);
},
},
created() {
// 초기 데이터 세팅
this.isChkAllScope = true;
this.searchReqDTO.searchType = this.searchType.map(item => item.key);
this.searchReqDTO.order = this.orders[0].key
this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
},
methods: {
selectTab(tabId) {
this.selectedTab = tabId; // Update the selected tab index
},
// Change the number of items displayed per page
changeItemsPerPage() {
this.currentPage = 1; // Reset to first page when changing items per page
},
previousPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
// Go to the next page
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
},
isChkAllScope: false, // 검색범위 전체 체크 여부
searchType: [
{ key: "sj", value: "제목" },
{ key: "cn", value: "내용" },
{ key: "adres", value: "주소" },
], // 검색범위 목록
categorys: [], // 카테고리 목록
orders: [
{ key: "rgsde", value: "최신" },
{ key: "rdcnt", value: "인기" },
], // 정렬 목록
async fnFindCategorys() {
try {
const response = await findAllCategoryProc();
this.categorys = response.data.data.ctgry;
} catch (error) {
if (error.response) {
console.log("에러 응답:", error.response.data);
}
console.error("Error:", error);
}
},
// 통합검색
async fnFindAllDatas() {
try {
let params = {};
if (this.searchReqDTO.searchRecord.length > 0) {
params.searchRecords = this.searchReqDTO.searchRecord.join(',');
}
if (this.searchReqDTO.searchType.length > 0) {
params.searchTypes = this.searchReqDTO.searchType.join(',');
}
if (this.searchReqDTO.searchCtgry.length > 0) {
params.searchCtgries = this.searchReqDTO.searchCtgry.join(',');
}
params.searchText = this.searchReqDTO.searchText;
params.startYear = this.searchReqDTO.startYear;
params.endYear = this.searchReqDTO.endYear;
params.order = this.searchReqDTO.order;
// API 호출
const response = await findAllDatas(params);
this.searchResult = response.data.data.searchResult;
} catch (error) {
if (error.response) {
console.log("에러 응답:", error.response.data);
}
console.error("Error:", error);
}
},
},
};
</script>
<style scoped></style>