jichoi / lms_front star
박민혁 박민혁 2024-08-19
240819 박민혁 문제 등록 수정
@336fc0b51d2ff1925bf1026f63b65f63f98e66af
client/views/pages/teacher/QuestionInsert.vue
--- client/views/pages/teacher/QuestionInsert.vue
+++ client/views/pages/teacher/QuestionInsert.vue
@@ -2,11 +2,13 @@
     <div class="title-box flex justify-between mb40">
         <p class="title">문제 등록</p>
     </div>
-    <div class="board-wrap">
+    <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" />
@@ -14,184 +16,298 @@
             </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="LC">듣기 이해력</option>
-                    <option value="RC">독해 이해력</option>
-                    <option value="WT">쓰기</option>
-                    <option value="SP">말하기</option>
-                    <option value="ETC">그외</option>
-                </select>
-            </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">문제 유형</label>
-                <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                    <option value="bbsTtl">제목</option>
-                    <option value="bbsCnt">내용</option>
-                    <option value="userNm">작성자</option>
-                    <option value="bbsCls">카테고리</option>
-                </select>
-            </div>
-            <div class="flex align-center">
-                <label for="" class="title2">지문</label>
-                <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                    <option value="bbsTtl">제목</option>
-                    <option value="bbsCnt">내용</option>
-                    <option value="userNm">작성자</option>
-                    <option value="bbsCls">카테고리</option>
-                </select>
-            </div>
-            <div class="flex align-center">
-                <label for="" class="title2">문제 지표</label>
-                <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                    <option value="bbsTtl">지표1</option>
-                    <option value="bbsCnt">지표2</option>
-                    <option value="userNm">지표3</option>
-                </select>
-            </div>
-       </div>
-        <div class="flex align-center mb20 mt40">
-            <label for="" class="title2">문제 배점</label>
-            <input type="text" class="data-wrap">
-        </div>
-
-        <div class="flex align-center mb20">
-            <label for="" class="title2">내용</label>
-            <textarea name="" id="" class="data-wrap"></textarea>
-        </div>
-        <div class="flex align-center mb20">
-            <label for="" class="title2">힌트</label>
-            <input type="text" class="data-wrap">
-        </div>
-        <div class="flex align-center mb20">
-            <label for="" class="title2">첨부파일</label>
-            <input type="file" ref="fileInput" @change="handleFileUpload" />
-        </div>
-        <hr>
-        <div v-if="selectedTab === 'tab1'">
-            <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">
-                <label for="" class="title2">답2</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">
-                <label for="" class="title2">답4</label>
-                <input type="text" class="data-wrap">
-            </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">해설</label>
-                <textarea name="" id="" class="data-wrap"></textarea>
-            </div>
-        </div>
-       <div v-else-if="selectedTab === 'tab2'">
-            <div class="flex align-center mb20">
-                <label for="" class="title2">답</label>
+        -->
+            <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="bbsTtl">O</option>
-                            <option value="bbsCnt">X</option>
-                        </select>
-            </div>
-            <div class="flex align-center mb20">
-                <label for="" class="title2">해설</label>
-                <textarea name="" id="" class="data-wrap"></textarea>
-            </div>
-       </div>
-       <div v-else-if="selectedTab === 'tab3'">
-            <div class="gd-col2 " >
-                <div class="flex align-center mb20 mr40" >
-                    <label for="" class="title2">문제1</label>
-                    <input type="text" class="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">답1</label>
-                    <input type="text" class="data-wrap">
+                    <label for="" class="title2">문제 유형</label>
+                    <select v-model="selectedSearchOption2" class="mr10 data-wrap">
+                        <option value="prblm_type_001">Chapter3 페이지 문제</option>
+                        <option value="prblm_type_002">Chapter3_1 페이지 문제</option>
+                        <option value="prblm_type_003">Chapter3_2 페이지 문제</option>
+                        <option value="prblm_type_004">Chapter3_3 페이지 문제</option>
+                        <option value="prblm_type_005">Chapter3_3_1 페이지 문제</option>
+                        <option value="prblm_type_006">Chapter3_4 페이지 문제</option>
+                        <option value="prblm_type_007">Chapter3_5 페이지 문제</option>
+                        <option value="prblm_type_008">Chapter3_6 페이지 문제</option>
+                        <option value="prblm_type_009">Chapter3_7 페이지 문제</option>
+                        <option value="prblm_type_010">Chapter3_8 페이지 문제</option>
+                        <option value="prblm_type_011">Chapter3_9 페이지 문제</option>
+                        <option value="prblm_type_012">Chapter3_10 페이지 문제</option>
+                        <option value="prblm_type_013">Chapter3_11 페이지 문제</option>
+                        <option value="prblm_type_014">Chapter3_12 페이지 문제</option>
+                        <option value="prblm_type_015">Chapter3_13 페이지 문제</option>
+                        <option value="prblm_type_016">Chapter3_14 페이지 문제</option>
+                        <option value="prblm_type_017">Chapter3_15 페이지 문제</option>
+                        <option value="prblm_type_018">Chapter2_8 페이지 문제</option>
+                        <option value="prblm_type_019">Chapter2_7 페이지 문제</option>
+                        <option value="prblm_type_020">Chapter2_5 페이지 문제</option>
+                        <option value="prblm_type_021">Chapter2_6 페이지 문제</option>
+                        <option value="prblm_type_022">Chapter2_10 페이지 문제</option>
+                        <option value="prblm_type_023">Chapter2_11 페이지 문제</option>
+                        <option value="prblm_type_024">Chapter2_13 페이지 문제</option>
+                    </select>
+
                 </div>
