jbcheong/hubez-admin
1
0
Fork 0
mirror of http://git.mhez-qa.uplus.co.kr/hubez/hubez-admin.git synced 2025-12-07 06:38:22 +09:00
Code Issues Projects Releases Wiki Activity

공지사항 신규 개발

Browse Source
This commit is contained in:
kimjhjjang
2022-11-01 13:23:58 +09:00
parent c916d16a46
commit d1d62c76c8
57 changed files with 3721 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

535
frontend/src/modules/homeMgt/components/NoticePop.vue Normal file
View File

@@ -0,0 +1,535 @@
<template>
<!-- <div class="wrap bg-wrap"> -->
<div>
<div class="dimmed modal-insertNotice" @click="ModalClose()"></div>
<div class="popup-wrap modal-insertNotice">
<!-- 공지사항 신규 등록 -->
<div class="popup modal-insertNotice popup_form" style="width: 70vw">
<div class="pop-head">
<h3 class="pop-tit">공지사항 신규 등록</h3>
</div>
<form autocomplete="off">
<table>
<colgroup>
<col width="10%" />
<col width="40%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<tbody>
<tr>
<th style="width: 10%">분류코드</th>
<td>
<div class="select_box">
<select name="" id="right" v-model="ctgCd" style="min-width: 500px" ref="_ctgCd">
<option v-for="(option, i) in ctgCdOption" :value="option.code" v-bind:key="i">
{{ option.codeNm }}
</option>
</select>
</div>
</td>
<th style="width: 10%">긴급여부</th>
<td>
<div class="select_box">
<select name="" id="right" v-model="emgYn" style="min-width: 150px">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</div>
</td>
<th style="width: 10%">사용여부</th>
<td>
<div class="select_box">
<select name="" id="right" v-model="useYn" style="min-width: 150px">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</div>
</td>
</tr>
<tr>
<th style="width: 10%">제목</th>
<td colspan="5">
<input type="text" placeholder="제목을 입력하세요" v-model="title" ref="_title" />
</td>
</tr>
<tr>
<th style="width: 10%">내용</th>
<td class="sender" colspan="5">
<vue-editor
id="editor"
useCustomImageHandler
@imageAdded="handleImageAdded"
v-model="ntSbst"
ref="_ntSbst"
>
</vue-editor>
</td>
</tr>
<tr>
<th style="width: 10%">첨부파일</th>
<td class="sender" colspan="5">
<p class="file" style="width: 100%; margin-bottom: 15px">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
<div class="btn plus">
파일 추가
<input
type="file"
accept=".jpg,.png,.pdf,.tiff"
multiple="multiple"
ref="imageUploader"
@change="onFileChange"
class="form-control-file"
id="my-file"
/>
</div>
<div class="img_list_wrap" v-if="updateFileList.length > 0" style="margin-top: 15px">
<div
class="img_list"
v-for="(item, index) in updateFileList"
:key="index"
style="margin-bottom: 5px"
>
<!-- <a href="javascript:void(0);" @click="download(item.filePath, item.fileNm, item.name)">{{ item.name }}</a> -->
<p class="file_name">{{ item.name }}</p>
<button type="button" class="btn_del" @click="popupHandleRemove(index)">X</button>
</div>
</div>
</td>
</tr>
<tr>
<th style="width: 10%">
이미지셋 <br />
<button type="button" @click="setImg">이미지추가</button>
<button type="button" @click="testImg = ''">이미지클리어</button>
</th>
<td class="sender" colspan="5">
<p v-html="testImg"></p>
</td>
</tr>
</tbody>
</table>
</form>
<div class="popup-btn2">
<button class="btn-pcolor" @click="regisConfirm()">등록</button>
<button class="btn-default" @click="ModalClose()">취소</button>
</div>
</div>
<!-- <common-modal ref="commonModal"></common-modal> -->
<validation-confirm-popup ref="ValidationConfirmPopup"></validation-confirm-popup>
</div>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor';
import api from '@/service/api';
import homeMgtApi from '../service/homeMgtApi';
import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
import { utils_mixin, chkPattern2 } from '../service/mixins';
export default {
name: 'NoticePop',
mixins: [utils_mixin, chkPattern2],
data() {
return {
testImg: '',
props: {},
row: {},
rsnType: [],
tpType: [],
// 공지사항
title: '',
ntSbst: '', //
emgYn: 'N',
useYn: 'Y',
ctgCd: 'null',
updateFileList: [], // 업로드한 이미지 파일
ctgCdOption: [
{ code: 'null', codeNm: '분류코드를 선택하세요' },
{ code: '01', codeNm: '서비스' },
{ code: '02', codeNm: '개발/작업' },
{ code: '03', codeNm: '정책/약관' },
{ code: '04', codeNm: '오류/장애' },
{ code: '05', codeNm: '이벤트' },
],
// 공지사항
LINE_FEED: 10, // '\n',
maxByte: 2000,
// params: {
// 'blckSndrno' : ''
// ,'ctgCd' : '01'
// ,'blckRsnCd' : '02'
// ,'meno' : ''
// }
};
},
create() {
//this.setCodeDate();
this.formReset();
},
mounted() {
//this.ctgCd = '01'
},
components: {
VueEditor,
ValidationConfirmPopup,
},
methods: {
setImg() {
///%7Cefs%7Chome%7CsendMessage%7C2022%7C09%7C20%7C10%7C2022092010000168664_1.jpg
this.testImg =
"<img src='/api/v1/bo/homeMgt/preview/%7Cefs%7Chome%7CsendMessage%7C2022%7C09%7C20%7C10%7C2022092010000168664_1.jpg' />";
},
handleImageAdded(file, Editor, cursorLocation, resetUploader) {
var fd = new FormData();
fd.append('files', file);
homeMgtApi
.getImageUrl(fd)
.then((response) => {
const url = '..' + response.data.data.replaceAll('\\', '/'); // Get url from response
console.log(url);
Editor.insertEmbed(cursorLocation, 'image', url);
resetUploader();
})
.catch((err) => {
console.log(err);
});
},
//모달 띄우기
ModalOpen() {
var dimmed = document.getElementsByClassName('modal-insertNotice');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'block';
}
this.setCodeDate();
},
// 모달 끄기
ModalClose() {
this.formReset();
var dimmed = document.getElementsByClassName('modal-insertNotice');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'none';
}
},
// 저장 후 부모창 호출
toComplete() {
this.$parent.$refs.table.reloadData();
this.ModalClose();
},
setCodeDate() {
// 발송타입
api.commCode({ grpCd: 'SNDBLCK_TP_CD' }).then((response) => {
this.tpType = response.data.data.list;
});
api.commCode({ grpCd: 'SNDBLCK_RSN_CD' }).then((response) => {
this.rsnType = response.data.data.list;
});
},
doValidate() {
if (this.isNull(this.ctgCd) || this.ctgCd === 'null') {
this.row.title = '공지사항 등록';
this.row.msg1 = '분류코드를 선택해 주세요.';
this.row.focusTaget = '_ctgCd';
this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
return false;
}
if (this.isNull(this.title)) {
this.row.title = '공지사항 등록';
this.row.msg1 = '제목을 입력해 주세요.';
this.row.focusTaget = '_title';
this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
return false;
}
if (this.isNull(this.ntSbst)) {
this.row.title = '공지사항 등록';
this.row.msg1 = '내용을 입력해 주세요.';
this.row.focusTaget = '_ntSbst';
this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
return false;
}
/* const hp = this.blckSndrno;
if (!this.isNull(hp) && !this.isSendnum(hp)) {
this.row.title = '공지사항';
this.row.msg1 = '발신번호 형식이 잘못되었습니다. 확인 해주세요.';
this.$parent.alertInsert(this.row);
this.$refs._blckSndrno.focus();
return false;
} */
this.row.ctgCd = this.ctgCd;
return true;
},
formReset() {
Object.assign(this.$data, this.$options.data());
},
regisConfirm() {
if (this.doValidate()) {
this.$refs.ValidationConfirmPopup.confirmInsertOpen();
}
},
// 바이트길이 구하기
getByteLength: function (decimal) {
return decimal >> 7 || this.LINE_FEED === decimal ? 2 : 1;
},
getByte: function (str) {
return str
.split('')
.map((s) => s.charCodeAt(0))
.reduce((prev, unicodeDecimalValue) => prev + this.getByteLength(unicodeDecimalValue), 0);
},
getLimitedByteText: function (inputText, maxByte) {
const characters = inputText.split('');
let validText = '';
let totalByte = 0;
for (let i = 0; i < characters.length; i += 1) {
const character = characters[i];
const decimal = character.charCodeAt(0);
const byte = this.getByteLength(decimal); // 글자 한 개가 몇 바이트 길이인지 구해주기
// 현재까지의 바이트 길이와 더해 최대 바이트 길이를 넘지 않으면
if (totalByte + byte <= maxByte) {
totalByte += byte; // 바이트 길이 값을 더해 현재까지의 총 바이트 길이 값을 구함
validText += character; // 글자를 더해 현재까지의 총 문자열 값을 구함
} else {
// 최대 바이트 길이를 넘으면
break; // for 루프 종료
}
}
return validText;
},
memoLimitByte() {
this.meno = this.getLimitedByteText(this.meno, this.maxByte);
}, //END 바이트길이 구하기
insertNotice() {
const fd = new FormData();
for (let i = 0; i < this.updateFileList.length; i++) {
fd.append('files', this.updateFileList[i]);
}
const params = {
title: this.title,
ntSbst: this.ntSbst,
emgYn: this.emgYn,
useYn: this.useYn,
ctgCd: this.ctgCd,
regr: this.$store.getters['login/userNm'],
regId: this.$store.getters['login/userId'],
chgId: this.$store.getters['login/userId'],
};
fd.append('key', new Blob([JSON.stringify(params)], { type: 'application/json' }));
for (var pair of fd.entries()) {
console.log(pair[0] + ' : ' + pair[1]);
}
homeMgtApi.insertNotice(fd).then((response) => {
if (response.data.retCode == '0000') {
this.row.title = '공지사항 등록';
this.row.msg1 = '등록이 완료되었습니다.';
this.row.type = 'complete';
//this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
this.toComplete();
} else {
this.row.title = '공지사항 등록 실패';
this.row.msg1 = response.retMsg;
this.row.type = '';
this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
}
});
},
checkFocus() {
if (this.row.focusTaget === '_title') {
this.$refs._title.focus();
} else if (this.row.focusTaget === '_ntSbst') {
//this.$refs._ntSbst.focus();
} else if (this.row.focusTaget === '_ctgCd') {
this.$refs._ctgCd.focus();
}
},
/////////////////////////////////// 파일 첨부 ////////////////////////////////////////
onFileChange(event) {
const files = event.target.files || event.dataTransfer.files;
if (!files.length) return;
/* if (files.length > 3) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>최대 3장 첨부할 수 있습니다.</li>',
'info'
);
this.imageAddTitle = '이미지는 최대 3장까지 첨부할 수 있습니다.';
//confirm.fnAlert("알림", "첨부파일은 최대 3개까지 가능합니다.", "alert");
return;
} else if (this.updateFileList.length + files.length > 3) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>최대 3장 첨부할 수 있습니다.</li>',
'info'
);
this.imageAddTitle = '이미지는 최대 3장까지 첨부할 수 있습니다.';
// confirm.fnAlert("알림", "첨부파일은 최대 3개까지 가능합니다.", "alert");
return;
} */
this.addFiles(files);
},
async addFiles(files) {
for (let i = 0; i < files.length; i++) {
const src = await this.readFiles(files[i]);
files[i].src = src;
files[i].status = 'update';
files[i].index = this.updateFileList.length;
this.updateFileList.push(files[i]);
/* if (!(files[i].name.indexOf('jpg') > -1 || files[i].name.indexOf('jpeg') > -1)) {
confirm.fnAlert('', '<li>jpg파일 형식만 첨부할 수 있습니다.</li>', 'info');
this.imageAddTitle = 'jpg파일 형식만 첨부할 수 있습니다.';
continue;
} else if (files[i].size > 300000) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>전체 크기 합계가 300KB 이하여야 합니다.</li>',
'info'
);
this.imageAddTitle = '전체 크기 합계가 300KB 이하여야 합니다.';
//confirm.fnAlert("이미지 사이즈 초과", "300KB이하 이미지만 등록 가능합니다.", "alert");
continue;
} else if (files[i].size + this.totalFileSize > 300000) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>전체 크기 합계가 300KB 이하여야 합니다.</li>',
'info'
);
this.imageAddTitle = '전체 크기 합계가 300KB 이하여야 합니다.';
//confirm.fnAlert("이미지 사이즈 초과", "전체 합계 300KB이하 이미지만 등록 가능합니다.", "alert");
continue;
} else if (this.getImageSize(src) === false) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>1,500(가로)x1,440(세로)px 이하 크기만 첨부할 수 있습니다.</li>',
'info'
);
this.imageAddTitle = '1,500(가로)x1,440(세로)px 이하 크기만 첨부할 수 있습니다.';
//confirm.fnAlert("이미지 크기 초과", "1500 * 1440 이하 이미지만 등록 가능합니다.", "alert");
continue;
} else {
files[i].status = 'update';
files[i].index = this.updateFileList.length;
this.updateFileList.push(files[i]);
confirm.fnAlert('', '이미지가 정상적으로 추가 되었습니다.', 'alert');
this.imageAddTitle = '';
} */
}
this.$refs.imageUploader.value = ''; // 이미지 중복 가능하도록 input 초기화
},
// FileReader를 통해 파일을 읽어 thumbnail 영역의 src 값으로 셋팅
async readFiles(files) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = async (e) => {
resolve(e.target.result);
};
reader.readAsDataURL(files);
});
},
getImageSize(src) {
const img = new Image();
let _width = 0;
let _height = 0;
img.src = src;
img.onload = function () {
_width = img.width;
_height = img.height;
if (_width >= 1500 || _height >= 1440) {
return false;
} else {
return true;
}
};
},
popupHandleRemove(index) {
this.updateFileList.splice(index, 1);
},
},
};
</script>
<style scoped>
.popup-btn-wrap {
width: 500px;
margin: auto;
padding: 100px 0;
}
.popup-btn-wrap button {
width: 100%;
margin-bottom: 10px;
height: 50px;
border-radius: 5px;
box-shadow: none;
border: 1px solid #000;
}
.popup-btn-wrap button:hover {
background: #000;
color: #fff;
}
.btn.plus {
font-family: SpoqaHanSansNeo;
font-weight: 400;
font-size: 16px;
color: #fff;
background-color: #35354f;
border-radius: 4px;
text-align: center;
min-width: 89px;
height: 36px;
padding: 10px 20px;
letter-spacing: -0.025em;
border: none;
position: relative;
line-height: 1;
display: inline-block;
box-sizing: border-box;
transition: 0.3s;
}
.btn input {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
z-index: 1;
}
.file_name {
display: inline-flex;
}
.btn_del {
background: #e4e4e4;
width: 15px;
height: 15px;
border-radius: 50%;
border: none;
font-size: 10px;
margin: 0 0 0 5px;
}
</style>

