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="search-form form">
<dl>
<dd class="mb-15">
<p>검색범위</p>
<ul>
<li>
<input type="checkbox" id="allScope" v-model="isChkAllScope" @change="fnChkAllOptions" />
<label for="allScope">전체</label>
</li>
<li>
<input type="checkbox" id="searchSj" v-model="searchReqDTO.useSj" @change="fnChkOption" />
<label for="searchSj">제목</label>
</li>
<li>
<input type="checkbox" id="searchCn" v-model="searchReqDTO.useCn" @change="fnChkOption" />
<label for="searchCn">내용</label>
</li>
<li>
<input type="checkbox" id="searchAdres" v-model="searchReqDTO.useAdres" @change="fnChkOption" />
<label for="searchAdres">주소</label>
</li>
</ul>
</dd>
<dd class="mb-15">
<p>검색어</p>
<div class="wfull"><input type="text" v-model="searchReqDTO.searchText" v-on:keyup.enter="fnChnageReqDTO"></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 category-dd">
<p>카테고리</p>
<ul>
<li v-for="(category, idx) of categorys" :key="idx">
<input type="checkbox" :id="'ctgry_' + idx" name="categorys" :value="category.ctgryId" v-model="searchReqDTO.searchCtgries" />
<label :for="'ctgry_' + idx">{{ 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 type="button" class="reset" @click="init">
<img :src="reseticon" alt="">
<p>초기화</p>
</button>
<button type="button" class="search" @click="fnChnageReqDTO">
<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>{{ 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="'V'" :list="searchResult" />
<ListStyleComponent v-if="selectedTabId === 'LIST'" :name="'V'" :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>
</template>
<script>
// COMPONENT
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 { findAllByNullProc } from "@/resources/api/category";
import { findDcrysProc } from "@/resources/api/dcry";
export default {
components: {
DefaultPagination,
CardStyleComponent,
ListStyleComponent,
},
data() {
return {
// ICON
resulticon: "client/resources/images/icon/r-check.png",
nosearch: "client/resources/images/no_search.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',
// 검색용 객체
isChkAllScope: true, // 검색범위 전체 체크 여부
searchType: [
{ key: "sj", value: "제목" },
{ key: "cn", value: "내용" },
{ key: "adres", value: "주소" },
], // 검색범위 목록
categorys: [], // 카테고리 목록
orders: [
{ key: "rgsde", value: "최신" },
{ key: "rdcnt", value: "인기" },
], // 정렬 목록
// 검색용 객체 초기값
searchDefault: {
useSj: true,
useCn: true,
useAdres: true,
searchText: null,
startYear: null,
endYear: null,
searchTy: "V",
searchCtgries: [],
order: "rgsde",
// 페이지네이션
currentPage: 1, // 현재 페이지
recordSize: 24, // 한 페이지에 표시할 데이터 개수
},
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 // 초기 로드 여부
};
},
created() {
this.init(); // 초기화
this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
},
methods: {
// 초기화
init() {
if (this.isInitialLoad) {
this.isInitialLoad = false;
this.queryParamsToSearch();
} else {
if (!confirm('검색 조건을 초기화하시겠습니까?')) {
return;
}
}
this.searchReqDTO.searchTy = "V"; // 영상 기록물 고정
this.selectedTabId = this.tabs[0].id;
this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
this.searchResult = []; // 검색결과 초기화
this.fnChnageReqDTO(); // 통합검색
},
queryParamsToSearch() {
let query = this.$route.query;
if (!this.$isEmpty(query)) {
const typeConverters = {
useSj: val => val === 'true',
useCn: val => val === 'true',
useAdres: val => val === 'true',
searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
};
Object.entries(query).forEach(([key, value]) => {
if (key in this.searchDefault) {
this.searchDefault[key] = key in typeConverters ? typeConverters[key](value) : value;
}
});
}
},
// 카테고리 목록 조회
async fnFindCategorys() {
try {
const response = await findAllByNullProc();
this.categorys = response.data.data.ctgry;
} catch (error) {
this.categorys = []; // 카테고리 목록 초기화
if (error.response) {
alert(error.response.data.message);
}
console.error(error.message);
}
},
// 페이지 이동
fnChangeCurrentPage(currentPage) {
this.searchReqDTO.currentPage = Number(currentPage);
this.$nextTick(() => {
this.fnSearch();
});
},
// 검색 조건이 변경된 경우
fnChnageReqDTO() {
this.searchReqDTO.currentPage = 1;
this.$nextTick(() => {
this.fnSearch();
});
},
// 통합검색
async fnSearch() {
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 findDcrysProc(params);
this.searchResult = response.data.data.dcrys;
this.searchReqDTO = response.data.data.search;
} catch (error) {
this.searchResult = []; // 검색결과 초기화
if (error.response) {
alert(error.response.data.message);
}
console.error(error.message);
}
},
// 기록유형 전체 선택 여부 변경
fnChkAllOptions() {
this.searchReqDTO.useSj = this.isChkAllScope;
this.searchReqDTO.useCn = this.isChkAllScope;
this.searchReqDTO.useAdres = this.isChkAllScope;
},
// 기록유형 선택 여부 변경
fnChkOption() {
this.isChkAllScope = this.searchReqDTO.useSj && this.searchReqDTO.useCn && this.searchReqDTO.useAdres;
},
selectTab(tabId) {
this.selectedTabId = tabId;
},
// 페이지 이동
fnMoveTo(type, id) {
const routes = {
'list': { name: 'VideoHistorySearch' },
'view': { name: 'VideoHistoryDetail', query: { id } },
'edit': { name: 'VideoHistoryInsert', query: this.$isEmpty(id) ? {} : { id } },
};
if (routes[type]) {
this.$router.push(routes[type]);
} else {
alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
this.$router.push(routes['list']);
}
},
},
};
</script>