File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="title-box flex justify-between mb40">
<p class="title">단어장 수정</p>
</div>
<div class="content-t">
<div class="board-wrap">
<div class="flex align-center mb20">
<div class="flex align-center">
<label for="" class="title2">교재</label>
<select name="" id="" v-model="selectedBookId" @change="fetchUnits" class="mr10">
<option value="" disabled>교재를 선택하세요</option>
<option v-for="book in books" :key="book.book_id" :value="book.book_id">
{{ book.book_nm }}
</option>
</select>
<select name="" id="" v-model="selectedUnitId" @change="fetchTexts" class="mr10">
<option value="" disabled>단원을 선택하세요</option>
<option v-for="unit in units" :key="unit.unitId" :value="unit.unitId">
{{ unit.unitName }}
</option>
</select>
<select v-model="selectedTextId" class="mr10 data-wrap">
<option value="" disabled>지문을 선택하세요</option>
<option v-for="text in texts" :key="text.textId" :value="text.textId">
{{ text.textTtl }}
</option>
</select>
</div>
</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">
<label for="" class="title2">단어 목록</label>
<div class="flex-column" style="gap: 10px;">
<div class="flex align-center" style="gap: 10px;">
<input v-model="newWord.eng" type="text" class="data-wrap" placeholder="영어">
<input v-model="newWord.kor" type="text" class="data-wrap" placeholder="한글">
<input type="file" ref="fileInput" @change="handleFileUpload" multiple />
<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="flex align-center" style="gap: 10px;">
<input v-model="word.eng" type="text" class="data-wrap" placeholder="영어">
<input v-model="word.kor" type="text" class="data-wrap" placeholder="한글">
<button type="button" @click="removeWord(index)">
<img src="../../../resources/img/btn38_120t_normal.png" alt="">
</button>
</div>
</div>
<!--
<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">
<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 class="flex justify-between mt50">
<button type="button" title="목록" class="new-btn" @click="goToPage('VocaList')">
목록
</button>
<div class="flex">
<button type="button" title="취소" class="new-btn mr10" @click="cancelAction">
취소
</button>
<button type="button" title="수정" class="new-btn" @click="registerWordBook">
수정
</button>
</div>
</div>
</div>
</template>
<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,
selectedTextId: null,
newWord: { eng: '', kor: '', fileMngId: null }, // 입력된 새 단어
words: [], // 단어 목록
books: [],
units: [],
texts: [],
wordbooks: [],
selectedWdBookId: null,
}
},
methods: {
async handleFileUpload(e) {
const files = e.target.files;
if (files.length > 0) {
const fileMngId = await this.uploadFiles(files);
this.newWord.fileMngId = fileMngId; // 파일 매니지 ID 저장
}
},
// 논문실적 버튼 추가
addThesis() {
// 고유 ID로 현재 시간의 타임스탬프를 사용
const uniqueId = Date.now();
this.thesised.push({
id: uniqueId, // 고유 ID 추가
});
},
removeThesis(thesisId) {
// ID를 기준으로 교육 정보 객체를 찾아서 삭제
const index = this.thesised.findIndex(thesis => thesis.id === thesisId);
if (index !== -1) {
this.thesised.splice(index, 1);
}
},
//
addWord() { // 단어 추가
if (this.newWord.eng && this.newWord.kor) {
const newWordWithFile = { ...this.newWord }; // 새 단어 객체
this.words.push(newWordWithFile);
// 초기화
this.newWord.eng = '';
this.newWord.kor = '';
this.newWord.fileMngId = null; // 파일 매니지 ID 초기화
} else {
console.log("단어 입력이 비어 있음");
}
},
removeWord(index) { // 단어 삭제
this.words.splice(index, 1);
},
goToPage(page) {
this.$router.push({ name: page });
},
cancelAction() {
this.$router.go(-1);
},
// 교재 정보 가져오기
fetchBooks() {
axios({
url: "/book/findAll.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
})
.then(response => {
console.log(response.data)
this.books = response.data;
this.selectedTextId = '';
})
.catch(error => {
console.error("fetchBooks - error: ", error);
alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
});
},
// 단원 정보 가져오기
fetchUnits() {
if (!this.selectedBookId) return;
axios({
url: "/unit/unitList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"bookId": this.selectedBookId
},
})
.then(response => {
this.units = response.data;
this.selectedTextId = '';
this.fetchTexts();
})
.catch(error => {
console.error("fetchUnits - error: ", error);
alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
});
},
// 지문 정보 가져오기
fetchTexts() {
axios({
url: "/text/textSearch.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"unitId": this.selectedUnitId
},
})
.then(response => {
this.texts = response.data.list;
})
.catch(error => {
console.error("fetchTexts - error: ", error);
alert("지문 목록을 불러오는 중 오류가 발생했습니다.");
});
},
// 단어장의 단어 정보 조회 메서드
dataSelectList() {
const vm = this;
axios({
url: "/word/getWordsByBookId.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
wdBookId: vm.selectedWdBookId,
},
})
.then(function (response) {
console.log("dataList - response: ", response.data);
vm.words = response.data.map(word => ({
eng: word.wdNm,
kor: word.wdMnng,
fileMngId: word.fileMngId // 필요시 fileMngId도 포함
}));
})
.catch(function (error) {
console.log("dataList - error: ", error);
alert("단어장 목록 조회에 오류가 발생했습니다.");
});
},
// 기존 단어 조회 메서드
fetchExistingWords(wdBookId) {
return axios.post('/word/getWordsByBookId.json', { wdBookId: wdBookId })
.then(response => {
console.log("기존 단어 ", response.data);
return response.data;
})
.catch(error => {
console.error('기존 단어 목록 가져오기 실패:', error);
return [];
});
},
// 파일 업로드 메서드
async uploadFiles(files) {
if (!files || files.length === 0) {
return null;
}
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append("files", files[i]);
}
try {
const response = await axios.post("/file/upload.json", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
return response.data.fileMngId; // 파일 매니지 ID 반환
} catch (error) {
console.error("파일 업로드 오류:", error);
throw new Error("파일 업로드에 실패했습니다.");
}
},
async registerWordBook() {
const vm = this;
try {
const response = await axios.post('/wordbook/update.json', {
wdBookTypeId: vm.selectedWdBookTypeId,
textId: vm.selectedTextId,
userId: vm.wordbooks.userId,
bookId: vm.selectedBookId,
unitId: vm.selectedUnitId,
wdBookId: vm.selectedWdBookId,
});
const wdBookId = vm.selectedWdBookId;
const existingWords = await vm.fetchExistingWords(wdBookId);
console.log('기존 단어 목록:', existingWords);
const existingWordMap = new Map(existingWords.map(word => [word.wdNm, word]));
const wordsToInsert = [];
const wordsToUpdate = [];
const wordsToDelete = [];
// 신규 단어 처리
vm.words.forEach(word => {
const existingWord = existingWordMap.get(word.eng);
if (existingWord) {
wordsToUpdate.push({
wdId: existingWord.wdId,
wdBookId: wdBookId,
wdNm: existingWord.wdNm,
wdMnng: word.kor,
fileMngId: word.fileMngId,
});
} else {
wordsToInsert.push({
wdBookId: wdBookId,
wdNm: word.eng,
wdMnng: word.kor,
fileMngId: word.fileMngId
});
}
});
// 삭제할 단어 처리
existingWords.forEach(word => {
if (!vm.words.find(newWord => newWord.eng === word.wdNm)) {
wordsToDelete.push(word);
}
});
console.log('신규 단어 목록:', wordsToInsert);
console.log('업데이트 단어 목록:', wordsToUpdate);
console.log('삭제할 단어 목록:', wordsToDelete);
// 단어 삽입
for (const word of wordsToInsert) {
const insertResponse = await axios.post('/word/insert.json', word);
console.log('삽입 응답:', insertResponse);
}
// 단어 업데이트
for (const word of wordsToUpdate) {
const updateResponse = await axios.post('/word/update.json', {
wdId: word.wdId,
wdBookId: wdBookId,
wdNm: word.wdNm,
wdMnng: word.wdMnng,
fileMngId: word.fileMngId,
});
console.log('업데이트 응답:', updateResponse);
}
// 단어 삭제
for (const word of wordsToDelete) {
const deleteResponse = await axios.post('/word/delete.json', {
wdBookId: wdBookId,
wdId: word.wdId
});
console.log('삭제 응답:', deleteResponse);
}
alert('단어장이 성공적으로 수정되었습니다.');
vm.goToPage('VocaList');
} catch (error) {
console.error('단어장 등록 중 오류 발생:', error);
alert('단어장 등록에 실패했습니다.');
}
},
// 단어장 정보 가져오기
wordBookFind() {
const vm = this;
axios({
url: "/wordbook/find.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
wdBookId: vm.selectedWdBookId,
},
})
.then(function (response) {
console.log("dataList - response: ", response.data);
vm.selectedWdBookTypeId = response.data.wdBookTypeId;
vm.selectedTextId = response.data.textId;
vm.wordbooks = response.data;
})
.catch(function (error) {
console.log("dataList - error: ", error);
alert("단어장 목록 조회에 오류가 발생했습니다.");
});
},
},
watch: {
},
computed: {
},
components: {
SvgIcon
},
mounted() {
this.selectedBookId = this.$route.query.selectedBookId || '';
this.selectedUnitId = this.$route.query.selectedUnitId || '';
this.selectedWdBookId = this.$route.query.wdBookId || '';
this.fetchBooks();
this.fetchUnits();
this.dataSelectList();
this.wordBookFind();
}
}
</script>