hubez-admin/frontend/src/modules/riskMgt/components/InsertIntrcpPop.vue

<template>
<!-- <div class="wrap bg-wrap"> -->
	<div>
	    <div class="dimmed" @click="ModalClose();"></div>
		    <div class="popup-wrap">

             <!-- 발신번호 차단 신규 등록 -->
			<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">
											<option v-for="(option, i) in tpType" 
											:value="sndblckTpCd"
											v-bind:key="i"
											>
                                                {{ 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="blckRsnCd" 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"></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>
            
</template>
<script>
import api from '@/service/api';
import riskMgtApi from '../service/riskMgtApi'
import { utils_mixin, chkPattern2 } from '../service/mixins';
import lodash from "lodash";
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: '',
            blckRsnCd: '',
            meno: '',
			code:"",
            
            // params: {
            //     'blckSndrno' : ''
            //     ,'sndblckTpCd' : '01'
            //     ,'blckRsnCd' : '02'
            //     ,'meno' : ''
            // }
        }
    },
    create(){
        // this.setCodeDate();  
		this.formReset();
    },
	  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(){z
			this.$parent.$refs.table.reloadData();
			this.ModalClose();
        },
        async doInsert(){
            // if(this.doValidate() && this.regisConfirm()){
                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();
			}
		},		
    },
	
}
</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;}
</style>