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="search-form form">
<dl>
<!-- 통합검색에서만 보이는 기록유형 선택 -->
<dd class="mb-15" v-if="pageType === 'all'">
<p>기록유형</p>
<ul>
<li>
<input type="checkbox" id="allRecord" v-model="isChkAllRecord" @change="fnChkAllOptions('record')" />
<label for="allRecord">전체</label>
</li>
<li>
<input type="checkbox" id="photoRecord" v-model="formData.usePhoto" @change="fnChkOption('record')" />
<label for="photoRecord">사진</label>
</li>
<li>
<input type="checkbox" id="videoRecord" v-model="formData.useVideo" @change="fnChkOption('record')" />
<label for="videoRecord">영상</label>
</li>
<li>
<input type="checkbox" id="mediaVideo" v-model="formData.useMedia" @change="fnChkOption('record')" />
<label for="mediaVideo">미디어영상</label>
</li>
<li>
<input type="checkbox" id="newsData" v-model="formData.useNews" @change="fnChkOption('record')" />
<label for="newsData">스크랩 자료</label>
</li>
</ul>
</dd>
<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>
<input type="checkbox" id="searchSj" v-model="formData.useSj" @change="fnChkOption('scope')" />
<label for="searchSj">제목</label>
</li>
<li>
<input type="checkbox" id="searchCn" v-model="formData.useCn" @change="fnChkOption('scope')" />
<label for="searchCn">내용</label>
</li>
<li v-if="pageType !== 'media' && pageType !== 'bodo'">
<input type="checkbox" id="searchAdres" v-model="formData.useAdres" @change="fnChkOption('scope')" />
<label for="searchAdres">주소</label>
</li>
</ul>
</dd>
<dd class="mb-15">
<p>검색어</p>
<div class="wfull"><input type="text" v-model="formData.searchText" v-on:keyup.enter="fnSearch"></div>
</dd>
<dd class="mb-15">
<p>생산연도</p>
<input type="text" v-model="formData.startYear" pattern="[0-9]{8}" maxlength="8" @input="onlyNumberInput('startYear')">
<p class="mark">~</p>
<input type="text" v-model="formData.endYear" pattern="[0-9]{8}" maxlength="8" @input="onlyNumberInput('endYear')">
</dd>
<dd class="mb-20 category-dd" v-if="categoryList.length > 0">
<p>카테고리</p>
<ul>
<li v-for="(category, idx) of categoryList" :key="idx">
<input type="checkbox" :id="'ctgry_' + idx" name="categorys" :value="category.ctgryId" v-model="formData.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="formData.order" />
<label :for="order.key">{{ order.value }}</label>
</li>
</ul>
</dd>
<div class="btn-group">
<button type="button" class="reset" @click="fnReset">
<img :src="reseticon" alt="">
<p>초기화</p>
</button>
<button type="button" class="search" @click="fnSearch">
<img :src="searchicon" alt="">
<p>검색</p>
</button>
</div>
</dl>
</div>
</template>
<script>
// API
import { findAllByNullProc } from "@/resources/api/category"; // 카테고리 목록 검색
export default {
name: "SearchFormComponent",
props: {
// 부모 컴포넌트에서 전달받을 데이터
initialData: {
type: Object,
default: () => ({
usePhoto: true,
useVideo: true,
useMedia: true,
useNews: true,
useSj: true,
useCn: true,
useAdres: true,
searchText: null,
startYear: null,
endYear: null,
searchCtgries: [],
order: "rgsde",
// 페이지네이션 관련 속성
currentPage: 1,
recordSize: 24,
}),
},
// 페이지 타입 (통합검색: 'all', 사진: 'pic', 영상: 'video', 미디어: 'media', 스크랩 자료: 'bodo')
pageType: {
type: String,
default: 'all'
}
},
data() {
return {
// 아이콘
searchicon: 'client/resources/images/icon/search.png',
reseticon: 'client/resources/images/icon/reset.png',
isChkAllRecord: true, // 기록유형 전체 체크 여부
isChkAllScope: true, // 검색범위 전체 체크 여부
// 검색 폼 데이터
formData: {},
// 카테고리 목록
categoryList: [],
// 정렬 목록
orders: [
{ key: "rgsde", value: "최신" },
{ key: "rdcnt", value: "인기" },
],
};
},
created() {
// 초기 데이터 설정
this.initFormData();
// 카테고리 목록 조회
this.fnFindCategorys();
},
watch: {
// initialData가 변경되면 formData를 업데이트
initialData: {
handler() {
this.initFormData();
},
deep: true
}
},
methods: {
// 폼 데이터 초기화
initFormData() {
// 초기 데이터 복사
this.formData = JSON.parse(JSON.stringify(this.initialData));
// 페이지 타입에 따라 검색 타입 설정
if (this.pageType !== 'all') {
// 페이지 타입에 맞는 searchTy 설정
switch (this.pageType) {
case 'pic':
this.formData.searchTy = "P";
break;
case 'video':
this.formData.searchTy = "V";
break;
case 'media':
this.formData.searchTy = "M";
// 미디어 영상에서는 주소 검색 비활성화
this.formData.useAdres = false;
break;
case 'bodo':
this.formData.searchTy = "N";
// 스크랩 자료에서는 주소 검색 비활성화
this.formData.useAdres = false;
break;
}
}
// 전체 체크박스 상태 동기화
this.isChkAllRecord = this.formData.usePhoto && this.formData.useVideo && this.formData.useMedia && this.formData.useNews;
// 검색범위 전체 체크박스 상태 계산
if (this.pageType === 'media' || this.pageType === 'bodo') {
// 미디어 영상과 스크랩 자료는 제목과 내용만 검색 가능
this.isChkAllScope = this.formData.useSj && this.formData.useCn;
} else {
// 기타 타입은 주소 포함 세 가지 모두 검색 가능
this.isChkAllScope = this.formData.useSj && this.formData.useCn && this.formData.useAdres;
}
},
// 카테고리 목록 조회
async fnFindCategorys() {
try {
const response = await findAllByNullProc();
if (response.data && response.data.data && response.data.data.ctgry) {
this.categoryList = response.data.data.ctgry;
} else {
this.categoryList = [];
}
} catch (error) {
this.categoryList = []; // 카테고리 목록 초기화
if (error.response) {
alert(error.response.data.message);
}
console.error(error.message);
}
},
// 초기화 버튼 클릭
fnReset() {
if (confirm('검색 조건을 초기화하시겠습니까?')) {
this.initFormData();
// 부모 컴포넌트에 이벤트 발생
this.$emit('reset');
}
},
// 검색 실행
fnSearch() {
// 유효성 검사 (통합검색일 경우 검색 유형 체크)
if (this.pageType === 'all' && !this.formData.usePhoto && !this.formData.useVideo && !this.formData.useMedia && !this.formData.useNews) {
alert('검색 유형은 최소 한 개 이상 선택해주세요.');
return;
}
// 검색 범위 유효성 검사
if (this.pageType === 'media' || this.pageType === 'bodo') {
// 미디어 영상과 스크랩 자료는 제목, 내용만 체크
if (!this.formData.useSj && !this.formData.useCn) {
alert('검색 범위는 최소 한 개 이상 선택해주세요.');
return;
}
} else {
// 다른 타입은 제목, 내용, 주소 체크
if (!this.formData.useSj && !this.formData.useCn && !this.formData.useAdres) {
alert('검색 범위는 최소 한 개 이상 선택해주세요.');
return;
}
}
if (!this.$isEmpty(this.formData.startYear) && !this.$isEmpty(this.formData.endYear)) {
const startYear = parseInt(this.formData.startYear);
const endYear = parseInt(this.formData.endYear);
if (startYear > endYear) {
alert('종료 연도는 시작 연도보다 작을 수 없습니다.');
return;
}
}
// 부모 컴포넌트에 이벤트 발생 (데이터 전달)
this.$emit('search', JSON.parse(JSON.stringify(this.formData)));
},
// 전체 선택/해제
fnChkAllOptions(type) {
switch (type) {
case 'record':
this.formData.usePhoto = this.isChkAllRecord;
this.formData.useVideo = this.isChkAllRecord;
this.formData.useMedia = this.isChkAllRecord;
this.formData.useNews = this.isChkAllRecord;
break;
case 'scope':
this.formData.useSj = this.isChkAllScope;
this.formData.useCn = this.isChkAllScope;
// media 또는 bodo 타입이 아닌 경우에만 주소 검색 옵션 설정
if (this.pageType !== 'media' && this.pageType !== 'bodo') {
this.formData.useAdres = this.isChkAllScope;
}
break;
}
},
// 개별 체크박스 선택시 전체 체크박스 상태 업데이트
fnChkOption(type) {
switch (type) {
case 'record':
this.isChkAllRecord = this.formData.usePhoto && this.formData.useVideo && this.formData.useMedia && this.formData.useNews;
break;
case 'scope':
if (this.pageType === 'media' || this.pageType === 'bodo') {
// 미디어 영상과 스크랩 자료는 제목과 내용만 체크
this.isChkAllScope = this.formData.useSj && this.formData.useCn;
} else {
// 다른 타입은 주소 포함 체크
this.isChkAllScope = this.formData.useSj && this.formData.useCn && this.formData.useAdres;
}
break;
}
},
// 생산연도 입력 제한
onlyNumberInput(type) {
if (type === 'startYear') {
this.formData.startYear = this.formData.startYear.replace(/[^0-9]/g, '');
} else if (type === 'endYear') {
this.formData.endYear = this.formData.endYear.replace(/[^0-9]/g, '');
}
}
},
};
</script>