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="board-wrap">
<div class="flex align-center mb20">
<label for="" class="title2">제목</label>
<input v-if="isEditing" type="text" v-model="post.textTtl" class="data-wrap">
<p v-else class="data-wrap">{{ post.textTtl }}</p>
</div>
<div class="flex align-center mb20">
<label for="" class="title2">URL</label>
<input v-if="isEditing" type="text" v-model="post.textUrl" class="data-wrap">
<p v-else class="data-wrap">{{ post.textUrl }}</p>
</div>
<div class="flex align-center mb20">
<label class="title2">형식</label>
<label class="title2">
<input type="radio" v-model="post.textTypeId" value="1" class="data-wrap" :disabled="!isEditing"> 일반
</label>
<label class="title2">
<input type="radio" v-model="post.textTypeId" value="2" class="data-wrap" :disabled="!isEditing"> 대화
</label>
<label class="title2">
<input type="radio" v-model="post.textTypeId" value="3" class="data-wrap" :disabled="!isEditing"> 책 리스닝
</label>
</div>
<hr>
<div class="flex align-center">
<label for="" class="title2">스크립트</label>
<textarea v-if="isEditing" v-model="post.textCnt" class="data-wrap"></textarea>
<p v-else class="data-wrap">{{ post.textCnt }}</p>
</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="toggleEdit">
{{ isEditing ? '저장' : '수정' }}
</button>
<button type="button" title="삭제" class="new-btn" @click="deletePost">
삭제
</button>
</div>
</div>
</template>
<script>
import axios from "axios";
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
export default {
data() {
return {
mdiMagnify: mdiMagnify,
post: {"textId": "",
"textTtl": "",
"textCnt": "",
"textUrl": "",
"textTypeId": ""},
isEditing: false // Add this property to toggle edit mode
};
},
computed: {
textId() {
return this.$route.query.textId;
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
fetchPostDetail() {
const textId = this.$route.query.textId;
axios.post('/text/selectOneText.json', { textId }, {
headers: {
"Content-Type": "application/json; charset=UTF-8",
}
})
.then(response => {
if (response.data && response.data[0]) {
this.post.textId = response.data[0].text_id;
this.post.textTtl = response.data[0].text_ttl;
this.post.textCnt = response.data[0].text_cnt;
this.post.textUrl = response.data[0].text_url;
this.post.textTypeId = response.data[0].text_type_id;
} else {
this.error = "Failed to fetch post details.";
}
})
.catch(error => {
console.error("Error fetching post detail:", error);
this.error = "Failed to fetch post details.";
});
},
dataInsert() {
axios.post("/text/textUpdate.json", this.post, {
headers: {
"Content-Type": "application/json; charset=UTF-8",
}
})
.then(response => {
alert(response.data.message);
this.fetchPostDetail();
})
.catch(error => {
console.log("dataInsert - error : ", error.response.data);
alert("게시글 등록에 오류가 발생했습니다.");
});
},
toggleEdit() {
if (this.isEditing) {
this.dataInsert();
this.isEditing = false;
} else {
// Enter edit mode
this.isEditing = true;
}
},
deletePost() {
axios.post("/text/textDelete.json", { textId: this.textId }, {
headers: {
"Content-Type": "application/json; charset=UTF-8",
}
})
.then(response => {
alert(response.data.message);
this.goToPage('TextList');
})
.catch(error => {
console.error("Error deleting post:", error);
alert("게시글 삭제에 오류가 발생했습니다.");
});
}
},
mounted() {
this.fetchPostDetail();
console.log('Main2 mounted');
},
components: {
SvgIcon
}
};
</script>
<style scoped>
/* Add any necessary styles here */
</style>