574
frontend/src/modules/homeMgt/components/NoticeUpdatePop.vue Normal file
View File

@@ -0,0 +1,574 @@
<template>
<!-- <div class="wrap bg-wrap"> -->
<div>
<div class="dimmed modal52" @click="ModalClose()"></div>
<div class="popup-wrap modal52">
<!-- 공지사항 수정 -->
<div class="popup modal52 popup_form" style="width: 70vw">
<div class="pop-head">
<h3 class="pop-tit">공지사항 수정</h3>
</div>
<form autocomplete="off">
<table>
<colgroup>
<col width="10%" />
<col width="40%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<tbody>
<tr>
<th style="width: 10%">분류코드</th>
<td>
<div class="select_box">
<select name="" id="right" v-model="ctgCd" style="min-width: 500px" ref="_ctgCd">
<option v-for="(option, i) in ctgCdOption" :value="option.code" v-bind:key="i">
{{ option.codeNm }}
</option>
</select>
</div>
</td>
<th style="width: 10%">긴급여부</th>
<td>
<div class="select_box">
<select name="" id="right" v-model="emgYn" style="min-width: 150px">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</div>
</td>
<th style="width: 10%">사용여부</th>
<td>
<div class="select_box">
<select name="" id="right" v-model="useYn" style="min-width: 150px">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</div>
</td>
</tr>
<tr>
<th style="width: 10%">제목</th>
<td colspan="5">
<input type="text" placeholder="제목을 입력하세요" v-model="title" ref="_title" />
</td>
</tr>
<tr>
<th style="width: 10%">내용</th>
<td class="sender" colspan="5">
<vue-editor
id="editor"
useCustomImageHandler
@imageAdded="handleImageAdded"
v-model="ntSbst"
ref="_ntSbst"
>
</vue-editor>
</td>
</tr>
<tr>
<th style="width: 10%">첨부파일</th>
<td class="sender" colspan="5">
<p class="file" style="width: 100%; margin-bottom: 15px">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
<div class="btn plus">
파일 추가
<input
type="file"
accept=".jpg,.png,.pdf,.tiff"
multiple="multiple"
ref="imageUploader"
@change="onFileChange"
class="form-control-file"
id="my-file"
/>
</div>
<div class="img_list_wrap" v-if="updateFileList.length > 0" style="margin-top: 15px">
<div
class="img_list"
v-for="(item, index) in updateFileList"
:key="index"
style="margin-bottom: 5px"
>
<a
href="javascript:void(0);"
v-if="item.filePath"
@click="download(item.filePath, item.fileName, item.name)"
>{{ item.name }} (다운로드가능)</a
>
<p class="file_name" v-else>
{{ index + 1 }}. {{ item.name }} {{ item.fileNo ? `(${item.fileNo})` : '' }}
</p>
<button type="button" class="btn_del" @click="popupHandleRemove(index, item.fileNo)">X</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
<div class="popup-btn2">
<button class="btn-pcolor" @click="updateConfirm()">수정</button>
<button class="btn-default" @click="ModalClose()">취소</button>
</div>
</div>
<!-- <common-modal ref="commonModal"></common-modal> -->
<validation-confirm-popup ref="ValidationConfirmPopup"></validation-confirm-popup>
</div>
</div>
</template>
<script>
import api from '@/service/api';
import homeMgtApi from '../service/homeMgtApi';
import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
import { VueEditor } from 'vue2-editor';
import { utils_mixin, chkPattern2 } from '../service/mixins';
export default {
name: 'NoticeUpdatePop',
mixins: [utils_mixin, chkPattern2],
data() {
return {
props: {},
row: {},
rsnType: [],
tpType: [],
// 공지사항
ntNo: '',
title: '',
ntSbst: '',
emgYn: 'N',
useYn: 'Y',
ctgCd: 'null',
fileNm: '',
filePath: '',
fileTitle: '',
fileNo: '',
updateFileList: [], // 업로드한 이미지 파일
delFileList: [],
ctgCdOption: [
{ code: 'null', codeNm: '분류코드를 선택하세요' },
{ code: '01', codeNm: '서비스' },
{ code: '02', codeNm: '개발/작업' },
{ code: '03', codeNm: '정책/약관' },
{ code: '04', codeNm: '오류/장애' },
{ code: '05', codeNm: '이벤트' },
],
// 공지사항
LINE_FEED: 10, // '\n',
maxByte: 2000,
// params: {
// 'blckSndrno' : ''
// ,'ctgCd' : '01'
// ,'blckRsnCd' : '02'
// ,'meno' : ''
// }
};
},
create() {
//this.setCodeDate();
this.formReset();
},
mounted() {
//this.ctgCd = '01'
},
components: {
VueEditor,
ValidationConfirmPopup,
},
methods: {
handleImageAdded(file, Editor, cursorLocation, resetUploader) {
var fd = new FormData();
fd.append('files', file);
homeMgtApi
.getImageUrl(fd)
.then((response) => {
const url = '..' + response.data.data.replaceAll('\\', '/'); // Get url from response
console.log(url);
Editor.insertEmbed(cursorLocation, 'image', url);
resetUploader();
})
.catch((err) => {
console.log(err);
});
},
//모달 띄우기
ModalOpen(props) {
var dimmed = document.getElementsByClassName('modal52');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'block';
}
this.setCodeDate();
if (props) {
this.ntNo = props.ntNo;
this.title = props.title;
this.ntSbst = props.ntSbst;
this.emgYn = props.emgYn;
this.useYn = props.useYn;
this.ctgCd = props.ctgCd;
this.fileNm = props.fileNm.split(',');
this.filePath = props.filePath.split(',');
this.fileTitle = props.fileTitle.split(',');
this.fileNo = props.fileNo.split(',');
this.fileCount = props.fileCount;
}
for (let i = 0; i < this.fileCount; i++) {
this.updateFileList.push({
src: '' + encodeURIComponent(this.filePath[i].replaceAll('\\', '/')) + '/' + this.fileNm[i],
filePath: this.filePath[i],
fileNo: this.fileNo[i],
fileName: this.fileNm[i],
name: this.fileTitle[i],
});
}
},
// 모달 끄기
ModalClose() {
this.formReset();
var dimmed = document.getElementsByClassName('modal52');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'none';
}
},
// 저장 후 부모창 호출
toComplete() {
this.$parent.$refs.table.reloadData();
this.ModalClose();
},
setCodeDate() {
// 발송타입
api.commCode({ grpCd: 'SNDBLCK_TP_CD' }).then((response) => {
this.tpType = response.data.data.list;
});
api.commCode({ grpCd: 'SNDBLCK_RSN_CD' }).then((response) => {
this.rsnType = response.data.data.list;
});
},
doValidate() {
if (this.isNull(this.ctgCd) || this.ctgCd === 'null') {
this.row.title = '공지사항 등록';
this.row.msg1 = '분류코드를 선택해 주세요.';
this.row.focusTaget = '_ctgCd';
this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
return false;
}
if (this.isNull(this.title)) {
this.row.title = '공지사항 등록';
this.row.msg1 = '제목을 입력해 주세요.';
this.row.focusTaget = '_title';
this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
return false;
}
if (this.isNull(this.ntSbst)) {
this.row.title = '공지사항 등록';
this.row.msg1 = '내용을 입력해 주세요.';
this.row.focusTaget = '_ntSbst';
this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
return false;
}
/* const hp = this.blckSndrno;
if (!this.isNull(hp) && !this.isSendnum(hp)) {
this.row.title = '공지사항';
this.row.msg1 = '발신번호 형식이 잘못되었습니다. 확인 해주세요.';
this.$parent.alertInsert(this.row);
this.$refs._blckSndrno.focus();
return false;
} */
this.row.ctgCd = this.ctgCd;
return true;
},
formReset() {
Object.assign(this.$data, this.$options.data());
},
updateConfirm() {
if (this.doValidate()) {
this.$refs.ValidationConfirmPopup.confirmUpdateOpen();
}
},
// 바이트길이 구하기
getByteLength: function (decimal) {
return decimal >> 7 || this.LINE_FEED === decimal ? 2 : 1;
},
getByte: function (str) {
return str
.split('')
.map((s) => s.charCodeAt(0))
.reduce((prev, unicodeDecimalValue) => prev + this.getByteLength(unicodeDecimalValue), 0);
},
getLimitedByteText: function (inputText, maxByte) {
const characters = inputText.split('');
let validText = '';
let totalByte = 0;
for (let i = 0; i < characters.length; i += 1) {
const character = characters[i];
const decimal = character.charCodeAt(0);
const byte = this.getByteLength(decimal); // 글자 한 개가 몇 바이트 길이인지 구해주기
// 현재까지의 바이트 길이와 더해 최대 바이트 길이를 넘지 않으면
if (totalByte + byte <= maxByte) {
totalByte += byte; // 바이트 길이 값을 더해 현재까지의 총 바이트 길이 값을 구함
validText += character; // 글자를 더해 현재까지의 총 문자열 값을 구함
} else {
// 최대 바이트 길이를 넘으면
break; // for 루프 종료
}
}
return validText;
},
memoLimitByte() {
this.meno = this.getLimitedByteText(this.meno, this.maxByte);
}, //END 바이트길이 구하기
updateNotice() {
const fd = new FormData();
let legacyFiles = [];
for (let i = 0; i < this.updateFileList.length; i++) {
if (this.updateFileList[i].fileName) {
legacyFiles.push(this.updateFileList[i].fileName);
} else {
fd.append('files', this.updateFileList[i]);
}
}
const params = {
ntNo: this.ntNo,
title: this.title,
ntSbst: this.ntSbst,
emgYn: this.emgYn,
useYn: this.useYn,
ctgCd: this.ctgCd,
chgId: this.$store.getters['login/userId'],
legacyFiles: legacyFiles.join(),
delFileNo: this.delFileList.join(),
};
console.log(params);
console.log(params.delFileNo);
console.log(typeof params.delFileNo);
fd.append('key', new Blob([JSON.stringify(params)], { type: 'application/json' }));
for (var pair of fd.entries()) {
console.log(pair[0] + ' : ' + pair[1]);
}
homeMgtApi.updateNotice(fd).then((response) => {
if (response.data.retCode == '0000') {
this.row.title = '공지사항 수정';
this.row.msg1 = '수정이 완료되었습니다.';
this.row.type = 'update';
//this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
this.toComplete();
} else {
this.row.title = '공지사항 수정 실패';
this.row.msg1 = response.retMsg;
this.row.type = '';
this.$refs.ValidationConfirmPopup.alertModalOpen(this.row);
}
});
},
checkFocus() {
if (this.row.focusTaget === '_title') {
this.$refs._title.focus();
} else if (this.row.focusTaget === '_ntSbst') {
//this.$refs._ntSbst.focus();
} else if (this.row.focusTaget === '_ctgCd') {
this.$refs._ctgCd.focus();
}
},
/////////////////////////////////// 파일 첨부 ////////////////////////////////////////
onFileChange(event) {
const files = event.target.files || event.dataTransfer.files;
if (!files.length) return;
/* if (files.length > 3) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>최대 3장 첨부할 수 있습니다.</li>',
'info'
);
this.imageAddTitle = '이미지는 최대 3장까지 첨부할 수 있습니다.';
//confirm.fnAlert("알림", "첨부파일은 최대 3개까지 가능합니다.", "alert");
return;
} else if (this.updateFileList.length + files.length > 3) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>최대 3장 첨부할 수 있습니다.</li>',
'info'
);
this.imageAddTitle = '이미지는 최대 3장까지 첨부할 수 있습니다.';
// confirm.fnAlert("알림", "첨부파일은 최대 3개까지 가능합니다.", "alert");
return;
} */
this.addFiles(files);
},
async addFiles(files) {
for (let i = 0; i < files.length; i++) {
const src = await this.readFiles(files[i]);
files[i].src = src;
this.updateFileList.push(files[i]);
/* if (!(files[i].name.indexOf('jpg') > -1 || files[i].name.indexOf('jpeg') > -1)) {
confirm.fnAlert('', '<li>jpg파일 형식만 첨부할 수 있습니다.</li>', 'info');
this.imageAddTitle = 'jpg파일 형식만 첨부할 수 있습니다.';
continue;
} else if (files[i].size > 300000) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>전체 크기 합계가 300KB 이하여야 합니다.</li>',
'info'
);
this.imageAddTitle = '전체 크기 합계가 300KB 이하여야 합니다.';
//confirm.fnAlert("이미지 사이즈 초과", "300KB이하 이미지만 등록 가능합니다.", "alert");
continue;
} else if (files[i].size + this.totalFileSize > 300000) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>전체 크기 합계가 300KB 이하여야 합니다.</li>',
'info'
);
this.imageAddTitle = '전체 크기 합계가 300KB 이하여야 합니다.';
//confirm.fnAlert("이미지 사이즈 초과", "전체 합계 300KB이하 이미지만 등록 가능합니다.", "alert");
continue;
} else if (this.getImageSize(src) === false) {
confirm.fnAlert(
// "이미지 첨부 기준 안내",
'',
'<li>1,500(가로)x1,440(세로)px 이하 크기만 첨부할 수 있습니다.</li>',
'info'
);
this.imageAddTitle = '1,500(가로)x1,440(세로)px 이하 크기만 첨부할 수 있습니다.';
//confirm.fnAlert("이미지 크기 초과", "1500 * 1440 이하 이미지만 등록 가능합니다.", "alert");
continue;
} else {
files[i].status = 'update';
files[i].index = this.updateFileList.length;
this.updateFileList.push(files[i]);
confirm.fnAlert('', '이미지가 정상적으로 추가 되었습니다.', 'alert');
this.imageAddTitle = '';
} */
}
console.log(this.updateFileList);
this.$refs.imageUploader.value = ''; // 이미지 중복 가능하도록 input 초기화
},
// FileReader를 통해 파일을 읽어 thumbnail 영역의 src 값으로 셋팅
async readFiles(files) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = async (e) => {
resolve(e.target.result);
};
reader.readAsDataURL(files);
});
},
getImageSize(src) {
const img = new Image();
let _width = 0;
let _height = 0;
img.src = src;
img.onload = function () {
_width = img.width;
_height = img.height;
if (_width >= 1500 || _height >= 1440) {
return false;
} else {
return true;
}
};
},
popupHandleRemove(index, fileNo) {
this.delFileList.push(fileNo);
this.updateFileList.splice(index, 1);
},
download(filePath, fileName, fileTitle) {
this.row = {};
this.row.fileTitle = fileTitle;
this.row.filePath = filePath;
this.row.fileNm = fileName;
console.log(this.row);
homeMgtApi.fileDownload(this.row);
},
},
};
</script>
<style scoped>
.popup-btn-wrap {
width: 500px;
margin: auto;
padding: 100px 0;
}
.popup-btn-wrap button {
width: 100%;
margin-bottom: 10px;
height: 50px;
border-radius: 5px;
box-shadow: none;
border: 1px solid #000;
}
.popup-btn-wrap button:hover {
background: #000;
color: #fff;
}
.btn.plus {
font-family: SpoqaHanSansNeo;
font-weight: 400;
font-size: 16px;
color: #fff;
background-color: #35354f;
border-radius: 4px;
text-align: center;
min-width: 89px;
height: 36px;
padding: 10px 20px;
letter-spacing: -0.025em;
border: none;
position: relative;
line-height: 1;
display: inline-block;
box-sizing: border-box;
transition: 0.3s;
}
.btn input {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
z-index: 1;
}
.file_name {
display: inline-flex;
}
.btn_del {
background: #e4e4e4;
width: 15px;
height: 15px;
border-radius: 50%;
border: none;
font-size: 10px;
margin: 0 0 0 5px;
}
</style>

