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="container">
<div class="page-titleZone flex justify-between align-center align-center">
<p class="main-title flex80">공지사항 등록</p>
<PageNavigation />
</div>
<div class="content-wrap">
<div class="content">
<div class="flex100">
<div class="table-zone">
<table class="form-table">
<colgroup>
<col width="10%" />
<col width="90%" />
</colgroup>
<tbody>
<tr>
<th>제목</th>
<td>
<input
type="text"
class="full-input"
v-model="item.noticeTitle"
/>
</td>
</tr>
<tr>
<th>상단고정여부</th>
<td>
<div class="input-container flex">
<label class="radio-label">
<input
type="radio"
name="noticeIsFix"
class="custom-radiobox"
value="1"
v-model="item.noticeIsFix"
/>
<span>고정</span>
</label>
<label class="radio-label">
<input
type="radio"
name="noticeIsFix"
class="custom-radiobox"
value="0"
v-model="item.noticeIsFix"
/>
<span>미고정</span>
</label>
</div>
</td>
</tr>
<tr>
<th>내용</th>
<td colspan="3">
<quill-editor
style="height: 130px"
:value="item.noticeContent"
@change="onEditorChange"
contentType="html"
:options="editorOption2"
ref="quillEditorB"
></quill-editor>
</td>
</tr>
<tr>
<th>첨부파일목록</th>
<td colspan="3">
<div class="file_input">
<form
name="fileForm"
id="fileForm"
method="post"
enctype="multipart/form-data"
>
<label for="fileUp" class="green-border-btn small-btn">
파일선택
</label>
<input
type="file"
id="fileUp"
@change="fileChange()"
multiple
style="display: none"
/>
</form>
</div>
<div class="filename">
<ul>
<li v-for="(file, i) in tempFile" :key="i">
<span>{{ file.name }}</span>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-end">
<button class="blue-btn small-btn" @click="validate">
<span v-if="$isEmpty(noticeId)">등록</span>
<span v-else>수정</span>
</button>
<button class="red-border-btn small-btn" @click="fnDelete">
삭제
</button>
<button class="blue-border-btn small-btn" @click="fnMove">
취소
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from '../../common/defaultAxios.js';
export default {
name: "NoticeInsert",
components: {},
data() {
return {
noticeId: this.$route.query.noticeId,
item: {},
//input type File에서 선택된 파일 목록
tempFile: [],
};
},
mounted() {
this.fnSelectDetail();
},
methods: {
// 상세 조회
fnSelectDetail() {
const vm = this;
// 실행
axios({
url: "/notice",
method: "get",
params: { noticeId: this.noticeId },
})
.then((response) => {
vm.item = response.data.resultData.vo;
vm.fileList = response.data.resultData.fileList;
})
.catch((error) => {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
onEditorChange(v) {
this.item.noticeContent = v.html;
},
// 등록할 파일 출력
fileChange() {
this.tempFile = [];
var files =
event.target.files ||
event.dataTransfer.files ||
window.event.target.files ||
window.event.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
files[i].progress = 0;
this.tempFile.push(files[i]);
}
},
// 유효성 검사
validate() {
if (this.$isEmpty(this.item.noticeTitle)) {
this.$showAlert("경고", "제목을 입력해주세요.");
return;
}
if (this.$isEmpty(this.item.noticeIsFix)) {
this.$showAlert("경고", "상단고정여부를 선택해주세요.");
return;
}
if (this.$isEmpty(this.item.noticeContent)) {
this.$showAlert("경고", "내용을 입력해주세요.");
return;
}
// 실행
if (this.tempFile.length !== 0) {
this.fileUpload();
} else {
if (this.$isEmpty(this.noticeId)) {
this.fnInsert();
} else {
this.fnUpdate();
}
}
},
// 게시글 등록 시 파일도 등록
fileUpload() {
const vm = this;
var formData = new FormData();
vm.tempFile.forEach(function (file, index) {
formData.append("files", file);
});
axios
.post("/fileManage/read", formData, {
headers: { "Content-Type": "multipart/form-data" },
onUploadProgress(progressEvent) {
if (progressEvent.lengthComputable) {
vm.tempFile.attach.fileList.forEach(function (file, index) {
file.progress =
(progressEvent.loaded / progressEvent.total) * 100;
});
}
},
})
.then(function (response) {
vm.item.fileManagerId =
response.data.resultData.fileManage.fileManagerId;
if (vm.$isEmpty(vm.noticeId)) {
vm.fnInsert();
} else {
vm.fnUpdate();
}
})
.catch(function (error) {
console.error(error);
});
},
// 등록
fnInsert() {
const vm = this;
// 실행
axios({
url: "/notice",
method: "post",
data: vm.item,
})
.then((response) => {
this.$showAlert("안내", "등록이 완료되었습니다.");
this.$router.push({
path: "/noticeView.page",
query: { noticeId: response.data.resultData.vo.noticeId },
});
})
.catch((error) => {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 수정
fnUpdate() {
const vm = this;
// 실행
axios({
url: "/notice",
method: "put",
data: vm.item,
})
.then((response) => {
this.$showAlert("안내", "수정이 완료되었습니다.");
this.$router.push({
path: "/noticeView.page",
query: { noticeId: vm.noticeId },
});
})
.catch((error) => {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 페이지 이동
fnMove() {
if (this.$isEmpty(this.noticeId)) {
this.fnMoveToList();
} else {
this.fnMoveToView();
}
},
// 목록
fnMoveToList() {
this.$router.push({
path: "/noticeList.page",
});
},
// 취소
fnMoveToView() {
this.$router.push({
path: "/noticeView.page",
query: { noticeId: this.noticeId },
});
},
},
};
</script>