
--- client/views/pages/teacher/textbook.vue
+++ client/views/pages/teacher/textbook.vue
... | ... | @@ -1,101 +1,166 @@ |
1 | 1 |
<template> |
2 | 2 |
<div class="title-box flex justify-between mb40"> |
3 |
- <p class="title">교재 관리</p> |
|
4 |
- <!-- <select name="" id=""> |
|
3 |
+ <p class="title">교재</p> |
|
4 |
+ <select name="" id=""> |
|
5 | 5 |
<option value="">A반</option> |
6 |
- </select> --> |
|
7 |
- </div> |
|
8 |
- <div class="content-t"> |
|
9 |
- <div class=" flex " style="gap: 50px;"> |
|
10 |
- <div class="textbook"> |
|
11 |
- <div class="box " style="gap: 10px;" @click="goToPage('TextBookDetail')"> |
|
12 |
- </div> |
|
13 |
- <div class="text "> |
|
14 |
- <p class="title1" style="color: #fff;">A 교재</p> |
|
15 |
- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> |
|
16 |
- <button>수정</button><p>|</p> |
|
17 |
- <button @click="showConfirm('delete')">삭제</button> |
|
18 |
- </div> |
|
19 |
- </div> |
|
6 |
+ </select> |
|
7 |
+ </div> |
|
8 |
+ <div class="content-t"> |
|
9 |
+ <div class="flex" style="gap: 2.5%;" :style="{flexWrap: 'wrap'}"> |
|
10 |
+ <div class="textbook" v-for="textbookItem in textbookList" :key="textbookItem.book_id" style="width: 22.5%; margin-bottom: 30px;"> |
|
11 |
+ <div class="box" style="gap: 10px;" @click="goToPage('TextBookDetail', textbookItem.book_id)"> |
|
20 | 12 |
</div> |
21 |
- |
|
22 |
- <div class="textbook-add"> |
|
23 |
- <button @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button> |
|
24 |
- |
|
13 |
+ <div class="text"> |
|
14 |
+ <p class="title1" style="color: #fff;">{{ textbookItem.book_nm }}</p> |
|
15 |
+ <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> |
|
16 |
+ <button @click="editBook(textbookItem)">수정</button> |
|
17 |
+ <p>|</p> |
|
18 |
+ <button @click="deleteBook(textbookItem.book_id)">삭제</button> |
|
19 |
+ </div> |
|
25 | 20 |
</div> |
26 | 21 |
</div> |
27 |
- </div> |
|
28 |
- <div v-show="searchOpen" class="popup-wrap"> |
|
29 |
- <div class="popup-box "> |
|
22 |
+ |
|
23 |
+ <div class="textbook-add" style="width: 22.5%; margin-bottom: 30px;"> |
|
24 |
+ <button @click="buttonSearch"> |
|
25 |
+ <img src="../../../resources/img/btn32_98t_normal.png" alt=""> |
|
26 |
+ </button> |
|
27 |
+ </div> |
|
28 |
+ |
|
29 |
+ <div v-show="searchOpen" class="popup-wrap"> |
|
30 |
+ <div class="popup-box"> |
|
30 | 31 |
<div class="flex justify-between mb30"> |
31 | 32 |
<p class="popup-title">교재 이름</p> |
32 | 33 |
<button type="button" class="popup-close-btn" @click="closeBtn"> |
33 | 34 |
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
34 |
- |
|
35 | 35 |
</button> |
36 | 36 |
</div> |
37 | 37 |
<div class="search-wrap mb30"> |
38 |
- <input type="text" class="data-wrap" placeholder=""> |
|
39 |
- <!-- <button type="button" title="교재 검색"> |
|
38 |
+ <input type="text" class="data-wrap" v-model="newBookName" placeholder="교재 이름을 입력하세요"> |
|
39 |
+ <button type="button" title="교재 검색" @click="insertBook"> |
|
40 | 40 |
<img src="../../../resources/img/look_t.png" alt=""> |
41 |
- </button> --> |
|
41 |
+ </button> |
|
42 | 42 |
</div> |
43 |
- <div class="flex justify-center "> |
|
44 |
- <button type="button" title="글쓰기" class="new-btn mr10"> |
|
43 |
+ <div class="flex justify-center"> |
|
44 |
+ <button type="button" title="취소" class="new-btn mr10" @click="closeBtn"> |
|
45 | 45 |
취소 |
46 | 46 |
</button> |
47 |
- <button type="button" title="글쓰기" class="new-btn"> |
|
48 |
- 생성 |
|
47 |
+ <button type="button" title="생성" class="new-btn" @click="editMode ? updateBook() : insertBook()"> |
|
48 |
+ {{ editMode ? '수정' : '생성' }} |
|
49 | 49 |
</button> |
50 | 50 |
</div> |
51 | 51 |
</div> |
52 | 52 |
</div> |
53 |
+ </div> |
|
54 |
+ </div> |
|
53 | 55 |
</template> |
56 |
+ |
|
57 |
+ |
|
54 | 58 |
|
55 | 59 |
<script> |
56 | 60 |
import SvgIcon from '@jamescoyle/vue-icon'; |
57 |
-import { mdiMagnify, mdiWindowClose } from '@mdi/js'; |
|
61 |
+import { mdiWindowClose } from '@mdi/js'; |
|
62 |
+import axios from 'axios'; |
|
58 | 63 |
|
59 | 64 |
export default { |
60 |
- data () { |
|
65 |
+ data() { |
|
61 | 66 |
return { |
62 | 67 |
mdiWindowClose: mdiWindowClose, |
63 | 68 |
showModal: false, |
64 | 69 |
searchOpen: false, |
70 |
+ textbookList: [], |
|
71 |
+ newBookName: '', |
|
72 |
+ editMode: false, |
|
73 |
+ editBookId: null, |
|
65 | 74 |
} |
66 | 75 |
}, |
67 | 76 |
methods: { |
68 |
- goToPage(page) { |
|
69 |
- this.$router.push({ name: page }); |
|
70 |
- }, |
|
71 |
- closeModal() { |
|
72 |
- this.showModal = false; |
|
77 |
+ goToPage(page, book_id) { |
|
78 |
+ this.$router.push({ name: page, query: { book_id }}); |
|
73 | 79 |
}, |
74 | 80 |
buttonSearch() { |
75 | 81 |
this.searchOpen = true; |
76 | 82 |
}, |
77 | 83 |
closeBtn() { |
78 | 84 |
this.searchOpen = false; |
79 |
- |
|
85 |
+ this.editMode = false; |
|
86 |
+ this.editBookId = null; |
|
87 |
+ this.newBookName = ''; |
|
80 | 88 |
}, |
81 |
- showConfirm(type) { |
|
82 |
- let message = ''; |
|
83 |
- if (type === 'delete') { |
|
84 |
- message = '삭제하시겠습니까?'; |
|
85 |
- } else if (type === 'reset') { |
|
86 |
- message = '초기화하시겠습니까?'; |
|
87 |
- } else if (type === 'save') { |
|
88 |
- message = '등록하시겠습니까?'; |
|
89 |
- } |
|
90 |
- |
|
91 |
- if (confirm(message)) { |
|
92 |
- this.goBack(); |
|
93 |
- } |
|
89 |
+ editBook(book) { |
|
90 |
+ this.newBookName = book.book_nm; |
|
91 |
+ this.editMode = true; |
|
92 |
+ this.editBookId = book.book_id; |
|
93 |
+ this.searchOpen = true; |
|
94 | 94 |
}, |
95 |
- |
|
96 |
- }, |
|
97 |
- watch: { |
|
98 |
- |
|
95 |
+ bookList() { |
|
96 |
+ axios({ |
|
97 |
+ url: "/book/findAll.json", |
|
98 |
+ method: "post", |
|
99 |
+ headers: { |
|
100 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
101 |
+ } |
|
102 |
+ }) |
|
103 |
+ .then(response => { |
|
104 |
+ this.textbookList = response.data; |
|
105 |
+ }) |
|
106 |
+ .catch(error => { |
|
107 |
+ console.error('Error fetching books:', error); |
|
108 |
+ }); |
|
109 |
+ }, |
|
110 |
+ insertBook() { |
|
111 |
+ const newBook = { |
|
112 |
+ book_nm: this.newBookName |
|
113 |
+ }; |
|
114 |
+ axios.post('/book/insert.json', newBook) |
|
115 |
+ .then(response => { |
|
116 |
+ this.bookList(); |
|
117 |
+ this.closeBtn(); |
|
118 |
+ }) |
|
119 |
+ .catch(error => { |
|
120 |
+ console.error('Error creating book:', error); |
|
121 |
+ }); |
|
122 |
+ }, |
|
123 |
+ updateBook() { |
|
124 |
+ const updatedBook = { |
|
125 |
+ book_id: this.editBookId, |
|
126 |
+ book_nm: this.newBookName |
|
127 |
+ }; |
|
128 |
+ axios({ |
|
129 |
+ url: "/book/update.json", |
|
130 |
+ method: "post", |
|
131 |
+ headers: { |
|
132 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
133 |
+ }, |
|
134 |
+ data: updatedBook, |
|
135 |
+ }) |
|
136 |
+ .then(response => { |
|
137 |
+ this.bookList(); |
|
138 |
+ this.closeBtn(); |
|
139 |
+ }) |
|
140 |
+ .catch(error => { |
|
141 |
+ console.error('Error updating book:', error); |
|
142 |
+ }); |
|
143 |
+ }, |
|
144 |
+ deleteBook(book_id) { |
|
145 |
+ if (confirm('삭제하시겠습니까?')) { |
|
146 |
+ axios({ |
|
147 |
+ url: "/book/delete.json", |
|
148 |
+ method: "post", |
|
149 |
+ headers: { |
|
150 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
151 |
+ }, |
|
152 |
+ data: { |
|
153 |
+ book_id: book_id |
|
154 |
+ }, |
|
155 |
+ }) |
|
156 |
+ .then(response => { |
|
157 |
+ this.bookList(); |
|
158 |
+ }) |
|
159 |
+ .catch(error => { |
|
160 |
+ console.error('Error deleting book:', error); |
|
161 |
+ }); |
|
162 |
+ } |
|
163 |
+ } |
|
99 | 164 |
}, |
100 | 165 |
computed: { |
101 | 166 |
|
... | ... | @@ -105,9 +170,22 @@ |
105 | 170 |
}, |
106 | 171 |
mounted() { |
107 | 172 |
console.log('Main2 mounted'); |
173 |
+ this.bookList(); |
|
108 | 174 |
} |
109 | 175 |
} |
110 | 176 |
</script> |
111 |
-<style scoped> |
|
112 |
-.textbook{width: 300px;} |
|
177 |
+ |
|
178 |
+<style> |
|
179 |
+.content-t { |
|
180 |
+ flex-wrap: wrap; |
|
181 |
+ height: 90%; |
|
182 |
+ overflow-y: scroll; |
|
183 |
+} |
|
184 |
+.flex { |
|
185 |
+ display: flex; |
|
186 |
+ flex-wrap: wrap; |
|
187 |
+} |
|
188 |
+.textbook, .textbook-add { |
|
189 |
+ margin-bottom: 30px; |
|
190 |
+} |
|
113 | 191 |
</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?