159
frontend/src/modules/homeMgt/components/ValidationConfirmPopup.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<div>
<div class="dimmed alertModal" @click="alertModalCancel()"></div>
<div class="popup-wrap alertModal">
<!-- 확인 -->
<div class="popup alertModal">
<div class="pop-head">
<h3 class="pop-tit">{{ title }}</h3>
</div>
<div class="pop-cont">
<p>{{ msg1 }}</p>
<p v-if="msg2 !== ''">{{ msg2 }}</p>
<p v-if="msg3 !== ''">{{ msg3 }}</p>
<p v-if="msg4 !== ''">{{ msg4 }}</p>
</div>
<div class="popup-btn1">
<button class="btn-pcolor" v-if="type" @click="alertModalClose(type)">확인</button>
<button class="btn-pcolor" v-else @click="alertModalClose()">확인</button>
</div>
</div>
</div>
<!-- 공지사항 등록-->
<div class="dimmed confirm-insert" @click="confirmInsertClose()"></div>
<div class="popup-wrap confirm-insert">
<div class="popup confirm-insert">
<div class="pop-head">
<h3 class="pop-tit">공지사항 등록</h3>
</div>
<div class="pop-cont">
<p>작성된 내용으로 등록 하시겠습니까?</p>
</div>
<div class="popup-btn2">
<button class="btn-pcolor" @click="confirmInsert()">확인</button>
<button class="btn-default" @click="confirmInsertClose()">취소</button>
</div>
</div>
</div>
<!-- 공지사항 수정-->
<div class="dimmed confirm-update" @click="confirmUpdateClose()"></div>
<div class="popup-wrap confirm-update">
<div class="popup confirm-update">
<div class="pop-head">
<h3 class="pop-tit">공지사항 수정</h3>
</div>
<div class="pop-cont">
<p>작성된 내용으로 수정 하시겠습니까?</p>
</div>
<div class="popup-btn2">
<button class="btn-pcolor" @click="confirmUpdate()">확인</button>
<button class="btn-default" @click="confirmUpdateClose()">취소</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'validationConfirmPopup',
data() {
return {
row: {},
title: '',
msg: '',
msg1: '',
msg2: '',
msg3: '',
msg4: '',
targetFocus: '',
type: '',
};
},
methods: {
alertModalOpen(props) {
this.title = props.title;
this.msg1 = props.msg1;
this.msg2 = props.msg2;
this.msg3 = props.msg3;
this.msg4 = props.msg4;
this.type = props.type;
var dimmed = document.getElementsByClassName('alertModal');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'block';
}
},
alertModalClose(type) {
if (type) {
this.$parent.formReset();
var dimmed0 = document.getElementsByClassName('alertModal');
for (var i = 0; i < dimmed0.length; i++) {
dimmed0[i].style.display = 'none';
}
var dimmed1 = document.getElementsByClassName('modal52');
for (var k = 0; k < dimmed1.length; k++) {
dimmed1[k].style.display = 'none';
}
} else {
var dimmed = document.getElementsByClassName('alertModal');
for (var j = 0; j < dimmed.length; j++) {
dimmed[j].style.display = 'none';
}
this.$parent.checkFocus();
}
},
//공지사항 등록 팝업
confirmInsertOpen() {
var dimmed = document.getElementsByClassName('confirm-insert');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'block';
}
},
//공지사항 등록
confirmInsert() {
var dimmed = document.getElementsByClassName('confirm-insert');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'none';
}
this.$parent.insertNotice();
},
//공지사항 등록 팝업 Close
confirmInsertClose() {
var dimmed = document.getElementsByClassName('confirm-insert');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'none';
}
},
//공지사항 수정 팝업
confirmUpdateOpen() {
var dimmed = document.getElementsByClassName('confirm-update');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'block';
}
},
//공지사항 수정
confirmUpdate() {
var dimmed = document.getElementsByClassName('confirm-update');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'none';
}
this.$parent.updateNotice();
},
//공지사항 수정 팝업 Close
confirmUpdateClose() {
var dimmed = document.getElementsByClassName('confirm-update');
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'none';
}
},
},
};
</script>

