File name
Commit message
Commit date
05-22
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
File name
Commit message
Commit date
<template>
<div class="content-zone sch-full">
<div class="content">
<div class="scroll">
<div class="form-box h_100">
<div class="form-box-title">
<p>기본정보</p>
<p><span>*</span>필수입력</p>
</div>
<div class="form-content grid-none">
<div class="layout" ref="first">
<label for="" class="form-title"><span>*</span>내용</label>
<template v-if="ansPageId != null">
<textarea class="form-control area" placeholder="답변을 입력하세요." v-model="bbsCn.ansCn" style="height: 100%;"></textarea>
</template>
<template v-else>
<textarea class="form-control area" placeholder="답변을 입력하세요." v-model="bbsCn.bbsCn" style="height: 100%;"></textarea>
</template>
</div>
<div class="layout" ref="two" v-if="bbsMng.atchFileUseYn === 'Y'">
<label for="" class="form-title">첨부파일</label>
<div class="layout">
<div>
<p v-if="fileList.length < 1">첨부파일이 없습니다.</p>
<ul v-else class="pl10 pr10 border radius align-center">
<li
v-for="(file, idx) in fileList"
:key="idx"
class="file-wrap"
>
<p v-if="file['fileId'] != null">
{{ file["fileNm"] }}.{{ file["extnNm"] }}
<button
class="btn-ico ico-close sm ml10"
@click="fnFileDelete(file, idx)"
>
</button>
</p>
<p v-else>
{{ file.name }}
<button
class="btn-ico ico-close sm ml10"
@click="fnFileDelete(file, idx)"
>
</button>
</p>
</li>
</ul>
</div>
<div>
<label for="file" class="large-btn green-border-btn text-ct"
>파일찾기</label
>
<input
type="file"
id="file"
ref="file"
@change="fnFileInsert"
multiple
/>
</div>
</div>
</div>
<div class="layout" ref="three" v-if="bbsMng.ntcUseYn === 'Y'">
<label for="" class="form-title">공지글</label>
<div class="flex align-center no-gutters">
<div class="gd-4">
<input
type="radio"
name="notice"
id="notice-y"
class="mr5"
value="Y"
v-model="bbsCn.ntcPstYn"
/>
<label for="notice-y">사용</label>
</div>
<div class="gd-4">
<input
type="radio"
name="notice"
id="notice-n"
class="mr5"
value="N"
v-model="bbsCn.ntcPstYn"
/>
<label for="notice-n">미사용</label>
</div>
</div>
</div>
<div class="layout" ref="four" v-if="bbsCn.ntcPstYn === 'Y'">
<label for="" class="form-title">공지글 게시기간</label>
<div class="flex align-center no-gutters">
<div class="gd-4">
<input
type="date"
class="full-input ml0"
v-model="bbsCn.ntcBgngDt"
@change="checkDateValidity('ntcBgngDt', $event)"
/>
</div>
<div class="pd10">-</div>
<div class="gd-4">
<input
type="date"
class="full-input ml0"
v-model="bbsCn.ntcEndDt"
@change="checkDateValidity('ntcEndDt', $event)"
/>
</div>
</div>
</div>
<div class="layout" ref="five" v-if="bbsMng.prvtPstUseYn === 'Y' && ansPageId == null" >
<label class="form-title">비밀글</label>
<div class="check-area">
<div class="form-check">
<input
type="radio"
name="private"
id="private-y"
class="mr5"
value="Y"
v-model="bbsCn.prvtPstYn"
/>
<label for="private-y">사용</label>
</div>
<div class="form-check">
<input
type="radio"
name="private"
id="private-n"
class="mr5"
value="N"
v-model="bbsCn.prvtPstYn"
/>
<label for="private-n">미사용</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-wrap">
<button
v-if="ansPageId == null"
class="btn sm main"
@click="fnInsert"
>
{{ bbsCn.bbsId == null ? "등록" : "수정" }}
</button>
<button
v-else
class="btn sm main"
@click="fnAnsInsert"
>
{{ bbsCn.ansStts == "N" ? "답변 등록" : "답변 수정" }}
</button>
<button class="btn sm tertiary" @click="fnCancel">취소</button>
</div>
</template>
<script>
import { findByBbsCn, fnqSave } from "../../../../../../resources/api/bbsCn.js";
import queryParams from "../../../../../../resources/js/queryParams";
import defaultAxios from "../../../../../../resources/js/defaultAxios";
export default {
mixins: [queryParams],
data() {
return {
pageRole: this.$store.state.userType,
path: this.$store.state.path,
pageAuth: this.$store.state.pageAuth,
bbsMngId: null,
bbsCn: {},
bbsMng: {},
// 답변
ansPageId: null,
// 파일 업로드
files: null,
fileList: [],
deleteFileList: [],
//이미지 업로드
imgFiles: null,
imgFileList: [],
deleteImgFileList: [],
};
},
created() {
this.fnBbsIdExtraction();
this.fnSelectOne();
},
methods: {
// 상세조회
async fnSelectOne() {
let bbsId = null;
if (this.$route.query.ansPageId != null) {
bbsId = this.$route.query.ansPageId;
} else {
bbsId = this.$route.query.pageId;
}
try {
const params = {
bbsId: bbsId,
bbsMngId: this.bbsMngId,
};
const res = await findByBbsCn(params);
if (res.status == 200) {
this.bbsCn = res.data.data.bbsCn;
this.bbsMng = res.data.data.bbsMng;
this.fileList = res.data.data.fileList;
if (this.$route.query.ansPageId != null) {
this.ansPageId = this.$route.query.ansPageId;
}
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
/*
// 첨부파일 등록
fnFileInsert() {
// files 개수 만큼 반복해서 type, size 체크
this.files = this.$refs.file.files;
for (let i = 0; i < this.files.length; i++) {
const file = this.files[i];
const extnNm = file.name.split('.').pop();
if(this.bbsMng.fileExtnNmList.length >= 1){
if (!this.bbsMng.fileExtnNmList.includes(extnNm)) {
alert('첨부파일 확장자를 확인해주세요.');
return;
}
}
if(this.bbsMng.fileSzLmt != 0 && this.bbsMng.fileSzLmt != null) {
if (file.size > this.bbsMng.fileSzLmt) {
alert('첨부파일 용량을 확인해주세요.');
return;
}
}
}
this.fileList = [...this.fileList, ...Array.from(this.files)];
},
// 첨부파일 삭제
fnFileDelete(file, index) {
if (file["fileId"] != null) {
this.deleteFileList.push(file);
}
this.fileList.splice(index, 1);
},
*/
fnInsert() {
if (this.ansPageId != null) {
// 질의형 게시판 답변 등록 수정
if (this.bbsCn.ansStts == null || this.bbsCn.ansStts == "") {
this.fnAnsInsert();
} else {
this.fnAnsUpdate();
}
} else {
// 질의형 게시판 등록/ 수정
if (this.bbsCn.bbsId == null || this.bbsCn.bbsId == 0) {
this.fnSave();
} else {
this.fnUpdate();
}
}
},
// 등록
async fnSave() {
// 내용 null검사
if (!this.bbsCn.bbsCn || this.bbsCn.bbsCn.trim() === "") {
alert("내용을 입력하세요.");
return;
}
// 줄바꿈 처리 적용
// 답변 상태 추가
this.bbsCn.ansStts = "N";
// 폼데이터 생성
this.bbsCn.bbsMngId = this.bbsMngId;
var formData = new FormData();
const paramsToBlob = new Blob([JSON.stringify(this.bbsCn)], {
type: "application/json; charset=UTF-8",
});
formData.append("bbsCn", paramsToBlob);
for (const file of this.fileList) {
formData.append("multipartFileList", file);
}
for (const imgFile of this.imgFileList) {
formData.append("multipartImgList", imgFile);
}
// axios 호출
await defaultAxios({
url: this.$filters.ctxPath("/sys/bbsCn/saveBbsCn.file"),
method: "post",
headers: {
"Content-Type": "multipart/form-data; charset=UTF-8",
Authorization: this.$store.state.authorization,
},
data: formData,
})
.then((response) => {
const bbsId = response.data.data.bbsId;
alert("게시글이 등록되었습니다.");
this.$router.push({
path: this.path + "/list.page",
});
})
.catch((error) => {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
});
},
// 수정
async fnUpdate() {
// 내용 null검사
if (this.bbsCn.bbsCn.trim() == "" || this.bbsCn.bbsCn === null) {
alert("내용을 입력하세요.");
return;
}
// 폼데이터 생성
this.bbsCn.bbsMngId = this.bbsMngId;
var formData = new FormData();
const paramsToBlob = new Blob([JSON.stringify(this.bbsCn)], {
type: "application/json; charset=UTF-8",
});
formData.append("params", paramsToBlob);
const deleteFileListToBlob = new Blob(
[JSON.stringify(this.deleteFileList)],
{
type: "application/json; charset=UTF-8",
}
);
formData.append("deleteFileList", deleteFileListToBlob);
// 추가 첨부파일
for (const file of this.fileList) {
if (file["fileId"] == null) {
formData.append("multipartFileList", file);
}
}
// 이미지 파일
const deleteImgFileListToBlob = new Blob(
[JSON.stringify(this.deleteImgFileList)],
{
type: "application/json; charset=UTF-8",
}
);
formData.append("deleteImgFileList", deleteImgFileListToBlob);
for (const imgFile of this.imgFileList) {
formData.append("multipartImgList", imgFile);
}
// axios 호출
defaultAxios({
url: this.$filters.ctxPath("/sys/bbsCn/updateBbsCn.file"),
method: "post",
headers: {
"Content-Type": "multipart/form-data; charset=UTF-8",
Authorization: this.$store.state.authorization,
},
data: formData,
})
.then((response) => {
const bbsId = response.data.data;
this.$router.push({
path: this.path + "/list.page",
});
})
.catch((error) => {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
});
},
// 질의 답변 등록
async fnAnsInsert() {
this.bbsCn.bbsId = this.ansPageId;
this.bbsCn.ansStts = "Y";
try {
const res = await fnqSave(this.bbsCn);
if (res.status == 200) {
alert("답변이 등록되었습니다.");
this.$router.push({
path: this.path + "/list.page",
});
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 질의 답변 수정
async fnAnsUpdate() {
try {
const res = await fnqUpdate(this.bbsCn);
if (res.status == 200) {
alert("답변이 수정되었습니다.");
this.$router.push({
path: this.path + "/list.page",
});
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 취소 버튼 동작
fnCancel() {
if (!confirm("작성을 취소하시겠습니까?")) {
return;
}
this.$router.push({
path: this.path + "/list.page",
});
},
updateHeight() {
this.$nextTick(() => {
const first = this.$refs.first;
const two = this.$refs.two;
const three = this.$refs.three;
const fore = this.$refs.fore;
const five = this.$refs.five;
let total = 0;
if (two) total += two.offsetHeight;
if (three) total += three.offsetHeight;
if (fore) total += fore.offsetHeight;
if (five) total += five.offsetHeight;
if (first) {
first.style.height = `calc(100% - ${total}px)`;
}
});
},
},
watch: {
bbsMng: {
handler() {
this.$nextTick(() => {
this.updateHeight();
});
},
deep: true,
},
bbsCn: {
handler() {
this.$nextTick(() => {
this.updateHeight();
});
},
deep: true,
},
},
computed: {
},
components: {},
mounted() {
this.updateHeight();
// 창 크기 변경 시에도 대응하고 싶다면:
window.addEventListener('resize', this.updateHeight);
},
beforeUnmount() {
window.removeEventListener('resize', this.updateHeight);
},
};
</script>