-                <div class="flex align-center mb20 mr40">
-                    <label for="" class="title2">문제2</label>
-                    <input type="text" class="data-wrap">
+
+                <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 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 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>
+                <textarea name="" id="" class="data-wrap" v-model="prblm_expln"></textarea>
             </div>
             <div class="flex align-center mb20">
-                <label for="" class="title2">해설</label>
-                <textarea name="" id="" class="data-wrap"></textarea>
+                <label for="" class="title2">힌트</label>
+                <input type="text" class="data-wrap" v-model="prblm_hint">
             </div>
-       </div>
-       <div v-else-if="selectedTab === 'tab4'">
-                <div class="flex align-center mb20 mr40" >
-                    <label for="" class="title2">문제1</label>
-                    <input type="text" class="data-wrap">
-                    <input type="checkbox" class="ui-checkbox ml30">
+            <div class="flex align-center ">
+                <label for="file" class="title2">첨부파일</label>
+                <input type="file" ref="fileInput" @change="handleFileUpload" multiple />
+            </div>
+            <hr>
+            <div v-if="selectedSearchOption2 === ('prblm_type_008')">
+                <!--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 class="flex align-center mb20 mr40">
-                    <label for="" class="title2">문제2</label>
-                    <input type="text" class="data-wrap">
-                    <input type="checkbox" class="ui-checkbox ml30">
+
+            </div>
+            <div v-else-if="['prblm_type_004', 'prblm_type_006', 'prblm_type_024'].includes(selectedSearchOption2)">
+                <!--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 class="flex align-center mb20 mr40">
-                    <label for="" class="title2">문제3</label>
-                    <input type="text" class="data-wrap">
-                    <input type="checkbox" class="ui-checkbox ml30">
+            </div>
+            <div
+                v-else-if="['prblm_type_001', 'prblm_type_005', 'prblm_type_019', 'prblm_type_022'].includes(selectedSearchOption2)">
+                <!--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 class="flex align-center mb20 mr40">
-                    <label for="" class="title2">문제4</label>
-                    <input type="text" class="data-wrap">
-                    <input type="checkbox" class="ui-checkbox ml30">
+            </div>
+            <div
+                v-else-if="['prblm_type_002', 'prblm_type_003', 'prblm_type_007', 'prblm_type_023'].includes(selectedSearchOption2)">
+                <!--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_009'">
+                <!--OX문제-->
+                <div class="flex align-center mb20">
+                    <label for="" class="title2">답</label>
+                    <select v-model="prblmDetail.answer1" class="mr10 data-wrap">
+                        <option value="bbsTtl">O</option>
+                        <option value="bbsCnt">X</option>
+                    </select>
+                </div>
+                <div class="flex align-center mb20">
+                        <label :for="'file' + i" class="title2">첨부파일</label>
+                        <input type="file" :ref="'fileInput' + 1" @change="handleDetailFileUpload(1)" multiple />
+                    </div>
+
+            </div>
+            <div
+                v-else-if="['prblm_type_010', 'prblm_type_011', 'prblm_type_012', 'prblm_type_013', 'prblm_type_014',
+                    'prblm_type_015', 'prblm_type_016', 'prblm_type_017', 'prblm_type_018', 'prblm_type_020', 'prblm_type_021'].includes(selectedSearchOption2)">
+                <!--서술형-->
+                <div class="gd-col2 ">
+                    <div class="flex align-center mb20">
+                        <label for="" class="title2">답</label>
+                        <input type="text" class="data-wrap" v-model="prblmDetail.answer1">
+                    </div>
+                    <div class="flex align-center mb20">
+                        <label :for="'file' + i" class="title2">첨부파일</label>
+                        <input type="file" :ref="'fileInput' + 1" @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"></textarea>
+                <textarea name="" id="" class="data-wrap" v-model="prblm_cmmt"></textarea>
             </div>