11
frontend/src/modules/homeMgt/router/index.js Normal file
View File

@@ -0,0 +1,11 @@
import Notice from '../views/notice';
export default [
{
path: '/homeMgt/notice',
component: Notice,
name: 'notice',
props: true,
meta: { public: false },
},
];

61
frontend/src/modules/homeMgt/service/homeMgtApi.js Normal file
View File

@@ -0,0 +1,61 @@
import httpClient from '@/common/http-client';
import axios from 'axios';
// 공지사항 등록
const insertNotice = (params) => {
return httpClient.post('/api/v1/bo/homeMgt/insertNotice', params, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
};
// 공지사항 수정
const updateNotice = (params) => {
return httpClient.post('/api/v1/bo/homeMgt/updateNotice', params, { withCredentials: false });
};
const getImageUrl = (params) => {
return httpClient.post('/api/v1/bo/homeMgt/getImageUrl', params, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
};
const fileDownload = (params) => {
axios({
method: 'POST',
url: '/api/v1/bo/homeMgt/filedownload',
responseType: 'blob',
headers: '',
data: params,
params: params,
})
.then((response) => {
const fileName = params.fileTitle;
const data = response.data;
if (!data) {
return;
}
const url = window.URL.createObjectURL(new Blob([data]));
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
})
.catch((response) => {
console.log(response);
});
};
export default {
insertNotice,
updateNotice,
fileDownload,
getImageUrl,
};

370
frontend/src/modules/homeMgt/service/mixins.js Normal file
View File

@@ -0,0 +1,370 @@
import lodash from "lodash";
const utils_mixin = {
methods: {
/** * 이메일 형식 체크 * * @param 데이터 */
emailCheck(email, rtnArrYn) {
if (this.isNull(rtnArrYn)) {
rtnArrYn = 'N';
}
// var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
if (regExp.test(email) == false) {
// 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
if (rtnArrYn == 'Y') {
return email;
}
return false;
} else {
var myArray = regExp.exec(email);
if (rtnArrYn == 'Y') {
return myArray;
}
return true;
}
},
/** * 전화번호 포맷으로 변환 * * @param 데이터 */
formatPhone(phoneNum, fmt, rtnArrYn) {
if (this.isNull(fmt)) {
fmt = '';
}
if (this.isNull(rtnArrYn)) {
fmt = 'N';
}
if (this.isPhone(phoneNum)) {
var rtnNum;
var regExp = /(02)([0-9]{3,4})([0-9]{4})$/;
var myArray;
if (regExp.test(phoneNum)) {
myArray = regExp.exec(phoneNum);
rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
if (rtnArrYn == 'Y') {
return myArray;
}
return rtnNum;
} else {
regExp = /(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
if (regExp.test(phoneNum)) {
myArray = regExp.exec(phoneNum);
rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
if (rtnArrYn == 'Y') {
return myArray;
}
return rtnNum;
} else {
return phoneNum;
}
}
} else {
return phoneNum;
}
},
/** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
formatMobile(phoneNum, fmt, rtnArrYn) {
if (this.isNull(fmt)) {
fmt = '';
}
if (this.isNull(rtnArrYn)) {
fmt = 'N';
}
if (this.isMobile(phoneNum)) {
var rtnNum;
var regExp = /(01[016789])([0-9]{3,4})([0-9]{4})$/;
var myArray;
if (regExp.test(phoneNum)) {
myArray = regExp.exec(phoneNum);
rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
if (rtnArrYn == 'Y') {
return myArray;
}
return rtnNum;
} else {
return phoneNum;
}
} else {
return phoneNum;
}
},
/** * 전화번호 형식 체크 * * @param 데이터 */
isPhone(phoneNum) {
var regExp = /(02)([0-9]{3,4})([0-9]{4})$/;
if (regExp.test(phoneNum)) {
return true;
} else {
regExp = /(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
if (regExp.test(phoneNum)) {
return true;
} else {
return false;
}
}
},
/** * 핸드폰번호 형식 체크 * * @param 데이터 */
isMobile(phoneNum) {
var regExp = /(01[016789])([0-9]{3,4})([0-9]{4})$/;
var myArray;
if (regExp.test(phoneNum)) {
myArray = regExp.exec(phoneNum);
return true;
} else {
return false;
}
},
isMobile2(phoneNum) {
var regExp = /(1[016789])([0-9]{3,4})([0-9]{4})$/;
var myArray;
if (regExp.test(phoneNum)) {
myArray = regExp.exec(phoneNum);
return true;
} else {
return false;
}
},
/** 발신번호 차단 */
isSendnum(phoneNum){
var regExp = /^(01[016789])([0-9]{3,4})([0-9]{4})|((080-[0-9]{3,4}|15(44|66|77|88))[0-9]{4})|(0(2|3[1-3]|4[1-4]|5[1-5]|6[1-4]))(\d{3,4})(\d{4})$/;
var myArray;
if(regExp.test(phoneNum)){
myArray = regExp.exec(phoneNum);
return true;
}else{
return false;
}
},
isNull(obj) {
if (lodash.isNil(obj) || lodash.trim(obj) == '') {
return true;
}
return false;
},
getParent(name) {
let p = this.$parent;
while (typeof p !== 'undefined') {
if (p.$options.name == name) {
return p;
} else {
p = p.$parent;
}
}
return false;
},
getJsonObj(str) {
return JSON.parse(JSON.stringify(str));
},
}
};
var chkPattern2 = {
data: function () {
return {}
},
methods: {
selSesStorage(keyLike) {
if (this.isNull(keyLike)) {
return null;
}
if (sessionStorage.length > 0) {
let keyList = [];
for (let i = 0; i < sessionStorage.length; i++) {
const keyNm = sessionStorage.key(i);
if (keyNm.indexOf(keyLike) > -1) {
keyList.push({name: keyNm, value: sessionStorage.getItem(keyNm)});
}
}
if (keyList.length > 0) {
return keyList;
}
return null;
}
return null;
},
delSesStorage(keyList) {
if (this.isNull(keyList)) {
return null;
}
if (keyList.length > 0) {
keyList.map((o) => (sessionStorage.removeItem(o.name)));
return true;
}
},
setGridMouseDownActive() {
const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
if (window.getEventListeners(ele).mousedown) {
ele.removeEventListener('mousedown', window.getEventListeners(ele).mousedown[0].listener);
}
},
restrictChars: function ($event, regExp, hanYn) {
if (this.isNull(hanYn)) {
hanYn = 'N';
}
if (hanYn === 'N' && $event.type === 'keydown') {
if ($event.keyCode === 229) {
$event.preventDefault();
return false;
}
}
if ($event.type === 'keypress') {
//한글 처리 불가
if (regExp.test(String.fromCharCode($event.charCode))) {
return true;
} else {
$event.preventDefault();
return false;
}
}
if (hanYn === 'N' && ($event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')) {
$event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g, '');
$event.preventDefault();
return false;
}
return true;
},
setLenth: function (e, len) {
this.cut(e, len);
},
onlyCustom: function (e, strRegExp, hanYn) {
var regExp_g = new RegExp(strRegExp, 'g');
this.cut(e);
return this.restrictChars(e, regExp_g, hanYn);
},
onlyCommon: function (strRegExp, e, len, isEventCall, hanYn) {
var regExp_g = new RegExp(strRegExp, 'g');
if (isEventCall === 'N') {
if (!this.cut(e, len, isEventCall)) {
return false;
}
if (!regExp_g.test(e.value)) {
return false;
}
return true;
}
this.cut(e, len);
return this.restrictChars(e, regExp_g, hanYn);
},
onlyNum: function (e, len, isEventCall) {
var strRegExp = '^[0-9]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
onlyEng: function (e, len, isEventCall) {
var strRegExp = '^[A-Za-z]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
onlyLowerEng: function (e, len, isEventCall) {
var strRegExp = '^[a-z]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
onlyUpperEng: function (e, len, isEventCall) {
var strRegExp = '^[A-Z]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
onlyEmail: function (e, len, isEventCall) {
var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
onlyName: function (e, len, isEventCall) {
var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
},
onlyTitle: function (e, len, isEventCall) {
var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
},
onlyText: function (e, len, isEventCall) {
var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
},
onlyPassword: function (e, len, isEventCall) {
var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
onlyId: function (e, len, isEventCall) {
var strRegExp = '^[A-Za-z0-9_\.\-]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
onlyIp: function (e, len, isEventCall) {
var strRegExp = '^[0-9,.*]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
onlyRoleNm_Space: function (e, len, isEventCall) {
var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
},
onlyRoleId_UnderBar: function (e, len, isEventCall) {
var strRegExp = '^[a-zA-Z0-9_]*$';
return this.onlyCommon(strRegExp, e, len, isEventCall);
},
cut: function (ele, len, isValidChk) {
let e = ele;
if (typeof ele.target != "undefined") {
e = ele.target;
}
let max = this.isNull(len) ? e.attributes.maxlength.value : len;
let str = e.value;
if (this.bytes(str) > max) {
if (this.isNull(isValidChk)) {
e.value = this.cutBytes(str, max);
}
return false;
}
return true;
},
cutBytes: function (str, len) {
while (1 === 1) {
if (this.bytes(str) <= len) {
return str;
}
str = str.slice(0, -1);
}
},
bytes: function (str) {
var length = ((s, b, i, c) => {
// for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1); // 한글 3바이트
// for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1); //한글 2바이트
b = 0, i = 0;
while (1 === 1) {
c = s.charCodeAt(i++);
if (isNaN(c)) {
break;
}
b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
}
return b
})(str);
return length;
},
checkPhone: function (str) {
str = str.replace(/[-\s]+/g, '');
if (str.charAt(0) != "0") {
str = "0" + str;
}
if (str.length < 10 || str.length > 12) {
return "";
}
if (isNaN(str)) {
return "";
}
if (str.substr(0, 2) != "01" && str.substr(0, 3) != "070" && str.substr(0, 4) != "0505" && str.substr(0, 4) != "0503") {
return "";
}
return str;
},
}
};
export {utils_mixin, chkPattern2};

219
frontend/src/modules/homeMgt/views/notice.vue Normal file
View File

@@ -0,0 +1,219 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">홈페이지 관리</h3>
<p class="breadcrumb">홈페이지 관리 &gt; 공지사항</p>
</div>
<div class="search_wrap">
<div class="select_box">
<label for="right" class="label">분류코드</label>
<select name="" id="right" v-model="searchType1" @change="search">
<option value="">전체</option>
<option value="01">서비스</option>
<option value="02">개발/작업</option>
<option value="03">정책/약관</option>
<option value="04">오류/장애</option>
<option value="05">이벤트</option>
</select>
</div>
<div class="input_box id">
<label for="id1" class="label">제목</label>
<input
class="search-box"
type="text"
id="id1"
placeholder="제목 입력"
v-model="searchText1"
@keyup.enter="search"
/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
<div class="info">
<div class="count">
총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span
>건
<div class="select_box NumberSe">
<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
<div class="button_group">
<button type="button" class="button blue admin add" @click="ModalOpen()">공지사항 등록</button>
</div>
</div>
<div class="table">
<custom-grid
ref="table"
:totalItems="'totalItems'"
:url="grid.url"
:pagePerRows="grid.pagePerRows"
:initialRequest="grid.initialRequest"
:pagination="grid.pagination"
:isCheckbox="grid.isCheckbox"
:columns="grid.columns"
:noDataStr="grid.noDataStr"
:addCls="grid.addCls"
:header="grid.headder"
></custom-grid>
</div>
</div>
<NoticePop ref="NoticePop" />
<NoticeUpdatePop ref="NoticeUpdatePop" />
</div>
</template>
<script>
import httpClient from '../../../common/http-client';
import customGrid from '@/components/CustomGrid';
import NoticePop from '../components/NoticePop.vue';
import NoticeUpdatePop from '../components/NoticeUpdatePop.vue';
class CustomATagRenderer {
constructor(props) {
this.props = props;
const el = document.createElement('a');
el.href = 'javascript:void(0);';
el.className = 'btn_text';
el.innerText = String(props.colValue);
this.el = el;
}
getElement() {
return this.el;
}
addEvent(selEl) {
selEl.addEventListener('click', () => {
const { callback } = this.props['cgrido' + this.props.colName].options;
callback(this.props);
});
}
}
export default {
name: 'notice',
components: { customGrid, NoticePop, NoticeUpdatePop },
data() {
return {
totalItems: 0,
perPageCnt: 50,
searchType1: '',
searchText1: '',
options: [
{ text: '20', value: 20 },
{ text: '50', value: 50 },
{ text: '100', value: 100 },
],
grid: {
url: '/api/v1/bo/homeMgt/noticeList',
pagePerRows: 20,
pagination: true,
isCheckbox: true, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: true,
addCls: 'box_OFvis',
columns: [
{ name: 'no', header: 'No', align: 'center', width: '5%' },
{ name: 'ntNo', header: 'ntNo', align: 'center', width: '5%' },
{ name: 'ctgCdNm', header: '분류코드명', align: 'center', width: '10%' },
{ name: 'emgYn', header: '긴급여부(Y/N)', align: 'center', width: '10%' },
{
name: 'title',
header: '제목',
align: 'left',
width: '50%',
renderer: {
type: CustomATagRenderer,
options: {
callback: this.noticeDetail,
},
},
},
{ name: 'fileYn', header: '파일유무', align: 'center', width: '5%' },
{ name: 'useYn', header: '사용여부', align: 'center', width: '5%' },
{ name: 'regr', header: '등록자', align: 'center', width: '10%' },
{ name: 'regDt', header: '등록일자', align: 'center', width: '10%' },
],
noDataStr: '검색 결과가 없습니다.',
params: {
searchType1: '',
searchType2: '',
searchText1: '',
searchText2: '',
},
excelHeader: [],
},
};
},
mounted() {
// this.fnSelectNoticeList();
//let page = 1;
// 페이지 정보 및 검색 조건
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
// store에 저장된 페이지 정보 및 검색 조건을 불러오기
let isKeep = false;
if (getCondition) {
this.grid.pagePerRows = getCondition.perPage;
this.grid.params = getCondition.params;
// page = getCondition.page;
isKeep = true;
}
this.search(isKeep);
},
beforeRouteLeave(to, from, next) {
const getP = this.$refs.table.getPagination();
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params,
});
// 라우트 하기전 실행
next();
},
methods: {
fnSelectNoticeList() {
const params = { page: 1, pagePerRows: 10 };
httpClient
.post('/api/v1/bo/homeMgt/noticeList', params, { headers: { 'Show-Layer': 'Yes' } })
.then((response) => {
console.log(response.data);
});
},
ModalOpen() {
this.$refs.NoticePop.ModalOpen();
},
noticeDetail(props) {
//console.log(props);
this.$refs.NoticeUpdatePop.ModalOpen(props);
},
search: function (isKeep) {
this.grid.params.searchType1 = this.searchType1;
this.grid.params.searchText1 = this.searchText1;
this.$refs.table.search(this.grid.params, isKeep);
this.sendStoreData();
},
sendStoreData: function () {
const getP = this.$refs.table.getPagination();
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params,
});
//const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
},
changePerPage: function () {
// 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt;
this.search(true);
},
},
};
</script>