jichoi / lms_front star
woals 2024-08-12
240812 권민수 단어장 등록 페이지 지문 목록 불러오기, 단어장 등록 경로 설정 세팅
@24501d2e9bd638a079b1664560fcedb06e412b89
client/views/pages/teacher/VocaDetail.vue
--- client/views/pages/teacher/VocaDetail.vue
+++ client/views/pages/teacher/VocaDetail.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="title-box flex justify-between mb40">
-        <p class="title">단어장 등록</p>
+        <p class="title">단어장 수정</p>
     </div>
     <div class="board-wrap">
         <div class="flex align-center mb20">
@@ -36,7 +36,7 @@
         </div>
     </div>
     <div class="flex justify-between mt50">
-        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
+        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')">
             목록
         </button>
         <div class="flex">
client/views/pages/teacher/VocaInsert.vue
--- client/views/pages/teacher/VocaInsert.vue
+++ client/views/pages/teacher/VocaInsert.vue
@@ -2,14 +2,24 @@
     <div class="title-box flex justify-between mb40">
         <p class="title">단어장 등록</p>
     </div>
+    <div class="title2 gray flex mb40">{{ titleMessage }}</div>
     <div class="board-wrap">
         <div class="flex align-center mb20">
             <label for="" class="title2">지문</label>
-            <select v-model="selectedSearchOption" class="mr10 data-wrap">
-                <option value="bbsTtl">제목</option>
-                <option value="bbsCnt">내용</option>
-                <option value="userNm">작성자</option>
-                <option value="bbsCls">카테고리</option>
+            <select v-model="selectedTextId" class="mr10 data-wrap">
+                <option v-for="text in texts" :key="text.textId" :value="text.textId">
+                    {{ text.textTtl }}
+                </option>
+            </select>
+        </div>
+        <div class="flex align-center mb20">
+            <label for="" class="title2">단어장 타입</label>
+            <select v-model="selectedWdBookTypeId" class="mr10 data-wrap">
+                <option value="1">단어장 (일반)</option>
+                <option value="2">단어장 (스피킹)</option>
+                <option value="3">단어장 (숏폼)</option>
+                <option value="4">단어장 (카드 뒤집기)</option>
+                <option value="5">단어장 (카드 맞추기)</option>
             </select>
         </div>
         <div class="flex align-center">
@@ -18,25 +28,20 @@
                 <div class="flex align-center" style="gap: 10px;">
                     <input type="text" class="data-wrap" placeholder="영어">
                     <input type="text" class="data-wrap" placeholder="한글">
-                    <button type="button" @click="addThesis">
+                    <button type="button" @click="addWord">
                         <img src="../../../resources/img/btn39_120t_normal.png" alt="">
 
                     </button>
                 </div>
-                <div class="flex align-center " style="gap: 10px;" v-for="(thesis, index) in thesised" :key="thesis.id">
-                    <input type="text" class="data-wrap" placeholder="영어">
-                    <input type="text" class="data-wrap" placeholder="한글">
-                    <button type="button" @click="removeThesis(thesis.id)">
-                        <img src="../../../resources/img/btn38_120t_normal.png" alt="">
-                    </button>
 
-                </div>
+                <!-- 여기에 단어장에 소속될 단어들 태그 형태 리스트 표시할 예정 -->
+
             </div>
 
         </div>
     </div>
     <div class="flex justify-between mt50">
-        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
+        <button type="button" title="글쓰기" class="new-btn" @click="goToPage('VocaList')">
             목록
         </button>
         <div class="flex">
