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>
<div v-if="isEditing">
<input type="text" v-model="newData.textTtl" class="data-wrap">
</div>
<div v-else>
<p class="data-wrap">{{ post.text_ttl }}</p>
</div>
</div>
<div class="flex align-center mb20">
<label for="" class="title2">URL</label>
<div v-if="isEditing">
<input type="text" v-model="newData.textUrl" class="data-wrap">
</div>
<div v-else>
<p class="data-wrap">{{ post.text_url }}</p>
</div>
</div>
<div class="flex align-center">
<label class="title2">형식</label>
<label class="title2">
<input type="radio" v-model="radio" value="1" class="data-wrap" :disabled="!isEditing"> 일반
</label>
<label class="title2">
<input type="radio" v-model="radio" value="2" class="data-wrap" :disabled="!isEditing"> 대화
</label>
<label class="title2">
<input type="radio" v-model="radio" value="3" class="data-wrap" :disabled="!isEditing"> 책 리스닝
</label>
</div>
<hr>
<div class="flex align-center">
<label for="" class="title2">스크립트</label>
<div v-if="isEditing">
<textarea v-model="newData.textCnt" class="data-wrap"></textarea>
</div>
<div v-else>
<p class="data-wrap">{{ post.text_cnt }}</p>
</div>
</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: {},
newData: {
"textId": "",
"textTtl": "",
"textCnt": "",
"textUrl": "",
"textTypeId": ""
},
radio: null,
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 = response.data[0];
this.radio = this.post.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() {
this.newData.textId=this.textId;
axios.post("/text/textUpdate.json", this.newData, {
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) {
// Save changes if in edit mode
this.newData.textTypeId = this.radio;
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>