guntaek
11-19
20241119 김건택 aiDashboard, photoBook_p, board, classDetail, studentList 수정
@c9545c3ceb8cdbc40e0f9384c066356e02617c61
--- client/views/pages/main/AIDashboard.vue
+++ client/views/pages/main/AIDashboard.vue
... | ... | @@ -155,7 +155,7 @@ |
155 | 155 |
> |
156 | 156 |
<div class="image-container"> |
157 | 157 |
<img |
158 |
- src="../../../resources/img/new_img/ai_board/racebtn_7.png" |
|
158 |
+ src="../../../resources/img/new_img/ai_board/racebtn_3.png" |
|
159 | 159 |
alt="Race Button" |
160 | 160 |
class="base-img" |
161 | 161 |
/> |
... | ... | @@ -327,7 +327,7 @@ |
327 | 327 |
> |
328 | 328 |
<div class="image-container"> |
329 | 329 |
<img |
330 |
- src="../../../resources/img/new_img/ai_board/racebtn_3.png" |
|
330 |
+ src="../../../resources/img/new_img/ai_board/racebtn_7.png" |
|
331 | 331 |
alt="Race Button" |
332 | 332 |
class="base-img" |
333 | 333 |
/> |
--- client/views/pages/parents/PhotoBook_p.vue
+++ client/views/pages/parents/PhotoBook_p.vue
... | ... | @@ -1,9 +1,419 @@ |
1 |
-<template lang=""> |
|
2 |
- <div> |
|
3 |
- <p>포토북</p> |
|
1 |
+<template> |
|
2 |
+ <Header_t></Header_t> |
|
3 |
+ <div class="main-wrap"> |
|
4 |
+ <div class="title-box flex justify-between mb20"> |
|
5 |
+ <p class="title">우리 아이 사진첩</p> |
|
6 |
+ </div> |
|
7 |
+ <div class="myphoto mb30"> |
|
8 |
+ <div> |
|
9 |
+ <div class="title-box flex justify-end mb40"> |
|
10 |
+ <p class="class-p">반</p> |
|
11 |
+ <select @change="handleClassChange"> |
|
12 |
+ <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId"> |
|
13 |
+ {{ classItem.sclsNm }} |
|
14 |
+ </option> |
|
15 |
+ </select> |
|
16 |
+ </div> |
|
17 |
+ <div class="btnGroup" style="display: flex; flex-direction: column"> |
|
18 |
+ <button |
|
19 |
+ v-for="n in totalPages" |
|
20 |
+ :key="n" |
|
21 |
+ @click="changePage(n)" |
|
22 |
+ type="button" |
|
23 |
+ title="페이지 버튼" |
|
24 |
+ class="tab-btn" |
|
25 |
+ > |
|
26 |
+ <img v-if="currentPage !== n" src="../../../resources/img/new_img/photobook/page.png" alt="" /> |
|
27 |
+ <img v-else src="../../../resources/img/new_img/photobook/page_click.png" alt="" /> |
|
28 |
+ <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p> |
|
29 |
+ </button> |
|
30 |
+ </div> |
|
31 |
+ <div v-if="selectedTab === 'tab1'" class="tab-box"> |
|
32 |
+ <div class="flex justify-between" style="margin-right: -82px; margin-left: -47px"> |
|
33 |
+ <!-- 왼쪽에 4개의 사진 --> |
|
34 |
+ <div class="left-side"> |
|
35 |
+ <div |
|
36 |
+ v-for="(photo, index) in (photoList?.result || []).slice(0, 4)" |
|
37 |
+ :key="index" |
|
38 |
+ class="photo" |
|
39 |
+ :style="{ transform: getRotation(index) }" |
|
40 |
+ @click="buttonSearch(photo)" |
|
41 |
+ > |
|
42 |
+ <div class="class"> |
|
43 |
+ <div class="box"> |
|
44 |
+ <div class="photo-container"> |
|
45 |
+ <img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" /> |
|
46 |
+ </div> |
|
47 |
+ </div> |
|
48 |
+ <div class="photo-text mt20 ml30"> |
|
49 |
+ <div class="member ml30">{{ photo.likeData }}</div> |
|
50 |
+ <div class="title2-photo">{{ photo.unitName }}</div> |
|
51 |
+ </div> |
|
52 |
+ </div> |
|
53 |
+ </div> |
|
54 |
+ </div> |
|
55 |
+ |
|
56 |
+ <!-- 오른쪽에 4개의 사진 --> |
|
57 |
+ <div class="right-side"> |
|
58 |
+ <div |
|
59 |
+ v-for="(photo, index) in (photoList?.result || []).slice(4, 8)" |
|
60 |
+ :key="index + 4" |
|
61 |
+ class="photo" |
|
62 |
+ :style="{ transform: getRotation(index + 4) }" |
|
63 |
+ style="width: fit-content" |
|
64 |
+ @click="buttonSearch(photo)" |
|
65 |
+ > |
|
66 |
+ <div class="class" style="width: 24rem; height: 21rem"> |
|
67 |
+ <div class="box"> |
|
68 |
+ <div class="photo-container"> |
|
69 |
+ <img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" /> |
|
70 |
+ </div> |
|
71 |
+ </div> |
|
72 |
+ <div class="photo-text mt20 ml30"> |
|
73 |
+ <div class="member ml30">{{ photo.likeData }}</div> |
|
74 |
+ <div class="title2-photo">{{ photo.unitName }}</div> |
|
75 |
+ </div> |
|
76 |
+ </div> |
|
77 |
+ </div> |
|
78 |
+ </div> |
|
79 |
+ </div> |
|
80 |
+ </div> |
|
81 |
+ <div class="popup-wrap" v-show="searchOpen"> |
|
82 |
+ <div class="popup-box"> |
|
83 |
+ <div class="flex mb10 justify-between"> |
|
84 |
+ <p class="popup-title">알림</p> |
|
85 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
86 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
87 |
+ </button> |
|
88 |
+ </div> |
|
89 |
+ |
|
90 |
+ <div class="photo-modal flex justify-between mt20" v-if="photoData.length > 0"> |
|
91 |
+ <div class="box"> |
|
92 |
+ <div> |
|
93 |
+ <img |
|
94 |
+ :src="fetchImage(photoData[0].fileRpath)" |
|
95 |
+ alt="" |
|
96 |
+ style="width: 640px; height: 480px" |
|
97 |
+ /> |
|
98 |
+ </div> |
|
99 |
+ </div> |
|
100 |
+ <div class="photo-title-container"> |
|
101 |
+ <div class="title1"> |
|
102 |
+ {{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em |
|
103 |
+ >친구 |
|
104 |
+ </div> |
|
105 |
+ <p class="title2 date">{{ photoData[0].photoDate }}</p> |
|
106 |
+ </div> |
|
107 |
+ </div> |
|
108 |
+ |
|
109 |
+ <div class="text flex justify-between mt20" v-else> |
|
110 |
+ <span class="title1">데이터를 불러올 수 없습니다.</span> |
|
111 |
+ </div> |
|
112 |
+ </div> |
|
113 |
+ </div> |
|
114 |
+ </div> |
|
115 |
+ </div> |
|
4 | 116 |
</div> |
5 | 117 |
</template> |
118 |
+ |
|
6 | 119 |
<script> |
7 |
-export default {}; |
|
120 |
+import SvgIcon from '@jamescoyle/vue-icon'; |
|
121 |
+import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js'; |
|
122 |
+import { mdilArrowRight } from '@mdi/light-js'; |
|
123 |
+import ProgressBar from '../../component/ProgressBar.vue'; |
|
124 |
+import axios from 'axios'; |
|
125 |
+import Header_t from '../../layout/Header_t.vue'; |
|
126 |
+ |
|
127 |
+export default { |
|
128 |
+ data() { |
|
129 |
+ return { |
|
130 |
+ classList: [], |
|
131 |
+ photoList: [], |
|
132 |
+ |
|
133 |
+ photoData: [], |
|
134 |
+ |
|
135 |
+ currentPage: 1, |
|
136 |
+ pageSize: 8, |
|
137 |
+ totalPages: 1, |
|
138 |
+ |
|
139 |
+ mdiWindowClose: mdiWindowClose, |
|
140 |
+ selectedTab: 'tab1', |
|
141 |
+ mdiMagnify: mdiMagnify, |
|
142 |
+ mdilArrowRight: mdilArrowRight, |
|
143 |
+ timer: '00:00', |
|
144 |
+ progress: 20, |
|
145 |
+ showModal: false, |
|
146 |
+ searchOpen: false, |
|
147 |
+ searchOpen2: false, |
|
148 |
+ selectedSclsId: null, |
|
149 |
+ }; |
|
150 |
+ }, |
|
151 |
+ methods: { |
|
152 |
+ stdClassesSelectList: function () { |
|
153 |
+ const vm = this; |
|
154 |
+ axios({ |
|
155 |
+ url: '/classes/selectClass.json', |
|
156 |
+ method: 'post', |
|
157 |
+ headers: { |
|
158 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
159 |
+ }, |
|
160 |
+ data: { |
|
161 |
+ userId: '1', |
|
162 |
+ }, |
|
163 |
+ }) |
|
164 |
+ .then(function (response) { |
|
165 |
+ console.log('classList - response : ', response.data); |
|
166 |
+ vm.classList = response.data.data; |
|
167 |
+ vm.currentPage = 1; |
|
168 |
+ vm.selectedSclsId = vm.classList[0].sclsId; |
|
169 |
+ vm.stdPhotoSelectList(); |
|
170 |
+ }) |
|
171 |
+ .catch(function (error) { |
|
172 |
+ console.log('classList - error : ', error); |
|
173 |
+ alert('학생 반 조회에 오류가 발생했습니다.'); |
|
174 |
+ }); |
|
175 |
+ }, |
|
176 |
+ |
|
177 |
+ handleClassChange(event) { |
|
178 |
+ this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기 |
|
179 |
+ this.currentPage = 1; // 페이지 초기화 |
|
180 |
+ this.stdPhotoSelectList(); // 함수 호출 |
|
181 |
+ }, |
|
182 |
+ stdPhotoSelectList: function (scsId) { |
|
183 |
+ const vm = this; |
|
184 |
+ axios({ |
|
185 |
+ url: '/photo/stdPhotoList.json', |
|
186 |
+ method: 'post', |
|
187 |
+ headers: { |
|
188 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
189 |
+ }, |
|
190 |
+ data: { |
|
191 |
+ stdId: '1', |
|
192 |
+ sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함 |
|
193 |
+ page: vm.currentPage, |
|
194 |
+ pageSize: vm.pageSize, |
|
195 |
+ }, |
|
196 |
+ }) |
|
197 |
+ .then(function (response) { |
|
198 |
+ console.log('photoList - response : ', response.data); |
|
199 |
+ vm.photoList = response.data; |
|
200 |
+ vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize); |
|
201 |
+ }) |
|
202 |
+ .catch(function (error) { |
|
203 |
+ console.log('photoList - error : ', error); |
|
204 |
+ alert('반별 내 사진 조회에 오류가 발생했습니다.'); |
|
205 |
+ }); |
|
206 |
+ }, |
|
207 |
+ getRotation(index) { |
|
208 |
+ const rotations = [2, -1, 1, -2, 1, -1]; |
|
209 |
+ return `rotate(${rotations[index]}deg)`; |
|
210 |
+ }, |
|
211 |
+ |
|
212 |
+ changePage(pageNumber) { |
|
213 |
+ this.currentPage = pageNumber; |
|
214 |
+ this.stdPhotoSelectList(this.selectedClassId); |
|
215 |
+ }, |
|
216 |
+ |
|
217 |
+ closeModal() { |
|
218 |
+ this.showModal = false; |
|
219 |
+ }, |
|
220 |
+ buttonSearch(photo) { |
|
221 |
+ if (!photo) return; |
|
222 |
+ |
|
223 |
+ const vm = this; |
|
224 |
+ this.searchOpen = true; |
|
225 |
+ axios({ |
|
226 |
+ url: '/photo/photoDetail.json', |
|
227 |
+ method: 'post', |
|
228 |
+ headers: { |
|
229 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
230 |
+ }, |
|
231 |
+ data: { |
|
232 |
+ photoId: photo.photoId, |
|
233 |
+ }, |
|
234 |
+ }) |
|
235 |
+ .then(function (response) { |
|
236 |
+ console.log('photoData - response : ', response.data); |
|
237 |
+ vm.photoData = response.data; |
|
238 |
+ }) |
|
239 |
+ .catch(function (error) { |
|
240 |
+ console.log('photoData - error : ', error); |
|
241 |
+ alert('사진 조회에 오류가 발생했습니다.'); |
|
242 |
+ }); |
|
243 |
+ }, |
|
244 |
+ |
|
245 |
+ closeBtn() { |
|
246 |
+ this.searchOpen = false; |
|
247 |
+ }, |
|
248 |
+ goToPage(page) { |
|
249 |
+ this.$router.push({ name: page }); |
|
250 |
+ }, |
|
251 |
+ increaseProgress() { |
|
252 |
+ if (this.progress < 100) { |
|
253 |
+ this.progress += 10; |
|
254 |
+ } |
|
255 |
+ }, |
|
256 |
+ showConfirm(type) { |
|
257 |
+ let message = ''; |
|
258 |
+ if (type === 'cancel') { |
|
259 |
+ message = '삭제하시겠습니까?'; |
|
260 |
+ } else if (type === 'reset') { |
|
261 |
+ message = '초기화하시겠습니까?'; |
|
262 |
+ } else if (type === 'save') { |
|
263 |
+ message = '등록하시겠습니까?'; |
|
264 |
+ } |
|
265 |
+ |
|
266 |
+ if (confirm(message)) { |
|
267 |
+ this.goBack(); |
|
268 |
+ } |
|
269 |
+ }, |
|
270 |
+ |
|
271 |
+ // 사진 경로 불러오기 |
|
272 |
+ imageSearch(photo) { |
|
273 |
+ if (!photo) return; |
|
274 |
+ |
|
275 |
+ const vm = this; |
|
276 |
+ this.searchOpen = true; |
|
277 |
+ axios({ |
|
278 |
+ url: '/photo/photoDetail.json', |
|
279 |
+ method: 'post', |
|
280 |
+ headers: { |
|
281 |
+ 'Content-Type': 'application/json; charset=UTF-8', |
|
282 |
+ }, |
|
283 |
+ data: { |
|
284 |
+ photoId: photo.photoId, |
|
285 |
+ }, |
|
286 |
+ }) |
|
287 |
+ .then(function (response) { |
|
288 |
+ console.log('photoData - response : ', response.data); |
|
289 |
+ vm.photoData = response.data; |
|
290 |
+ }) |
|
291 |
+ .catch(function (error) { |
|
292 |
+ console.log('photoData - error : ', error); |
|
293 |
+ alert('사진 조회에 오류가 발생했습니다.'); |
|
294 |
+ }); |
|
295 |
+ }, |
|
296 |
+ fetchImage(fileRpath) { |
|
297 |
+ return 'http://165.229.169.113:9080/' + fileRpath; |
|
298 |
+ }, |
|
299 |
+ }, |
|
300 |
+ watch: {}, |
|
301 |
+ computed: { |
|
302 |
+ currentPhotos() { |
|
303 |
+ // 현재 페이지에 해당하는 사진들만 반환 |
|
304 |
+ const start = (this.currentPage - 1) * this.pageSize; |
|
305 |
+ const end = start + this.pageSize; |
|
306 |
+ return this.photoList.result.slice(start, end); |
|
307 |
+ }, |
|
308 |
+ }, |
|
309 |
+ components: { |
|
310 |
+ Header_t: Header_t, |
|
311 |
+ SvgIcon, |
|
312 |
+ ProgressBar, |
|
313 |
+ }, |
|
314 |
+ mounted() { |
|
315 |
+ console.log('Main2 mounted'); |
|
316 |
+ this.stdClassesSelectList(); |
|
317 |
+ }, |
|
318 |
+}; |
|
8 | 319 |
</script> |
9 |
-<style lang=""></style> |
|
320 |
+ |
|
321 |
+<style scoped> |
|
322 |
+.btnGroup button { |
|
323 |
+ cursor: pointer; |
|
324 |
+ z-index: 100000; |
|
325 |
+} |
|
326 |
+ |
|
327 |
+.popup-wrap { |
|
328 |
+ z-index: 10000000; |
|
329 |
+} |
|
330 |
+ |
|
331 |
+.popup-box { |
|
332 |
+ top: 500px; |
|
333 |
+ width: 950px; |
|
334 |
+ height: 650px; |
|
335 |
+ left: 55rem; |
|
336 |
+} |
|
337 |
+ |
|
338 |
+.class { |
|
339 |
+ width: 260px; |
|
340 |
+ height: 200px; |
|
341 |
+ background-repeat: no-repeat; |
|
342 |
+} |
|
343 |
+ |
|
344 |
+.photo-container { |
|
345 |
+ text-align: center; |
|
346 |
+} |
|
347 |
+ |
|
348 |
+.photo-container img { |
|
349 |
+ width: 150px; |
|
350 |
+ height: 110px; |
|
351 |
+ height: 105px; |
|
352 |
+ position: relative; |
|
353 |
+ top: 23px; |
|
354 |
+} |
|
355 |
+ |
|
356 |
+.photo-text { |
|
357 |
+ display: flex; |
|
358 |
+ flex-direction: column; |
|
359 |
+ gap: 5px; |
|
360 |
+} |
|
361 |
+ |
|
362 |
+.photo-modal { |
|
363 |
+ flex-direction: column; |
|
364 |
+} |
|
365 |
+ |
|
366 |
+.photo-modal .box { |
|
367 |
+ text-align: center; |
|
368 |
+} |
|
369 |
+ |
|
370 |
+.photo-title-container { |
|
371 |
+ display: flex; |
|
372 |
+ justify-content: space-between; |
|
373 |
+ margin-top: 20px; |
|
374 |
+} |
|
375 |
+ |
|
376 |
+select { |
|
377 |
+ border-radius: 16px; |
|
378 |
+ position: absolute; |
|
379 |
+ top: 42px; |
|
380 |
+ right: 33px; |
|
381 |
+} |
|
382 |
+ |
|
383 |
+.class-p { |
|
384 |
+ font-size: 23px; |
|
385 |
+ position: absolute; |
|
386 |
+ top: 52px; |
|
387 |
+ right: 218px; |
|
388 |
+} |
|
389 |
+ |
|
390 |
+.left-side, |
|
391 |
+.right-side { |
|
392 |
+ width: 48%; /* 좌우로 나눔 */ |
|
393 |
+ display: flex; |
|
394 |
+ flex-wrap: wrap; |
|
395 |
+ align-content: flex-start; |
|
396 |
+} |
|
397 |
+ |
|
398 |
+.title2-photo { |
|
399 |
+ font-size: 15px; |
|
400 |
+ font-weight: bold; |
|
401 |
+ font-family: 'ONEMobileOTF-Regular'; |
|
402 |
+ max-width: 175px; |
|
403 |
+ white-space: nowrap; |
|
404 |
+ overflow: hidden; |
|
405 |
+ text-overflow: ellipsis; |
|
406 |
+} |
|
407 |
+ |
|
408 |
+.main-wrap { |
|
409 |
+ width: 134rem; /* 기존 크기 유지 */ |
|
410 |
+ height: 70rem; /* 기존 크기 유지 */ |
|
411 |
+ background-color: #ffffffa6; |
|
412 |
+ border-radius: 10px; |
|
413 |
+ position: absolute; |
|
414 |
+ right: calc(50% - 67rem); /* 너비의 절반을 뺀 값으로 중앙 배치 */ |
|
415 |
+ top: calc(50% - 35rem); /* 높이의 절반을 뺀 값으로 중앙 배치 */ |
|
416 |
+ z-index: 1; |
|
417 |
+} |
|
418 |
+ |
|
419 |
+</style> |
--- client/views/pages/teacher/Board.vue
+++ client/views/pages/teacher/Board.vue
... | ... | @@ -229,7 +229,7 @@ |
229 | 229 |
"Content-Type": "application/json; charset=UTF-8", |
230 | 230 |
}, |
231 | 231 |
data: { |
232 |
- userId: vm.userId, |
|
232 |
+ userId: "2", |
|
233 | 233 |
}, |
234 | 234 |
}) |
235 | 235 |
.then(function (res) { |
--- client/views/pages/teacher/ClassDetail.vue
+++ client/views/pages/teacher/ClassDetail.vue
... | ... | @@ -54,12 +54,14 @@ |
54 | 54 |
<td>반</td> |
55 | 55 |
</thead> |
56 | 56 |
<tbody> |
57 |
- <tr> |
|
58 |
- <td></td> |
|
59 |
- <td></td> |
|
60 |
- <td></td> |
|
61 |
- <td></td> |
|
62 |
- </tr> |
|
57 |
+ <!-- StudentDetail로 갈때 stdId? userId? --> |
|
58 |
+ <tr v-for="(student, index) in studentDataList" :key="index" class="student" |
|
59 |
+ @click="goToPage('StudentDetail')"> |
|
60 |
+ <td>{{ index + 1 }}</td> |
|
61 |
+ <td>{{ student.grd_no }}</td> |
|
62 |
+ <td>{{ student.scls_nm }}</td> |
|
63 |
+ <td>{{ student.user_nm }}</td> |
|
64 |
+ </tr> |
|
63 | 65 |
</tbody> |
64 | 66 |
</table> |
65 | 67 |
</div> |
... | ... | @@ -72,8 +74,8 @@ |
72 | 74 |
<svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon> |
73 | 75 |
</div> |
74 | 76 |
</div> |
75 |
- <div class="flex" style="gap: 50px"> |
|
76 |
- <div class="textbook"> |
|
77 |
+ <div class="flex" style="flex-direction: column; gap: 50px"> |
|
78 |
+ <div class="textbook" style="width: 180px"> |
|
77 | 79 |
<div class="box" style="gap: 10px"></div> |
78 | 80 |
<div class="text"> |
79 | 81 |
<p class="title1" style="color: #fff">A 교재</p> |
... | ... | @@ -130,8 +132,12 @@ |
130 | 132 |
selectedRow: "", |
131 | 133 |
bbsTm: "", |
132 | 134 |
|
135 |
+ // 학생 정보 |
|
136 |
+ studentDataList: [], |
|
137 |
+ totalStudents: 0, |
|
138 |
+ |
|
133 | 139 |
// 페이징 |
134 |
- currentPage: 0, |
|
140 |
+ currentPage: 1, |
|
135 | 141 |
itemsPerPage: 5, |
136 | 142 |
|
137 | 143 |
// 반 아이디 |
... | ... | @@ -172,7 +178,7 @@ |
172 | 178 |
"Content-Type": "application/json; charset=UTF-8", |
173 | 179 |
}, |
174 | 180 |
data: { |
175 |
- page: vm.currentPage + 1, |
|
181 |
+ page: vm.currentPage, |
|
176 | 182 |
pageSize: vm.itemsPerPage, |
177 | 183 |
sclsId: vm.selectedClassId, |
178 | 184 |
}, |
... | ... | @@ -191,11 +197,40 @@ |
191 | 197 |
console.log("result - error : ", error); |
192 | 198 |
}); |
193 | 199 |
}, |
200 |
+ |
|
201 |
+ fetchStudents() { |
|
202 |
+ const idx = (this.currentPage - 1) * this.itemsPerPage; |
|
203 |
+ axios({ |
|
204 |
+ url: "/userclass/find.json", |
|
205 |
+ method: "post", |
|
206 |
+ headers: { |
|
207 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
208 |
+ }, |
|
209 |
+ data: { |
|
210 |
+ "keyword": this.keyword, |
|
211 |
+ "pageSize": this.itemsPerPage, |
|
212 |
+ "startIndex": idx, |
|
213 |
+ "sclsId": this.selectedClassId |
|
214 |
+ }, |
|
215 |
+ }) |
|
216 |
+ .then(response => { |
|
217 |
+ console.log("keywordkeywordkeywordkeyword",this.keyword); |
|
218 |
+ console.log("<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>",response.data.students); |
|
219 |
+ this.studentDataList = response.data.students; |
|
220 |
+ this.totalStudents = response.data.totalStudent; |
|
221 |
+ }) |
|
222 |
+ .catch(error => { |
|
223 |
+ console.error("fetchStudents - error: ", error); |
|
224 |
+ alert("조회 중 오류가 발생했습니다."); |
|
225 |
+ }); |
|
226 |
+ }, |
|
227 |
+ |
|
194 | 228 |
setClassId() { |
195 | 229 |
sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId)); |
196 | 230 |
sessionStorage.removeItem("selectedBoardList"); |
197 | 231 |
sessionStorage.removeItem("file"); |
198 | 232 |
this.boardList(); |
233 |
+ this.fetchStudents(); |
|
199 | 234 |
}, |
200 | 235 |
|
201 | 236 |
// 게시글 정보 세션에 저장 |
... | ... | @@ -216,3 +251,8 @@ |
216 | 251 |
}, |
217 | 252 |
}; |
218 | 253 |
</script> |
254 |
+<style scoped> |
|
255 |
+.textbook .box { |
|
256 |
+ height: 70px; |
|
257 |
+} |
|
258 |
+</style> |
--- client/views/pages/teacher/StudentList.vue
+++ client/views/pages/teacher/StudentList.vue
... | ... | @@ -13,8 +13,8 @@ |
13 | 13 |
<select name="" id="" class="mr10 data-wrap"> |
14 | 14 |
<option value="">전체</option> |
15 | 15 |
</select> |
16 |
- <input type="text" placeholder="검색하세요."> |
|
17 |
- <button type="button" title="위원회 검색"> |
|
16 |
+ <input type="text" placeholder="검색하세요." v-model="keyword"> |
|
17 |
+ <button type="button" title="위원회 검색" @click="search"> |
|
18 | 18 |
<img src="../../../resources/img/look_t.png" alt=""> |
19 | 19 |
</button> |
20 | 20 |
</div> |
... | ... | @@ -134,6 +134,7 @@ |
134 | 134 |
selectedClass: "", |
135 | 135 |
|
136 | 136 |
students: [], |
137 |
+ keyword: "", |
|
137 | 138 |
|
138 | 139 |
currentPage: 1, |
139 | 140 |
pageSize: 10, |
... | ... | @@ -175,13 +176,15 @@ |
175 | 176 |
"Content-Type": "application/json; charset=UTF-8", |
176 | 177 |
}, |
177 | 178 |
data: { |
179 |
+ "keyword": this.keyword, |
|
178 | 180 |
"pageSize": this.pageSize, |
179 | 181 |
"startIndex": idx, |
180 | 182 |
"sclsId": this.selectedClass |
181 | 183 |
}, |
182 | 184 |
}) |
183 | 185 |
.then(response => { |
184 |
- console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>",response.data.students); |
|
186 |
+ console.log("keywordkeywordkeywordkeyword",this.keyword); |
|
187 |
+ console.log("<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>",response.data.students); |
|
185 | 188 |
this.students = response.data.students; |
186 | 189 |
this.totalStudents = response.data.totalStudent; |
187 | 190 |
}) |
... | ... | @@ -189,6 +192,12 @@ |
189 | 192 |
console.error("fetchStudents - error: ", error); |
190 | 193 |
alert("조회 중 오류가 발생했습니다."); |
191 | 194 |
}); |
195 |
+ }, |
|
196 |
+ |
|
197 |
+ search() { |
|
198 |
+ this.currentPage = 1; |
|
199 |
+ this.fetchStudents(); |
|
200 |
+ |
|
192 | 201 |
}, |
193 | 202 |
|
194 | 203 |
changePage(page) { |
... | ... | @@ -232,7 +241,6 @@ |
232 | 241 |
}, |
233 | 242 |
computed: { |
234 | 243 |
totalPages() { |
235 |
- console.log("totalPages@@@@@@@@@@@@@@@@@@@@@@@") |
|
236 | 244 |
return Math.ceil(this.totalStudents / this.pageSize); |
237 | 245 |
} |
238 | 246 |
}, |
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?