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>
<div class="content-t">
<div class="board-wrap">
<!--
<div class="tab-box" >
<label class="mr20 title1">
<input type="radio" v-model="selectedTab" value="tab1" />
문제 유형 (4지선다)
</label>
<label class="mr20 title1">
<input type="radio" v-model="selectedTab" value="tab2" />
문제 유형 (O,X형)
</label>
<label class="mr20 title1">
<input type="radio" v-model="selectedTab" value="tab3" />
문제 유형 (서술형)
</label>
<label class="mr20 title1">
<input type="radio" v-model="selectedTab" value="tab4" />
문제 유형 (다중 정답형)
</label>
</div>
<hr>
-->
<div class="gd-col2">
<div class="flex align-center mb20">
<label for="" class="title2">카테고리</label>
<select v-model="selectedSearchOption" class="mr10 data-wrap">
<option value="1">듣기 이해력(LC)</option>
<option value="2">독해 이해력(RC)</option>
<option value="4">쓰기(WT)</option>
<option value="5">말하기(SP)</option>
<option value="3">그외(ETC)</option>
</select>
</div>
<div class="flex align-center mb20">
<label for="" class="title2">문제 유형</label>
<select v-model="selectedSearchOption2" class="mr10 data-wrap">
<option v-for="prblmT in problemType" :key="prblmT.prblm_type_id" :value="prblmT">
{{ prblmT.prblm_type_nm }}
</option>
</select>
</div>
<div class="flex align-center">
<label for="" class="title2">교재</label>
<select name="" id="" v-model="book_id" @change="fetchUnits" class="mr10">
<option value="" disabled>교재를 선택하세요</option>
<option v-for="book in books" :key="book.book_id" :value="book.book_id">
{{ book.book_nm }}
</option>
</select>
<select name="" id="" v-model="unit_id" @change="fetchTexts" class="mr10">
<option value="" disabled>단원을 선택하세요</option>
<option v-for="unit in units" :key="unit.unitId" :value="unit.unitId">
{{ unit.unitName }}
</option>
</select>
<select v-model="text_id" class="mr10 data-wrap">
<option value="" disabled>지문을 선택하세요</option>
<option v-for="text in texts" :key="text.textId" :value="text.textId">
{{ text.textTtl }}
</option>
</select>
</div>
</div>
<div class="flex align-center mb20 mt40">
<label for="" class="title2">문제 배점</label>
<input type="text" class="data-wrap" v-model="prblm_scr" />
</div>
<div class="flex align-center mb20">
<label for="" class="title2">내용</label>
<input name="" id="" class="data-wrap" v-model="prblm_expln" :placeholder="getPlaceholder" />
</div>
<div class="flex align-center mb20">
<label for="" class="title2">힌트</label>
<input type="text" class="data-wrap" v-model="prblm_hint" />
</div>
<div class="flex align-center">
<label for="file" class="title2">첨부파일</label>
<input type="file" ref="fileInput" @change="handleFileUpload" multiple />
</div>
<hr />
<div class="flex align-center mb20">
<label for="" class="title2">문제 예시</label>
<img
:src="`../../../client/resources/img/QuestionInsertExample/${selectedSearchOption2.prblm_type_nm}.png`"
alt="문제 예시 이미지"
class="problem-example-img"
v-if="selectedSearchOption2 && selectedSearchOption2.prblm_type_nm"
/>
</div>
<hr />
<div v-if="selectedSearchOption2.prblm_type_cls === '5지선다'">
<!--5지선다-->
<div class="gd-col2" v-for="i in 5" :key="i">
<div>
<div class="flex align-center mb20 mr40">
<label :for="'answer' + i" class="title2">답{{ i }}</label>
<input
:id="'answer' + i"
type="text"
class="data-wrap"
v-model="prblmDetail.answers[i].text"
/>
</div>
<div class="flex align-center mb20">
<label :for="'correct' + i" class="title2">정답여부</label>
<input
:id="'correct' + i"
type="checkbox"
class="ui-checkbox"
:checked="prblmDetail.correctIndex === i"
@change="setCorrectAnswer(i)"
/>
</div>
</div>
<div class="flex align-center mb20">
<label :for="'file' + i" class="title2">첨부파일</label>
<input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple />
</div>
</div>
</div>
<div v-else-if="selectedSearchOption2.prblm_type_cls === '4지선다'">
<!--4지선다-->
<div class="gd-col2" v-for="i in 4" :key="i">
<div>
<div class="flex align-center mb20 mr40">
<label :for="'answer' + i" class="title2">답{{ i }}</label>
<input
:id="'answer' + i"
type="text"
class="data-wrap"
v-model="prblmDetail.answers[i].text"
/>
</div>
<div class="flex align-center mb20">
<label :for="'correct' + i" class="title2">정답여부</label>
<input
:id="'correct' + i"
type="checkbox"
class="ui-checkbox"
:checked="prblmDetail.correctIndex === i"
@change="setCorrectAnswer(i)"
/>
</div>
</div>
<div class="flex align-center mb20">
<label :for="'file' + i" class="title2">첨부파일</label>
<input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple />
</div>
</div>
</div>
<div v-else-if="selectedSearchOption2.prblm_type_cls === '3지선다'">
<!--3지선다-->
<div class="gd-col2" v-for="i in 3" :key="i">
<div>
<div class="flex align-center mb20 mr40">
<label :for="'answer' + i" class="title2">답{{ i }}</label>
<input
:id="'answer' + i"
type="text"
class="data-wrap"
v-model="prblmDetail.answers[i].text"
/>
</div>
<div class="flex align-center mb20">
<label :for="'correct' + i" class="title2">정답여부</label>
<input
:id="'correct' + i"
type="checkbox"
class="ui-checkbox"
:checked="prblmDetail.correctIndex === i"
@change="setCorrectAnswer(i)"
/>
</div>
</div>
<div class="flex align-center mb20">
<label :for="'file' + i" class="title2">첨부파일</label>
<input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple />
</div>
</div>
</div>
<div v-else-if="selectedSearchOption2.prblm_type_cls === '2지선다'">
<!--2지선다-->
<div class="gd-col2" v-for="i in 2" :key="i">
<div>
<div class="flex align-center mb20 mr40">
<label :for="'answer' + i" class="title2">답{{ i }}</label>
<input
:id="'answer' + i"
type="text"
class="data-wrap"
v-model="prblmDetail.answers[i].text"
/>
</div>
<div class="flex align-center mb20">
<label :for="'correct' + i" class="title2">정답여부</label>
<input
:id="'correct' + i"
type="checkbox"
class="ui-checkbox"
:checked="prblmDetail.correctIndex === i"
@change="setCorrectAnswer(i)"
/>
</div>
</div>
<div class="flex align-center mb20">
<label :for="'file' + i" class="title2">첨부파일</label>
<input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple />
</div>
</div>
</div>
<div v-else-if="selectedSearchOption2.prblm_type_cls === 'OX 문제'">
<!-- OX 문제 -->
<div class="flex align-center mb20">
<label for="" class="title2">답</label>
<select v-model="prblmDetail.answers[1].text" class="mr10 data-wrap">
<option value="O">O</option>
<option value="X">X</option>
</select>
</div>
<div class="flex align-center mb20">
<div v-if="prblmDetail.answers[1]?.fileInfo">
<div v-for="(data, index) in prblmDetail.answers[1].fileInfo" :key="index">
<label>{{ data.fileNm }}</label>
</div>
</div>
<input type="file" ref="fileInput1" @change="handleDetailFileUpload(1)" multiple />
</div>
</div>
<div v-else-if="selectedSearchOption2.prblm_type_cls === '서술형'">
<!-- 서술형 -->
<div class="gd-col2">
<div class="flex align-center mb20">
<label for="" class="title2">답</label>
<input type="text" class="data-wrap" v-model="prblmDetail.answers[1].text" />
</div>
<div class="flex align-center mb20">
<label class="title2">첨부파일</label>
<div v-for="(data, index) in prblmDetail.answers[1]?.fileInfo" :key="index">
<label v-if="prblmDetail.answers[1]?.fileInfo">{{ data.fileNm }}</label>
</div>
<input type="file" ref="fileInput1" @change="handleDetailFileUpload(1)" multiple />
</div>
</div>
</div>
<!-- 연결형 -->
<!-- <div v-else-if="['prblm_type_015'].includes(selectedSearchOption2)">
<div class="gd-col2 ">
<div class="flex align-center mb20 mr40">
<label for="" class="title2">문제1</label>
<input type="text" class="data-wrap">
</div>
<div class="flex align-center mb20">
<label for="" class="title2">답1</label>
<input type="text" class="data-wrap">
</div>
<div class="flex align-center mb20 mr40">
<label for="" class="title2">문제2</label>
<input type="text" class="data-wrap">
</div>
<div class="flex align-center mb20">
<label for="" class="title2">답2</label>
<input type="text" class="data-wrap">
</div>
<div class="flex align-center mb20 mr40">
<label for="" class="title2">문제3</label>
<input type="text" class="data-wrap">
</div>
<div class="flex align-center mb20 ">
<label for="" class="title2">답3</label>
<input type="text" class="data-wrap">
</div>
<div class="flex align-center mb20 mr40">
<label for="" class="title2">문제4</label>
<input type="text" class="data-wrap">
</div>
<div class="flex align-center mb20">
<label for="" class="title2">답4</label>
<input type="text" class="data-wrap">
</div>
</div>
</div> -->
<div class="flex align-center mb20">
<label for="" class="title2">해설</label>
<textarea name="" id="" class="data-wrap" v-model="prblm_cmmt"></textarea>
</div>
<hr />
<div class="flex align-center mb20 mt40">
<label for="" class="title2">문제 지표 1</label>
<input type="text" class="data-wrap" v-model="prblm_mtr1" />
</div>
<div class="flex align-center mb20 mt40">
<label for="" class="title2">문제 지표 2</label>
<input type="text" class="data-wrap" v-model="prblm_mtr2" />
</div>
<div class="flex align-center mb20 mt40">
<label for="" class="title2">문제 지표 3</label>
<input type="text" class="data-wrap" v-model="prblm_mtr3" />
</div>
<div class="flex align-center mb20 mt40">
<label for="" class="title2">문제 지표 4</label>
<input type="text" class="data-wrap" v-model="prblm_mtr4" />
</div>
<div class="flex align-center mb20 mt40">
<label for="" class="title2">문제 지표 5</label>
<input type="text" class="data-wrap" v-model="prblm_mtr5" />
</div>
<div class="flex align-center mb20 mt40">
<label for="" class="title2">문제 지표 6</label>
<input type="text" class="data-wrap" v-model="prblm_mtr6" />
</div>
</div>
<div class="flex justify-between mt50">
<button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')">목록</button>
<div class="flex">
<!--
<button type="button" title="글쓰기" class="new-btn mr10">
취소
</button>-->
<button type="button" title="글쓰기" class="new-btn" @click="submitForm">등록</button>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
import store from '../AppStore';
import axios from 'axios';
export default {
data() {
return {
mdiMagnify: mdiMagnify,
selectedTab: '1',
selectedSearchOption: '1', // 카테고리 선택
selectedSearchOption2: '',
text_id: '',
prblm_ctgry_id: '', // 카테고리 ID
prblm_type_id: '', // 문제 유형 ID
prblm_scr: '', // 문제 배점
prblm_expln: '', // 내용
prblm_hint: '', // 힌트
book_id: '',
unit_id: '',
user_id: '',
file_mng_id: null, // 첨부파일 ID
books: [],
units: [],
texts: [],
file: '',
prblm_mtr1: '',
prblm_mtr2: '',
prblm_mtr3: '',
prblm_mtr4: '',
prblm_mtr5: '',
prblm_mtr6: '',
selectedFiles: {},
problemType: [],
prblmDetail: {
answers: {
1: { text: '', isCorrect: 'N', fileMngId: null },
2: { text: '', isCorrect: 'N', fileMngId: null },
3: { text: '', isCorrect: 'N', fileMngId: null },
4: { text: '', isCorrect: 'N', fileMngId: null },
5: { text: '', isCorrect: 'N', fileMngId: null },
},
correctIndex: 1, // 정답으로 선택된 답의 인덱스
},
commonPlaceholderPrefix: '빈칸이 들어갈 곳을 /로 표시해주세요. ex)',
};
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
handleFileUpload(e) {
this.file = e.target.files;
},
handleDetailFileUpload(index) {
const files = this.$refs['fileInput' + index][0].files;
this.selectedFiles[index] = files;
},
// 파일 업로드 메서드
async uploadFiles(files) {
if (!files || files.length === 0) {
return null;
}
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
try {
const response = await axios.post('http://165.229.169.113:9080/file/upload.json', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
return response.data.fileMngId; // 파일 매니지 ID 반환
} catch (error) {
console.error('파일 업로드 오류:', error);
throw new Error('파일 업로드에 실패했습니다.');
}
},
// 문제 업로드
async submitForm() {
// 필요한 모든 필드를 검사합니다.
if (!this.selectedSearchOption) {
alert('카테고리를 지정해 주세요.');
return;
}
if (!this.selectedSearchOption2.prblm_type_id) {
alert('문제 유형을 지정해 주세요.');
return;
}
if (!this.prblm_scr) {
alert('문제 배점을 입력해 주세요.');
return;
}
if (!this.prblm_expln) {
alert('문제 내용을 입력해 주세요.');
return;
}
const payload = {
prblmCtgryId: this.selectedSearchOption, // 카테고리
prblmTypeId: this.selectedSearchOption2.prblm_type_id, // 문제 유형
prblmScr: this.prblm_scr, // 문제 배점
prblmExpln: this.prblm_expln, // 내용
prblmHint: this.prblm_hint, // 힌트
prblmCmmt: this.prblm_cmmt, // 해설
textId: this.text_id, // 지문 아이디
unitId: this.unit_id, // 단원 아이디
bookId: this.book_id, // 교재 아이디
// userId: this.user_id, // 유저 아이디
userId: 'USID_000000000000004', // 유저 아이디
prblmMtr1: this.prblm_mtr1, // 문제 지표
prblmMtr2: this.prblm_mtr2,
prblmMtr3: this.prblm_mtr3,
prblmMtr4: this.prblm_mtr4,
prblmMtr5: this.prblm_mtr5,
prblmMtr6: this.prblm_mtr6,
fileMngId: this.file_mng_id, // 첨부파일 ID
};
if (this.file && this.file.length > 0) {
// 파일 업로드를 수행하고, 결과로 얻은 fileMngId를 payload에 추가합니다.
const fileMngId = await this.uploadFiles(this.file);
payload.fileMngId = fileMngId;
}
try {
const response = await axios.post('/problem/insertProblem.json', payload);
console.log('성공:', response.data);
const prblmId = response.data.prblmId; // 상세 문제 정보를 위한 문제 ID
const problemDetails = await this.prepareProblemDetails(prblmId);
await this.submitDetailForm(problemDetails);
this.goToPage('QuestionList');
} catch (error) {
console.error('오류:', error);
// 오류 처리 로직 추가
}
},
// 문제 상세 업로드
async submitDetailForm(problemDetails) {
try {
const response = await axios.post('/problem/insertProblemDetail.json', problemDetails);
console.log('성공:', response.data);
} catch (error) {
console.error('오류:', error);
// 오류 처리 로직 추가
}
},
// 상세 정보 세팅하기
async prepareProblemDetails(prblmId) {
const details = [];
const answers = this.prblmDetail.answers;
let answerCount = 0;
if (this.selectedSearchOption2.prblm_type_cls === '5지선다') {
answerCount = 5;
} else if (this.selectedSearchOption2.prblm_type_cls === '4지선다') {
answerCount = 4;
} else if (this.selectedSearchOption2.prblm_type_cls === '3지선다') {
answerCount = 3;
} else if (this.selectedSearchOption2.prblm_type_cls === '2지선다') {
answerCount = 2;
} else {
answerCount = 1;
}
for (let i = 1; i <= answerCount; i++) {
if (this.selectedFiles[i] && this.selectedFiles[i].length > 0) {
const uploadedFileMngId = await this.uploadFiles(this.selectedFiles[i]);
answers[i].fileMngId = uploadedFileMngId; // 파일 매니지 ID 저장
}
details.push({
prblmId,
prblmDtlExpln: answers[i].text || '',
prblmYn:
this.selectedSearchOption2.prblm_type_cls === '서술형' ||
this.selectedSearchOption2.prblm_type_cls === 'OX 문제'
? 'Y'
: answers[i].isCorrect, // 서술형 및 OX 문제의 경우 항상 'Y'
fileMngId: answers[i].fileMngId,
});
}
return details;
},
setCorrectAnswer(index) {
this.prblmDetail.correctIndex = index;
// 선택된 인덱스의 답만 'Y'로 설정하고, 나머지는 'N'으로 설정
for (let i = 1; i <= 5; i++) {
this.prblmDetail.answers[i].isCorrect = i === index ? 'Y' : 'N';
}
},
resetPrblmDetail() {
this.prblmDetail = {
answers: {
1: { text: '', isCorrect: 'Y', fileMngId: null },
2: { text: '', isCorrect: 'N', fileMngId: null },
3: { text: '', isCorrect: 'N', fileMngId: null },
4: { text: '', isCorrect: 'N', fileMngId: null },
5: { text: '', isCorrect: 'N', fileMngId: null },
},
correctIndex: 1,
};
this.selectedFiles = {};
},
// 교재 정보 가져오기
fetchBooks() {
axios({
url: '/book/findAll.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
})
.then((response) => {
console.log(response.data);
this.books = response.data;
this.text_id = '';
})
.catch((error) => {
console.error('fetchBooks - error: ', error);
alert('교재 목록을 불러오는 중 오류가 발생했습니다.');
});
},
// 단원 정보 가져오기
fetchUnits() {
if (!this.book_id) return;
axios({
url: '/unit/unitList.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
bookId: this.book_id,
},
})
.then((response) => {
this.units = response.data;
this.text_id = '';
})
.catch((error) => {
console.error('fetchUnits - error: ', error);
alert('단원 목록을 불러오는 중 오류가 발생했습니다.');
});
},
// 지문 정보 가져오기
fetchTexts() {
axios({
url: '/text/textSearch.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: {
unitId: this.unit_id,
},
})
.then((response) => {
this.texts = response.data.list;
})
.catch((error) => {
console.error('fetchTexts - error: ', error);
alert('지문 목록을 불러오는 중 오류가 발생했습니다.');
});
},
// 문제 유형 정보 가져오기
selectProblemType() {
axios({
url: '/problem/selectType.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
})
.then((response) => {
this.problemType = response.data;
console.log('문제 유형 : ', response.data);
})
.catch((error) => {
console.error('selectProblemType - error: ', error);
});
},
// 문제 유형에 따라 placeholder 반환
getExample(problemTypeName) {
switch (problemTypeName) {
case 'Chapter3_2 페이지 문제':
return 'i / to / bed';
case 'Chapter3_5 페이지 문제':
return 'We / chicken';
case 'Chapter2_7 페이지 문제':
return 'I / boy';
case 'Chapter2_10 페이지 문제':
return `i'm fine / thank you`;
case 'Chapter2_11 페이지 문제':
return 'I / have money';
default:
return '';
}
},
},
watch: {
selectedSearchOption2() {
// 문제 유형이 변경될 때 prblmDetail 초기화
this.resetPrblmDetail();
},
},
computed: {
getPlaceholder() {
const example = this.selectedSearchOption2 ? this.getExample(this.selectedSearchOption2.prblm_type_nm) : '';
return example ? `${this.commonPlaceholderPrefix} ${example}` : '내용을 입력해주세요.';
},
},
components: {
SvgIcon,
},
mounted() {
this.book_id = this.$route.query.book_id;
this.unit_id = this.$route.query.unit_id;
this.user_id = store.getters.getUserInfo.userId;
this.fetchBooks();
this.fetchUnits();
this.fetchTexts();
this.selectProblemType();
},
};
</script>
<style scoped>
.ui-checkbox {
width: 30px;
height: 30px;
}
.problem-example-img {
width: 1000px;
height: auto;
border-radius: 10px;
border: 1px solid #c4c4c4;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
</style>