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="container">
<div class="page-titleZone flex justify-between align-center">
<p class="main-title flex80">FAQ 관리</p>
</div>
<div class="content-wrap">
<div class="content content-box flex-column no-gutter">
<div class="row flex50">
<div class="flex100">
<div class="content-titleZone flex justify-between align-center">
<p class="box-title">FAQ 목록</p>
<div class="search-bar flex justify-end align-center">
<input
type="date"
name="start-date"
id="start-date"
class="square-date"
:class="{ 'date-placeholder': false }"
data-placeholder="날짜 선택"
v-model="search_date.value"
/>
<span class="coupler">~</span>
<input
type="date"
name="end-date"
id="end-date"
class="square-date ml5"
:class="{ 'date-placeholder': false }"
data-placeholder="날짜 선택"
v-model="search_date.value2"
/>
<select class="square-select ml5" v-model="search_data1.key">
<option :value="null">전체</option>
<option value="">제목</option>
<option value="">답변</option>
</select>
<div class="search-square">
<input
type="text"
class="square-input"
placeholder="Search"
v-model="search_data1.value"
v-on:keyup.enter="fnSelectList()"
/>
<button
class="square-button blue-btn"
@click="fnSelectList()"
>
<svg-icon
type="mdi"
:path="this.$getIconPath()"
class="square-icon"
></svg-icon>
</button>
</div>
</div>
</div>
<div class="table-zone">
<table class="list-table">
<colgroup>
<col style="width: 5%" />
<col style="width: 25%" />
<col style="width: 25%" />
<col style="width: 20%" />
<col style="width: 25%" />
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>질문</th>
<th>답변</th>
<th>등록자</th>
<th>등록일시</th>
</tr>
</thead>
<tbody>
<template v-if="list.length > 0">
<tr
v-for="(item, idx) in list"
:key="item"
@click="fnDetail(item.faqId)"
>
<td>
{{
search.totalRows -
idx -
(search.currentPage - 1) * search.perPage
}}
</td>
<td>{{ item.faqQuestion }}</td>
<td>{{ item.faqAnswer }}</td>
<td>{{ item.faqInsertUserId }}</td>
<td>{{ $getFullTime(item.faqInsertDateTime) }}</td>
</tr>
</template>
<tr v-else>
<td colspan="6">등록된 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
<PaginationButton
v-model:currentPage="search.currentPage"
:perPage="search.perPage"
:totalCount="search.totalRows"
:maxRange="5"
:click="fnSelectList"
/>
<div class="flex justify-end">
<button class="blue-btn small-btn" @click="fnInsert">
FAQ 등록
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import PaginationButton from "../../component/PaginationButton.vue";
export default {
name: "FaqList",
components: { SvgIcon, PaginationButton },
data() {
return {
searchPath: mdiMagnify,
list: [],
search: this.$getDefaultSerchVO(),
search_date: this.$getDefaultSerchItem("faq_insert_datetime", "dates"),
search_data1: this.$getDefaultSerchItem(null, "string"),
};
},
mounted() {
this.fnSelectList();
},
methods: {
// 목록 조회
fnSelectList() {
const vm = this;
// 데이터 세팅
vm.search.searchObjectList = []; // 초기화
vm.search.searchObjectList.push(vm.search_date);
vm.search.searchObjectList.push(vm.search_data1);
// 실행
axios({
url: "/faq/list",
method: "post",
data: vm.search,
})
.then((response) => {
if (response.data.checkMessage.status == 200) {
vm.list = response.data.resultData.list;
vm.search = response.data.resultData.searchVO;
} else {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
}
})
.catch((error) => {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 상세 조회
fnDetail(faqId) {
this.$router.push({
path: "/faqView.page",
query: { faqId: faqId },
});
},
// 등록
fnInsert() {
this.$router.push({
path: "/faqInsert.page",
});
},
},
};
</script>