

240812 권민수 단어장 등록 페이지 지문 목록 불러오기, 단어장 등록 경로 설정 세팅
@24501d2e9bd638a079b1664560fcedb06e412b89
--- client/views/pages/teacher/VocaDetail.vue
+++ client/views/pages/teacher/VocaDetail.vue
... | ... | @@ -1,6 +1,6 @@ |
1 | 1 |
<template> |
2 | 2 |
<div class="title-box flex justify-between mb40"> |
3 |
- <p class="title">단어장 등록</p> |
|
3 |
+ <p class="title">단어장 수정</p> |
|
4 | 4 |
</div> |
5 | 5 |
<div class="board-wrap"> |
6 | 6 |
<div class="flex align-center mb20"> |
... | ... | @@ -36,7 +36,7 @@ |
36 | 36 |
</div> |
37 | 37 |
</div> |
38 | 38 |
<div class="flex justify-between mt50"> |
39 |
- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')"> |
|
39 |
+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')"> |
|
40 | 40 |
목록 |
41 | 41 |
</button> |
42 | 42 |
<div class="flex"> |
--- client/views/pages/teacher/VocaInsert.vue
+++ client/views/pages/teacher/VocaInsert.vue
... | ... | @@ -2,14 +2,24 @@ |
2 | 2 |
<div class="title-box flex justify-between mb40"> |
3 | 3 |
<p class="title">단어장 등록</p> |
4 | 4 |
</div> |
5 |
+ <div class="title2 gray flex mb40">{{ titleMessage }}</div> |
|
5 | 6 |
<div class="board-wrap"> |
6 | 7 |
<div class="flex align-center mb20"> |
7 | 8 |
<label for="" class="title2">지문</label> |
8 |
- <select v-model="selectedSearchOption" class="mr10 data-wrap"> |
|
9 |
- <option value="bbsTtl">제목</option> |
|
10 |
- <option value="bbsCnt">내용</option> |
|
11 |
- <option value="userNm">작성자</option> |
|
12 |
- <option value="bbsCls">카테고리</option> |
|
9 |
+ <select v-model="selectedTextId" class="mr10 data-wrap"> |
|
10 |
+ <option v-for="text in texts" :key="text.textId" :value="text.textId"> |
|
11 |
+ {{ text.textTtl }} |
|
12 |
+ </option> |
|
13 |
+ </select> |
|
14 |
+ </div> |
|
15 |
+ <div class="flex align-center mb20"> |
|
16 |
+ <label for="" class="title2">단어장 타입</label> |
|
17 |
+ <select v-model="selectedWdBookTypeId" class="mr10 data-wrap"> |
|
18 |
+ <option value="1">단어장 (일반)</option> |
|
19 |
+ <option value="2">단어장 (스피킹)</option> |
|
20 |
+ <option value="3">단어장 (숏폼)</option> |
|
21 |
+ <option value="4">단어장 (카드 뒤집기)</option> |
|
22 |
+ <option value="5">단어장 (카드 맞추기)</option> |
|
13 | 23 |
</select> |
14 | 24 |
</div> |
15 | 25 |
<div class="flex align-center"> |
... | ... | @@ -18,25 +28,20 @@ |
18 | 28 |
<div class="flex align-center" style="gap: 10px;"> |
19 | 29 |
<input type="text" class="data-wrap" placeholder="영어"> |
20 | 30 |
<input type="text" class="data-wrap" placeholder="한글"> |
21 |
- <button type="button" @click="addThesis"> |
|
31 |
+ <button type="button" @click="addWord"> |
|
22 | 32 |
<img src="../../../resources/img/btn39_120t_normal.png" alt=""> |
23 | 33 |
|
24 | 34 |
</button> |
25 | 35 |
</div> |
26 |
- <div class="flex align-center " style="gap: 10px;" v-for="(thesis, index) in thesised" :key="thesis.id"> |
|
27 |
- <input type="text" class="data-wrap" placeholder="영어"> |
|
28 |
- <input type="text" class="data-wrap" placeholder="한글"> |
|
29 |
- <button type="button" @click="removeThesis(thesis.id)"> |
|
30 |
- <img src="../../../resources/img/btn38_120t_normal.png" alt=""> |
|
31 |
- </button> |
|
32 | 36 |
|
33 |
- </div> |
|
37 |
+ <!-- 여기에 단어장에 소속될 단어들 태그 형태 리스트 표시할 예정 --> |
|
38 |
+ |
|
34 | 39 |
</div> |
35 | 40 |
|
36 | 41 |
</div> |
37 | 42 |
</div> |
38 | 43 |
<div class="flex justify-between mt50"> |
39 |
- <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')"> |
|
44 |
+ <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')"> |
|
40 | 45 |
목록 |
41 | 46 |
</button> |
42 | 47 |
<div class="flex"> |
... | ... | @@ -52,41 +57,88 @@ |
52 | 57 |
|
53 | 58 |
<script> |
54 | 59 |
import SvgIcon from '@jamescoyle/vue-icon'; |
55 |
-import { mdiMagnify, mdiPlusCircleOutline, mdiWindowClose } from '@mdi/js'; |
|
56 |
- |
|
60 |
+import axios from "axios"; |
|
57 | 61 |
|
58 | 62 |
export default { |
59 | 63 |
data() { |
60 | 64 |
return { |
61 |
- thesised: [], |
|
62 |
- mdiPlusCircleOutline: mdiPlusCircleOutline, |
|
63 |
- mdiMagnify: mdiMagnify, |
|
64 |
- mdiWindowClose: mdiWindowClose, |
|
65 |
+ selectedBookId: null, // 추가될 단어장의 소속 책 |
|
66 |
+ selectedUnitId: null, // 추가될 단어장의 소속 단원 |
|
67 |
+ bookName: '', // 책 이름 |
|
68 |
+ unitName: '', // 단원 이름 |
|
69 |
+ titleMessage: '', // 등록 경로 메시지 |
|
70 |
+ texts: [], // 지문 목록 |
|
71 |
+ selectedTextId: null, // 선택된 지문 ID |
|
72 |
+ selectedWdBookTypeId: '1', // 선택된 단어장 타입 ID |
|
73 |
+ newWord: { eng: '', kor: '' }, // 입력된 새 단어 |
|
74 |
+ words: [] // 단어 목록 |
|
65 | 75 |
} |
66 | 76 |
}, |
67 | 77 |
methods: { |
68 |
- // 논문실적 버튼 추가 |
|
69 |
- addThesis() { |
|
70 |
- // 고유 ID로 현재 시간의 타임스탬프를 사용 |
|
71 |
- const uniqueId = Date.now(); |
|
72 |
- this.thesised.push({ |
|
73 |
- id: uniqueId, // 고유 ID 추가 |
|
74 | 78 |
|
79 |
+ // 책과 단원 이름을 가져오는 메서드 |
|
80 |
+ fetchBookAndUnitNames() { |
|
81 |
+ // 책 이름 가져오기 |
|
82 |
+ axios.post('/book/findAll.json') |
|
83 |
+ .then(response => { |
|
84 |
+ const book = response.data.find(book => book.book_id === this.selectedBookId); |
|
85 |
+ if (book) { |
|
86 |
+ this.bookName = book.book_nm; |
|
87 |
+ this.updateTitleMessage(); // 책 이름을 가져온 후에 제목 업데이트 |
|
88 |
+ } |
|
89 |
+ }) |
|
90 |
+ .catch(error => { |
|
91 |
+ console.error("책 이름 가져오기 실패: ", error); |
|
92 |
+ }); |
|
93 |
+ |
|
94 |
+ // 단원 이름 가져오기 |
|
95 |
+ axios.post('/unit/unitList.json', { bookId: this.selectedBookId }) |
|
96 |
+ .then(response => { |
|
97 |
+ const unit = response.data.find(unit => unit.unitId === this.selectedUnitId); |
|
98 |
+ if (unit) { |
|
99 |
+ this.unitName = unit.unitName; |
|
100 |
+ this.updateTitleMessage(); // 단원 이름을 가져온 후에 제목 업데이트 |
|
101 |
+ } |
|
102 |
+ }) |
|
103 |
+ .catch(error => { |
|
104 |
+ console.error("단원 이름 가져오기 실패: ", error); |
|
105 |
+ }); |
|
106 |
+ }, |
|
107 |
+ |
|
108 |
+ // 등록 경로 메시지를 업데이트하는 메서드 |
|
109 |
+ updateTitleMessage() { |
|
110 |
+ this.titleMessage = `[${this.bookName}]책 > [${this.unitName}]단원`; |
|
111 |
+ }, |
|
112 |
+ |
|
113 |
+ // 지문 목록을 가져오는 메서드 |
|
114 |
+ fetchTexts() { |
|
115 |
+ axios.post('/text/selectTextList.json', { |
|
116 |
+ page: 1, |
|
117 |
+ pageSize: 100 |
|
118 |
+ }) |
|
119 |
+ .then(response => { |
|
120 |
+ this.texts = response.data.texts; |
|
121 |
+ }) |
|
122 |
+ .catch(error => { |
|
123 |
+ console.error("지문 목록 가져오기 실패: ", error); |
|
75 | 124 |
}); |
76 | 125 |
}, |
77 |
- removeThesis(thesisId) { |
|
78 |
- // ID를 기준으로 교육 정보 객체를 찾아서 삭제 |
|
79 |
- const index = this.thesised.findIndex(thesis => thesis.id === thesisId); |
|
80 |
- if (index !== -1) { |
|
81 |
- this.thesised.splice(index, 1); |
|
82 |
- } |
|
83 |
- }, |
|
84 |
- // |
|
126 |
+ |
|
85 | 127 |
goToPage(page) { |
86 | 128 |
this.$router.push({ name: page }); |
87 | 129 |
}, |
130 |
+ |
|
88 | 131 |
}, |
89 | 132 |
watch: { |
133 |
+ |
|
134 |
+ // 데이터 변경 시 등록 경로 메시지 업데이트 |
|
135 |
+ selectedBookId() { |
|
136 |
+ this.fetchBookAndUnitNames(); |
|
137 |
+ }, |
|
138 |
+ |
|
139 |
+ selectedUnitId() { |
|
140 |
+ this.fetchBookAndUnitNames(); |
|
141 |
+ } |
|
90 | 142 |
|
91 | 143 |
}, |
92 | 144 |
computed: { |
... | ... | @@ -96,7 +148,12 @@ |
96 | 148 |
SvgIcon |
97 | 149 |
}, |
98 | 150 |
mounted() { |
99 |
- console.log('Main2 mounted'); |
|
151 |
+ // 쿼리 전달 받기 |
|
152 |
+ this.selectedBookId = this.$route.query.selectedBookId || null; |
|
153 |
+ this.selectedUnitId = this.$route.query.selectedUnitId || null; |
|
154 |
+ console.log('VocaInsert mounted'); |
|
155 |
+ this.fetchTexts(); |
|
156 |
+ this.fetchBookAndUnitNames(); |
|
100 | 157 |
} |
101 | 158 |
} |
102 | 159 |
</script>(No newline at end of file) |
--- client/views/pages/teacher/VocaList.vue
+++ client/views/pages/teacher/VocaList.vue
... | ... | @@ -210,7 +210,13 @@ |
210 | 210 |
|
211 | 211 |
// 페이지 이동 메서드 |
212 | 212 |
goToViewPage(page) { |
213 |
- this.$router.push({ name: page }); |
|
213 |
+ this.$router.push({ |
|
214 |
+ name: page, |
|
215 |
+ query: { |
|
216 |
+ selectedBookId: this.selectedBookId, |
|
217 |
+ selectedUnitId: this.selectedUnitId |
|
218 |
+ } |
|
219 |
+ }); |
|
214 | 220 |
}, |
215 | 221 |
|
216 | 222 |
// 검색 메서드 추가 |
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?