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="title-box flex justify-between mb40">
<p class="title">문제</p>
<select name="" id="">
<option value="">A교재</option>
</select>
</div>
<label for="" class="title2">단원</label>
<div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
<button class="selected-btn">1</button>
<button>2</button>
<button>3</button>
</div>
<div class="search-wrap flex justify-end mb20">
<select name="" id="" class="mr10 data-wrap" v-model="searchOption">
<option value="">전체</option>
<option value="">제목</option>
<option value="prblm_expln">문제</option>
<option value="user_id">작성자</option>
<option value="">등록일</option>
</select>
<input type="text" placeholder="검색하세요." v-model="searchKeyword">
<button type="button" title="위원회 검색" @click="searchProblems">
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<td>No.</td>
<td>제목</td>
<td>내용</td>
<td>유형</td>
<td>지문</td>
<td>등록일</td>
</tr>
</thead>
<tbody>
<tr v-for="(problem, index) in problems" :key="problem.prblmId" @click="[goToPage('QuestionDetail', selectQuestionList(problem))]">
<td>{{ (currentPage - 1) * 10 + index + 1 }}</td>
<td>제목</td>
<td>{{ problem.prblmExpln }}</td>
<td>{{ problem.userId }}</td>
<td>오답률</td>
<td>등록일</td>
</tr>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
<img src="../../../resources/img/btn27_90t_normal.png" alt="">
</button>
<button :class="{ 'selected-btn': currentPage === 1 }" @click="changePage(1)">1</button>
<button :class="{ 'selected-btn': currentPage === 2 }" @click="changePage(2)">2</button>
<button :class="{ 'selected-btn': currentPage === 3 }" @click="changePage(3)">3</button>
<button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
<img src="../../../resources/img/btn28_90t_normal.png" alt="">
</button>
</article>
<div class="flex justify-end">
<button type="button" title="등록" class="new-btn" @click="goToPage('QuestionInsert')">
등록
</button>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
import axios from 'axios';
export default {
data() {
return {
problems: [],
mdiMagnify: mdiMagnify,
currentPage: 1,
totalPages: 3,
searchOption: '',
searchKeyword: '',
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
selectQuestionList(item) {
sessionStorage.setItem("selectQuestionList", JSON.stringify(item));
},
showConfirm(type) {
let message = '';
if (type === 'cancel') {
message = '삭제하시겠습니까?';
} else if (type === 'reset') {
message = '초기화하시겠습니까?';
} else if (type === 'save') {
message = '등록하시겠습니까?';
}
if (confirm(message)) {
this.goBack();
}
},
async fetchProblems(page = 1) {
try {
const response = await axios.post('/problem/problemList.json', {
option: this.searchOption,
keyword: this.searchKeyword,
pageSize: 10,
startIndex: (page - 1) * 10
});
this.problems = response.data;
this.currentPage = page;
} catch (error) {
console.error('문제 목록을 불러오는 중 오류가 발생했습니다.', error);
}
},
changePage(page) {
if (page < 1 || page > this.totalPages) return;
this.fetchProblems(page);
this.currentPage = page;
},
searchProblems() {
this.fetchProblems(1);
}
},
mounted() {
console.log('Main2 mounted');
this.fetchProblems();
}
}
</script>