input 값 수정 오류
본문
<template>
<div>
<form class="resultsReport">
<div class="titleBox">
<h4>멘토링 결과 보고서</h4>
</div>
<div class="userInfo">
<div class="mentorInfo">
<div class="title">
<h6>멘토 (Mentor)</h6>
</div>
<div>
<label for="mentorName">이<span class="spacing"></span>름</label>
<input type="text" id="mentorName" name="mentorName" v-model="mentorName">
</div>
<div>
<label for="field">상담분야</label>
<input type="text" id="field" name="field" v-model="mentorArea">
</div>
<div>
<label for="belong">소속기관</label>
<input type="text" id="belong" name="belong" v-model="mentorGroup">
</div>
<div>
<label for="level">직<span class="spacing"></span>위</label>
<input type="text" id="level" name="level" v-model="mentorRank">
</div>
</div>
<div class="mentorInfo">
<div class="title">
<h6>멘티 (Mentee)</h6>
</div>
<div>
<label for="menteeName">이<span class="spacing"></span>름</label>
<input type="text" id="menteeName" name="menteeName" v-model="menteeName">
</div>
<div class="founded">
<p>창업여부</p>
<div class="radioStyle">
<div>
<input type="radio" id="spare" name="founded" v-model="menteeIsStartUp" value="spare">
<label for="spare">예비창업자</label>
</div>
<div>
<input type="radio" id="already" name="founded" v-model="menteeIsStartUp" value="already">
<label for="already">가창업자</label>
</div>
</div>
</div>
<div>
<label for="company">기<span class="spacing02"></span>업<span class="spacing02"></span>명</label>
<input type="text" id="company" name="company" v-model="menteeCompany">
</div>
<div>
<label for="item">아이템명</label>
<input type="text" id="item" name="item" v-model="menteeItem">
</div>
</div>
</div>
<div class="activity">
<div class="title">
<h6>멘토링 활동 수행 방법</h6>
</div>
<div class="activityLine">
<div>
<label for="count">차수</label>
<input type="text" id="count" name="count" v-model="degree">
</div>
<div>
<label for="day">수행날짜</label>
<input type="date" id="day" name="day" v-model="performanceDate">
</div>
<div class="teach">
<p>지도방법</p>
<input type="radio" id="contact" name="teach" v-model="teachingMethod" value="contact">
<label for="contact">대면</label>
<input type="radio" id="uncontact" name="teach" v-model="teachingMethod" value="uncontact">
<label for="uncontact">비대면</label>
</div>
</div>
<div class="activityLine">
<div>
<label for="place">장소</label>
<input type="text" id="place" name="place" v-model="place">
</div>
<div>
<label for="etc">기<span class="spacing"></span>타</label>
<input type="text" id="etc" name="etc" v-model="etc">
</div>
<div style="width: 186.45px;"></div>
</div>
</div>
<div class="request">
<div class="title">
<h6>멘티 요구사항(주제)</h6>
</div>
<textarea v-model="subject"></textarea>
</div>
<div class="mentorResults">
<div class="title">
<h6>멘토링 수행결과</h6>
</div>
<div class="opinion">
<div class="subTitle">
<p>주요 내용 요약</p>
</div>
<textarea v-model="summary"></textarea>
</div>
<div class="opinion">
<div class="subTitle">
<p>멘토링 성과</p>
</div>
<textarea v-model="result"></textarea>
</div>
<div class="opinion">
<div class="subTitle">
<p>기대효과 및 추가 멘토링 사항</p>
</div>
<textarea v-model="benefit"></textarea>
</div>
<div class="opinion">
<div class="subTitle">
<p>수행사진</p>
</div>
<div class="imageUploadWrap">
<label for="image01">
<div class="imageUpload">
<div>
<span>+</span>
<span>사진파일 업로드</span>
<img v-if="pathUrl01" :src="pathUrl01" alt="미리보기01">
</div>
</div>
</label>
<input ref="fileInput01" type="file" id="image01" name="image01" accept="image/*" value="첨부파일"
@change="handleFileUpload($event, '01')">
<label for="image02">
<div class="imageUpload">
<div>
<span>+</span>
<span>사진파일 업로드</span>
<img v-if="pathUrl02" :src="pathUrl02" alt="미리보기02">
</div>
</div>
</label>
<input ref="fileInput02" type="file" id="image02" name="image02" accept="image/*" value="첨부파일"
@change="handleFileUpload($event, '02')">
<label for="image03">
<div class="imageUpload">
<div>
<span>+</span>
<span>사진파일 업로드</span>
<img v-if="pathUrl03" :src="pathUrl03" alt="미리보기03">
</div>
</div>
</label>
<input ref="fileInput03" type="file" id="image03" name="image03" accept="image/*" value="첨부파일"
@change="handleFileUpload($event, '03')">
</div>
</div>
</div>
<div class="submit">
<button type="button" @click="saveJournal" v-if="$route.path.startsWith('/main/mentor/state/')">저장</button>
<button v-else type="button" @click="updateJournalData">수정</button>
</div>
<!-- <div class="submit">
<button type="button" @click="saveJournal">저장</button>
<button v-else type="button" @click="updateJournalData">수정</button>
</div> -->
</form>
</div>
</template>
<script>
import MatchDateService from "@/services/main/UserMatch";
import jwtDecode from "jwt-decode";
export default {
name: "JournalCheck",
props: {
buildId: Number,
},
data() {
return {
// input data
mentorName: "",
mentorArea: "",
mentorGroup: "",
mentorRank: "",
menteeName: "",
menteeIsStartUp: "",
menteeCompany: "",
menteeItem: "",
performanceDate: "",
degree: "",
teachingMethod: "",
place: "",
etc: "",
subject: "",
summary: "",
result: "",
benefit: "",
pathUrl01: "",
pathUrl02: "",
pathUrl03: "",
}
},
methods: {
getUserId() {
const tokenData = localStorage.getItem("user");
const parsedToken = JSON.parse(tokenData);
const accessToken = parsedToken.accessToken;
const decodedToken = jwtDecode(accessToken);
const userId = decodedToken.id;
return userId;
},
async saveJournal() {
if (confirm("저장하시겠습니까?")) {
const formData = new FormData();
const filesArr = [];
filesArr.push(this.$refs.fileInput01.files[0]);
filesArr.push(this.$refs.fileInput02.files[0]);
filesArr.push(this.$refs.fileInput03.files[0]);
formData.append("files", filesArr);
formData.append("buildId", this.$route.params.id);
formData.append("mentorName", this.mentorName);
formData.append("mentorArea", this.mentorArea);
formData.append("mentorGroup", this.mentorGroup);
formData.append("mentorRank", this.mentorRank);
formData.append("menteeName", this.menteeName);
formData.append("menteeIsStartUp", this.menteeIsStartUp);
formData.append("menteeCompany", this.menteeCompany);
formData.append("menteeItem", this.menteeItem);
formData.append("degree", this.degree);
formData.append("performanceDate", this.performanceDate);
formData.append("teachingMethod", this.teachingMethod);
formData.append("place", this.place);
formData.append("etc", this.etc);
formData.append("subject", this.subject);
formData.append("summary", this.summary);
formData.append("result", this.result);
formData.append("benefit", this.benefit);
for (let key of formData.keys()) {
console.log(key, ":", formData.get(key));
}
try {
await MatchDateService.createConsultingJournal(this.getUserId(), formData);
alert("저장되었습니다.");
this.$router.push("/main/mentor");
} catch (e) {
console.log("저장실패", e);
}
}
},
async getJournalData(id) {
try {
const response = await MatchDateService.getConsultingJournalDetail(id);
this.mentorName = response.data.mentorName;
this.mentorArea = response.data.mentorArea;
this.mentorGroup = response.data.mentorGroup;
this.mentorRank = response.data.mentorRank;
this.menteeName = response.data.menteeName;
this.menteeIsStartUp = response.data.menteeIsStartUp;
this.menteeCompany = response.data.menteeCompany;
this.menteeItem = response.data.menteeItem;
this.performanceDate = response.data.performanceDate;
this.degree = response.data.degree;
this.teachingMethod = response.data.teachingMethod;
this.place = response.data.place;
this.etc = response.data.etc;
this.subject = response.data.subject;
this.summary = response.data.summary;
this.result = response.data.result;
this.benefit = response.data.benefit;
this.pathUrl01 = response.data.img1;
this.pathUrl02 = response.data.img2;
this.pathUrl03 = response.data.img3;
console.log("조회 성공", response.data);
} catch (e) {
console.log("조회 실패", e.response.data.message);
}
},
async updateJournalData() {
if (confirm("수정하시겠습니까?")) {
try {
const formData = new FormData();
const filesArr = [];
filesArr.push(this.$refs.fileInput01.files[0]);
filesArr.push(this.$refs.fileInput02.files[0]);
filesArr.push(this.$refs.fileInput03.files[0]);
formData.append("files", filesArr);
formData.append("buildId", this.$route.params.id);
formData.append("mentorName", this.mentorName);
formData.append("mentorArea", this.mentorArea);
formData.append("mentorGroup", this.mentorGroup);
formData.append("mentorRank", this.mentorRank);
formData.append("menteeName", this.menteeName);
formData.append("menteeIsStartUp", this.menteeIsStartUp);
formData.append("menteeCompany", this.menteeCompany);
formData.append("menteeItem", this.menteeItem);
formData.append("degree", this.degree);
formData.append("performanceDate", this.performanceDate);
formData.append("teachingMethod", this.teachingMethod);
formData.append("place", this.place);
formData.append("etc", this.etc);
formData.append("subject", this.subject);
formData.append("summary", this.summary);
formData.append("result", this.result);
formData.append("benefit", this.benefit);
const response = await MatchDateService.updateConsultingJournal(this.$route.params.id, formData);
console.log("업데이트 성공", response.data);
// this.$router.push("/main/mentor");
} catch (e) {
console.log("업데이트 실패", e);
}
}
},
async handleFileUpload(event, target) {
const file = event.target.files[0];
if (file && file.type.startsWith("image/")) {
const reader = new FileReader();
reader.onload = () => {
this['pathUrl' + target] = reader.result;
};
reader.readAsDataURL(file);
}
},
},
async mounted() {
await this.getJournalData(this.$route.params.id);
}
};
</script>
<style>
.resultsReport {
background: #f8f6fb;
padding: 60px 70px;
font-size: 16px;
}
.resultsReport h4 {
font-weight: normal;
}
.resultsReport h6 {
font-weight: bold;
font-size: 20px;
}
.resultsReport h6,
.resultsReport h4 {
margin: 0;
padding: 10px 0;
}
.resultsReport input,
.resultsReport select {
border: 1px solid #dbdbdb;
height: 30px;
outline: none;
}
.resultsReport input,
.resultsReport select,
.input[type="radio"] {
margin-left: 8px;
}
.userInfo input[type="text"] {
width: 75%;
}
.resultsReport .title {
margin-bottom: 15px;
color: #6857a4;
}
.resultsReport p {
margin: 0;
}
.radioStyle {
display: flex;
justify-content: space-around;
width: 80%;
}
.radioStyle>div {
display: flex;
align-items: center;
}
.radioStyle label[for="spare"],
.radioStyle label[for="already"],
.radioStyle label[for="contact"],
.radioStyle label[for="uncontact"],
.teach>label {
margin-left: 5px;
}
.titleBox {
width: 100%;
border: 2px solid #6857a4;
text-align: center;
padding: 5px;
border-radius: 3px;
}
.mentorInfo>div,
.activity>div {
margin-bottom: 7px;
}
.userInfo {
display: flex;
}
.activity,
.request,
.mentorResults,
.userInfo {
padding: 40px 20px 0 20px;
}
.mentorInfo {
width: 100%;
}
.activity input[type="text"] {
margin-right: 60px;
}
.activityLine {
display: flex;
}
.activityLine input[id="day"] {
width: 216px;
margin-right: 60px;
padding: 0 10px;
}
.teach,
.founded {
display: flex;
align-items: center;
}
.teach p,
.username {
margin-right: 10px;
}
.spacing {
margin-right: 28px;
}
.spacing02 {
margin-right: 7px;
}
textarea {
width: 100%;
height: 80px;
border: 1px solid #dbdbdb;
resize: none !important;
outline: none;
}
.mentorResults .subTitle {
margin-bottom: 7px;
font-weight: 600;
}
.mentorResults .opinion {
margin-bottom: 15px;
}
input[type="file"] {
display: none;
}
.imageUploadWrap {
display: flex;
justify-content: space-between;
}
.imageUploadWrap label {
width: 100%;
}
.imageUpload {
width: 95%;
height: 200px;
border: 2px dashed #dbdbdb;
}
.imageUpload div {
width: 300px;
height: 100%;
color: #dbdbdb;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
cursor: pointer;
position: relative;
}
.imageUpload div span:first-child {
font-size: 50px;
}
.imageUpload div img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.submit {
display: flex;
justify-content: center;
margin-top: 50px;
}
.submit button {
border: 1px solid #dbdbdb;
background: none;
padding: 5px 12px;
}
tr th {
border-top: 2px solid #777;
text-align: center;
padding: 10px 0px;
border-bottom: 1px solid #dfdfdf;
background: #f5f5f5 !important;
font-size: 14px;
color: #555;
}
.mainTitle {
text-align: center;
padding: 30px 0;
}
</style>
404에러가 뜨네요 수정이 되지 않습니다