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
2024-11-19
2024-11-19
<template>
<div class="title-box flex justify-between mb40">
<p class="title">평가 등록</p>
</div>
<!-- <label for="" class="title1">문제 리스트</label>
<table class="mt20 mb100">
<colgroup>
<col style="width: 10%;">
<col style="width: 70%;">
<col style="width: 20%;">
</colgroup>
<thead>
<td>No.</td>
<td>문제</td>
<td>보기</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td><button type="button" title="수정" class="new-btn">
수정
</button></td>
</tr>
</tbody>
</table> -->
<div class="content-t">
<label for="" class="title1">상세 내용</label>
<div class="board-wrap mt20">
<div class="flex align-center mb20">
<label for="" class="title2">단원</label>
<select v-model="selectedUnit" class="mr10 data-wrap">
<option v-for="(unit, index) in units" :key="index" :value="unit.unitId">
{{ unit.unitName }}
</option>
</select>
</div>
<div class="flex align-center mb20">
<label for="" class="title2">평가 유형</label>
<select v-model="selectedType" class="mr10 data-wrap">
<option value="중간평가">중간평가</option>
<option value="최종평가">최종평가</option>
</select>
</div>
<hr>
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch">
문제 추가
</button>
<hr>
<div class="flex align-center mb20">
<table>
<thead>
<tr>
<td>No.</td>
<td>문제</td>
<td>유형</td>
<td>점수</td>
<td>순서</td>
</tr>
</thead>
<tbody>
<tr v-for="(evaluation, index) in evals" :key="evaluation.prblmId">
<td>{{ index + 1 }}</td>
<td>{{ evaluation.prblmExpln }}</td>
<td>{{ evaluation.prblmTypeNm }}</td>
<td>{{ evaluation.prblmScr }}</td>
<td><input v-model="evaluation.seq"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="flex justify-between mt50">
<button type="button" title="글쓰기" class="new-btn" @click="goToPage('ExamList')">
목록
</button>
<div class="flex">
<button type="button" title="글쓰기" class="new-btn" @click="submitForm">
등록
</button>
</div>
</div>
<div v-show="searchOpen" class="popup-wrap">
<div class="popup-box ">
<div class="flex justify-between mb30">
<p class="popup-title">문제 검색</p>
<button type="button" class="popup-close-btn" @click="closeBtn">
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
</button>
</div>
<div class="search-wrap mb30">
<input type="text" class="data-wrap" placeholder="" v-model="searchKeyword">
<button type="button" @click="fetchProblems">
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<div class="table-wrap">
<table>
<colgroup>
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 30%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<td></td>
<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">
<td><input type="checkbox" v-model="problem.check"></td>
<td>{{ index + 1 }}</td>
<td>{{ problem.prblmExpln }}</td>
<td>{{ problem.prblmTypeNm }}</td>
<td>{{ problem.prblmScr }}</td>
<td>{{ problem.userId }}</td>
<td>{{ problem.regDt }}</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="Previous">
</button>
<button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
:class="{ 'selected-btn': currentPage === page }">
{{ page }}
</button>
<button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
<img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
</button>
</article>
</div>
<div class="flex justify-end ">
<button type="button" title="" class="new-btn mr10" @click="closeBtn">
취소
</button>
<button type="button" title="" class="new-btn" @click="insertEval">
등록
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
import axios from 'axios';
export default {
data() {
return {
mdiMagnify: mdiMagnify,
units: [],
problems: [],
selectedUnit: null,
currentPage: 1,
pageSize: 5,
totalPosts: 0,
searchOption: '',
searchKeyword: '',
searchOpen: false,
evals: [],
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page, query: { unit_id: this.selectedUnit } });
},
buttonSearch() {
this.searchOpen = true;
this.fetchProblems();
},
closeBtn() {
this.searchOpen = false;
},
fetchUnits() {
axios({
url: "/unit/findAll.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
})
.then(response => {
console.log(response.data)
this.units = response.data;
if (this.$route.query.unit_id) {
this.selectedUnit = this.$route.query.unit_id;
}
})
.catch(error => {
console.error("fetchUnits - error: ", error);
alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
});
},
// 문제 가져오기
async fetchProblems(page = 1) {
try {
const response = await axios.post('/problem/problemList.json', {
option: this.searchOption,
keyword: this.searchKeyword,
unitId: this.selectedUnit,
pageSize: this.pageSize,
startIndex: (page - 1) * 5
});
this.problems = response.data.problems;
this.totalPosts = response.data.totalProblem;
this.currentPage = page;
} catch (error) {
console.error('문제 목록을 불러오는 중 오류가 발생했습니다.', error);
}
},
changePage(page) {
if (page < 1 || page > this.totalPages) return;
this.currentPage = page;
this.fetchProblems(page);
},
// 팝업 데이터 가져오기
insertEval() {
const selectedProblems = this.problems.filter(problem => problem.check);
this.evals.push(...selectedProblems);
this.closeBtn();
},
// 평가 데이터 등록하기
async submitForm() {
// 필요한 모든 필드를 검사합니다.
if (!this.selectedUnit) {
alert("단원을 지정해 주세요.");
return;
}
if (!this.selectedType) {
alert("평가 유형을 지정해 주세요.");
return;
}
const payload = {
evalType: this.selectedType,
unitId: this.selectedUnit
};
try {
const response = await axios.post('/evaluation/insertEvaluation.json', payload);
console.log('성공:', response.data);
const evalId = response.data.evalId;
await this.submitDetailForm(evalId);
await this.updateSequence();
this.goToPage('ExamList');
} catch (error) {
console.error('오류:', error);
}
},
// 평가 문제 상세 업로드
async submitDetailForm(evalId) {
const evalProblemVOList = this.evals.map(evaluation => ({
evalId: evalId,
prblmId: evaluation.prblmId,
}));
try {
const response = await axios.post('/evalProblem/insertEvalProblem.json', evalProblemVOList);
console.log('성공:', response.data);
} catch (error) {
console.error('오류:', error);
}
},
// 문제 정보 수정하기 (순서 변경)
async updateSequence(){
const evalList = this.evals.map(evaluation => ({
prblmId: evaluation.prblmId,
seq: evaluation.seq,
}));
try {
const response = await axios.post('/problem/updateProblemSeq.json', evalList);
console.log('성공:', response.data);
} catch (error) {
console.error('오류:', error);
}
},
},
watch: {
},
computed: {
totalPages() {
return Math.ceil(this.totalPosts / this.pageSize);
},
paginationButtons() {
let start = Math.max(0, this.currentPage - 2);
let end = Math.min(start + 5, this.totalPages);
if (end - start < 5) {
start = Math.max(0, end - 5);
}
return Array.from({ length: end - start }, (_, i) => start + i + 1);
},
startIndex() {
return this.currentPage * this.itemsPerPage;
}
},
components: {
SvgIcon
},
mounted() {
console.log('Main2 mounted');
this.fetchUnits();
}
}
</script>