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

팝업 공지 어드민 등록 화면 작업

Browse Source
This commit is contained in:
kubo8
2023-04-13 10:25:43 +09:00
parent 58ab820e43
commit 5b4273add6
9 changed files with 227 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
frontend/src/modules/homeMgt/components/NoticePop.vue
View File

@@ -33,7 +33,7 @@
<th style="width: 10%">긴급여부</th>
<td>
<div class="select_box">
<select name="" id="right" v-model="emgYn" style="min-width: 150px">
<select name="" id="right" v-model="emgYn" style="min-width: 150px" v-bind:disabled="ctgCd=='06'">
<option value="Y">긴급</option>
<option value="N">일반</option>
</select>
@@ -49,6 +49,35 @@
</div>
</td>
</tr>
<tr v-show="ctgCd=='06'">
<th style="width: 10%">노출기간</th>
<td colspan="5">
<div class="input_box cal">
<div class="term">
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
v-model="startDate"
@selected="selectedStartDate(0)"
@closed="closeDate('start')"
></vuejs-datepicker> </span
>~
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledEDate"
v-model="endDate"
@selected="selectedEndDate(0)"
@closed="closeDate('end')"
></vuejs-datepicker>
</span>
</div>
</div>
</td>
</tr>
<tr>
<th style="width: 10%">제목</th>
<td colspan="5">
@@ -113,25 +142,34 @@
</template>
<script>
import { VueEditor } from 'vue2-editor';
import api from '@/service/api';
import { utils_mixin, chkPattern2 } from '../service/mixins';
import moment from 'moment';
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],
components: {
VueEditor,
ValidationConfirmPopup,
vuejsDatepicker
},
data() {
return {
props: {},
row: {},
rsnType: [],
tpType: [],
// 공지사항
title: '',
ntSbst: '', //
emgYn: 'N',
useYn: 'Y',
ko: vdp_translation_ko.js,
startDate: new Date(),
endDate: new Date(),
disabledSDate : {},
disabledEDate : {},
ctgCd: 'null',
updateFileList: [], // 업로드한 이미지 파일
ctgCdOption: [
@@ -141,29 +179,16 @@ export default {
{ code: '03', codeNm: '정책/약관' },
{ code: '04', codeNm: '오류/장애' },
{ code: '05', codeNm: '이벤트' },
{ code: '06', 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) {
@@ -189,7 +214,8 @@ export default {
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'block';
}
this.setCodeDate();
this.formReset();
this.setPeriodDay(0);
},
// 모달 끄기
ModalClose() {
@@ -205,17 +231,6 @@ export default {
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 = '공지사항 등록';
@@ -239,14 +254,7 @@ export default {
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;
},
@@ -306,6 +314,8 @@ export default {
emgYn: this.emgYn,
useYn: this.useYn,
ctgCd: this.ctgCd,
ntStrtDt: moment(this.startDate).format('YYYYMMDD'),
ntEndDt: moment(this.endDate).format('YYYYMMDD'),
regr: this.$store.getters['login/userNm'],
regId: this.$store.getters['login/userId'],
chgId: this.$store.getters['login/userId'],
@@ -313,16 +323,11 @@ export default {
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 = '공지사항 등록 실패';
@@ -347,27 +352,6 @@ export default {
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) {
@@ -377,48 +361,6 @@ export default {
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 초기화
},
@@ -451,6 +393,40 @@ export default {
popupHandleRemove(index) {
this.updateFileList.splice(index, 1);
},
setPeriodDay(day) {
this.periodDay = day;
this.startDate = new Date();
this.endDate = moment(new Date()).add(7, 'days').toDate();
this.closeDate('start');
this.closeDate('end');
},
selectedStartDate(day) {
if (day != undefined && day != null) {
this.periodDay = day;
}
if (this.startDate > this.endDate) {
this.startDate = this.endDate;
}
},
selectedEndDate(day) {
if (day != undefined && day != null) {
this.periodDay = day;
}
},
closeDate(type) {
if (type != undefined && type != null) {
if (type == 'start') {
this.disabledSDate = { to: new Date(), from: this.endDate };
this.disabledEDate = { to: this.startDate};
} else if (type == 'end') {
this.disabledSDate = { to: new Date(), from: this.endDate };
this.disabledEDate = { to: this.startDate };
}
}
},
customFormatter: function (date) {
return moment(date).format('YYYY-MM-DD');
},
},
};
</script>

200
frontend/src/modules/homeMgt/components/NoticeUpdatePop.vue
View File

@@ -33,7 +33,7 @@
<th style="width: 10%">긴급여부</th>
<td>
<div class="select_box">
<select name="" id="right" v-model="emgYn" style="min-width: 150px">
<select name="" id="right" v-model="emgYn" style="min-width: 150px" v-bind:disabled="ctgCd=='06'">
<option value="Y">긴급</option>
<option value="N">일반</option>
</select>
@@ -49,6 +49,35 @@
</div>
</td>
</tr>
<tr v-show="ctgCd=='06'">
<th style="width: 10%">노출기간</th>
<td colspan="5">
<div class="input_box cal">
<div class="term">
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
v-model="startDate"
@selected="selectedStartDate(0)"
@closed="closeDate('start')"
></vuejs-datepicker> </span
>~
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledEDate"
v-model="endDate"
@selected="selectedEndDate(0)"
@closed="closeDate('end')"
></vuejs-datepicker>
</span>
</div>
</div>
</td>
</tr>
<tr>
<th style="width: 10%">제목</th>
<td colspan="5">
@@ -118,22 +147,31 @@
</div>
</template>
<script>
import api from '@/service/api';
import { utils_mixin, chkPattern2 } from '../service/mixins';
import homeMgtApi from '../service/homeMgtApi';
import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
import { VueEditor } from 'vue2-editor';
import { utils_mixin, chkPattern2 } from '../service/mixins';
import moment from 'moment';
export default {
name: 'NoticeUpdatePop',
mixins: [utils_mixin, chkPattern2],
components: {
VueEditor,
ValidationConfirmPopup,
vuejsDatepicker
},
data() {
return {
props: {},
row: {},
rsnType: [],
tpType: [],
ko: vdp_translation_ko.js,
startDate: '',
endDate: '',
disabledSDate : {},
disabledEDate : {},
// 공지사항
ntNo: '',
title: '',
@@ -154,29 +192,16 @@ export default {
{ code: '03', codeNm: '정책/약관' },
{ code: '04', codeNm: '오류/장애' },
{ code: '05', codeNm: '이벤트' },
{ code: '06', 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) {
@@ -202,7 +227,7 @@ export default {
for (var i = 0; i < dimmed.length; i++) {
dimmed[i].style.display = 'block';
}
this.setCodeDate();
this.formReset();
if (props) {
this.ntNo = props.ntNo;
this.title = props.title;
@@ -215,6 +240,20 @@ export default {
this.fileTitle = props.fileTitle && props.fileTitle.split(',');
this.fileNo = props.fileNo && props.fileNo.split(',');
this.fileCount = props.fileCount;
//팝업 공지가 아닐경우 현재 날짜 셋팅
console.log(props.ctgCd);
console.log(props.ntStrtDt);
console.log(props.ntEndDt);
if(props.ctgCd != "06"){
this.startDate = new Date();
this.endDate = moment(new Date()).add(7, 'days').toDate();
}else{
this.startDate = moment(props.ntStrtDt).toDate();
this.endDate = moment(props.ntEndDt).toDate();
}
this.closeDate('start');
this.closeDate('end');
}
for (let i = 0; i < this.fileCount; i++) {
@@ -241,17 +280,6 @@ export default {
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 = '공지사항 등록';
@@ -275,14 +303,6 @@ export default {
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;
},
@@ -347,6 +367,8 @@ export default {
ntSbst: this.ntSbst,
emgYn: this.emgYn,
useYn: this.useYn,
ntStrtDt: moment(this.startDate).format('YYYYMMDD'),
ntEndDt: moment(this.endDate).format('YYYYMMDD'),
ctgCd: this.ctgCd,
chgId: this.$store.getters['login/userId'],
legacyFiles: legacyFiles.join(),
@@ -355,16 +377,11 @@ export default {
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 = '공지사항 수정 실패';
@@ -388,27 +405,6 @@ export default {
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) {
@@ -416,48 +412,6 @@ export default {
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 초기화
@@ -499,6 +453,40 @@ export default {
this.row.fileNm = fileName;
homeMgtApi.fileDownload(this.row);
},
setPeriodDay(day) {
this.periodDay = day;
this.startDate = new Date();
this.endDate = moment(new Date()).add(7, 'days').toDate();
this.closeDate('start');
this.closeDate('end');
},
selectedStartDate(day) {
if (day != undefined && day != null) {
this.periodDay = day;
}
if (this.startDate > this.endDate) {
this.startDate = this.endDate;
}
},
selectedEndDate(day) {
if (day != undefined && day != null) {
this.periodDay = day;
}
},
closeDate(type) {
if (type != undefined && type != null) {
if (type == 'start') {
this.disabledSDate = { to: new Date(), from: this.endDate };
this.disabledEDate = { to: this.startDate};
} else if (type == 'end') {
this.disabledSDate = { to: new Date(), from: this.endDate };
this.disabledEDate = { to: this.startDate };
}
}
},
customFormatter: function (date) {
return moment(date).format('YYYY-MM-DD');
},
},
};
</script>

19
frontend/src/modules/homeMgt/views/notice.vue
View File

@@ -15,6 +15,7 @@
<option value="03">정책/약관</option>
<option value="04">오류/장애</option>
<option value="05">이벤트</option>
<option value="06">팝업공지</option>
</select>
</div>
<div class="input_box id">
@@ -173,21 +174,10 @@ export default {
};
},
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.grid.pagePerRows = 50;
this.search(isKeep);
},
@@ -214,7 +204,6 @@ export default {
this.$refs.NoticePop.ModalOpen();
},
noticeDetail(props) {
//console.log(props);
this.$refs.NoticeUpdatePop.ModalOpen(props);
},
search: function (isKeep) {
@@ -230,8 +219,6 @@ export default {
perPage: this.perPageCnt,
params: this.grid.params,
});
//const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
},
changePerPage: function () {
// 페이지당 조회할 개수
@@ -246,16 +233,12 @@ export default {
this.$refs.commmonModal.alertModalOpen(this.row);
return false;
}
//const param = chkList.map((row)=>({regReqNo:row.regReqNo} ));
const param = chkList.map((row) => ({ ntNo: row.ntNo }));
this.row.list = param;
this.row.title = '공지사항 관리';
this.row.msg1 = '삭제 하시겠습니까?';
this.$refs.commmonModal.confirmModalOpen2(this.row);
console.log(typeof this.row.list[0].ntNo);
//this.$refs.commmonModal.confirmModalOpen2(this.row);
},
confirmCalbackFnc(props) {
if (props.result) {