jichoi / lms_front star
woals 2024-08-12
240812 권민수 단어장 등록 후 단어 추가 기능 구현
@e101555503418bdf1ffa834ac03aa4325cabd989
client/views/pages/teacher/VocaInsert.vue
--- client/views/pages/teacher/VocaInsert.vue
+++ client/views/pages/teacher/VocaInsert.vue
@@ -26,29 +26,32 @@
             <label for="" class="title2">단어 목록</label>
             <div class="flex-column" style="gap: 10px;">
                 <div class="flex align-center" style="gap: 10px;">
-                    <input type="text" class="data-wrap" placeholder="영어">
-                    <input type="text" class="data-wrap" placeholder="한글">
+                    <input v-model="newWord.eng" type="text" class="data-wrap" placeholder="영어">
+                    <input v-model="newWord.kor" type="text" class="data-wrap" placeholder="한글">
                     <button type="button" @click="addWord">
                         <img src="../../../resources/img/btn39_120t_normal.png" alt="">
-
                     </button>
                 </div>
 
-                <!-- 여기에 단어장에 소속될 단어들 태그 형태 리스트 표시할 예정 -->
+                <!-- 여기에 단어장에 소속될 단어들 태그 형태 리스트 -->
+                <div v-for="(word, index) in words" :key="index" class="word-item flex align-center" style="gap: 10px;">
+                    <span>{{ word.eng }} / {{ word.kor }}</span>
+                    <button type="button" @click="removeWord(index)">삭제</button>
+                </div>
 
             </div>
 
         </div>
     </div>
     <div class="flex justify-between mt50">
-        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')">
+        <button type="button" title="목록" class="new-btn" @click="goToPage('VocaList')">
             목록
         </button>
         <div class="flex">
-            <button type="button" title="글쓰기" class="new-btn mr10">
+            <button type="button" title="취소" class="new-btn mr10" @click="cancelAction">
                 취소
             </button>
-            <button type="button" title="글쓰기" class="new-btn">
+            <button type="button" title="등록" class="new-btn" @click="registerWordBook">
                 등록
             </button>
         </div>
@@ -71,7 +74,9 @@
             selectedTextId: null, // 선택된 지문 ID
             selectedWdBookTypeId: '1', // 선택된 단어장 타입 ID
             newWord: { eng: '', kor: '' }, // 입력된 새 단어
-            words: [] // 단어 목록
+            words: [], // 단어 목록
+            existingWords: [], // 기존 단어 목록 저장
+            userId: "2"
         }
     },
     methods: {
@@ -124,9 +129,118 @@
             });
         },
 
+        addWord() { // 단어 추가
+            if (this.newWord.eng && this.newWord.kor) {
+                this.words.push({ ...this.newWord });
+                this.newWord.eng = '';
+                this.newWord.kor = '';
+            } else {
+                console.log("단어 입력이 비어 있음");
+            }
+        },
+
+        removeWord(index) { // 단어 삭제
+            this.words.splice(index, 1);
+        },
+
         goToPage(page) {
             this.$router.push({ name: page });
         },
+
+        cancelAction() {
+            this.$router.go(-1);
+        },
+
+        // 기존 단어 조회 메서드
+        fetchExistingWords(wdBookId) {
+            return axios.post('/word/getWordsByBookId.json', { wdBookId: wdBookId })
+                .then(response => {
+                    return response.data.words || [];
+                })
+                .catch(error => {
+                    console.error('기존 단어 목록 가져오기 실패:', error);
+                    return [];
+                });
+        },
+
+        async registerWordBook() {
+            const vm = this;
+
+            try {
+                const response = await axios.post('/wordbook/insert.json', {
+                    wdBookTypeId: vm.selectedWdBookTypeId,
+                    textId: vm.selectedTextId,
+                    userId: vm.userId,
+                    bookId: vm.selectedBookId,
+                    unitId: vm.selectedUnitId
+                });
+
+                const wdBookId = response.data.wdBookId;
+
+                // 기존 단어 목록 조회
+                const existingWords = await vm.fetchExistingWords(wdBookId);
+                vm.existingWords = existingWords;
+
+                const existingWordNames = existingWords.map(word => word.wdNm);
+                const wordsToInsert = [];
+                const wordsToUpdate = [];
+                const wordsToDelete = [];
+
+                // 새로 추가된 단어와 기존 단어 비교
+                vm.words.forEach(word => {
+                    if (existingWordNames.includes(word.eng)) {
+                        wordsToUpdate.push(word);
+                    } else {
+                        wordsToInsert.push(word);
+                    }
+                });
+
+                // 삭제된 단어 목록 찾기
+                existingWords.forEach(word => {
+                    if (!vm.words.find(newWord => newWord.eng === word.wdNm)) {
+                        wordsToDelete.push(word);
+                    }
+                });
+
+                // 단어 삽입
+                for (const word of wordsToInsert) {
+                    await axios.post('/word/insert.json', {
+                        wdBookId: wdBookId,
+                        wdNm: word.eng,
+                        wdMnng: word.kor,
+                        fileMngId: '1'
+                    });
+                }
+
+                // 단어 업데이트
+                for (const word of wordsToUpdate) {
+                    await axios.post('/word/update.json', {
+                        wdBookId: wdBookId,
+                        wdNm: word.eng,
+                        wdMnng: word.kor,
+                        fileMngId: '1'
+                    });
+                }
+
+                // 단어 삭제
+                for (const word of wordsToDelete) {
+                    const wordToDelete = existingWords.find(existingWord => existingWord.wdNm === word.wdNm);
+                    if (wordToDelete) {
+                        await axios.post('/word/delete.json', {
+                            wdBookId: wdBookId,
+                            wdId: wordToDelete.wdId
+                        });
+                    }
+                }
+
+                alert('단어장이 성공적으로 등록되었습니다.');
+                vm.goToPage('VocaList');
+                
+            } catch (error) {
+                console.error('단어장 등록 중 오류 발생:', error);
+                alert('단어장 등록에 실패했습니다.');
+            }
+        }
 
     },
     watch: {
@@ -148,10 +262,10 @@
         SvgIcon
     },
     mounted() {
+        console.log('VocaInsert mounted');
         // 쿼리 전달 받기
         this.selectedBookId = this.$route.query.selectedBookId || null;
         this.selectedUnitId = this.$route.query.selectedUnitId || null;
-        console.log('VocaInsert mounted');
         this.fetchTexts();
         this.fetchBookAndUnitNames();
     }
Add a comment
List