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

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

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>