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>
<!-- 검색 폼 컴포넌트 사용 -->
<SearchFormComponent :initialData="searchReqDTO" pageType="media" @search="handleSearch" @reset="handleReset" />
<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>{{ searchReqDTO.totalRecordCount }}개</b>의 미디어 영상이 검색되었습니다. </p>
</div>
<div class="flex">
<ul class="tab-box mb-20">
<li v-for="(tab, idx) in tabs" :key="idx" class="tab-title" :class="{ active: selectedTabId === tab.id }" @click="selectTab(tab.id)">
<img :src="selectedTabId === 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="searchReqDTO.recordSize" @change="fnChnageReqDTO">
<option :value="24">24개</option>
<option :value="36">36개</option>
<option :value="100">100개</option>
</select>
</div>
</div>
</div>
<div class="tab-content">
<div v-if="searchResult.length > 0">
<CardStyleComponent v-if="selectedTabId === 'CARD'" :name="'M'" :list="searchResult" />
<ListStyleComponent v-if="selectedTabId === 'LIST'" :name="'M'" :list="searchResult" />
</div>
<div v-else class="no-results">
<img :src="nosearch" alt="">
<p>검색 결과가 없습니다.</p>
<p>단어의 철자가 정확한지 확인해 주시기 바랍니다.<br> 검색어의 단어 수를 줄이거나, 다른 검색어(유사어)로 검색해 보시기 바랍니다.<br> 일반적으로 많이 사용하는 검색어로 다시 검색해 주시기 바랍니다.</p>
</div>
</div>
</div>
<div class="btn-group flex-end mt-40"><button type="button" class="register" @click="fnMoveTo('edit')">등록</button></div>
<DefaultPagination class="mt-40" :search="searchReqDTO" @onChange="fnChangeCurrentPage" />
</div>
</div>
<div v-if="loading" class="loading-overlay">
<div class="loading-spinner"></div>
<div>
<p>검색 중입니다</p>
<p>잠시만 기다려주세요</p>
</div>
</div>
</template>
<script>
// COMPONENT
import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
// API
import { findAllMediaVidosProc } from "@/resources/api/mediaVido";
export default {
components: {
SearchFormComponent,
DefaultPagination,
CardStyleComponent,
ListStyleComponent,
},
data() {
return {
// ICON
nosearch: "client/resources/images/no_search.png",
resulticon: "client/resources/images/icon/r-check.png",
homeicon: 'client/resources/images/icon/home.png',
righticon: 'client/resources/images/icon/right.png',
// 검색용 객체 초기값
searchDefault: {
useSj: true,
useCn: true,
searchText: null,
startYear: null,
endYear: null,
searchTy: "M", // 미디어 영상 고정
searchCtgries: [],
order: "rgsde",
// 페이지네이션
currentPage: 1, // 현재 페이지
recordSize: 24, // 한 페이지에 표시할 데이터 개수
},
// URL 파라미터로부터 가져온 초기 검색 조건
urlParamsDefault: null,
searchReqDTO: {}, // 실제 검색에 사용되는 객체
searchResult: [], // 검색결과
// 목록 레이아웃
selectedTabId: null,
tabs: [
{
id: "CARD",
title: "카드형",
activeImage: "client/resources/images/list_icon01_on.png", // Active tab image
inactiveImage: "client/resources/images/list_icon01_off.png",
},
{
id: "LIST",
title: "리스트형",
activeImage: "client/resources/images/list_icon02_on.png", // Active tab image
inactiveImage: "client/resources/images/list_icon02_off.png",
},
],
isInitialLoad: true, // 초기 로드 여부
loading: false, // 로딩 상태 추가
};
},
created() {
// 초기화
this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
this.selectedTabId = this.tabs[0].id; // 기본 탭 설정
// URL 파라미터에서 검색 조건 가져오기
this.queryParamsToSearch();
},
mounted() {
this.fnSearch(); // 초기 검색 실행
},
methods: {
// URL 파라미터로부터 검색 조건 설정
queryParamsToSearch() {
let query = this.$route.query;
if (!this.$isEmpty(query)) {
// 기본 검색 조건 복사
let urlParams = JSON.parse(JSON.stringify(this.searchDefault));
const typeConverters = {
useSj: val => val === 'true',
useCn: val => val === 'true',
searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
};
// URL 파라미터 값 적용
Object.entries(query).forEach(([key, value]) => {
if (key in urlParams) {
urlParams[key] = key in typeConverters ? typeConverters[key](value) : value;
}
});
// URL 파라미터 기반 초기값 저장
this.urlParamsDefault = urlParams;
// 현재 검색 조건에 적용
this.searchReqDTO = JSON.parse(JSON.stringify(urlParams));
}
},
// 페이지 이동
fnChangeCurrentPage(currentPage) {
this.searchReqDTO.currentPage = Number(currentPage);
this.$nextTick(() => {
this.fnSearch();
});
},
// 검색 폼 컴포넌트에서 검색 버튼 클릭 시 호출되는 메소드
handleSearch(formData) {
// searchTy는 항상 "M"로 유지
formData.searchTy = "M";
// 페이지 초기화
formData.currentPage = 1;
this.searchReqDTO = formData;
this.fnSearch();
},
// 검색 폼 컴포넌트에서 초기화 버튼 클릭 시 호출되는 메소드
handleReset() {
// URL 파라미터가 있으면 그 값 사용, 없으면 기본값 사용
if (this.urlParamsDefault) {
this.searchReqDTO = JSON.parse(JSON.stringify(this.urlParamsDefault));
} else {
this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
}
this.searchResult = []; // 검색결과 초기화
this.fnSearch(); // 초기화 후 검색 실행
},
// 검색 조건이 변경된 경우
fnChnageReqDTO() {
this.searchReqDTO.currentPage = 1;
this.$nextTick(() => {
this.fnSearch();
});
},
// 통합검색
async fnSearch() {
this.loading = true; // 로딩 시작
try {
const params = JSON.parse(JSON.stringify(this.searchReqDTO));
// 카테고리 목록 처리
if (this.searchReqDTO.searchCtgries && this.searchReqDTO.searchCtgries.length > 0) {
params.searchCtgries = this.searchReqDTO.searchCtgries.join(',');
} else {
delete params.searchCtgries;
}
// API 호출
const response = await findAllMediaVidosProc(params);
this.searchResult = response.data.data.mediaVidos;
this.searchReqDTO = response.data.data.search;
window.scrollTo({ top: 0, behavior: 'smooth' });
} catch (error) {
this.searchResult = []; // 검색결과 초기화
if (error.response) {
alert(error.response.data.message);
}
console.error(error.message);
} finally {
this.loading = false; // 로딩 종료
}
},
selectTab(tabId) {
this.selectedTabId = tabId;
},
// 페이지 이동
fnMoveTo(type, id) {
const routes = {
'list': { name: 'MediaVideoSearch' },
'view': { name: 'MediaVideoDetail', query: { id } },
'edit': { name: 'MediaVideoInsert', query: this.$isEmpty(id) ? {} : { id } },
};
if (routes[type]) {
this.$router.push(routes[type]);
} else {
alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
this.$router.push(routes['list']);
}
},
},
};
</script>