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
File name
Commit message
Commit date
<template>
<div class="news-wrap">
<div class="content-box">
<div class="title-wrap">
<div class="flex-start">
<img src="../../../../resources/jpg/info-logo.png" alt="공지사항 아이콘" class="title-icon">
<h2 class="main-title">홍보 / news</h2>
</div>
</div>
<div class="content-wrap NewsInsert">
<table class="insert-table">
<tbody>
<tr>
<th>제목</th>
<td><input type="text" name="" id="newsTitle" maxlength="15" v-model="post.post_title"
placeholder="제목을 15자 내외로 적어주세요"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea name="smart" id="smart" style="width:100%"></textarea></td>
</tr>
<!-- <tr>
<th>썸네일</th>
<td>
<div class="btn-upload" @click="openFileInput">파일 업로드</div>
<input type="file" name="file" id="file" ref="fileInput" style="display: none"
@change="fileUpload()">
<ul v-for="(file, idx) in fileList" :key="idx">
<li> {{ file.name }} <button @click="fileRemove(idx)">삭제</button></li>
</ul>
</td>
</tr>
<tr>
<th>첨부파일</th>
<td>
<div class="btn-upload" @click="openFileInput">파일 업로드</div>
<input type="file" name="file" id="file" ref="fileInput" style="display: none"
@change="fileUpload()">
<ul v-for="(file, idx) in fileList" :key="idx">
<li> {{ file.name }} <button @click="fileRemove(idx)">삭제</button></li>
</ul>
</td>
</tr> -->
<tr>
<th>썸네일</th>
<td>
<div class="join-sub-input join-imgbox"
@click="openFileInput('thumbnail', 'thumbnailInput')">
<p>375 X 251</p>
<img v-if="thumbnailPreview" :src="thumbnailPreview" />
<input type="file" name="file" id="file" ref="thumbnailInput" style="display: none"
@change="fileUpload">
</div>
<p class="text-info">※ 썸네일 크기는 최소크기 1087 x 614 픽셀 이상 등록 가능합니다.</p>
</td>
</tr>
<tr>
<th>첨부파일</th>
<td>
<div class="btn-upload" @click="openFileInput('attach', 'attachInput')">파일 업로드</div>
<input type="file" name="file" id="file" ref="attachInput" style="display: none"
@change="fileUpload">
<ul class="file-list"
v-for="(file, idx) in fileList.filter(file => file.file_ty === 'attach')" :key="idx">
<li> {{ file.file.name }} <button @click="fileRemove(idx)" class="aclose-btn">X</button>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<div class="btn-wrap">
<button class="dark-gray-btn" @click="postSelectListPage()">이전</button>
<button class="blue-btn" @click="postInsertCheck()">등록</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
export default {
data() {
return {
post: {
bbs_id: '1',
post_title: null,
post_content: null,
// 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
ctgry_nm: null,
notice_yn: 'N',
},
fileList: [],
filecount: 0,
oEditors: [], // oEditors는 스마트에디터용
//
fileInputRef: null,
thumbnailPreview: null,
};
},
methods: {
//게시글 및 첨부파일 등록
// postInsert: function () {
// const vm = this;
// let formData = new FormData();
// if (vm.fileList.length > 0) {
// for (let i = 0; i < vm.fileList.length; i++) {
// formData.append('file', vm.fileList[i]);
// console.log(formData.get('file'));
// }
// formData.append("post", JSON.stringify(vm.post));
// axios({
// url: '/post/postFileInsert.file',
// method: 'post',
// headers: {
// 'Content-Type': 'multipart/form-data',
// },
// data: formData
// }).then(function (response) {
// console.log("qnaInsert - response : ", response);
// let result = response.data;
// if (result > 0) {
// alert("등록을 완료하였습니다.");
// vm.postSelectListPage()
// } else {
// alert("등록 실패, 관리자에게 문의해주세요.");
// }
// }).catch(function (error) {
// console.log("qnaInsert - error : ", error);
// alert("등록 오류, 관리자에게 문의해주세요.");
// });
// } else {
// axios({
// url: '/post/postInsert.json',
// method: 'post',
// headers: {
// 'Content-Type': "application/json; charset=UTF-8",
// },
// data: vm.post
// }).then(function (response) {
// console.log("noticeInsert - response : ", response);
// let result = response.data;
// if (result > 0) {
// alert("등록을 완료하였습니다.");
// vm.postSelectListPage()
// } else {
// alert("등록 실패, 관리자에게 문의해주세요.");
// }
// }).catch(function (error) {
// console.log("noticeInsert - error : ", error);
// alert("등록 오류, 관리자에게 문의해주세요.");
// });
// }
// },
postInsert: function () {
const vm = this;
let formData = new FormData();
if (vm.fileList.length > 0) {
for (let i = 0; i < vm.fileList.length; i++) {
formData.append('file', vm.fileList[i].file);
formData.append('file_ty', vm.fileList[i].file_ty);
}
formData.append("post", JSON.stringify(vm.post));
axios({
// url: '/post/postFileInsert.file',
url: '/post/newsFileInsert.file',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
data: formData
}).then(function (response) {
console.log("postFileInsert - response : ", response);
let result = response.data;
if (result > 0) {
alert("등록을 완료하였습니다.");
vm.postSelectListPage()
} else {
alert("등록 실패, 관리자에게 문의해주세요.");
}
}).catch(function (error) {
console.log("postFileInsert - error : ", error);
alert("등록 오류, 관리자에게 문의해주세요.");
});
} else {
axios({
url: '/post/postInsert.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.post
}).then(function (response) {
console.log("noticeInsert - response : ", response);
let result = response.data;
if (result > 0) {
alert("등록을 완료하였습니다.");
vm.postSelectListPage()
} else {
alert("등록 실패, 관리자에게 문의해주세요.");
}
}).catch(function (error) {
console.log("noticeInsert - error : ", error);
alert("등록 오류, 관리자에게 문의해주세요.");
});
}
},
//등록 유효성 검사
postInsertCheck: function () {
const oEditors = this.oEditors;
oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
// 스마트에디터의 iframe에 있는 내용을 textarea로.
this.post.post_content = document.getElementById("smart").value;
const hasThumbnail = this.fileList.some(item => item.file_ty === 'thumbnail');
console.log(document.getElementById("smart").value);
console.log(this.post.post_content);
console.log(COMMON_UTIL.isEmpty(this.post.post_title));
if (!hasThumbnail) {
alert("썸네일을 등록해주세요");
return false;
}
if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
alert("제목을 입력해주세요.");
return false;
}
if (COMMON_UTIL.isEmpty(this.post.post_content) === false || this.post.post_content === "<p><br></p>") {
alert("내용을 입력해주세요.");
return false;
}
this.postInsert();
},
//파일업로드
// fileUpload: function () {
// this.fileList[this.filecount] = this.$refs.fileInput.files[0]
// this.filecount += 1
// console.log("file", this.fileList);
// },
fileUpload: function () {
const MIN_WIDTH = 375;
const MIN_HEIGHT = 251;
const file = this.$refs[this.fileInputRef].files[0];
const fileItem = { file, file_ty: this.file_ty };
if (this.file_ty === 'thumbnail') {
const thumbnailIndex = this.fileList.findIndex(file => file.file_ty === 'thumbnail');
if (thumbnailIndex !== -1) {
this.fileList.splice(thumbnailIndex, 1);
}
let reader = new FileReader();
reader.onload = (e) => {
this.thumbnailPreview = e.target.result;
// 이미지크기 확인
const img = new Image();
img.src = this.thumbnailPreview;
img.onload = () => {
if (img.width < MIN_WIDTH || img.height < MIN_HEIGHT) {
alert("썸네일 이미지 크기는 최소 " + MIN_WIDTH + "픽셀" + "x" + MIN_HEIGHT + "픽셀" + "입니다.");
this.thumbnailPreview = null;
this.$refs.thumbnailInput.value = ''
}
// // Continue adding the thumbnail to the fileList
// this.fileList.push(fileItem);
// this.filecount += 1;
// console.log("file::::", this.fileList);
};
};
reader.readAsDataURL(file);
}
this.fileList.push(fileItem);
this.filecount += 1;
console.log("file", this.fileList);
},
//파일업로드 중 업로드 파일 삭제
fileRemove(idx) {
this.fileList.splice(idx, 1);
this.filecount = this.fileList.length;
},
//게시글 리스트로 이동
postSelectListPage: function () {
this.$router.push({ path: '/adm/newsSelectList.page' });
},
// 파일 업로드 커스텀을 위한 함수
// openFileInput: function () {
// this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
// },
openFileInput: function (file_ty, inputRef) {
this.file_ty = file_ty;
this.fileInputRef = inputRef;
this.$refs[inputRef].click();
},
},
watch: {},
computed: {},
components: {},
mounted() {
// 스마트 에디터 적용
const oEditors = this.oEditors;
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "smart",
sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
htParams: {
bUseToolbar: true, // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
bSkipXssFilter: true,
bUseVerticalResizer: true,
bUseModeChanger: true
},
fCreator: "createSEditor2"
});
}
};
</script>