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
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>