![](/assets/images/project_default_logo.png)
--- client/views/pages/teacher/QuestionInsert.vue
+++ client/views/pages/teacher/QuestionInsert.vue
... | ... | @@ -2,11 +2,13 @@ |
2 | 2 |
<div class="title-box flex justify-between mb40"> |
3 | 3 |
<p class="title">문제 등록</p> |
4 | 4 |
</div> |
5 |
- <div class="board-wrap"> |
|
5 |
+ <div class="content-t"> |
|
6 |
+ <div class="board-wrap"> |
|
7 |
+ <!-- |
|
6 | 8 |
<div class="tab-box" > |
7 | 9 |
<label class="mr20 title1"> |
8 | 10 |
<input type="radio" v-model="selectedTab" value="tab1" /> |
9 |
- 문제 유형 (일반형) |
|
11 |
+ 문제 유형 (4지선다) |
|
10 | 12 |
</label> |
11 | 13 |
<label class="mr20 title1"> |
12 | 14 |
<input type="radio" v-model="selectedTab" value="tab2" /> |
... | ... | @@ -14,184 +16,298 @@ |
14 | 16 |
</label> |
15 | 17 |
<label class="mr20 title1"> |
16 | 18 |
<input type="radio" v-model="selectedTab" value="tab3" /> |
17 |
- 문제 유형 (연결형) |
|
19 |
+ 문제 유형 (서술형) |
|
18 | 20 |
</label> |
19 | 21 |
<label class="mr20 title1"> |
20 | 22 |
<input type="radio" v-model="selectedTab" value="tab4" /> |
21 | 23 |
문제 유형 (다중 정답형) |
22 | 24 |
</label> |
25 |
+ |
|
23 | 26 |
</div> |
24 | 27 |
<hr> |
25 |
- <div class="gd-col2 " > |
|
26 |
- <div class="flex align-center mb20"> |
|
27 |
- <label for="" class="title2">카테고리</label> |
|
28 |
- <select v-model="selectedSearchOption" class="mr10 data-wrap"> |
|
29 |
- <option value="LC">듣기 이해력</option> |
|
30 |
- <option value="RC">독해 이해력</option> |
|
31 |
- <option value="WT">쓰기</option> |
|
32 |
- <option value="SP">말하기</option> |
|
33 |
- <option value="ETC">그외</option> |
|
34 |
- </select> |
|
35 |
- </div> |
|
36 |
- <div class="flex align-center mb20"> |
|
37 |
- <label for="" class="title2">문제 유형</label> |
|
38 |
- <select v-model="selectedSearchOption" class="mr10 data-wrap"> |
|
39 |
- <option value="bbsTtl">제목</option> |
|
40 |
- <option value="bbsCnt">내용</option> |
|
41 |
- <option value="userNm">작성자</option> |
|
42 |
- <option value="bbsCls">카테고리</option> |
|
43 |
- </select> |
|
44 |
- </div> |
|
45 |
- <div class="flex align-center"> |
|
46 |
- <label for="" class="title2">지문</label> |
|
47 |
- <select v-model="selectedSearchOption" class="mr10 data-wrap"> |
|
48 |
- <option value="bbsTtl">제목</option> |
|
49 |
- <option value="bbsCnt">내용</option> |
|
50 |
- <option value="userNm">작성자</option> |
|
51 |
- <option value="bbsCls">카테고리</option> |
|
52 |
- </select> |
|
53 |
- </div> |
|
54 |
- <div class="flex align-center"> |
|
55 |
- <label for="" class="title2">문제 지표</label> |
|
56 |
- <select v-model="selectedSearchOption" class="mr10 data-wrap"> |
|
57 |
- <option value="bbsTtl">지표1</option> |
|
58 |
- <option value="bbsCnt">지표2</option> |
|
59 |
- <option value="userNm">지표3</option> |
|
60 |
- </select> |
|
61 |
- </div> |
|
62 |
- </div> |
|
63 |
- <div class="flex align-center mb20 mt40"> |
|
64 |
- <label for="" class="title2">문제 배점</label> |
|
65 |
- <input type="text" class="data-wrap"> |
|
66 |
- </div> |
|
67 |
- |
|
68 |
- <div class="flex align-center mb20"> |
|
69 |
- <label for="" class="title2">내용</label> |
|
70 |
- <textarea name="" id="" class="data-wrap"></textarea> |
|
71 |
- </div> |
|
72 |
- <div class="flex align-center mb20"> |
|
73 |
- <label for="" class="title2">힌트</label> |
|
74 |
- <input type="text" class="data-wrap"> |
|
75 |
- </div> |
|
76 |
- <div class="flex align-center mb20"> |
|
77 |
- <label for="" class="title2">첨부파일</label> |
|
78 |
- <input type="file" ref="fileInput" @change="handleFileUpload" /> |
|
79 |
- </div> |
|
80 |
- <hr> |
|
81 |
- <div v-if="selectedTab === 'tab1'"> |
|
82 |
- <div class="flex align-center mb20"> |
|
83 |
- <label for="" class="title2">답1</label> |
|
84 |
- <input type="text" class="data-wrap"> |
|
85 |
- </div> |
|
86 |
- <div class="flex align-center mb20"> |
|
87 |
- <label for="" class="title2">답2</label> |
|
88 |
- <input type="text" class="data-wrap"> |
|
89 |
- </div> |
|
90 |
- <div class="flex align-center mb20"> |
|
91 |
- <label for="" class="title2">답3</label> |
|
92 |
- <input type="text" class="data-wrap"> |
|
93 |
- </div> |
|
94 |
- <div class="flex align-center mb20"> |
|
95 |
- <label for="" class="title2">답4</label> |
|
96 |
- <input type="text" class="data-wrap"> |
|
97 |
- </div> |
|
98 |
- <div class="flex align-center mb20"> |
|
99 |
- <label for="" class="title2">해설</label> |
|
100 |
- <textarea name="" id="" class="data-wrap"></textarea> |
|
101 |
- </div> |
|
102 |
- </div> |
|
103 |
- <div v-else-if="selectedTab === 'tab2'"> |
|
104 |
- <div class="flex align-center mb20"> |
|
105 |
- <label for="" class="title2">답</label> |
|
28 |
+ --> |
|
29 |
+ <div class="gd-col2 "> |
|
30 |
+ <div class="flex align-center mb20"> |
|
31 |
+ <label for="" class="title2">카테고리</label> |
|
106 | 32 |
<select v-model="selectedSearchOption" class="mr10 data-wrap"> |
107 |
- <option value="bbsTtl">O</option> |
|
108 |
- <option value="bbsCnt">X</option> |
|
109 |
- </select> |
|
110 |
- </div> |
|
111 |
- <div class="flex align-center mb20"> |
|
112 |
- <label for="" class="title2">해설</label> |
|
113 |
- <textarea name="" id="" class="data-wrap"></textarea> |
|
114 |
- </div> |
|
115 |
- </div> |
|
116 |
- <div v-else-if="selectedTab === 'tab3'"> |
|
117 |
- <div class="gd-col2 " > |
|
118 |
- <div class="flex align-center mb20 mr40" > |
|
119 |
- <label for="" class="title2">문제1</label> |
|
120 |
- <input type="text" class="data-wrap"> |
|
33 |
+ <option value="1">듣기 이해력(LC)</option> |
|
34 |
+ <option value="2">독해 이해력(RC)</option> |
|
35 |
+ <option value="4">쓰기(WT)</option> |
|
36 |
+ <option value="5">말하기(SP)</option> |
|
37 |
+ <option value="3">그외(ETC)</option> |
|
38 |
+ </select> |
|
121 | 39 |
</div> |
122 | 40 |
<div class="flex align-center mb20"> |
123 |
- <label for="" class="title2">답1</label> |
|
124 |
- <input type="text" class="data-wrap"> |
|
41 |
+ <label for="" class="title2">문제 유형</label> |
|
42 |
+ <select v-model="selectedSearchOption2" class="mr10 data-wrap"> |
|
43 |
+ <option value="prblm_type_001">Chapter3 페이지 문제</option> |
|
44 |
+ <option value="prblm_type_002">Chapter3_1 페이지 문제</option> |
|
45 |
+ <option value="prblm_type_003">Chapter3_2 페이지 문제</option> |
|
46 |
+ <option value="prblm_type_004">Chapter3_3 페이지 문제</option> |
|
47 |
+ <option value="prblm_type_005">Chapter3_3_1 페이지 문제</option> |
|
48 |
+ <option value="prblm_type_006">Chapter3_4 페이지 문제</option> |
|
49 |
+ <option value="prblm_type_007">Chapter3_5 페이지 문제</option> |
|
50 |
+ <option value="prblm_type_008">Chapter3_6 페이지 문제</option> |
|
51 |
+ <option value="prblm_type_009">Chapter3_7 페이지 문제</option> |
|
52 |
+ <option value="prblm_type_010">Chapter3_8 페이지 문제</option> |
|
53 |
+ <option value="prblm_type_011">Chapter3_9 페이지 문제</option> |
|
54 |
+ <option value="prblm_type_012">Chapter3_10 페이지 문제</option> |
|
55 |
+ <option value="prblm_type_013">Chapter3_11 페이지 문제</option> |
|
56 |
+ <option value="prblm_type_014">Chapter3_12 페이지 문제</option> |
|
57 |
+ <option value="prblm_type_015">Chapter3_13 페이지 문제</option> |
|
58 |
+ <option value="prblm_type_016">Chapter3_14 페이지 문제</option> |
|
59 |
+ <option value="prblm_type_017">Chapter3_15 페이지 문제</option> |
|
60 |
+ <option value="prblm_type_018">Chapter2_8 페이지 문제</option> |
|
61 |
+ <option value="prblm_type_019">Chapter2_7 페이지 문제</option> |
|
62 |
+ <option value="prblm_type_020">Chapter2_5 페이지 문제</option> |
|
63 |
+ <option value="prblm_type_021">Chapter2_6 페이지 문제</option> |
|
64 |
+ <option value="prblm_type_022">Chapter2_10 페이지 문제</option> |
|
65 |
+ <option value="prblm_type_023">Chapter2_11 페이지 문제</option> |
|
66 |
+ <option value="prblm_type_024">Chapter2_13 페이지 문제</option> |
|
67 |
+ </select> |
|
68 |
+ |
|
125 | 69 |
</div> |
126 |
- <div class="flex align-center mb20 mr40"> |
|
127 |
- <label for="" class="title2">문제2</label> |
|
128 |
- <input type="text" class="data-wrap"> |
|
70 |
+ |
|
71 |
+ <div class="flex align-center"> |
|
72 |
+ <label for="" class="title2">지문</label> |
|
73 |
+ <select name="" id="" v-model="book_id" @change="fetchUnits" class="mr10"> |
|
74 |
+ <option value="" disabled>교재를 선택하세요</option> |
|
75 |
+ <option v-for="book in books" :key="book.book_id" :value="book.book_id"> |
|
76 |
+ {{ book.book_nm }} |
|
77 |
+ </option> |
|
78 |
+ </select> |
|
79 |
+ <select name="" id="" v-model="unit_id" @change="fetchTexts" class="mr10"> |
|
80 |
+ <option value="" disabled>단원을 선택하세요</option> |
|
81 |
+ <option v-for="unit in units" :key="unit.unitId" :value="unit.unitId"> |
|
82 |
+ {{ unit.unitName }} |
|
83 |
+ </option> |
|
84 |
+ </select> |
|
85 |
+ |
|
86 |
+ <select v-model="text_id" class="mr10 data-wrap"> |
|
87 |
+ <option value="" disabled>지문을 선택하세요</option> |
|
88 |
+ <option v-for="text in texts" :key="text.textId" :value="text.textId"> |
|
89 |
+ {{ text.textTtl }} |
|
90 |
+ </option> |
|
91 |
+ </select> |
|
129 | 92 |
</div> |
130 |
- <div class="flex align-center mb20"> |
|
131 |
- <label for="" class="title2">답2</label> |
|
132 |
- <input type="text" class="data-wrap"> |
|
133 |
- </div> |
|
134 |
- <div class="flex align-center mb20 mr40"> |
|
135 |
- <label for="" class="title2">문제3</label> |
|
136 |
- <input type="text" class="data-wrap"> |
|
137 |
- </div> |
|
138 |
- <div class="flex align-center mb20 "> |
|
139 |
- <label for="" class="title2">답3</label> |
|
140 |
- <input type="text" class="data-wrap"> |
|
141 |
- </div> |
|
142 |
- <div class="flex align-center mb20 mr40"> |
|
143 |
- <label for="" class="title2">문제4</label> |
|
144 |
- <input type="text" class="data-wrap"> |
|
145 |
- </div> |
|
146 |
- <div class="flex align-center mb20"> |
|
147 |
- <label for="" class="title2">답4</label> |
|
148 |
- <input type="text" class="data-wrap"> |
|
149 |
- </div> |
|
93 |
+ </div> |
|
94 |
+ <div class="flex align-center mb20 mt40"> |
|
95 |
+ <label for="" class="title2">문제 배점</label> |
|
96 |
+ <input type="text" class="data-wrap" v-model="prblm_scr"> |
|
97 |
+ </div> |
|
98 |
+ |
|
99 |
+ <div class="flex align-center mb20"> |
|
100 |
+ <label for="" class="title2">내용</label> |
|
101 |
+ <textarea name="" id="" class="data-wrap" v-model="prblm_expln"></textarea> |
|
150 | 102 |
</div> |
151 | 103 |
<div class="flex align-center mb20"> |
152 |
- <label for="" class="title2">해설</label> |
|
153 |
- <textarea name="" id="" class="data-wrap"></textarea> |
|
104 |
+ <label for="" class="title2">힌트</label> |
|
105 |
+ <input type="text" class="data-wrap" v-model="prblm_hint"> |
|
154 | 106 |
</div> |
155 |
- </div> |
|
156 |
- <div v-else-if="selectedTab === 'tab4'"> |
|
157 |
- <div class="flex align-center mb20 mr40" > |
|
158 |
- <label for="" class="title2">문제1</label> |
|
159 |
- <input type="text" class="data-wrap"> |
|
160 |
- <input type="checkbox" class="ui-checkbox ml30"> |
|
107 |
+ <div class="flex align-center "> |
|
108 |
+ <label for="file" class="title2">첨부파일</label> |
|
109 |
+ <input type="file" ref="fileInput" @change="handleFileUpload" multiple /> |
|
110 |
+ </div> |
|
111 |
+ <hr> |
|
112 |
+ <div v-if="selectedSearchOption2 === ('prblm_type_008')"> |
|
113 |
+ <!--5지선다--> |
|
114 |
+ <div class="gd-col2 " v-for="i in 5" :key="i"> |
|
115 |
+ <div> |
|
116 |
+ <div class="flex align-center mb20 mr40"> |
|
117 |
+ <label :for="'answer' + i" class="title2">답{{ i }}</label> |
|
118 |
+ <input :id="'answer' + i" type="text" class="data-wrap" v-model="prblmDetail.answers[i].text" /> |
|
119 |
+ </div> |
|
120 |
+ <div class="flex align-center mb20"> |
|
121 |
+ <label :for="'correct' + i" class="title2">정답여부</label> |
|
122 |
+ <input :id="'correct' + i" type="checkbox" class="ui-checkbox" |
|
123 |
+ :checked="prblmDetail.correctIndex === i" @change="setCorrectAnswer(i)" /> |
|
124 |
+ </div> |
|
125 |
+ </div> |
|
126 |
+ <div class="flex align-center mb20"> |
|
127 |
+ <label :for="'file' + i" class="title2">첨부파일</label> |
|
128 |
+ <input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple /> |
|
129 |
+ </div> |
|
161 | 130 |
</div> |
162 |
- <div class="flex align-center mb20 mr40"> |
|
163 |
- <label for="" class="title2">문제2</label> |
|
164 |
- <input type="text" class="data-wrap"> |
|
165 |
- <input type="checkbox" class="ui-checkbox ml30"> |
|
131 |
+ |
|
132 |
+ </div> |
|
133 |
+ <div v-else-if="['prblm_type_004', 'prblm_type_006', 'prblm_type_024'].includes(selectedSearchOption2)"> |
|
134 |
+ <!--4지선다--> |
|
135 |
+ <div class="gd-col2 " v-for="i in 4" :key="i"> |
|
136 |
+ <div> |
|
137 |
+ <div class="flex align-center mb20 mr40"> |
|
138 |
+ <label :for="'answer' + i" class="title2">답{{ i }}</label> |
|
139 |
+ <input :id="'answer' + i" type="text" class="data-wrap" v-model="prblmDetail.answers[i].text" /> |
|
140 |
+ </div> |
|
141 |
+ <div class="flex align-center mb20"> |
|
142 |
+ <label :for="'correct' + i" class="title2">정답여부</label> |
|
143 |
+ <input :id="'correct' + i" type="checkbox" class="ui-checkbox" |
|
144 |
+ :checked="prblmDetail.correctIndex === i" @change="setCorrectAnswer(i)" /> |
|
145 |
+ </div> |
|
146 |
+ </div> |
|
147 |
+ <div class="flex align-center mb20"> |
|
148 |
+ <label :for="'file' + i" class="title2">첨부파일</label> |
|
149 |
+ <input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple /> |
|
150 |
+ </div> |
|
151 |
+ |
|
166 | 152 |
</div> |
167 |
- <div class="flex align-center mb20 mr40"> |
|
168 |
- <label for="" class="title2">문제3</label> |
|
169 |
- <input type="text" class="data-wrap"> |
|
170 |
- <input type="checkbox" class="ui-checkbox ml30"> |
|
153 |
+ </div> |
|
154 |
+ <div |
|
155 |
+ v-else-if="['prblm_type_001', 'prblm_type_005', 'prblm_type_019', 'prblm_type_022'].includes(selectedSearchOption2)"> |
|
156 |
+ <!--3지선다--> |
|
157 |
+ <div class="gd-col2 " v-for="i in 3" :key="i"> |
|
158 |
+ <div> |
|
159 |
+ <div class="flex align-center mb20 mr40"> |
|
160 |
+ <label :for="'answer' + i" class="title2">답{{ i }}</label> |
|
161 |
+ <input :id="'answer' + i" type="text" class="data-wrap" v-model="prblmDetail.answers[i].text" /> |
|
162 |
+ </div> |
|
163 |
+ <div class="flex align-center mb20"> |
|
164 |
+ <label :for="'correct' + i" class="title2">정답여부</label> |
|
165 |
+ <input :id="'correct' + i" type="checkbox" class="ui-checkbox" |
|
166 |
+ :checked="prblmDetail.correctIndex === i" @change="setCorrectAnswer(i)" /> |
|
167 |
+ </div> |
|
168 |
+ </div> |
|
169 |
+ <div class="flex align-center mb20"> |
|
170 |
+ <label :for="'file' + i" class="title2">첨부파일</label> |
|
171 |
+ <input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple /> |
|
172 |
+ </div> |
|
173 |
+ |
|
171 | 174 |
</div> |
172 |
- <div class="flex align-center mb20 mr40"> |
|
173 |
- <label for="" class="title2">문제4</label> |
|
174 |
- <input type="text" class="data-wrap"> |
|
175 |
- <input type="checkbox" class="ui-checkbox ml30"> |
|
175 |
+ </div> |
|
176 |
+ <div |
|
177 |
+ v-else-if="['prblm_type_002', 'prblm_type_003', 'prblm_type_007', 'prblm_type_023'].includes(selectedSearchOption2)"> |
|
178 |
+ <!--2지선다--> |
|
179 |
+ <div class="gd-col2 " v-for="i in 2" :key="i"> |
|
180 |
+ <div> |
|
181 |
+ <div class="flex align-center mb20 mr40"> |
|
182 |
+ <label :for="'answer' + i" class="title2">답{{ i }}</label> |
|
183 |
+ <input :id="'answer' + i" type="text" class="data-wrap" v-model="prblmDetail.answers[i].text" /> |
|
184 |
+ </div> |
|
185 |
+ <div class="flex align-center mb20"> |
|
186 |
+ <label :for="'correct' + i" class="title2">정답여부</label> |
|
187 |
+ <input :id="'correct' + i" type="checkbox" class="ui-checkbox" |
|
188 |
+ :checked="prblmDetail.correctIndex === i" @change="setCorrectAnswer(i)" /> |
|
189 |
+ </div> |
|
190 |
+ </div> |
|
191 |
+ <div class="flex align-center mb20"> |
|
192 |
+ <label :for="'file' + i" class="title2">첨부파일</label> |
|
193 |
+ <input type="file" :ref="'fileInput' + i" @change="handleDetailFileUpload(i)" multiple /> |
|
194 |
+ </div> |
|
195 |
+ |
|
176 | 196 |
</div> |
197 |
+ </div> |
|
198 |
+ <div v-else-if="selectedSearchOption2 === 'prblm_type_009'"> |
|
199 |
+ <!--OX문제--> |
|
200 |
+ <div class="flex align-center mb20"> |
|
201 |
+ <label for="" class="title2">답</label> |
|
202 |
+ <select v-model="prblmDetail.answer1" class="mr10 data-wrap"> |
|
203 |
+ <option value="bbsTtl">O</option> |
|
204 |
+ <option value="bbsCnt">X</option> |
|
205 |
+ </select> |
|
206 |
+ </div> |
|
207 |
+ <div class="flex align-center mb20"> |
|
208 |
+ <label :for="'file' + i" class="title2">첨부파일</label> |
|
209 |
+ <input type="file" :ref="'fileInput' + 1" @change="handleDetailFileUpload(1)" multiple /> |
|
210 |
+ </div> |
|
211 |
+ |
|
212 |
+ </div> |
|
213 |
+ <div |
|
214 |
+ v-else-if="['prblm_type_010', 'prblm_type_011', 'prblm_type_012', 'prblm_type_013', 'prblm_type_014', |
|
215 |
+ 'prblm_type_015', 'prblm_type_016', 'prblm_type_017', 'prblm_type_018', 'prblm_type_020', 'prblm_type_021'].includes(selectedSearchOption2)"> |
|
216 |
+ <!--서술형--> |
|
217 |
+ <div class="gd-col2 "> |
|
218 |
+ <div class="flex align-center mb20"> |
|
219 |
+ <label for="" class="title2">답</label> |
|
220 |
+ <input type="text" class="data-wrap" v-model="prblmDetail.answer1"> |
|
221 |
+ </div> |
|
222 |
+ <div class="flex align-center mb20"> |
|
223 |
+ <label :for="'file' + i" class="title2">첨부파일</label> |
|
224 |
+ <input type="file" :ref="'fileInput' + 1" @change="handleDetailFileUpload(1)" multiple /> |
|
225 |
+ </div> |
|
226 |
+ |
|
227 |
+ </div> |
|
228 |
+ </div> |
|
229 |
+ <!--연결형 |
|
230 |
+ <div v-else-if="['prblm_type_015'].includes(selectedSearchOption2)"> |
|
231 |
+ |
|
232 |
+ <div class="gd-col2 "> |
|
233 |
+ <div class="flex align-center mb20 mr40"> |
|
234 |
+ <label for="" class="title2">문제1</label> |
|
235 |
+ <input type="text" class="data-wrap"> |
|
236 |
+ </div> |
|
237 |
+ <div class="flex align-center mb20"> |
|
238 |
+ <label for="" class="title2">답1</label> |
|
239 |
+ <input type="text" class="data-wrap"> |
|
240 |
+ </div> |
|
241 |
+ <div class="flex align-center mb20 mr40"> |
|
242 |
+ <label for="" class="title2">문제2</label> |
|
243 |
+ <input type="text" class="data-wrap"> |
|
244 |
+ </div> |
|
245 |
+ <div class="flex align-center mb20"> |
|
246 |
+ <label for="" class="title2">답2</label> |
|
247 |
+ <input type="text" class="data-wrap"> |
|
248 |
+ </div> |
|
249 |
+ <div class="flex align-center mb20 mr40"> |
|
250 |
+ <label for="" class="title2">문제3</label> |
|
251 |
+ <input type="text" class="data-wrap"> |
|
252 |
+ </div> |
|
253 |
+ <div class="flex align-center mb20 "> |
|
254 |
+ <label for="" class="title2">답3</label> |
|
255 |
+ <input type="text" class="data-wrap"> |
|
256 |
+ </div> |
|
257 |
+ <div class="flex align-center mb20 mr40"> |
|
258 |
+ <label for="" class="title2">문제4</label> |
|
259 |
+ <input type="text" class="data-wrap"> |
|
260 |
+ </div> |
|
261 |
+ <div class="flex align-center mb20"> |
|
262 |
+ <label for="" class="title2">답4</label> |
|
263 |
+ <input type="text" class="data-wrap"> |
|
264 |
+ </div> |
|
265 |
+ </div> |
|
266 |
+ </div> |
|
267 |
+ --> |
|
177 | 268 |
<div class="flex align-center mb20"> |
178 | 269 |
<label for="" class="title2">해설</label> |
179 |
- <textarea name="" id="" class="data-wrap"></textarea> |
|
270 |
+ <textarea name="" id="" class="data-wrap" v-model="prblm_cmmt"></textarea> |
|
180 | 271 |
</div> |
181 |
- </div> |
|
182 |
- |
|
183 |
- </div> |
|
184 |
- <div class="flex justify-between mt50"> |
|
185 |
- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')"> |
|
186 |
- 목록 |
|
187 |
- </button> |
|
188 |
- <div class="flex"> |
|
189 |
- <button type="button" title="글쓰기" class="new-btn mr10"> |
|
190 |
- 취소 |
|
272 |
+ <hr> |
|
273 |
+ <div class="flex align-center mb20 mt40"> |
|
274 |
+ <label for="" class="title2">문제 지표 1</label> |
|
275 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr1"> |
|
276 |
+ </div> |
|
277 |
+ <div class="flex align-center mb20 mt40"> |
|
278 |
+ <label for="" class="title2">문제 지표 2</label> |
|
279 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr2"> |
|
280 |
+ </div> |
|
281 |
+ <div class="flex align-center mb20 mt40"> |
|
282 |
+ <label for="" class="title2">문제 지표 3</label> |
|
283 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr3"> |
|
284 |
+ </div> |
|
285 |
+ <div class="flex align-center mb20 mt40"> |
|
286 |
+ <label for="" class="title2">문제 지표 4</label> |
|
287 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr4"> |
|
288 |
+ </div> |
|
289 |
+ <div class="flex align-center mb20 mt40"> |
|
290 |
+ <label for="" class="title2">문제 지표 5</label> |
|
291 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr5"> |
|
292 |
+ </div> |
|
293 |
+ <div class="flex align-center mb20 mt40"> |
|
294 |
+ <label for="" class="title2">문제 지표 6</label> |
|
295 |
+ <input type="text" class="data-wrap" v-model="prblm_mtr6"> |
|
296 |
+ </div> |
|
297 |
+ |
|
298 |
+ </div> |
|
299 |
+ <div class="flex justify-between mt50"> |
|
300 |
+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')"> |
|
301 |
+ 목록 |
|
191 | 302 |
</button> |
192 |
- <button type="button" title="글쓰기" class="new-btn" @click="submitForm"> |
|
193 |
- 등록 |
|
194 |
- </button> |
|
303 |
+ <div class="flex"> |
|
304 |
+ <button type="button" title="글쓰기" class="new-btn mr10"> |
|
305 |
+ 취소 |
|
306 |
+ </button> |
|
307 |
+ <button type="button" title="글쓰기" class="new-btn" @click="submitForm"> |
|
308 |
+ 등록 |
|
309 |
+ </button> |
|
310 |
+ </div> |
|
195 | 311 |
</div> |
196 | 312 |
</div> |
197 | 313 |
</template> |
... | ... | @@ -199,6 +315,8 @@ |
199 | 315 |
<script> |
200 | 316 |
import SvgIcon from '@jamescoyle/vue-icon'; |
201 | 317 |
import { mdiMagnify } from '@mdi/js'; |
318 |
+import store from '../AppStore'; |
|
319 |
+import axios from "axios"; |
|
202 | 320 |
|
203 | 321 |
|
204 | 322 |
export default { |
... | ... | @@ -206,41 +324,288 @@ |
206 | 324 |
return { |
207 | 325 |
mdiMagnify: mdiMagnify, |
208 | 326 |
selectedTab: '1', |
209 |
- selectedSearchOption: '', // 카테고리 선택 |
|
327 |
+ selectedSearchOption: '1', // 카테고리 선택 |
|
328 |
+ selectedSearchOption2: 'prblm_type_001', |
|
329 |
+ text_id: '', |
|
210 | 330 |
prblm_ctgry_id: '', // 카테고리 ID |
211 | 331 |
prblm_type_id: '', // 문제 유형 ID |
212 | 332 |
prblm_scr: '', // 문제 배점 |
213 | 333 |
prblm_expln: '', // 내용 |
214 | 334 |
prblm_hint: '', // 힌트 |
335 |
+ book_id: '', |
|
336 |
+ unit_id: '', |
|
337 |
+ user_id: '', |
|
215 | 338 |
file_mng_id: null, // 첨부파일 ID |
216 |
- } |
|
339 |
+ books: [], |
|
340 |
+ units: [], |
|
341 |
+ texts: [], |
|
342 |
+ file: '', |
|
343 |
+ prblm_mtr1: '', |
|
344 |
+ prblm_mtr2: '', |
|
345 |
+ prblm_mtr3: '', |
|
346 |
+ prblm_mtr4: '', |
|
347 |
+ prblm_mtr5: '', |
|
348 |
+ prblm_mtr6: '', |
|
349 |
+ selectedFiles: {}, |
|
350 |
+ |
|
351 |
+ prblmDetail: { |
|
352 |
+ answers: { |
|
353 |
+ 1: { text: '', isCorrect: 'N', fileMngId: null }, |
|
354 |
+ 2: { text: '', isCorrect: 'N', fileMngId: null }, |
|
355 |
+ 3: { text: '', isCorrect: 'N', fileMngId: null }, |
|
356 |
+ 4: { text: '', isCorrect: 'N', fileMngId: null }, |
|
357 |
+ 5: { text: '', isCorrect: 'N', fileMngId: null }, |
|
358 |
+ }, |
|
359 |
+ correctIndex: null, // 정답으로 선택된 답의 인덱스 |
|
360 |
+ }, |
|
361 |
+ }; |
|
217 | 362 |
}, |
218 | 363 |
methods: { |
219 | 364 |
goToPage(page) { |
220 | 365 |
this.$router.push({ name: page }); |
221 | 366 |
}, |
222 |
- submitForm() { |
|
223 |
- const payload = { |
|
224 |
- prblm_ctgry_id: this.selectedSearchOption, // 카테고리 |
|
225 |
- prblm_type_id: this.selectedTab, // 문제 유형 |
|
226 |
- prblm_scr: this.prblm_scr, // 문제 배점 |
|
227 |
- prblm_expln: this.prblm_expln, // 내용 |
|
228 |
- prblm_hint: this.prblm_hint, // 힌트 |
|
229 |
- file_mng_id: this.file_mng_id // 첨부파일 ID |
|
230 |
- }; |
|
231 | 367 |
|
232 |
- axios.post('/problem/insertProblem.json', payload) |
|
233 |
- .then(response => { |
|
368 |
+ handleFileUpload(e) { |
|
369 |
+ this.file = e.target.files; |
|
370 |
+ }, |
|
371 |
+ handleDetailFileUpload(index) { |
|
372 |
+ const files = this.$refs['fileInput' + index][0].files; |
|
373 |
+ this.selectedFiles[index] = files; |
|
374 |
+ }, |
|
375 |
+ |
|
376 |
+ // 파일 업로드 메서드 |
|
377 |
+ async uploadFiles(files) { |
|
378 |
+ if (!files || files.length === 0) { |
|
379 |
+ return null; |
|
380 |
+ } |
|
381 |
+ |
|
382 |
+ const formData = new FormData(); |
|
383 |
+ for (let i = 0; i < files.length; i++) { |
|
384 |
+ formData.append("files", files[i]); |
|
385 |
+ } |
|
386 |
+ |
|
387 |
+ try { |
|
388 |
+ const response = await axios.post("/file/upload.json", formData, { |
|
389 |
+ headers: { |
|
390 |
+ "Content-Type": "multipart/form-data", |
|
391 |
+ }, |
|
392 |
+ }); |
|
393 |
+ |
|
394 |
+ return response.data.fileMngId; // 파일 매니지 ID 반환 |
|
395 |
+ } catch (error) { |
|
396 |
+ console.error("파일 업로드 오류:", error); |
|
397 |
+ throw new Error("파일 업로드에 실패했습니다."); |
|
398 |
+ } |
|
399 |
+ }, |
|
400 |
+ |
|
401 |
+ // 문제 업로드 |
|
402 |
+ async submitForm() { |
|
403 |
+ // 필요한 모든 필드를 검사합니다. |
|
404 |
+ if (!this.selectedSearchOption) { |
|
405 |
+ alert("카테고리를 지정해 주세요."); |
|
406 |
+ return; |
|
407 |
+ } |
|
408 |
+ |
|
409 |
+ if (!this.selectedSearchOption2) { |
|
410 |
+ alert("문제 유형을 지정해 주세요."); |
|
411 |
+ return; |
|
412 |
+ } |
|
413 |
+ |
|
414 |
+ if (!this.prblm_scr) { |
|
415 |
+ alert("문제 배점을 입력해 주세요."); |
|
416 |
+ return; |
|
417 |
+ } |
|
418 |
+ |
|
419 |
+ if (!this.prblm_expln) { |
|
420 |
+ alert("문제 내용을 입력해 주세요."); |
|
421 |
+ return; |
|
422 |
+ } |
|
423 |
+ |
|
424 |
+ const payload = { |
|
425 |
+ prblmCtgryId: this.selectedSearchOption, // 카테고리 |
|
426 |
+ prblmTypeId: this.selectedSearchOption2, // 문제 유형 |
|
427 |
+ prblmScr: this.prblm_scr, // 문제 배점 |
|
428 |
+ prblmExpln: this.prblm_expln, // 내용 |
|
429 |
+ prblmHint: this.prblm_hint, // 힌트 |
|
430 |
+ prblmCmmt: this.prblm_cmmt, // 해설 |
|
431 |
+ // text_id: this.text_id, // 지문 아이디 |
|
432 |
+ unitId: this.unit_id, // 단원 아이디 |
|
433 |
+ bookId: this.book_id, // 교재 아이디 |
|
434 |
+ // userId: this.user_id, // 유저 아이디 |
|
435 |
+ userId: 'USID_000000000000004', // 유저 아이디 |
|
436 |
+ prblmMtr1: this.prblm_mtr1, // 문제 지표 |
|
437 |
+ prblmMtr2: this.prblm_mtr2, |
|
438 |
+ prblmMtr3: this.prblm_mtr3, |
|
439 |
+ prblmMtr4: this.prblm_mtr4, |
|
440 |
+ prblmMtr5: this.prblm_mtr5, |
|
441 |
+ prblmMtr6: this.prblm_mtr6, |
|
442 |
+ fileMngId: this.file_mng_id // 첨부파일 ID |
|
443 |
+ }; |
|
444 |
+ |
|
445 |
+ if (this.file && this.file.length > 0) { |
|
446 |
+ // 파일 업로드를 수행하고, 결과로 얻은 fileMngId를 payload에 추가합니다. |
|
447 |
+ const fileMngId = await this.uploadFiles(this.file); |
|
448 |
+ payload.fileMngId = fileMngId; |
|
449 |
+ } |
|
450 |
+ |
|
451 |
+ try { |
|
452 |
+ const response = await axios.post('/problem/insertProblem.json', payload); |
|
234 | 453 |
console.log('성공:', response.data); |
235 |
- // 성공적으로 저장한 후 처리 로직 추가 |
|
236 |
- }) |
|
237 |
- .catch(error => { |
|
454 |
+ const prblmId = response.data.prblmId; // 상세 문제 정보를 위한 문제 ID |
|
455 |
+ const problemDetails = await this.prepareProblemDetails(prblmId); |
|
456 |
+ await this.submitDetailForm(problemDetails); |
|
457 |
+ |
|
458 |
+ this.goToPage('QuestionList'); |
|
459 |
+ |
|
460 |
+ } catch (error) { |
|
238 | 461 |
console.error('오류:', error); |
239 | 462 |
// 오류 처리 로직 추가 |
240 |
- }); |
|
241 |
- } |
|
463 |
+ } |
|
464 |
+ }, |
|
465 |
+ |
|
466 |
+ // 문제 상세 업로드 |
|
467 |
+ async submitDetailForm(problemDetails) { |
|
468 |
+ console.log('Submitting Problem Details:', problemDetails); // 디버깅 |
|
469 |
+ |
|
470 |
+ try { |
|
471 |
+ const response = await axios.post('/problem/insertProblemDetail.json', problemDetails); |
|
472 |
+ console.log('성공:', response.data); |
|
473 |
+ } catch (error) { |
|
474 |
+ console.error('오류:', error); |
|
475 |
+ // 오류 처리 로직 추가 |
|
476 |
+ } |
|
477 |
+ }, |
|
478 |
+ |
|
479 |
+ // 상세 정보 세팅하기 |
|
480 |
+ async prepareProblemDetails(prblmId) { |
|
481 |
+ const details = []; |
|
482 |
+ const answers = this.prblmDetail.answers; |
|
483 |
+ |
|
484 |
+ let answerCount = 0; |
|
485 |
+ |
|
486 |
+ if (this.selectedSearchOption2 === 'prblm_type_008') { |
|
487 |
+ answerCount = 5; |
|
488 |
+ } else if (['prblm_type_004', 'prblm_type_006', 'prblm_type_024'].includes(this.selectedSearchOption2)) { |
|
489 |
+ answerCount = 4; |
|
490 |
+ } else if (['prblm_type_001', 'prblm_type_005', 'prblm_type_019', 'prblm_type_022'].includes(this.selectedSearchOption2)) { |
|
491 |
+ answerCount = 3; |
|
492 |
+ } else if (['prblm_type_002', 'prblm_type_003', 'prblm_type_007', 'prblm_type_023'].includes(this.selectedSearchOption2)) { |
|
493 |
+ answerCount = 2; |
|
494 |
+ } else { |
|
495 |
+ answerCount = 1; |
|
496 |
+ } |
|
497 |
+ |
|
498 |
+ for (let i = 1; i <= answerCount; i++) { |
|
499 |
+ if (this.selectedFiles[i] && this.selectedFiles[i].length > 0) { |
|
500 |
+ const uploadedFileMngId = await this.uploadFiles(this.selectedFiles[i]); |
|
501 |
+ answers[i].fileMngId = uploadedFileMngId; // 파일 매니지 ID 저장 |
|
502 |
+ } |
|
503 |
+ |
|
504 |
+ details.push({ |
|
505 |
+ prblmId, |
|
506 |
+ prblmDtlExpln: answers[i].text || '', |
|
507 |
+ prblmYn: answers[i].isCorrect, // isCorrect가 'Y' 또는 'N'으로 설정됨 |
|
508 |
+ fileMngId: answers[i].fileMngId, |
|
509 |
+ }); |
|
510 |
+ } |
|
511 |
+ |
|
512 |
+ return details; |
|
513 |
+ }, |
|
514 |
+ |
|
515 |
+ setCorrectAnswer(index) { |
|
516 |
+ this.prblmDetail.correctIndex = index; |
|
517 |
+ // 선택된 인덱스의 답만 'Y'로 설정하고, 나머지는 'N'으로 설정 |
|
518 |
+ for (let i = 1; i <= 5; i++) { |
|
519 |
+ this.prblmDetail.answers[i].isCorrect = i === index ? 'Y' : 'N'; |
|
520 |
+ } |
|
521 |
+ }, |
|
522 |
+ |
|
523 |
+ resetPrblmDetail() { |
|
524 |
+ this.prblmDetail = { |
|
525 |
+ |
|
526 |
+ answers: { |
|
527 |
+ 1: { text: '', isCorrect: 'N', fileMngId: null }, |
|
528 |
+ 2: { text: '', isCorrect: 'N', fileMngId: null }, |
|
529 |
+ 3: { text: '', isCorrect: 'N', fileMngId: null }, |
|
530 |
+ 4: { text: '', isCorrect: 'N', fileMngId: null }, |
|
531 |
+ 5: { text: '', isCorrect: 'N', fileMngId: null }, |
|
532 |
+ }, |
|
533 |
+ correctIndex: null, |
|
534 |
+ }; |
|
535 |
+ this.selectedFiles = {}; |
|
536 |
+ }, |
|
537 |
+ |
|
538 |
+ // 교재 정보 가져오기 |
|
539 |
+ fetchBooks() { |
|
540 |
+ axios({ |
|
541 |
+ url: "/book/findAll.json", |
|
542 |
+ method: "post", |
|
543 |
+ headers: { |
|
544 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
545 |
+ }, |
|
546 |
+ }) |
|
547 |
+ .then(response => { |
|
548 |
+ console.log(response.data) |
|
549 |
+ this.books = response.data; |
|
550 |
+ this.text_id = ''; |
|
551 |
+ }) |
|
552 |
+ .catch(error => { |
|
553 |
+ console.error("fetchBooks - error: ", error); |
|
554 |
+ alert("교재 목록을 불러오는 중 오류가 발생했습니다."); |
|
555 |
+ }); |
|
556 |
+ }, |
|
557 |
+ |
|
558 |
+ // 단원 정보 가져오기 |
|
559 |
+ fetchUnits() { |
|
560 |
+ if (!this.book_id) return; |
|
561 |
+ |
|
562 |
+ axios({ |
|
563 |
+ url: "/unit/unitList.json", |
|
564 |
+ method: "post", |
|
565 |
+ headers: { |
|
566 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
567 |
+ }, |
|
568 |
+ data: { |
|
569 |
+ "bookId": this.book_id |
|
570 |
+ }, |
|
571 |
+ }) |
|
572 |
+ .then(response => { |
|
573 |
+ this.units = response.data; |
|
574 |
+ this.text_id = ''; |
|
575 |
+ }) |
|
576 |
+ .catch(error => { |
|
577 |
+ console.error("fetchUnits - error: ", error); |
|
578 |
+ alert("단원 목록을 불러오는 중 오류가 발생했습니다."); |
|
579 |
+ }); |
|
580 |
+ }, |
|
581 |
+ |
|
582 |
+ // 지문 정보 가져오기 |
|
583 |
+ fetchTexts() { |
|
584 |
+ axios({ |
|
585 |
+ url: "/text/textSearch.json", |
|
586 |
+ method: "post", |
|
587 |
+ headers: { |
|
588 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
589 |
+ }, |
|
590 |
+ data: { |
|
591 |
+ "unitId": this.unit_id |
|
592 |
+ }, |
|
593 |
+ }) |
|
594 |
+ .then(response => { |
|
595 |
+ this.texts = response.data.list; |
|
596 |
+ }) |
|
597 |
+ .catch(error => { |
|
598 |
+ console.error("fetchTexts - error: ", error); |
|
599 |
+ alert("지문 목록을 불러오는 중 오류가 발생했습니다."); |
|
600 |
+ }); |
|
601 |
+ }, |
|
602 |
+ |
|
242 | 603 |
}, |
243 | 604 |
watch: { |
605 |
+ selectedSearchOption2() { |
|
606 |
+ // 문제 유형이 변경될 때 prblmDetail 초기화 |
|
607 |
+ this.resetPrblmDetail(); |
|
608 |
+ }, |
|
244 | 609 |
|
245 | 610 |
}, |
246 | 611 |
computed: { |
... | ... | @@ -250,10 +615,19 @@ |
250 | 615 |
SvgIcon |
251 | 616 |
}, |
252 | 617 |
mounted() { |
253 |
- console.log('Main2 mounted'); |
|
618 |
+ this.book_id = this.$route.query.book_id; |
|
619 |
+ this.unit_id = this.$route.query.unit_id; |
|
620 |
+ this.user_id = store.getters.getUserInfo.userId; |
|
621 |
+ |
|
622 |
+ this.fetchBooks(); |
|
623 |
+ this.fetchUnits(); |
|
254 | 624 |
} |
255 | 625 |
} |
626 |
+ |
|
256 | 627 |
</script> |
257 | 628 |
<style scoped> |
258 |
-.ui-checkbox{width: 30px; height: 30px;} |
|
629 |
+.ui-checkbox { |
|
630 |
+ width: 30px; |
|
631 |
+ height: 30px; |
|
632 |
+} |
|
259 | 633 |
</style>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?