mirror of
http://git.mhez-qa.uplus.co.kr/hubez/hubez-admin.git
synced 2025-12-07 05:39:35 +09:00
TC 기능 수정 / 디자인 수정 변경
This commit is contained in:
kimre
@@ -1,255 +1,263 @@
|
||||
<template>
|
||||
<!-- <div class="wrap bg-wrap"> -->
|
||||
<div>
|
||||
<div class="dimmed" @click="ModalClose();"></div>
|
||||
<div class="popup-wrap">
|
||||
<!-- <div class="wrap bg-wrap"> -->
|
||||
<div>
|
||||
<div class="dimmed modal52" @click="ModalClose();"></div>
|
||||
<div class="popup-wrap modal52">
|
||||
|
||||
<!-- 발신번호 차단 신규 등록 -->
|
||||
<div class="popup modal52 popup_form">
|
||||
<div class="pop-head">
|
||||
<h3 class="pop-tit">발신번호 차단 신규 등록</h3>
|
||||
</div>
|
||||
<form autocomplete="off">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>발신번호</th>
|
||||
<td><input type="number" placeholder="- 자 제외 숫자만 입력" maxlength="11" v-model.trim="blckSndrno" v-on:keyup="onlyNum" @input="onlyNum" ref="_blckSndrno"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>발송타입</th>
|
||||
<td v-if="code === null || code === ''">
|
||||
<div v:class="select_box">
|
||||
<select name="" id="right" v-model.trim="sndblckTpCd" ref="sndblckTpCd" @keyup.enter="search">
|
||||
<option v-for="(option, i) in tpType" :value="option.code" v-bind:key="i">
|
||||
{{ option.codeNm }}
|
||||
</option>
|
||||
<!--
|
||||
<option v-for="(option, i) in tpType"
|
||||
:v-bind:value="option.grpCd"
|
||||
v-bind:key="i"
|
||||
:selected="code === option.grpCd"
|
||||
>
|
||||
{{ option.codeNm }}
|
||||
</option> -->
|
||||
<!-- <option value="">문자</option>
|
||||
<option value="">RCS</option> -->
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>차단사유</th>
|
||||
<td>
|
||||
<div>
|
||||
<select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
|
||||
<option v-for="(option, i) in rsnType" :value="option.code" v-bind:key="i">
|
||||
{{ option.codeNm }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>메모</th>
|
||||
<td class="sender"><textarea class="memo_text" v-model.trim="meno" ref="meno" @input="memoLimitByte()"></textarea></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 class="popup modal52 popup_form">
|
||||
<div class="pop-head">
|
||||
<h3 class="pop-tit">발신번호 차단 신규 등록</h3>
|
||||
</div>
|
||||
<form autocomplete="off">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>발신번호</th>
|
||||
<td><input type="text" placeholder="- 자 제외 숫자만 입력" v-model.trim="blckSndrno"
|
||||
@keypress="onlyNum" @input="onlyNum" minlength="10" maxlength="11" ref="_blckSndrno"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>발송타입</th>
|
||||
<td v-if="code === null || code === ''">
|
||||
<div v:class="select_box">
|
||||
<select name="" id="right" v-model.trim="sndblckTpCd" ref="sndblckTpCd" @keyup.enter="search">
|
||||
<option v-for="(option, i) in tpType" :value="option.code" v-bind:key="i">
|
||||
{{ option.codeNm }}
|
||||
</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>차단사유</th>
|
||||
<td>
|
||||
<div>
|
||||
<select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
|
||||
<option v-for="(option, i) in rsnType" :value="option.code" v-bind:key="i">
|
||||
{{ option.codeNm }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>메모</th>
|
||||
<td class="sender"><textarea class="memo_text" v-model.trim="meno" ref="meno" maxlength="1000"
|
||||
@input="memoLimitByte()"></textarea></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>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import api from '@/service/api';
|
||||
import riskMgtApi from '../service/riskMgtApi'
|
||||
import { utils_mixin, chkPattern2 } from '../service/mixins';
|
||||
import {utils_mixin, chkPattern2} from '../service/mixins';
|
||||
import lodash from "lodash";
|
||||
import commonModal from "@/components/modal/commonModal";
|
||||
// import commonModal from "@/components/modal/commonModal";
|
||||
import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
|
||||
|
||||
export default {
|
||||
mixins: [utils_mixin, chkPattern2],
|
||||
data(){
|
||||
return{
|
||||
props : {},
|
||||
row: {},
|
||||
rsnType: [],
|
||||
tpType: [],
|
||||
blckSndrno: '',
|
||||
sndblckTpCd: '01',
|
||||
blckRsnCd: '01',
|
||||
meno: '',
|
||||
code:"",
|
||||
LINE_FEED : 10, // '\n',
|
||||
maxByte: 2000,
|
||||
// params: {
|
||||
// 'blckSndrno' : ''
|
||||
// ,'sndblckTpCd' : '01'
|
||||
// ,'blckRsnCd' : '02'
|
||||
// ,'meno' : ''
|
||||
// }
|
||||
mixins: [utils_mixin, chkPattern2],
|
||||
data() {
|
||||
return {
|
||||
props: {},
|
||||
row: {},
|
||||
rsnType: [],
|
||||
tpType: [],
|
||||
blckSndrno: '',
|
||||
sndblckTpCd: '01',
|
||||
blckRsnCd: '01',
|
||||
meno: '',
|
||||
code: "",
|
||||
LINE_FEED: 10, // '\n',
|
||||
maxByte: 2000,
|
||||
// params: {
|
||||
// 'blckSndrno' : ''
|
||||
// ,'sndblckTpCd' : '01'
|
||||
// ,'blckRsnCd' : '02'
|
||||
// ,'meno' : ''
|
||||
// }
|
||||
}
|
||||
},
|
||||
create() {
|
||||
this.setCodeDate();
|
||||
this.formReset();
|
||||
},
|
||||
mounted() {
|
||||
//this.sndblckTpCd = '01'
|
||||
},
|
||||
components: {
|
||||
// commonModal,
|
||||
ValidationConfirmPopup
|
||||
},
|
||||
methods: {
|
||||
//모달 띄우기
|
||||
ModalOpen() {
|
||||
|
||||
var dimmed = document.getElementsByClassName('modal52');
|
||||
for (var i = 0; i < dimmed.length; i++) {
|
||||
dimmed[i].style.display = 'block';
|
||||
}
|
||||
this.setCodeDate();
|
||||
},
|
||||
// 모달 끄기
|
||||
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();
|
||||
},
|
||||
async doInsert() {
|
||||
// if(this.doValidate() && this.regisConfirm()){
|
||||
this.row.blckSndrno = this.blckSndrno;
|
||||
this.row.sndblckTpCd = this.sndblckTpCd;
|
||||
this.row.blckRsnCd = this.blckRsnCd;
|
||||
this.row.meno = this.meno;
|
||||
this.regId = 'admin';
|
||||
console.log(this.row);
|
||||
|
||||
try {
|
||||
const response = await riskMgtApi.insertIntrcp(this.row);
|
||||
const result = response.data;
|
||||
if (result != null && result.retCode == "0000") {
|
||||
this.row.title = '발신번호 차단';
|
||||
this.row.msg1 = '성공 하였습니다.';
|
||||
this.$parent.alertInsert(this.row);
|
||||
}
|
||||
this.toComplete();
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
this.row.title = '발신번호 차단';
|
||||
this.row.msg1 = '실패 하였습니다.';
|
||||
this.$parent.alertInsert(this.row);
|
||||
}
|
||||
// }
|
||||
},
|
||||
create(){
|
||||
this.setCodeDate();
|
||||
this.formReset();
|
||||
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;
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
//this.sndblckTpCd = '01'
|
||||
},
|
||||
components: {
|
||||
commonModal,
|
||||
ValidationConfirmPopup
|
||||
},
|
||||
methods :{
|
||||
//모달 띄우기
|
||||
ModalOpen(){
|
||||
var dimmed = document.getElementsByClassName('dimmed');
|
||||
dimmed[0].style.display = 'block';
|
||||
var wrap = document.getElementsByClassName('popup-wrap');
|
||||
wrap[0].style.display = 'block';
|
||||
var obj = document.getElementsByClassName('modal52');
|
||||
obj[0].style.display = 'block';
|
||||
this.setCodeDate();
|
||||
},
|
||||
// 모달 끄기
|
||||
ModalClose(){
|
||||
//this.formReset();
|
||||
var dimmed = document.getElementsByClassName('dimmed');
|
||||
dimmed[0].style.display = 'none';
|
||||
var wrap = document.getElementsByClassName('popup-wrap');
|
||||
wrap[0].style.display = 'none';
|
||||
var popup = document.getElementsByClassName('modal52');
|
||||
popup[0].style.display = 'none';
|
||||
|
||||
},
|
||||
// 저장 후 부모창 호출
|
||||
toComplete(){
|
||||
this.$parent.$refs.table.reloadData();
|
||||
this.ModalClose();
|
||||
},
|
||||
async doInsert(){
|
||||
// if(this.doValidate() && this.regisConfirm()){
|
||||
this.row.blckSndrno = this.blckSndrno;
|
||||
this.row.sndblckTpCd = this.sndblckTpCd;
|
||||
this.row.blckRsnCd = this.blckRsnCd;
|
||||
this.row.meno = this.meno;
|
||||
this.regId = 'admin';
|
||||
console.log(this.row);
|
||||
|
||||
try {
|
||||
const response = await riskMgtApi.insertIntrcp(this.row);
|
||||
const result = response.data;
|
||||
if (result != null && result.retCode == "0000") {
|
||||
this.row.title = '발신번호 차단';
|
||||
this.row.msg1 = '성공 하였습니다.';
|
||||
this.$parent.alertInsert(this.row);
|
||||
}
|
||||
this.toComplete();
|
||||
} catch(err) {
|
||||
console.log(err);
|
||||
this.row.title = '발신번호 차단';
|
||||
this.row.msg1 = '실패 하였습니다.';
|
||||
this.$parent.alertInsert(this.row);
|
||||
}
|
||||
// }
|
||||
},
|
||||
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.blckSndrno)){
|
||||
this.row.title = '발신번호 차단';
|
||||
this.row.msg1 = '발신번호를 입력해주세요.';
|
||||
this.$parent.alertInsert(this.row);
|
||||
this.$refs._blckSndrno.focus();
|
||||
return false;
|
||||
}
|
||||
const hp = this.blckSndrno;
|
||||
if(!this.isNull(hp) && !this.isMobile(hp)){
|
||||
this.row.title = '발신번호 차단';
|
||||
this.row.msg1 = '발신번호 형식이 잘못되었습니다. 확인 해주세요.';
|
||||
this.$parent.alertInsert(this.row)
|
||||
this.$refs._blckSndrno.focus();
|
||||
return false;
|
||||
}
|
||||
this.row.blckSndrno=this.blckSndrno;
|
||||
this.row.sndblckTpCd = this.sndblckTpCd;
|
||||
this.row.blckRsnCd = this.blckRsnCd;
|
||||
this.row.meno=this.meno;
|
||||
return true;
|
||||
},
|
||||
formReset(){
|
||||
var type= this.insertType;
|
||||
Object.assign(this.$data, this.$options.data());
|
||||
this.insertType = type;
|
||||
},
|
||||
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 바이트길이 구하기
|
||||
|
||||
doValidate() {
|
||||
if (this.isNull(this.blckSndrno)) {
|
||||
this.row.title = '발신번호 차단';
|
||||
this.row.msg1 = '발신번호를 입력해주세요.';
|
||||
this.$parent.alertInsert(this.row);
|
||||
this.$refs._blckSndrno.focus();
|
||||
return false;
|
||||
}
|
||||
const hp = this.blckSndrno;
|
||||
if (!this.isNull(hp) && !this.isMobile(hp)) {
|
||||
this.row.title = '발신번호 차단';
|
||||
this.row.msg1 = '발신번호 형식이 잘못되었습니다. 확인 해주세요.';
|
||||
this.$parent.alertInsert(this.row)
|
||||
this.$refs._blckSndrno.focus();
|
||||
return false;
|
||||
}
|
||||
this.row.blckSndrno = this.blckSndrno;
|
||||
this.row.sndblckTpCd = this.sndblckTpCd;
|
||||
this.row.blckRsnCd = this.blckRsnCd;
|
||||
this.row.meno = this.meno;
|
||||
return true;
|
||||
},
|
||||
|
||||
formReset() {
|
||||
var type = this.insertType;
|
||||
Object.assign(this.$data, this.$options.data());
|
||||
this.insertType = type;
|
||||
},
|
||||
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 바이트길이 구하기
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.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;}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user