-       </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">
-                취소
+            <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>
-            <button type="button" title="글쓰기" class="new-btn" @click="submitForm">
-                등록
-            </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>
@@ -199,6 +315,8 @@
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify } from '@mdi/js';
+import store from '../AppStore';
+import axios from "axios";
 
 
 export default {
@@ -206,41 +324,288 @@
         return {
             mdiMagnify: mdiMagnify,
             selectedTab: '1',
-            selectedSearchOption: '', // 카테고리 선택
+            selectedSearchOption: '1', // 카테고리 선택
+            selectedSearchOption2: 'prblm_type_001',
+            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: {},
+
+            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: null, // 정답으로 선택된 답의 인덱스
+            },
+        };
     },
     methods: {
         goToPage(page) {
             this.$router.push({ name: page });
         },
-        submitForm() {
-        const payload = {
-            prblm_ctgry_id: this.selectedSearchOption, // 카테고리
-            prblm_type_id: this.selectedTab, // 문제 유형
-            prblm_scr: this.prblm_scr, // 문제 배점
-            prblm_expln: this.prblm_expln, // 내용
-            prblm_hint: this.prblm_hint, // 힌트
-            file_mng_id: this.file_mng_id // 첨부파일 ID
-        };
 
-        axios.post('/problem/insertProblem.json', payload)
-            .then(response => {
+        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("/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) {
+                alert("문제 유형을 지정해 주세요.");
+                return;
+            }
+
+            if (!this.prblm_scr) {
+                alert("문제 배점을 입력해 주세요.");
+                return;
+            }
+
+            if (!this.prblm_expln) {
+                alert("문제 내용을 입력해 주세요.");
+                return;
+            }
+
+            const payload = {
+                prblmCtgryId: this.selectedSearchOption, // 카테고리
+                prblmTypeId: this.selectedSearchOption2, // 문제 유형
+                prblmScr: this.prblm_scr, // 문제 배점
+                prblmExpln: this.prblm_expln, // 내용
+                prblmHint: this.prblm_hint, // 힌트
+                prblmCmmt: this.prblm_cmmt, // 해설
+               // text_id: 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);
-                // 성공적으로 저장한 후 처리 로직 추가
-            })
-            .catch(error => {
+                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) {
+            console.log('Submitting Problem Details:', 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_008') {
+                answerCount = 5;
+            } else if (['prblm_type_004', 'prblm_type_006', 'prblm_type_024'].includes(this.selectedSearchOption2)) {
+                answerCount = 4;
+            } else if (['prblm_type_001', 'prblm_type_005', 'prblm_type_019', 'prblm_type_022'].includes(this.selectedSearchOption2)) {
+                answerCount = 3;
+            } else if (['prblm_type_002', 'prblm_type_003', 'prblm_type_007', 'prblm_type_023'].includes(this.selectedSearchOption2)) {
+                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: answers[i].isCorrect, // isCorrect가 'Y' 또는 'N'으로 설정됨
+                    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: '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: null,
+            };
+            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("지문 목록을 불러오는 중 오류가 발생했습니다.");
+                });
+        },
+
     },
     watch: {
+        selectedSearchOption2() {
+            // 문제 유형이 변경될 때 prblmDetail 초기화
+            this.resetPrblmDetail();
+        },
 
     },
     computed: {
@@ -250,10 +615,19 @@
         SvgIcon
     },
     mounted() {
-        console.log('Main2 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();
     }
 }
+
 </script>
 <style scoped>
-.ui-checkbox{width: 30px; height: 30px;}
+.ui-checkbox {
+    width: 30px;
+    height: 30px;
+}
 </style>
(No newline at end of file)
Add a comment
List