@@ -52,41 +57,88 @@
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiPlusCircleOutline, mdiWindowClose } from '@mdi/js';
-
+import axios from "axios";
 
 export default {
     data() {
         return {
-            thesised: [],
-            mdiPlusCircleOutline: mdiPlusCircleOutline,
-            mdiMagnify: mdiMagnify,
-            mdiWindowClose: mdiWindowClose,
+            selectedBookId: null, // 추가될 단어장의 소속 책
+            selectedUnitId: null, // 추가될 단어장의 소속 단원
+            bookName: '', // 책 이름
+            unitName: '', // 단원 이름
+            titleMessage: '', // 등록 경로 메시지
+            texts: [], // 지문 목록
+            selectedTextId: null, // 선택된 지문 ID
+            selectedWdBookTypeId: '1', // 선택된 단어장 타입 ID
+            newWord: { eng: '', kor: '' }, // 입력된 새 단어
+            words: [] // 단어 목록
         }
     },
     methods: {
-        // 논문실적 버튼 추가
-        addThesis() {
-            // 고유 ID로 현재 시간의 타임스탬프를 사용
-            const uniqueId = Date.now();
-            this.thesised.push({
-                id: uniqueId, // 고유 ID 추가
 
+        // 책과 단원 이름을 가져오는 메서드
+        fetchBookAndUnitNames() {
+            // 책 이름 가져오기
+            axios.post('/book/findAll.json')
+                .then(response => {
+                    const book = response.data.find(book => book.book_id === this.selectedBookId);
+                    if (book) {
+                        this.bookName = book.book_nm;
+                        this.updateTitleMessage(); // 책 이름을 가져온 후에 제목 업데이트
+                    }
+                })
+                .catch(error => {
+                    console.error("책 이름 가져오기 실패: ", error);
+                });
+
+            // 단원 이름 가져오기
+            axios.post('/unit/unitList.json', { bookId: this.selectedBookId })
+                .then(response => {
+                    const unit = response.data.find(unit => unit.unitId === this.selectedUnitId);
+                    if (unit) {
+                        this.unitName = unit.unitName;
+                        this.updateTitleMessage(); // 단원 이름을 가져온 후에 제목 업데이트
+                    }
+                })
+                .catch(error => {
+                    console.error("단원 이름 가져오기 실패: ", error);
+                });
+        },
+
+        // 등록 경로 메시지를 업데이트하는 메서드
+        updateTitleMessage() {
+            this.titleMessage = `[${this.bookName}]책 > [${this.unitName}]단원`;
+        },
+
+        // 지문 목록을 가져오는 메서드
+        fetchTexts() {
+            axios.post('/text/selectTextList.json', {
+                page: 1,
+                pageSize: 100
+            })
+            .then(response => {
+                this.texts = response.data.texts;
+            })
+            .catch(error => {
+                console.error("지문 목록 가져오기 실패: ", error);
             });
         },
-        removeThesis(thesisId) {
-            // ID를 기준으로 교육 정보 객체를 찾아서 삭제
-            const index = this.thesised.findIndex(thesis => thesis.id === thesisId);
-            if (index !== -1) {
-                this.thesised.splice(index, 1);
-            }
-        },
-        // 
+
         goToPage(page) {
             this.$router.push({ name: page });
         },
+
     },
     watch: {
+
+        // 데이터 변경 시 등록 경로 메시지 업데이트
+        selectedBookId() {
+            this.fetchBookAndUnitNames();
+        },
+
+        selectedUnitId() {
+            this.fetchBookAndUnitNames();
+        }
 
     },
     computed: {
@@ -96,7 +148,12 @@
         SvgIcon
     },
     mounted() {
-        console.log('Main2 mounted');
+        // 쿼리 전달 받기
+        this.selectedBookId = this.$route.query.selectedBookId || null;
+        this.selectedUnitId = this.$route.query.selectedUnitId || null;
+        console.log('VocaInsert mounted');
+        this.fetchTexts();
+        this.fetchBookAndUnitNames();
     }
 }
 </script>
(No newline at end of file)
client/views/pages/teacher/VocaList.vue
--- client/views/pages/teacher/VocaList.vue
+++ client/views/pages/teacher/VocaList.vue
@@ -210,7 +210,13 @@
 
         // 페이지 이동 메서드
         goToViewPage(page) {
-            this.$router.push({ name: page });
+            this.$router.push({
+                name: page,
+                query: {
+                    selectedBookId: this.selectedBookId,
+                    selectedUnitId: this.selectedUnitId
+                }
+             });
         },
 
         // 검색 메서드 추가
Add a comment
List