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
2024-11-19
2024-11-19
<template>
<div class="title-box flex justify-between mb40">
<p class="title">지문 등록</p>
</div>
<div class="board-wrap">
<div class="flex align-center mb20">
<label for="" class="title2">제목</label>
<input type="text" class="data-wrap" v-model="newData.textTtl">
</div>
<div class="flex align-center mb20">
<label for="" class="title2">URL</label>
<input type="text" class="data-wrap" v-model="newData.textUrl">
</div>
<div class="flex align-center">
<label class="title2">형식</label>
<label class="title2">
<input type="radio" v-model="newData.textTypeId" value="1" class="data-wrap"> 일반
</label>
<label class="title2">
<input type="radio" v-model="newData.textTypeId" value="2" class="data-wrap"> 대화
</label>
<label class="title2">
<input type="radio" v-model="newData.textTypeId" value="3" class="data-wrap"> 책 리스닝
</label>
<select name="" id="" v-model="newData.bookId" @change="fetchUnits" class="ml20">
<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="newData.unitId" class="ml20">
<option value="" disabled>단원을 선택하세요</option>
<option v-for="unit in units" :key="unit.unitId" :value="unit.unitId">
{{ unit.unitName }}
</option>
</select>
</div>
<hr>
<div class="flex align-center">
<label for="" class="title2">스크립트</label>
<textarea name="" id="" class="data-wrap" v-model="newData.textCnt"></textarea>
</div>
<hr>
<div class="flex align-center ">
<label for="file" class="title2">첨부파일</label>
<input type="file" ref="fileInput" @change="handleFileUpload" multiple />
</div>
</div>
<div class="flex justify-between mt50">
<button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')">
목록
</button>
<div class="flex">
<button type="button" title="글쓰기" class="new-btn mr10" @click="handleButtonAction">
작성
</button>
</div>
</div>
</template>
<script>
import axios from "axios";
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
import store from '../AppStore';
export default {
computed: {
textId() {
return this.$route.query.textId;
}
},
data() {
return {
mdiMagnify: mdiMagnify,
post: null,
newData: {
textId: "",
textTtl: "",
textCnt: "",
textUrl: "",
textTypeId: "",
fileMngId: "",
userId: "",
bookId: "",
unitId: ""
},
books: [],
units: [],
file: "",
selectedFiles: [],
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
handleFileUpload(e) {
this.selectedFiles = e.target.files;
},
fetchPostDetail() {
const textId = this.$route.query.textId;
axios({
url: `/text/selectOneText.json`,
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { "textId": textId }
})
.then(response => {
if (response.data && response.data[0]) {
this.post = response.data[0];
this.editTitle = this.post.title;
this.editContent = this.post.content;
console.log(this.post);
} else {
this.error = "Failed to fetch post details.";
}
})
.catch(error => {
console.error("Error fetching post detail:", error);
this.error = "Failed to fetch post details.";
});
},
async dataInsert() {
const vm = this;
if (this.selectedFiles && this.selectedFiles.length > 0) {
// 파일 업로드
const formData = new FormData();
for (let i = 0; i < this.selectedFiles.length; i++) {
formData.append("files", this.selectedFiles[i]);
}
const fileUploadResponse = await axios.post(
"http://165.229.169.113:9080/file/upload.json",
formData,
{
headers: {
//"Content-Type": "multipart/form-data",
},
}
);
// 업로드 후 파일 매니지 아이디 호출
vm.newData.fileMngId = fileUploadResponse.data.fileMngId;
}
axios({
url: "/text/insertText.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.newData,
})
.then(response => {
alert(response.data.message);
this.goToPage('TextList')
})
.catch(error => {
console.log("dataInsert - error : ", error.response.data);
alert("게시글 등록에 오류가 발생했습니다.");
});
},
handleButtonAction() {
if (!this.newData.textTtl) {
alert("제목을 입력해 주세요.");
return;
}
if (!this.newData.textUrl) {
alert("url을 입력해 주세요.");
return;
}
if (!this.newData.textTypeId) {
alert("지문 형식을 입력해 주세요.");
return;
}
if (!this.newData.bookId) {
alert("교재를 선택해 주세요.");
return;
}
if (!this.newData.unitId) {
alert("단원을 선택해 주세요.");
return;
}
if (!this.newData.textCnt) {
alert("내용을 입력해 주세요.");
return;
}
this.dataInsert();
},
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;
})
.catch(error => {
console.error("fetchBooks - error: ", error);
alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
});
},
fetchUnits() {
if (!this.newData.bookId) return;
axios({
url: "/unit/unitList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"bookId": this.newData.bookId
},
})
.then(response => {
console.log(response.data)
this.units = response.data;
})
.catch(error => {
console.error("fetchUnits - error: ", error);
alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
});
},
},
watch: {
},
computed: {
},
components: {
SvgIcon
},
mounted() {
this.fetchPostDetail();
this.newData.bookId = this.$route.query.book_id;
this.newData.unitId = this.$route.query.unit_id;
this.newData.userId = store.getters.getUserInfo.userId;
this.fetchBooks();
this.fetchUnits();
console.log('Main2 mounted');
}
}
</script>