서비스관리 / 알림톡 템플릿관리 추가

frontend/src/modules/riskMgt/components/InsertIntrcpPop.vue

@@ -0,0 +1,190 @@
+<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" v-model.trim="blckSndrno" ref="blckSndrno"></td>
+							</tr>
+							<tr>
+								<th>발송타입</th>
+								<td>
+									<div class="select_box">
+										<select name="" id="" v-model.trim="sndblckTpCd" ref="sndblckTpCd">
+                                            <option v-for="(option, i) in tpType" v-bind:value="option.code" v-bind:key="i">
+                                                {{ option.codeNm }}
+                                            </option> 
+											<!-- <option value="">문자</option>
+											<option value="">RCS</option> -->
+										</select>
+									</div>
+								</td>
+							</tr>
+							<tr>
+								<th>차단사유</th>
+								<td>
+									<div class="select_box">
+										<select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
+											<option v-for="(option, i) in rsnType" v-bind: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"></textarea></td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+				<div class="pop-btn2">
+					<button class="btn-pcolor" @click="doInsert">등록</button>
+					<button class="btn-default" @click="ModalClose();">취소</button>
+				</div>
+			</div>
+        </div>
+            <!-- 신규등록 - 등록 선택 -->
+			 <div class="popup modal54">
+				<div class="pop-head">
+					<div class="pop-tit">신규등록</div>
+				</div>
+				<div class="pop-cont">
+					<div>작성된 내용으로 등록 하시겠습니까?</div>
+				</div>
+				<div class="pop-btn2">
+					<button class="btn-pcolor">확인</button>
+					<button class="btn-default" onclick="ModalClose();">취소</button>
+				</div>
+			</div>
+    </div>
+            
+</template>
+<script>
+import api from '@/service/api';
+import riskMgtApi from '../service/riskMgtApi'
+import lodash from "lodash";
+export default {
+    data(){
+        return{
+            row: {},
+            rsnType: [],
+            tpType: [],
+            blckSndrno: '',
+            sndblckTpCd: '',
+            blckRsnCd: '',
+            meno: '',
+            
+            // params: {
+            //     'blckSndrno' : ''
+            //     ,'sndblckTpCd' : '01'
+            //     ,'blckRsnCd' : '02'
+            //     ,'meno' : ''
+            // }
+        }
+    },
+    create(){
+        // this.setCodeDate();  
+		this.formReset();
+    },
+    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() && window.confirm('등록 하시겠습니까?')){
+                try {
+					const response = await riskMgtApi.insertIntrcp(this.row);
+					const result = response.data;
+					if (result != null && result.retCode == "0000") {
+						alert('저장 하였습니다.');
+						this.toComplete();
+					}
+                } catch(err) {
+                    console.log(err);
+                	alert("실패 하였습니다.");
+                }
+            }
+        },
+       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;
+        });
+       },
+
+        isNull(obj){
+          if(lodash.isNil(obj) || lodash.trim(obj) == ''){
+            return true;
+          }
+          return false;
+        },
+
+       doValidate(){
+			if(this.isNull(this.blckSndrno)){
+				alert("번호입력.");
+				this.$refs._blckSndrno.focus();
+				return false;
+			}
+			if(this.isNull(this.meno)){
+				alert('메모입력');
+				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;
+		},
+
+    },
+}
+</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>