TC 기능 수정 / 디자인 수정 변경

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

@@ -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>

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

@@ -1,223 +1,218 @@
 <template>
-	<!-- <div class="wrap bg-wrap"> -->
-    <div>
-		<div class="dimmed" @click="ModalClose();"></div>
-		<div class="popup-wrap">
-  <!-- 메시지 차단 신규 등록 -->
-			<div class="popup popup_form modal57">
-				<div class="pop-head">
-					<h3 class="pop-tit">메시지 차단 신규 등록</h3>
-				</div>
-				<form autocomplete="off">
-					<table>
-						<tbody>
-							<tr>
-								<th>차단문구</th>
-								<td class="input_add">
-									<input v-model="word" ref="_word" maxlength="50">
-									<button type="button" class="button white add" @click="doAdd"></button>
-								</td>
-							</tr>
-							<tr>
-								<td colspan="2" class="registration" value="">
-									<ul>
-                                        <li v-for="(item, i) in msgBlckwordList" v-bind:key="item.word">
-                                          <span> {{ item.word }}<a href="#" @click="doDel(item, i)"><img src="@/assets/images/icon-del.png"/></a> </span>
-                                               <!-- <button type="button" @click="doDel(item, i)">x</button> -->
-                                        </li>
-									</ul>
-								</td>
-							</tr>
-							<tr>
-								<th>조건</th>
-								<td>
-									<input type="radio" name="state" value="01" id="popup_radio3" v-model="blckContCd" >
-									<label for="popup_radio3">AND</label>
-									<input type="radio" name="state" value="02" id="popup_radio4" v-model="blckContCd">
-									<label for="popup_radio4">OR</label>
-								</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="memo" ref="memo" ></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>
-			<validation-confirm-popup ref="ValidationConfirmPopup"></validation-confirm-popup>
+  <!-- <div class="wrap bg-wrap"> -->
+  <div>
+    <div class="dimmed modal57" @click="ModalClose();"></div>
+    <div class="popup-wrap modal57">
+      <!-- 메시지 차단 신규 등록 -->
+      <div class="popup popup_form modal57">
+        <div class="pop-head">
+          <h3 class="pop-tit">메시지 차단 신규 등록</h3>
         </div>
+        <form autocomplete="off">
+          <table>
+            <tbody>
+            <tr>
+              <th>차단문구</th>
+              <td class="input_add">
+                <input v-model="word" ref="_word" maxlength="50">
+                <button type="button" class="button white add" @click="doAdd"></button>
+              </td>
+            </tr>
+            <tr>
+              <td colspan="2" class="registration" value="">
+                <ul>
+                  <li v-for="(item, i) in msgBlckwordList" v-bind:key="item.word">
+                    <span> {{ item.word }}<a href="#" @click="doDel(item, i)"><img src="@/assets/images/icon-del.png"/></a> </span>
+                    <!-- <button type="button" @click="doDel(item, i)">x</button> -->
+                  </li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <th>조건</th>
+              <td>
+                <input type="radio" name="state" value="01" id="popup_radio3" v-model="blckContCd">
+                <label for="popup_radio3">AND</label>
+                <input type="radio" name="state" value="02" id="popup_radio4" v-model="blckContCd">
+                <label for="popup_radio4">OR</label>
+              </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="memo" ref="memo"></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>
+      <validation-confirm-popup ref="ValidationConfirmPopup"></validation-confirm-popup>
+    </div>
+  </div>
 </template>
 
 <script>
 import api from '@/service/api';
 import riskMgtApi from '../service/riskMgtApi';
 import lodash from "lodash";
-import { utils_mixin, chkPattern2 } from '../service/mixins';
+import {utils_mixin, chkPattern2} from '../service/mixins';
 import ValidationConfirmPopup from './ValidationConfirmPopup.vue';
+
 export default {
-	mixins: [utils_mixin, chkPattern2],
-    data(){
-        return{
+  mixins: [utils_mixin, chkPattern2],
+  data() {
+    return {
 
-		  row: {},
-        //   msgBlckword: {
-        //     word:'',
-        //   },
-          msgBlckwordList: [
-            // {  word : '스팸'},
-          ],
-		  rsnType: [],
-          tpType: [],
-        //   seqNo: '', // 일련번호
-          word: '', // 차단문구
-		  blckSndrno:'',
-		  sndblckTpCd:'',
-          blckRsnCd: '01', // 차단사유
-		  blckYn:'',
-          blckContCd:'01', //차단 조건
-		  chgDt:'',
-		  regId: '',
-          regDt: '',
-          memo: '', // 메모
+      row: {},
+      //   msgBlckword: {
+      //     word:'',
+      //   },
+      msgBlckwordList: [
+        // {  word : '스팸'},
+      ],
+      rsnType: [],
+      tpType: [],
+      //   seqNo: '', // 일련번호
+      word: '', // 차단문구
+      blckSndrno: '',
+      sndblckTpCd: '',
+      blckRsnCd: '01', // 차단사유
+      blckYn: '',
+      blckContCd: '01', //차단 조건
+      chgDt: '',
+      regId: '',
+      regDt: '',
+      memo: '', // 메모
 
+    }
+  },
+  created() {
+    this.formReset();
+  },
+  components: {
+    ValidationConfirmPopup
+  },
+
+  methods: {
+    ModalOpen() {
+      var dimmed = document.getElementsByClassName('modal57');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
+      this.setCodeDate();
+    },
+    // 모달 끄기
+    ModalClose() {
+      this.formReset();
+      var dimmed = document.getElementsByClassName('modal57');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+    },
+
+    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;
+      });
+    },
+
+    async doInsert() {
+      // if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
+      try {
+        const response = await riskMgtApi.msgIntrcpList(this.row);
+        const result = response.data;
+        if (result != null && result.retCode == "0000") {
+          this.row.title = '메세지 차단';
+          this.row.msg1 = '저장하였습니다.';
+          this.$parent.msgAlertModalOpen(this.row);
         }
+        this.toComplete();
+      } catch (err) {
+        this.row.title = '메세지 차단';
+        this.row.msg1 = '실패하였습니다.';
+        this.$parent.msgAlertModalOpen(this.row);
+      }
+      // }
     },
-    created(){
-        this.formReset();
+
+    doValidate() {
+      if (this.isNull(this.msgBlckwordList)) {
+        this.row.title = '메세지 차단';
+        this.row.msg1 = '문구를 입력해주세요.';
+        this.$parent.msgAlertModalOpen(this.row);
+        this.$refs._word.focus();
+        return false;
+      }
+
+      this.row.blckRsnCd = this.blckRsnCd;
+      this.row.blckContCd = this.blckContCd;
+      this.row.memo = this.memo;
+      this.row.blckYn = this.blckYn;
+      this.row.list = this.msgBlckwordList
+      return true;
+
     },
-	components: {
-	   ValidationConfirmPopup
-	},
 
-    methods :{
-        ModalOpen(){
-            this.formReset();
-			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('modal57');
-			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('modal57');
-			popup[0].style.display = 'none';
-			
-		},
-
-        setCodeDate(){
-        // 발송타입
-        api.commCode({'grpCd' : 'SNDBLCK_TP_CD'}).then(response => {
-            this.tpType = response.data.data.list;
+    toComplete() {
+      this.$parent.$refs.table.reloadData();
+      this.ModalClose();
+    },
+    //신규등록 팝업에서 문구 추가 버튼
+    doAdd: function () {
+      if (this.isNull(this.word)) {
+        this.row.title = '메세지 차단';
+        this.row.msg1 = '문구를 입력해주세요.';
+        this.$parent.msgAlertModalOpen(this.row);
+        this.$refs._word.focus();
+        return false;
+      }
+      if (this.msgBlckwordList.length < 10) {
+        this.msgBlckwordList.push({
+          //seqNo: '',
+          word: this.word
         });
-        api.commCode({'grpCd' : 'SNDBLCK_RSN_CD'}).then(response => {
-            this.rsnType = response.data.data.list;
-        });
-       },
+        this.word = '';
+      }
+    },
+    //신규등록 팝업에서 문구 삭제 버튼
+    doDel(item, i) {
+      localStorage.removeItem(item);
+      this.msgBlckwordList.splice(i, 1);
+    },
+    formReset() {
+      var type = this.insertType;
+      Object.assign(this.$data, this.$options.data());
+      this.insertType = type;
+    },
+    regisConfirm() {
+      if (this.doValidate()) {
+        this.$refs.ValidationConfirmPopup.msgConfirmInsertOpen();
+      }
+    }
 
-        async doInsert(){
-            // if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
-                try {
-					const response = await riskMgtApi.msgIntrcpList(this.row);
-					const result = response.data;
-					if (result != null && result.retCode == "0000") {
-						this.row.title = '메세지 차단';
-         	 			this.row.msg1 = '저장하였습니다.';
-           				this.$parent.msgAlertModalOpen(this.row);
-					}
-						this.toComplete();
-                } catch(err) {
-                		this.row.title = '메세지 차단';
-         	 			this.row.msg1 = '실패하였습니다.';
-           				this.$parent.msgAlertModalOpen(this.row);
-                }
-            // }
-        },
-
-        doValidate(){    
-			if(this.isNull(this.msgBlckwordList)){
-				this.row.title = '메세지 차단';
-         	 	this.row.msg1 = '문구를 입력해주세요.';
-           		this.$parent.msgAlertModalOpen(this.row);
-				this.$refs._word.focus();
-				return false;
-			}
-
-            this.row.blckRsnCd = this.blckRsnCd;
-            this.row.blckContCd = this.blckContCd;
-            this.row.memo = this.memo;
-            this.row.blckYn = this.blckYn;
-            this.row.list = this.msgBlckwordList
-            return true;
-
-        },
-
-        toComplete(){
-			this.$parent.$refs.table.reloadData();
-			this.ModalClose();
-        },
-        //신규등록 팝업에서 문구 추가 버튼
-        doAdd: function() {
-			if(this.isNull(this.word)){
-				this.row.title = '메세지 차단';
-         	 	this.row.msg1 = '문구를 입력해주세요.';
-           		this.$parent.msgAlertModalOpen(this.row);
-				this.$refs._word.focus();
-				return false;
-			}
-            if(this.msgBlckwordList.length < 10){
-                this.msgBlckwordList.push({
-                    //seqNo: '',
-                    word: this.word
-                });      
-                this.word = '';
-            }
-        },
-        //신규등록 팝업에서 문구 삭제 버튼
-        doDel(item, i){
-            localStorage.removeItem(item);
-            this.msgBlckwordList.splice(i, 1);
-        },
-        formReset(){
-			var type= this.insertType;
-			Object.assign(this.$data, this.$options.data());
-			this.insertType = type;
-		},
-		regisConfirm(){
-			if(this.doValidate()){
-				this.$refs.ValidationConfirmPopup.msgConfirmInsertOpen();
-			}
-		}
-		
-}
+  }
 
 
 }

frontend/src/modules/riskMgt/service/mixins.js

@@ -1,353 +1,358 @@
 import lodash from "lodash";
 
 const utils_mixin = {
-      methods:{
-      /** * 이메일 형식 체크 * * @param 데이터 */
-      emailCheck(email,rtnArrYn) {
-          if(this.isNull(rtnArrYn)){
-            rtnArrYn='N';
-          }
-          // var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
-          var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
-  
-          if(regExp.test(email) == false) {
-            // 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
-            if(rtnArrYn == 'Y'){
-                return email;
-              }
-            return false;
-          }else{
-              var myArray = regExp.exec(email);
-              if(rtnArrYn == 'Y'){
-                return myArray;
-              }
-              return true;
-          }
-  
+    methods: {
+        /** * 이메일 형식 체크 * * @param 데이터 */
+        emailCheck(email, rtnArrYn) {
+            if (this.isNull(rtnArrYn)) {
+                rtnArrYn = 'N';
+            }
+            // var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
+            var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
+
+            if (regExp.test(email) == false) {
+                // 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
+                if (rtnArrYn == 'Y') {
+                    return email;
+                }
+                return false;
+            } else {
+                var myArray = regExp.exec(email);
+                if (rtnArrYn == 'Y') {
+                    return myArray;
+                }
+                return true;
+            }
+
         },
         /** * 전화번호 포맷으로 변환 * * @param 데이터 */
-        formatPhone(phoneNum,fmt,rtnArrYn) {
-          if(this.isNull(fmt)){
-            fmt='';
-          }
-          if(this.isNull(rtnArrYn)){
-            fmt='N';
-          }
-          if(this.isPhone(phoneNum)) {
-            var rtnNum;
-            var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
-            var myArray;
-            if(regExp.test(phoneNum)){
-              myArray = regExp.exec(phoneNum);
-              rtnNum = myArray[1]+fmt + myArray[2]+fmt+myArray[3];
-              if(rtnArrYn == 'Y'){
-                return myArray;
-              }
-              return rtnNum;
-            } else {
-              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
-              if(regExp.test(phoneNum)){
-                myArray = regExp.exec(phoneNum);
-                rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
-                if(rtnArrYn == 'Y'){
-                  return myArray;
-                }
-                return rtnNum;
-              } else {
-                return phoneNum;
-              }
+        formatPhone(phoneNum, fmt, rtnArrYn) {
+            if (this.isNull(fmt)) {
+                fmt = '';
+            }
+            if (this.isNull(rtnArrYn)) {
+                fmt = 'N';
+            }
+            if (this.isPhone(phoneNum)) {
+                var rtnNum;
+                var regExp = /(02)([0-9]{3,4})([0-9]{4})$/;
+                var myArray;
+                if (regExp.test(phoneNum)) {
+                    myArray = regExp.exec(phoneNum);
+                    rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
+                    if (rtnArrYn == 'Y') {
+                        return myArray;
+                    }
+                    return rtnNum;
+                } else {
+                    regExp = /(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+                    if (regExp.test(phoneNum)) {
+                        myArray = regExp.exec(phoneNum);
+                        rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
+                        if (rtnArrYn == 'Y') {
+                            return myArray;
+                        }
+                        return rtnNum;
+                    } else {
+                        return phoneNum;
+                    }
+                }
+            } else {
+                return phoneNum;
             }
-          } else {
-            return phoneNum;
-          }
         },
         /** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
-        formatMobile(phoneNum,fmt,rtnArrYn) {
-  
-          if(this.isNull(fmt)){
-            fmt='';
-          }
-          if(this.isNull(rtnArrYn)){
-            fmt='N';
-          }
-          if(this.isMobile(phoneNum)) {
-  
-            var rtnNum;
-            var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
-            var myArray;
-  
-            if(regExp.test(phoneNum)){
-  
-              myArray = regExp.exec(phoneNum);
-              rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
-              if(rtnArrYn == 'Y'){
-                return myArray;
-              }
-              return rtnNum;
-            } else {
-              return phoneNum;
+        formatMobile(phoneNum, fmt, rtnArrYn) {
+
+            if (this.isNull(fmt)) {
+                fmt = '';
+            }
+            if (this.isNull(rtnArrYn)) {
+                fmt = 'N';
+            }
+            if (this.isMobile(phoneNum)) {
+
+                var rtnNum;
+                var regExp = /(01[016789])([0-9]{3,4})([0-9]{4})$/;
+                var myArray;
+
+                if (regExp.test(phoneNum)) {
+
+                    myArray = regExp.exec(phoneNum);
+                    rtnNum = myArray[1] + fmt + myArray[2] + fmt + myArray[3];
+                    if (rtnArrYn == 'Y') {
+                        return myArray;
+                    }
+                    return rtnNum;
+                } else {
+                    return phoneNum;
+                }
+            } else {
+                return phoneNum;
             }
-          } else {
-            return phoneNum;
-          }
         },
-        
+
         /** * 전화번호 형식 체크 * * @param 데이터 */
         isPhone(phoneNum) {
-          var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
-          if(regExp.test(phoneNum)){
-            return true;
-            } else {
-              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
-              if(regExp.test(phoneNum)){
+            var regExp = /(02)([0-9]{3,4})([0-9]{4})$/;
+            if (regExp.test(phoneNum)) {
                 return true;
-              } else {
-                return false;
-              }
-          }
+            } else {
+                regExp = /(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+                if (regExp.test(phoneNum)) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
         },
-  
+
         /** * 핸드폰번호 형식 체크 * * @param 데이터 */
         isMobile(phoneNum) {
-          var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
-          var myArray;
-          if(regExp.test(phoneNum)){
-            myArray = regExp.exec(phoneNum);
-            return true;
-          } else {
-            return false;
-          }
+            var regExp = /(01[016789])([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+            if (regExp.test(phoneNum)) {
+                myArray = regExp.exec(phoneNum);
+                return true;
+            } else {
+                return false;
+            }
         },
         isMobile2(phoneNum) {
-          var regExp =/(1[016789])([0-9]{3,4})([0-9]{4})$/;
-          var myArray;
-          if(regExp.test(phoneNum)){
-            myArray = regExp.exec(phoneNum);
-            return true;
-          } else {
-            return false;
-          }
-        },
-  
-        isNull(obj){
-          if(lodash.isNil(obj) || lodash.trim(obj) == ''){
-            return true;
-          }
-          return false;
-        },
-        getParent(name){
-          let p = this.$parent;
-          while(typeof p !== 'undefined'){
-              if(p.$options.name == name) {
-              return p;
-              }else {
-              p = p.$parent;
-              }
-          }
-          return false;
-        },
-        getJsonObj(str){
-          return JSON.parse(JSON.stringify(str));
-        },
-      }
-  };
-  
-  var chkPattern2 = {
-      data: function () {
-          return {      
-          }
-      },
-      methods: {
-      selSesStorage(keyLike){
-        if(this.isNull(keyLike)){
-          return null;
-        }
-        if(sessionStorage.length > 0){
-          let keyList = [];
-          for(let i=0;i<sessionStorage.length;i++){
-            const keyNm = sessionStorage.key(i);
-            if(keyNm.indexOf(keyLike) > -1){
-              keyList.push({name : keyNm, value : sessionStorage.getItem(keyNm)});
+            var regExp = /(1[016789])([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+            if (regExp.test(phoneNum)) {
+                myArray = regExp.exec(phoneNum);
+                return true;
+            } else {
+                return false;
+            }
+        },
+
+        isNull(obj) {
+            if (lodash.isNil(obj) || lodash.trim(obj) == '') {
+                return true;
             }
-          }
-          if(keyList.length > 0){
-            return keyList;
-          }
-          return null;
-        }
-        return null;
-      },
-  
-      delSesStorage(keyList){
-        if(this.isNull(keyList)){
-          return null;
-        }
-        if(keyList.length > 0){
-          keyList.map((o) => (sessionStorage.removeItem(o.name)));
-          return true;
-        }
-      },
-  
-      setGridMouseDownActive(){
-          const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
-          if(window.getEventListeners(ele).mousedown){
-            ele.removeEventListener('mousedown',window.getEventListeners(ele).mousedown[0].listener);
-          }
-      },
-          restrictChars : function($event,regExp,hanYn){
-  
-        if(this.isNull(hanYn)){
-          hanYn='N';
-        }
-        if(hanYn === 'N' && $event.type === 'keydown'){
-          if($event.keyCode === 229){
-            $event.preventDefault();
             return false;
-          }
-        }
-  
-        if($event.type === 'keypress'){
-          //한글 처리 불가
-          if(regExp.test(String.fromCharCode($event.charCode))) {
+        },
+        getParent(name) {
+            let p = this.$parent;
+            while (typeof p !== 'undefined') {
+                if (p.$options.name == name) {
+                    return p;
+                } else {
+                    p = p.$parent;
+                }
+            }
+            return false;
+        },
+        getJsonObj(str) {
+            return JSON.parse(JSON.stringify(str));
+        },
+    }
+};
+
+var chkPattern2 = {
+    data: function () {
+        return {}
+    },
+    methods: {
+        selSesStorage(keyLike) {
+            if (this.isNull(keyLike)) {
+                return null;
+            }
+            if (sessionStorage.length > 0) {
+                let keyList = [];
+                for (let i = 0; i < sessionStorage.length; i++) {
+                    const keyNm = sessionStorage.key(i);
+                    if (keyNm.indexOf(keyLike) > -1) {
+                        keyList.push({name: keyNm, value: sessionStorage.getItem(keyNm)});
+                    }
+                }
+                if (keyList.length > 0) {
+                    return keyList;
+                }
+                return null;
+            }
+            return null;
+        },
+
+        delSesStorage(keyList) {
+            if (this.isNull(keyList)) {
+                return null;
+            }
+            if (keyList.length > 0) {
+                keyList.map((o) => (sessionStorage.removeItem(o.name)));
+                return true;
+            }
+        },
+
+        setGridMouseDownActive() {
+            const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
+            if (window.getEventListeners(ele).mousedown) {
+                ele.removeEventListener('mousedown', window.getEventListeners(ele).mousedown[0].listener);
+            }
+        },
+        restrictChars: function ($event, regExp, hanYn) {
+
+            if (this.isNull(hanYn)) {
+                hanYn = 'N';
+            }
+            if (hanYn === 'N' && $event.type === 'keydown') {
+                if ($event.keyCode === 229) {
+                    $event.preventDefault();
+                    return false;
+                }
+            }
+
+            if ($event.type === 'keypress') {
+                //한글 처리 불가
+                if (regExp.test(String.fromCharCode($event.charCode))) {
+                    return true;
+                } else {
+                    $event.preventDefault();
+                    return false;
+                }
+            }
+
+            if (hanYn === 'N' && ($event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')) {
+                $event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g, '');
+                $event.preventDefault();
+                return false;
+            }
             return true;
-          }else{
-            $event.preventDefault();
-            return false;
-          }
-        }
-  
-        if(hanYn === 'N' && ( $event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')){
-          $event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g,'');
-          $event.preventDefault();
-          return false;
-        }
-        return true;
-      },
-          setLenth: function (e, len) {
-              this.cut(e, len);
-      },
-      onlyCustom: function (e,strRegExp,hanYn) {
-        var regExp_g = new RegExp(strRegExp,'g');
-        this.cut(e);
-              return this.restrictChars(e,regExp_g,hanYn);
-      },
-      onlyCommon: function(strRegExp, e, len, isEventCall, hanYn) {
-        var regExp_g = new RegExp(strRegExp,'g');         
-        if(isEventCall === 'N'){
-          if(!this.cut(e, len, isEventCall)){
-            return false;
-          }
-          if(!regExp_g.test(e.value)){
-            return false;
-          }
-          return true;
-        }
-        this.cut(e, len);
-              return this.restrictChars(e,regExp_g,hanYn);
-      },
-          onlyNum: function (e, len, isEventCall) {
-        var strRegExp = '^[0-9]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-          },
-          onlyEng: function (e, len, isEventCall) {
-        var strRegExp = '^[A-Za-z]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-      },
-      onlyLowerEng: function (e, len, isEventCall) {
-        var strRegExp = '^[a-z]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-      },
-      onlyUpperEng: function (e, len, isEventCall) {
-        var strRegExp = '^[A-Z]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-          },
-          onlyEmail: function (e, len, isEventCall) {
-        var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-          },
-          onlyName: function (e, len, isEventCall) {
-        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
-          },
-          onlyTitle: function (e, len, isEventCall) {
-        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
-          },
-          onlyText: function (e, len, isEventCall) {
-        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
-          },
-          onlyPassword: function (e, len, isEventCall) {
-        var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-          },
-          onlyId: function (e, len, isEventCall) {
-        var strRegExp = '^[A-Za-z0-9_\.\-]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-          },
-          onlyIp: function (e, len, isEventCall) {
-        var strRegExp = '^[0-9,.*]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-          },
-          onlyRoleNm_Space: function (e, len, isEventCall) {
-        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
-          },
-          onlyRoleId_UnderBar: function (e, len, isEventCall) {
-        var strRegExp = '^[a-zA-Z0-9_]*$';
-        return this.onlyCommon(strRegExp, e, len, isEventCall);
-      },    
-          cut: function (ele, len, isValidChk) {
-        let e=ele;
-        if (typeof ele.target != "undefined") {
-          e=ele.target;
-        }
-        let max = this.isNull(len) ? e.attributes.maxlength.value : len;      
-        let str = e.value;
-  
-        if (this.bytes(str) > max) {
-          if(this.isNull(isValidChk)){
-            e.value = this.cutBytes(str, max);
-          }
-          return false;
-        }			
-        return true;
-          },
-          cutBytes: function (str, len) {
-        while(1 === 1){
-          if(this.bytes(str) <= len){
+        },
+        setLenth: function (e, len) {
+            this.cut(e, len);
+        },
+        onlyCustom: function (e, strRegExp, hanYn) {
+            var regExp_g = new RegExp(strRegExp, 'g');
+            this.cut(e);
+            return this.restrictChars(e, regExp_g, hanYn);
+        },
+        onlyCommon: function (strRegExp, e, len, isEventCall, hanYn) {
+            var regExp_g = new RegExp(strRegExp, 'g');
+            if (isEventCall === 'N') {
+                if (!this.cut(e, len, isEventCall)) {
+                    return false;
+                }
+                if (!regExp_g.test(e.value)) {
+                    return false;
+                }
+                return true;
+            }
+            this.cut(e, len);
+            return this.restrictChars(e, regExp_g, hanYn);
+        },
+        onlyNum: function (e, len, isEventCall) {
+            var strRegExp = '^[0-9]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyEng: function (e, len, isEventCall) {
+            var strRegExp = '^[A-Za-z]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyLowerEng: function (e, len, isEventCall) {
+            var strRegExp = '^[a-z]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyUpperEng: function (e, len, isEventCall) {
+            var strRegExp = '^[A-Z]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyEmail: function (e, len, isEventCall) {
+            var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyName: function (e, len, isEventCall) {
+            var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
+        },
+        onlyTitle: function (e, len, isEventCall) {
+            var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
+        },
+        onlyText: function (e, len, isEventCall) {
+            var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
+        },
+        onlyPassword: function (e, len, isEventCall) {
+            var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyId: function (e, len, isEventCall) {
+            var strRegExp = '^[A-Za-z0-9_\.\-]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyIp: function (e, len, isEventCall) {
+            var strRegExp = '^[0-9,.*]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        onlyRoleNm_Space: function (e, len, isEventCall) {
+            var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall, 'Y');
+        },
+        onlyRoleId_UnderBar: function (e, len, isEventCall) {
+            var strRegExp = '^[a-zA-Z0-9_]*$';
+            return this.onlyCommon(strRegExp, e, len, isEventCall);
+        },
+        cut: function (ele, len, isValidChk) {
+            let e = ele;
+            if (typeof ele.target != "undefined") {
+                e = ele.target;
+            }
+            let max = this.isNull(len) ? e.attributes.maxlength.value : len;
+            let str = e.value;
+
+            if (this.bytes(str) > max) {
+                if (this.isNull(isValidChk)) {
+                    e.value = this.cutBytes(str, max);
+                }
+                return false;
+            }
+            return true;
+        },
+        cutBytes: function (str, len) {
+            while (1 === 1) {
+                if (this.bytes(str) <= len) {
+                    return str;
+                }
+                str = str.slice(0, -1);
+            }
+        },
+        bytes: function (str) {
+            var length = ((s, b, i, c) => {
+                // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);  // 한글 3바이트
+                // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1);     //한글 2바이트
+                b = 0, i = 0;
+                while (1 === 1) {
+                    c = s.charCodeAt(i++);
+                    if (isNaN(c)) {
+                        break;
+                    }
+                    b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
+                }
+                return b
+            })(str);
+            return length;
+        },
+        checkPhone: function (str) {
+            str = str.replace(/[-\s]+/g, '');
+            if (str.charAt(0) != "0") {
+                str = "0" + str;
+            }
+            if (str.length < 10 || str.length > 12) {
+                return "";
+            }
+            if (isNaN(str)) {
+                return "";
+            }
+            if (str.substr(0, 2) != "01" && str.substr(0, 3) != "070" && str.substr(0, 4) != "0505" && str.substr(0, 4) != "0503") {
+                return "";
+            }
             return str;
-          }
-          str = str.slice(0,-1);
-        }
-          },
-          bytes: function (str) {
-              var length = ((s,b,i,c) => {
-            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);  // 한글 3바이트
-            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1);     //한글 2바이트
-          b=0,i=0;
-          while(1 === 1){          
-            c = s.charCodeAt(i++);
-            if (isNaN(c)) {
-              break;
-            }
-            b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
-          }
-          return b
-        })(str);
-              return length;
-          },
-          checkPhone: function(str) {
-              str = str.replace(/[-\s]+/g, '');
-              if (str.charAt(0)!="0"){
-                  str = "0"+str;
-              }
-              if (str.length<10||str.length>12){return "";}
-              if (isNaN(str)){return "";	}
-              if (str.substr(0,2)!="01" && str.substr(0,3)!="070"  && str.substr(0,4)!="0505" && str.substr(0,4)!="0503"){return "";	}
-              return str;
-  
-          },
-      }
-  };
-  export { utils_mixin, chkPattern2 };
+
+        },
+    }
+};
+export {utils_mixin, chkPattern2};

frontend/src/modules/riskMgt/views/All.vue

@@ -1,135 +1,133 @@
 <template>
 
-		<div class="contents">
+  <div class="contents">
 
-      <div class="contents_wrap">
-        <div class="top_wrap">
-          <h3 class="title">웹발송 차단내역</h3>
-          <p class="breadcrumb">리스크관리 &gt; 차단 내역</p>
-        </div>
-        <form autocomplete="off" class="search_form">
-          <div class="search_wrap">
-          <label for="right" class="label">발송일</label>
-						<div class="group">
-							<div class="input_box cal one">
-                <vuejs-datepicker
-                      :language="ko"
-                      :format="customFormatter"
-                      v-model="startDate"
-                      @selected="selectedStartDate(0)"
-                  ></vuejs-datepicker>
-								<!-- <input class="" type="text" id=""
-                 placeholder="2022-10-12"
-                  v-model="grid.params.startDt"
-                   @click="openStartPicker = true" />
-                <div v-show="openStartPicker === true">
-                <calendar ref="calendar"/> -->
-                <!-- </div> -->
-              </div>
-							<button type="button" class="button grey btn-a" @click="todayDate">오늘</button>
-							<div class="select_box id">
-									<label for="right" class="label">차단사유</label>
-									<select name="" id="" v-model="blckRsnCd">
-										<option value="" selected>전체</option>
-										<option value="01">일반</option>
-										<option value="02">대출</option>
-										<option value="03">의약품</option>
-										<option value="04">도박</option>
-										<option value="05">스미싱</option>
-										<option value="06">기타</option>
-									</select>
-							</div>
-							<div class="select_box">
-									<label for="right" class="label">차단구분</label>
-									<select name="" id="" v-model="blckTpCd">
-										<option value="" selected>전체</option>
-										<option value="01">발신번호차단</option>
-										<option value="02">메시지차단</option>
-										<option value="03">080수신번호차단</option>
-									</select>
-							</div>
-						</div>
-						<div class="group">
-							<div class="input_box">
-								<label for="right" class="label">발신번호</label>
-								<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.sndrno" v-on:keyup="onlyNum" @input="onlyNum" maxlength="12">
-							</div>
-							<div class="input_box">
-								<label for="right" class="label">수신번호</label>
-								<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.rcvno" v-on:keyup="onlyNum" @input="onlyNum" maxlength="12">
-							</div>
-							<div class="select_box">
-								<label for="right" class="label">상세검색</label>
-								<select name="" id="" v-model="searchType1">
-										<option value="01" selected>고객사명</option>
-										<option value="02">사업자번호</option>
-										<option value="03">발송ID</option>
-									</select>
-							</div>
-							<div class="input_box">
-								<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText1">
-							</div>
-							<button type="button" class="button grey" @click="search">조회</button>
-						</div>
-					</div>
-        </form>
-        <div class="info">
-          <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
-						<div class="select_box NumberSe">
-							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
-								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>								
-							</select>
-					    </div>					
-					</div>
-        </div>
-        <div class="table">
-					<custom-grid
-          ref="table"
-           :totalItems="'totalItems'"
-           :url="grid.url"
-           :pagePerRows="grid.pagePerRows"
-           :initialRequest="grid.pagination"
-           :pagination="grid.pagination"
-           :isCheckbox="grid.isCheckbox"
-           :columns="grid.columns"
-           :noDataStr="grid.noDataStr"
-           :addCls="grid.addCls"
-           :header="grid.headder">
-          </custom-grid>
-				</div>
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">웹발송 차단내역</h3>
+        <p class="breadcrumb">리스크관리 &gt; 차단 내역</p>
+      </div>
+        <div class="search_wrap">
+          <label for="right" class="label">발송일</label>
+          <div class="group">
+            <div class="input_box cal one">
+              <vuejs-datepicker
+                  :language="ko"
+                  :format="customFormatter"
+                  v-model="startDate"
+                  @selected="selectedStartDate(0)"
+              ></vuejs-datepicker>
+            </div>
+            <button type="button" class="button grey btn-a" @click="todayDate">오늘</button>
+            <div class="select_box id">
+              <label for="right" class="label">차단사유</label>
+              <select name="" id="" v-model="blckRsnCd">
+                <option value="" selected>전체</option>
+                <option value="01">일반</option>
+                <option value="02">대출</option>
+                <option value="03">의약품</option>
+                <option value="04">도박</option>
+                <option value="05">스미싱</option>
+                <option value="06">기타</option>
+              </select>
+            </div>
+            <div class="select_box">
+              <label for="right" class="label">차단구분</label>
+              <select name="" id="" v-model="blckTpCd">
+                <option value="" selected>전체</option>
+                <option value="01">발신번호차단</option>
+                <option value="02">메시지차단</option>
+                <option value="03">080수신번호차단</option>
+              </select>
+            </div>
+          </div>
+          <div class="group">
+            <div class="input_box">
+              <label for="right" class="label">발신번호</label>
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model.trim="grid.params.sndrno"
+                     @keypress="onlyNum" @input="onlyNum" maxlength="11">
+            </div>
+            <div class="input_box">
+              <label for="right" class="label">수신번호</label>
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model.trim="grid.params.rcvno"
+                     @keypress="onlyNum" @input="onlyNum" maxlength="11">
+            </div>
+            <div class="select_box">
+              <label for="right" class="label">상세검색</label>
+              <select name="" id="" v-model="searchType1">
+                <option value="01" selected>고객사명</option>
+                <option value="02">사업자번호</option>
+                <option value="03">발송ID</option>
+              </select>
+            </div>
+            <div class="input_box">
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력"
+                     v-model.trim="grid.params.searchText1" maxlength="100">
+            </div>
+            <button type="button" class="button grey" @click="search">조회</button>
+          </div>
+        </div>
+      <div class="info">
+        <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
+          <div class="select_box NumberSe">
+            <select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{
+                  option.text
+                }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="table">
+        <custom-grid
+            ref="table"
+            :totalItems="'totalItems'"
+            :url="grid.url"
+            :pagePerRows="grid.pagePerRows"
+            :initialRequest="grid.pagination"
+            :pagination="grid.pagination"
+            :isCheckbox="grid.isCheckbox"
+            :columns="grid.columns"
+            :noDataStr="grid.noDataStr"
+            :addCls="grid.addCls"
+            :header="grid.headder">
+        </custom-grid>
       </div>
-<common-modal ref="commmonModal"></common-modal>
     </div>
+    <common-modal ref="commmonModal"></common-modal>
+  </div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
 import moment from 'moment';
 import commonModal from "@/components/modal/commonModal";
-import { utils_mixin, chkPattern2 } from '../service/mixins';
+import {utils_mixin, chkPattern2} from '../service/mixins';
 
 //import api from '../service/api';
 class CustomATagRenderer {
-    constructor(props) {
-        this.props = props;
-        const el = document.createElement('a');
-        el.href = 'javascript:void(0);';
-        el.className = 'btn_text';
-        el.innerText= String(props.colValue)
-        this.el = el;
-    }
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText = String(props.colValue)
+    this.el = el;
+  }
 
-    getElement() {
-        return this.el;
-    }
+  getElement() {
+    return this.el;
+  }
 
-    addEvent(selEl) {
-        selEl.addEventListener("click", () => {
-            const { callback } = this.props["cgrido" + this.props.colName].options;
-            callback(this.props);
-        });
-    }
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const {callback} = this.props["cgrido" + this.props.colName].options;
+      callback(this.props);
+    });
+  }
 }
+
 export default {
   name: 'intrcpList',
   mixins: [utils_mixin, chkPattern2],
@@ -142,18 +140,18 @@ export default {
       periodDay: 7,
       sDateDiv: 'day',
       startDate: new Date(),
-      endDate: new Date(),     
+      endDate: new Date(),
       options: [
-        { text: '20', value: 20},
-        { text: '50', value: 50},
-        { text: '100', value: 100}
+        {text: '20', value: 20},
+        {text: '50', value: 50},
+        {text: '100', value: 100}
       ],
       statType: [],
       userType: [],
-      blckRsnCd:'',
-      blckTpCd:'',
-      searchType1:'01',
-      row:{},
+      blckRsnCd: '',
+      blckTpCd: '',
+      searchType1: '01',
+      row: {},
       grid: {
         url: '/api/v1/bo/riskMgt/web/intrcpList',
         perPage: 20,
@@ -164,36 +162,38 @@ export default {
         addCls: 'box_OFvis',
         header: [
           [
-            { header: 'NO', childNames: [] },
-            { header: '차단구분', childNames: [] },
-            { header: '발송ID', childNames: [] },
-            { header: '발신번호', childNames: [] },
-            { header: '고객사명', childNames: [] },
-            { header: '사업자번호', childNames: [] },
-            { header: '수신번호', childNames: [] },
-            { header: '차단사유', childNames: [] },
-            { header: '발송일자', childNames: [] }
+            {header: 'NO', childNames: []},
+            {header: '차단구분', childNames: []},
+            {header: '발송ID', childNames: []},
+            {header: '발신번호', childNames: []},
+            {header: '고객사명', childNames: []},
+            {header: '사업자번호', childNames: []},
+            {header: '수신번호', childNames: []},
+            {header: '차단사유', childNames: []},
+            {header: '발송일자', childNames: []}
           ]
         ],
 
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: '5%' },
-          { name: 'blckTpCd', header: '차단구분', align: 'center', width: '11%' },
-          { name: 'userId', header: '발송ID', align: 'center', width: '11%'},
-          { name: 'sndrno', header: '발신번호', align: 'center', width: '11%'},
-          { name: 'custNm', header: '고객사명', align: 'center', width: '11%', renderer: {
-            type: CustomATagRenderer
-            , options: {
-              callback: this.custDetail,
+        columns: [
+          {name: 'no', header: 'NO', align: 'center', width: '5%'},
+          {name: 'blckTpCd', header: '차단구분', align: 'center', width: '11%'},
+          {name: 'userId', header: '발송ID', align: 'center', width: '11%'},
+          {name: 'sndrno', header: '발신번호', align: 'center', width: '11%'},
+          {
+            name: 'custNm', header: '고객사명', align: 'center', width: '11%', renderer: {
+              type: CustomATagRenderer
+              , options: {
+                callback: this.custDetail,
+              }
             }
-          }},
-          { name: 'bizrno', header: '사업자번호', align: 'center', width: '11%'},
-          { name: 'rcvno', header: '수신번호', align: 'center', width: '11%' },
-          { name: 'blckRsnCd', header: '차단사유', align: 'center', width: '7%' },
-          { name: 'blckDt', header: '발송일자', align: 'center', width: '11%' },
+          },
+          {name: 'bizrno', header: '사업자번호', align: 'center', width: '11%'},
+          {name: 'rcvno', header: '수신번호', align: 'center', width: '11%'},
+          {name: 'blckRsnCd', header: '차단사유', align: 'center', width: '7%'},
+          {name: 'blckDt', header: '발송일자', align: 'center', width: '11%'},
 
         ],
-        noDataStr: '검색 결과가 없습니다.',        
+        noDataStr: '검색 결과가 없습니다.',
         params: {
           blckDt: '',
           blckRsnCd: '',
@@ -205,31 +205,31 @@ export default {
           startDt: new Date(+new Date() + 3240 * 10000).toISOString().split("T")[0],
         },
         excelHeader: []
-      }    
+      }
     };
-  },  
+  },
   components: {
     customGrid: customGrid,
     commonModal,
     vuejsDatepicker,
   },
   destroyed() {
-      this.$store.commit('searchcondition/updateSearchCondition', {
-        page: 1,
-        perPage: 20,
-        params: {
-          blckDt: '',
-          blckRsnCd: '',
-          blckTpCd: '',
-          sndrno: '',
-          rcvno: '',
-          searchType1: '',
-          searchText1: ''
-        }
-      });
-      this.startDate = '';
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: 1,
+      perPage: 20,
+      params: {
+        blckDt: '',
+        blckRsnCd: '',
+        blckTpCd: '',
+        sndrno: '',
+        rcvno: '',
+        searchType1: '',
+        searchText1: ''
+      }
+    });
+    this.startDate = '';
   },
-  created(){
+  created() {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
     this.setPeriodDay(0);
   },
@@ -238,7 +238,7 @@ export default {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
 
     let isKeep = false;
-    if(getCondition) {
+    if (getCondition) {
       this.grid.pagePerRows = getCondition.perPage;
       this.grid.params = getCondition.params;
       page = getCondition.page;
@@ -247,7 +247,7 @@ export default {
     this.search(isKeep);
   },
   methods: {
-    search: function(isKeep) {
+    search: function (isKeep) {
       console.log(this.grid.params);
       this.grid.params.blckDt = moment(this.startDate).format('YYYYMMDD');
       this.grid.params.blckTpCd = this.blckTpCd
@@ -256,12 +256,12 @@ export default {
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
-    sendStoreData: function() {
+    sendStoreData: function () {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP);
       this.$store.commit('searchcondition/updateSearchCondition', {
-        page: getP._currentPage,        
-		    perPage: this.perPageCnt,        
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
         params: this.grid.params
       });
 
@@ -277,10 +277,10 @@ export default {
 
       this.closeDate('start');
     },
-    selectedStartDate(day) {      
+    selectedStartDate(day) {
       if (day != undefined && day != null) {
         this.periodDay = day;
-      }     
+      }
       console.log(this.startDate);
     },
     selectedEndDate(day) {
@@ -290,11 +290,11 @@ export default {
     },
     closeDate(type) {
       if (type != undefined && type != null) {
-         
+
       }
       console.log(this.startDate);
     },
-    customFormatter: function(date) {
+    customFormatter: function (date) {
       if (this.sDateDiv == 'month') {
         return moment(date).format('YYYY-MM');
       } else if (this.sDateDiv == 'year') {
@@ -307,13 +307,13 @@ export default {
     custDetail(props) {
       //this.row.custNm = props.serviceId;
       this.row.serviceId = props.serviceId;
-      this.$router.push({ name: 'subsDetail', params: this.row });
+      this.$router.push({name: 'subsDetail', params: this.row});
     },
-    calendarCalbackFnc(year, month, day){
+    calendarCalbackFnc(year, month, day) {
 
-      if(this.openStartPicker){
-        this.startDate= year +''+ month +''+ day
-        if(Number(this.endDate) < Number(this.startDate) && this.endDate !== 0){
+      if (this.openStartPicker) {
+        this.startDate = year + '' + month + '' + day
+        if (Number(this.endDate) < Number(this.startDate) && this.endDate !== 0) {
           this.row.title = '청약고객관리';
           this.row.msg1 = '조회 시작일이 종료일보다 큽니다.';
           this.$refs.commmonModal.alertModalOpen(this.row);
@@ -323,9 +323,9 @@ export default {
         this.grid.params.startDt = year + '-' + month + '-' + day
         this.openStartPicker = false
       }
-      if(this.openEndPicker){
-        this.endDate=year +''+ month +''+ day
-        if(Number(this.endDate) < Number(this.startDate) && this.startDate !== 0){
+      if (this.openEndPicker) {
+        this.endDate = year + '' + month + '' + day
+        if (Number(this.endDate) < Number(this.startDate) && this.startDate !== 0) {
           this.row.title = '청약고객관리';
           this.row.msg1 = '조회 종료일이 시작일보다 작습니다.';
           this.$refs.commmonModal.alertModalOpen(this.row);
@@ -341,16 +341,16 @@ export default {
     }
   },
   beforeRouteLeave(to, from, next) {
-	
-	const getP = this.$refs.table.getPagination();
-	console.log("==========getP : " + getP._currentPage);
-	this.$store.commit('searchcondition/updateSearchCondition', {
-	  page: getP._currentPage,        
-	  perPage: this.perPageCnt,        
-	  params: this.grid.params
-	});  
-	// 라우트 하기전 실행 
-	next();
+
+    const getP = this.$refs.table.getPagination();
+    console.log("==========getP : " + getP._currentPage);
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: getP._currentPage,
+      perPage: this.perPageCnt,
+      params: this.grid.params
+    });
+    // 라우트 하기전 실행
+    next();
   }
 };
 </script>

frontend/src/modules/riskMgt/views/IntrcpList.vue

@@ -1,90 +1,93 @@
 <template>
- 
-		<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">발신번호 차단</h3>
-					<p class="breadcrumb">리스크관리 &gt; 발신번호 차단</p>
-				</div>
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="group">
-							<div class="input_box">
-								<label for="regId" class="label">등록자</label>
-								<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.regId" v-on:keydown.enter.prevent="search" v-on:keyup="onlyEng" @input="onlyEng" maxlength="20" />
-							</div>
-							<div class="select_box">
-								<label for="blckRsnCd" class="label">차단사유</label>
-								<select name="" id="blckRsnCd" v-model="blckRsnCd" @keyup="search">
-									<option value="" selected>전체</option>
-									<option value="01">일반</option>
-									<option value="02">대출</option>
-									<option value="03">의약품</option>
-									<option value="04">도박</option>
-									<option value="05">스미싱</option>
-									<option value="06">기타</option>
-								</select>
-							</div>
-						</div>
-						<div class="group">
-							<div class="select_box">
-								<label for="right" class="label">차단여부</label>
-								<select name="" id="" v-model="blckYn">
-									<option value="" selected>전체</option>
-									<option value="Y">차단</option>
-									<option value="N">해제</option>
-								</select>
-							</div>
-							<div class="select_box">
-								<label for="right" class="label">발송타입</label>
-								<select name="" id="" v-model="sndblckTpCd">
-									<option value="" selected>전체</option>
-									<option value="01">공용</option>
-									<option value="02">문자</option>
-									<option value="03">RCS</option>
-								</select>
-							</div>
-							<div class="input_box">
-								<label for="right" class="label">발신번호</label>
-                    <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.blckSndrno">
-						    </div>
-							<button type="button" class="button grey" @click="search">조회</button>
-						</div>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
-						<div class="select_box NumberSe">
-							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
-								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>								
-							</select>
-					    </div>					
-					</div>
-					<div class="button_group">
-						<button type="button" class="button blue add" @click="ModalOpen()">신규등록</button>
-					</div>
-				</div>
-				   
-            <div class="table">    
-                    <custom-grid
-                        ref="table"
-                        :totalItems="'totalItems'"
-                        :url="grid.url"
-                        :pagePerRows="grid.pagePerRows"
-                        :initialRequest="grid.initialRequest"
-                        :pagination="grid.pagination"
-                        :isCheckbox="grid.isCheckbox"
-                        :columns="grid.columns"
-                        :noDataStr="grid.noDataStr"
-                        :addCls="grid.addCls"
-                        :header="grid.headder"        
-                    ></custom-grid>
-            </div>
-            <insert-intrcp-pop ref="insertIntrcpPop"> </insert-intrcp-pop>
-            <intrcp-detail-popup ref="intrcpDetailPopup"></intrcp-detail-popup>
-            <common-modal ref="commonModal"></common-modal>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">발신번호 차단</h3>
+        <p class="breadcrumb">리스크관리 &gt; 발신번호 차단</p>
       </div>
-		</div>
+      <div class="search_wrap">
+        <div class="group">
+          <div class="input_box">
+            <label for="regId" class="label">등록자</label>
+            <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model.trim="grid.params.regId"
+                   v-on:keydown.enter.prevent="search" v-on:keyup="onlyEng" @input="onlyEng" maxlength="20"/>
+          </div>
+          <div class="select_box">
+            <label for="blckRsnCd" class="label">차단사유</label>
+            <select name="" id="blckRsnCd" v-model="blckRsnCd" @keyup="search">
+              <option value="" selected>전체</option>
+              <option value="01">일반</option>
+              <option value="02">대출</option>
+              <option value="03">의약품</option>
+              <option value="04">도박</option>
+              <option value="05">스미싱</option>
+              <option value="06">기타</option>
+            </select>
+          </div>
+        </div>
+        <div class="group">
+          <div class="select_box">
+            <label for="right" class="label">차단여부</label>
+            <select name="" id="" v-model="blckYn">
+              <option value="" selected>전체</option>
+              <option value="Y">차단</option>
+              <option value="N">해제</option>
+            </select>
+          </div>
+          <div class="select_box">
+            <label for="right" class="label">발송타입</label>
+            <select name="" id="" v-model="sndblckTpCd">
+              <option value="" selected>전체</option>
+              <option value="01">공용</option>
+              <option value="02">문자</option>
+              <option value="03">RCS</option>
+            </select>
+          </div>
+          <div class="input_box">
+            <label for="right" class="label">발신번호</label>
+            <input class="search-box" type="text" id="search" placeholder="검색어 입력"
+                   v-model.trim="grid.params.blckSndrno">
+          </div>
+          <button type="button" class="button grey" @click="search">조회</button>
+        </div>
+      </div>
+      <div class="info">
+        <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
+          <div class="select_box NumberSe">
+            <select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{
+                  option.text
+                }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <div class="button_group">
+          <button type="button" class="button blue add" @click="ModalOpen()">신규등록</button>
+        </div>
+      </div>
+
+      <div class="table">
+        <custom-grid
+            ref="table"
+            :totalItems="'totalItems'"
+            :url="grid.url"
+            :pagePerRows="grid.pagePerRows"
+            :initialRequest="grid.initialRequest"
+            :pagination="grid.pagination"
+            :isCheckbox="grid.isCheckbox"
+            :columns="grid.columns"
+            :noDataStr="grid.noDataStr"
+            :addCls="grid.addCls"
+            :header="grid.headder"
+        ></custom-grid>
+      </div>
+    </div>
+    <insert-intrcp-pop ref="insertIntrcpPop"></insert-intrcp-pop>
+    <intrcp-detail-popup ref="intrcpDetailPopup"></intrcp-detail-popup>
+    <common-modal ref="commonModal"></common-modal>
+  </div>
 </template>
 
 <script>
@@ -93,30 +96,29 @@ import api from '@/service/api.js';
 import intrcpDetailPopup from '../components/IntrcpDetailPopup';
 import insertIntrcpPop from '../components/InsertIntrcpPop';
 import commonModal from "@/components/modal/commonModal";
-import { utils_mixin, chkPattern2 } from '../service/mixins';
-//import api from '../service/api';
+import {utils_mixin, chkPattern2} from '../service/mixins';
 
 class CustomATagRenderer {
-    constructor(props) {
-        this.props = props;
-        const el = document.createElement('a');
-        el.href = 'javascript:void(0);';
-        el.className = 'btn_text';
-        el.innerText= String(props.colValue)
-        this.el = el;
-    }
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText = String(props.colValue)
+    this.el = el;
+  }
 
-    getElement() {
-        return this.el;
-    }
+  getElement() {
+    return this.el;
+  }
 
-    addEvent(selEl) {
-        selEl.addEventListener("click", () => {
-            const { callback } = this.props["cgrido" + this.props.colName].options;
-            console.log(this.props);
-            callback(this.props);
-        });
-    }
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const {callback} = this.props["cgrido" + this.props.colName].options;
+      console.log(this.props);
+      callback(this.props);
+    });
+  }
 }
 
 export default {
@@ -126,13 +128,13 @@ export default {
     return {
       totalItems: 0,
       perPageCnt: 50,
-      blckRsnCd:'',
-      blckYn:'',
-      sndblckTpCd:'',
+      blckRsnCd: '',
+      blckYn: '',
+      sndblckTpCd: '',
       options: [
-        { text: '20', value: 20},
-        { text: '50', value: 50},
-        { text: '100', value: 100}
+        {text: '20', value: 20},
+        {text: '50', value: 50},
+        {text: '100', value: 100}
       ],
       grid: {
         url: '/api/v1/bo/riskMgt/sendNum/intrcpList',
@@ -144,29 +146,31 @@ export default {
         addCls: 'box_OFvis',
         header: [
           [
-            { header: 'NO', childNames: [] },
-            { header: '발신번호', childNames: [] },
-            { header: '차단여부', childNames: [] },
-            { header: '발송타입', childNames: [] },
-            { header: '최근수정일', childNames: [] },
-            { header: '차단사유', childNames: [] },
-            { header: '등록자', childNames: [] }
+            {header: 'NO', childNames: []},
+            {header: '발신번호', childNames: []},
+            {header: '차단여부', childNames: []},
+            {header: '발송타입', childNames: []},
+            {header: '최근수정일', childNames: []},
+            {header: '차단사유', childNames: []},
+            {header: '등록자', childNames: []}
           ]
         ],
 
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: '5%' },
-          { name: 'blcksndrno', header: '발신번호', align: 'center', width: '25%', 
-          renderer: { type: CustomATagRenderer, options: { callback: this.inDetailPop} } },
-          { name: 'blckYn', header: '차단여부', align: 'center', width: '15%'},
-          { name: 'sndblckTpCd', header: '발송타입', align: 'center', width: '15%', hidden: true},
-          { name: 'sndblckTpNm', header: '발송타입', align: 'center', width: '15%'},
-          { name: 'lastChgDt', header: '최근수정일', align: 'center', width: '15%'},      
-          { name: 'blckRsnCd', header: '차단사유', width: '15%', cls: 'td_line', hidden: true },
-          { name: 'blckRsnNm', header: '차단사유', width: '15%', cls: 'td_line' },
-          { name: 'regId', header: '등록자', width: '15%' }
+        columns: [
+          {name: 'no', header: 'NO', align: 'center', width: '5%'},
+          {
+            name: 'blcksndrno', header: '발신번호', align: 'center', width: '25%',
+            renderer: {type: CustomATagRenderer, options: {callback: this.inDetailPop}}
+          },
+          {name: 'blckYn', header: '차단여부', align: 'center', width: '15%'},
+          {name: 'sndblckTpCd', header: '발송타입', align: 'center', width: '15%', hidden: true},
+          {name: 'sndblckTpNm', header: '발송타입', align: 'center', width: '15%'},
+          {name: 'lastChgDt', header: '최근수정일', align: 'center', width: '15%'},
+          {name: 'blckRsnCd', header: '차단사유', width: '15%', cls: 'td_line', hidden: true},
+          {name: 'blckRsnNm', header: '차단사유', width: '15%', cls: 'td_line'},
+          {name: 'regId', header: '등록자', width: '15%'}
         ],
-        noDataStr: '검색 결과가 없습니다.',        
+        noDataStr: '검색 결과가 없습니다.',
         params: {
           regId: '',
           blckRsnCd: '',
@@ -177,9 +181,9 @@ export default {
           blckSndrno: ''
         },
         excelHeader: []
-      }    
+      }
     };
-  },  
+  },
   components: {
     customGrid: customGrid,
     intrcpDetailPopup,
@@ -189,9 +193,9 @@ export default {
   destroyed() {
     this.grid.params.blckSndrno = '';
     this.grid.params.regId = '';
-     
+
   },
-   created(){
+  created() {
     this.setCodeData();
     // this.formReset();
   },
@@ -200,7 +204,7 @@ export default {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
 
     let isKeep = false;
-    if(getCondition) {
+    if (getCondition) {
       this.grid.pagePerRows = getCondition.perPage;
       this.grid.params = getCondition.params;
       page = getCondition.page;
@@ -209,7 +213,7 @@ export default {
     this.search(isKeep);
   },
   methods: {
-    search: function(isKeep) {
+    search: function (isKeep) {
       console.log(this.grid.params);
       this.grid.params.blckRsnCd = this.blckRsnCd
       this.grid.params.blckYn = this.blckYn
@@ -219,37 +223,37 @@ export default {
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
-    changePerPage: function(){ 	// 페이지당 조회할 개수
+    changePerPage: function () { 	// 페이지당 조회할 개수
       this.grid.pagePerRows = this.perPageCnt;
       this.search(true);
     },
-    sendStoreData: function() {
+    sendStoreData: function () {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP._currentPage);
       this.$store.commit('searchcondition/updateSearchCondition', {
-        page: getP._currentPage,        
-        perPage: this.perPageCnt,        
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
         params: this.grid.params
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
-      console.log("getCondition : "+ getCondition.perPage);
+      console.log("getCondition : " + getCondition.perPage);
     },
     setCodeData() {
       // 상태 옵션 셋팅.
-      api.commCode({'grpCd' : 'SVCUSER_STTUS_CD'}).then(response => {
+      api.commCode({'grpCd': 'SVCUSER_STTUS_CD'}).then(response => {
         this.statType = response.data.data.list;
       });
       // 
-      api.commCode({'grpCd' : 'SVCUSER_TP_CD'}).then(response => {
+      api.commCode({'grpCd': 'SVCUSER_TP_CD'}).then(response => {
         this.userType = response.data.data.list;
       });
       //발송타입
-      api.commCode({'grpCd' : 'SNDBLCK_TP_CD'}).then(response => {
-            this.tpType = response.data.data.list;
-        });
+      api.commCode({'grpCd': 'SNDBLCK_TP_CD'}).then(response => {
+        this.tpType = response.data.data.list;
+      });
     },
-    ModalOpen: function(){      
+    ModalOpen: function () {
       this.$refs.insertIntrcpPop.ModalOpen();
     },
     inDetailPop(props) {
@@ -258,36 +262,36 @@ export default {
       this.$refs.intrcpDetailPopup.IntrcpDetailModalOpen(props);
     },
     // formReset(){
-		// 	var type= this.insertType;
-		// 	Object.assign(this.$data, this.$options.data());
-		// 	this.insertType = type;
-		// },
+    // 	var type= this.insertType;
+    // 	Object.assign(this.$data, this.$options.data());
+    // 	this.insertType = type;
+    // },
 
-    alertInsert(props){
+    alertInsert(props) {
       console.log(props);
       this.$refs.commonModal.alertModalOpen(props);
     },
-    confirmInsert(props){
+    confirmInsert(props) {
       this.$refs.commonModal.confirmModalOpen(props);
     },
-    confirmCalbackFnc: function(props){
-		// if(props.result){
-		// 	// this.doInsert(props.result);
-		// }
-	  },
-    
+    confirmCalbackFnc: function (props) {
+      // if(props.result){
+      // 	// this.doInsert(props.result);
+      // }
+    },
+
   },
   beforeRouteLeave(to, from, next) {
-	
-	const getP = this.$refs.table.getPagination();
-	console.log("==========getP : " + getP._currentPage);
-	this.$store.commit('searchcondition/updateSearchCondition', {
-	  page: getP._currentPage,        
-	  perPage: this.perPageCnt,        
-	  params: this.grid.params
-	});  
-	// 라우트 하기전 실행 
-	next();
+
+    const getP = this.$refs.table.getPagination();
+    console.log("==========getP : " + getP._currentPage);
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: getP._currentPage,
+      perPage: this.perPageCnt,
+      params: this.grid.params
+    });
+    // 라우트 하기전 실행
+    next();
   }
 };
 </script>

frontend/src/modules/riskMgt/views/Msg.vue

@@ -1,68 +1,73 @@
 <template>
- 
-		<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">메시지 차단</h3>
-					<p class="breadcrumb">리스크관리 &gt; 메시지 차단</p>
-				</div>
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="input_box">
-							<label for="regId" class="label">등록자</label>
-							<input class="search-box" type="text" id="regId" placeholder="검색어 입력"  v-model="grid.params.regId" v-on:keydown.enter.prevent="search" v-on:keyup="onlyEng" @input="onlyEng" maxlength="20"/>
-						</div>
-						<div class="select_box">
-								<label for="blckRsnCd" class="label">차단사유</label>
-								<select name="" id="blckRsnCd" v-model="blckRsnCd" @keyup="search">
-									<option value="" selected>전체</option>
-									<option value="01">일반</option>
-									<option value="02">대출</option>
-									<option value="03">의약품</option>
-									<option value="04">도박</option>
-									<option value="05">스미싱</option>
-									<option value="06">기타</option>
-								</select>
-						</div>
-						<div class="input_box">
-							<label for="word" class="label">차단메시지</label>
-							<input class="search-box" type="text" id="word" placeholder="검색어 입력" v-model="grid.params.word" v-on:keydown.enter.prevent="search" />
-						</div>
-						<button type="button" class="button grey" @click="search">조회</button>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">총 <span> {{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}} </span>건
-						<div class="select_box NumberSe">
-							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
-								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>								
-							</select>
-					    </div>					
-					</div>
-					<div class="button_group">
-						<button type="button" class="button blue add" @click="ModalOpen()">신규등록</button>
-					</div>
-				</div>
-            <div class="table">    
-                    <custom-grid
-                        ref="table"
-                        :totalItems="'totalItems'"
-                        :url="grid.url"
-                        :pagePerRows="grid.pagePerRows"
-                        :initialRequest="grid.initialRequest"
-                        :pagination="grid.pagination"
-                        :isCheckbox="grid.isCheckbox"
-                        :columns="grid.columns"
-                        :noDataStr="grid.noDataStr"
-                        :addCls="grid.addCls"
-                        :header="grid.headder"        
-                    ></custom-grid>
-            </div>
-			</div>
-      <insert-msg-pop ref="InsertMsgPop"></insert-msg-pop>
-      <intrcp-msg-detail ref="IntrcpMsgDetail"></intrcp-msg-detail>
-      <common-modal ref="commonModal"></common-modal>
-		</div>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">메시지 차단</h3>
+        <p class="breadcrumb">리스크관리 &gt; 메시지 차단</p>
+      </div>
+      <form autocomplete="off" class="search_form">
+        <div class="search_wrap">
+          <div class="input_box">
+            <label for="regId" class="label">등록자</label>
+            <input class="search-box" type="text" id="regId" placeholder="검색어 입력" v-model.trim="grid.params.regId"
+                   v-on:keydown.enter.prevent="search" v-on:keyup="onlyEng" @input="onlyEng" maxlength="20"/>
+          </div>
+          <div class="select_box">
+            <label for="blckRsnCd" class="label">차단사유</label>
+            <select name="" id="blckRsnCd" v-model="blckRsnCd" @keyup="search">
+              <option value="" selected>전체</option>
+              <option value="01">일반</option>
+              <option value="02">대출</option>
+              <option value="03">의약품</option>
+              <option value="04">도박</option>
+              <option value="05">스미싱</option>
+              <option value="06">기타</option>
+            </select>
+          </div>
+          <div class="input_box">
+            <label for="word" class="label">차단메시지</label>
+            <input class="search-box" type="text" id="word" placeholder="검색어 입력" v-model.trim="grid.params.word"
+                   v-on:keydown.enter.prevent="search" maxlength="50"/>
+          </div>
+          <button type="button" class="button grey" @click="search">조회</button>
+        </div>
+      </form>
+      <div class="info">
+        <div class="count">총 <span> {{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }} </span>건
+          <div class="select_box NumberSe">
+            <select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{
+                  option.text
+                }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <div class="button_group">
+          <button type="button" class="button blue add" @click="ModalOpen()">신규등록</button>
+        </div>
+      </div>
+      <div class="table">
+        <custom-grid
+            ref="table"
+            :totalItems="'totalItems'"
+            :url="grid.url"
+            :pagePerRows="grid.pagePerRows"
+            :initialRequest="grid.initialRequest"
+            :pagination="grid.pagination"
+            :isCheckbox="grid.isCheckbox"
+            :columns="grid.columns"
+            :noDataStr="grid.noDataStr"
+            :addCls="grid.addCls"
+            :header="grid.headder"
+        ></custom-grid>
+      </div>
+    </div>
+    <insert-msg-pop ref="InsertMsgPop"></insert-msg-pop>
+    <intrcp-msg-detail ref="IntrcpMsgDetail"></intrcp-msg-detail>
+    <common-modal ref="commonModal"></common-modal>
+  </div>
 </template>
 
 <script>
@@ -70,29 +75,30 @@ import customGrid from '@/components/CustomGrid';
 import InsertMsgPop from '../components/InsertMsgPop';
 import IntrcpMsgDetail from '../components/IntrcpMsgDetail';
 import commonModal from "@/components/modal/commonModal";
-import { utils_mixin, chkPattern2 } from '../service/mixins';
-//import api from '../service/api';
+import {utils_mixin, chkPattern2} from '../service/mixins';
+
 class CustomATagRenderer {
-    constructor(props) {
-        this.props = props;
-        const el = document.createElement('a');
-        el.href = 'javascript:void(0);';
-        el.className = 'btn_text';
-        el.innerText= String(props.colValue)
-        this.el = el;
-    }
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText = String(props.colValue)
+    this.el = el;
+  }
 
-    getElement() {
-        return this.el;
-    }
+  getElement() {
+    return this.el;
+  }
 
-    addEvent(selEl) {
-        selEl.addEventListener("click", () => {
-            const { callback } = this.props["cgrido" + this.props.colName].options;
-            callback(this.props);
-        });
-    }
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const {callback} = this.props["cgrido" + this.props.colName].options;
+      callback(this.props);
+    });
+  }
 }
+
 export default {
   name: 'intrcpList',
   mixins: [utils_mixin, chkPattern2],
@@ -102,11 +108,11 @@ export default {
       // 테이블 리스트 데이터
       perPageCnt: 50,
       options: [
-        { text: '20', value: 20},
-        { text: '50', value: 50},
-        { text: '100', value: 100}
+        {text: '20', value: 20},
+        {text: '50', value: 50},
+        {text: '100', value: 100}
       ],
-      blckRsnCd:'',
+      blckRsnCd: '',
       grid: {
         url: '/api/v1/bo/riskMgt/msg/intrcpList',
         perPageRows: 20,
@@ -118,27 +124,29 @@ export default {
 
         header: [
           [
-            { header: 'NO', childNames: [] },
-            { header: '일련번호', align: 'center', childNames: [] },
-            { header: '차단메시지', childNames: [] },
-            { header: '차단여부', childNames: [] },
-            { header: '마지막 수정일', childNames: [] },
-            { header: '차단사유', childNames: [] },
-            { header: '등록자', childNames: [] }
+            {header: 'NO', childNames: []},
+            {header: '일련번호', align: 'center', childNames: []},
+            {header: '차단메시지', childNames: []},
+            {header: '차단여부', childNames: []},
+            {header: '마지막 수정일', childNames: []},
+            {header: '차단사유', childNames: []},
+            {header: '등록자', childNames: []}
           ]
         ],
 
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: '5%' },
-          { name: 'seqNo', header: '일련번호', align: 'center', width: '19%', hidden: true},
-          { name: 'word', header: '차단메시지', align: 'center', width: '19%',
-          renderer: {type: CustomATagRenderer, options: { callback: this.msgDetailPop}} },
-          { name: 'blckYn', header: '차단여부', align: 'center', width: '19%'},
-          { name: 'lastChgDt', header: '마지막 수정일', align: 'center', width: '19%'},
-          { name: 'blckRsnCd', header: '차단사유', align: 'center', width: '19%'},      
-          { name: 'regId', header: '등록자', width: '19%', cls: 'td_line' }
+        columns: [
+          {name: 'no', header: 'NO', align: 'center', width: '5%'},
+          {name: 'seqNo', header: '일련번호', align: 'center', width: '19%', hidden: true},
+          {
+            name: 'word', header: '차단메시지', align: 'center', width: '19%',
+            renderer: {type: CustomATagRenderer, options: {callback: this.msgDetailPop}}
+          },
+          {name: 'blckYn', header: '차단여부', align: 'center', width: '19%'},
+          {name: 'lastChgDt', header: '마지막 수정일', align: 'center', width: '19%'},
+          {name: 'blckRsnCd', header: '차단사유', align: 'center', width: '19%'},
+          {name: 'regId', header: '등록자', width: '19%', cls: 'td_line'}
         ],
-        noDataStr: '검색 결과가 없습니다.',        
+        noDataStr: '검색 결과가 없습니다.',
         params: {
           regId: '',
           blckRsnCd: '',
@@ -147,19 +155,19 @@ export default {
           blckYn: '',
         },
         excelHeader: []
-      }    
+      }
     };
-  },  
+  },
   components: {
     customGrid: customGrid,
     InsertMsgPop,
     IntrcpMsgDetail,
     commonModal,
-},
+  },
   destroyed() {
 
   },
-  created(){
+  created() {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
   },
   mounted() {
@@ -167,7 +175,7 @@ export default {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
 
     let isKeep = false;
-    if(getCondition) {
+    if (getCondition) {
       this.grid.pagePerRows = getCondition.perPage;
       this.grid.params = getCondition.params;
       page = getCondition.page;
@@ -176,7 +184,7 @@ export default {
     this.search(isKeep);
   },
   methods: {
-    search: function(isKeep) {
+    search: function (isKeep) {
       console.log(this.grid.params);
       this.grid.params.blckRsnCd = this.blckRsnCd;
 
@@ -184,45 +192,45 @@ export default {
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
-    changePerPage: function(){ 	// 페이지당 조회할 개수
+    changePerPage: function () { 	// 페이지당 조회할 개수
       this.grid.pagePerRows = this.perPageCnt;
       this.search(true);
     },
-    sendStoreData: function() {
+    sendStoreData: function () {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP);
       this.$store.commit('searchcondition/updateSearchCondition', {
-        page: getP._currentPage,        
-		    perPage: this.perPageCnt,        
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
         params: this.grid.params
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
       //console.log("getCondition : "+ getCondition.perPage);
     },
-        ModalOpen: function(target){      
+    ModalOpen: function (target) {
       this.$refs.InsertMsgPop.ModalOpen(target);
     },
-      msgDetailPop(props) {
-        // console.log(props);
-        this.$refs.IntrcpMsgDetail.IntrcpMsgDetailModalOpen(props);
-      }, 
-      msgAlertModalOpen(props){
-        this.$refs.commonModal.alertModalOpen(props);
-      }
+    msgDetailPop(props) {
+      // console.log(props);
+      this.$refs.IntrcpMsgDetail.IntrcpMsgDetailModalOpen(props);
+    },
+    msgAlertModalOpen(props) {
+      this.$refs.commonModal.alertModalOpen(props);
+    }
 
   },
   beforeRouteLeave(to, from, next) {
-	
-	const getP = this.$refs.table.getPagination();
-	console.log("==========getP : " + getP._currentPage);
-	this.$store.commit('searchcondition/updateSearchCondition', {
-	  page: getP._currentPage,        
-	  perPage: this.perPageCnt,        
-	  params: this.grid.params
-	});  
-	// 라우트 하기전 실행 
-	next();
+
+    const getP = this.$refs.table.getPagination();
+    console.log("==========getP : " + getP._currentPage);
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: getP._currentPage,
+      perPage: this.perPageCnt,
+      params: this.grid.params
+    });
+    // 라우트 하기전 실행
+    next();
   }
 };
 </script>

frontend/src/modules/riskMgt/views/ZezNum.vue

@@ -2,103 +2,113 @@
 
   <div class="contents">
 
-      <div class="contents_wrap">
-        <div class="top_wrap">
-          <h3 class="title">080 수신번호 차단</h3>
-          <p class="breadcrumb">리스크관리 &gt; 080 수신번호 차단</p>
-        </div>
-        <div class="search_form">
-          <div class="search_wrap">
-						<div class="input_box">
-							<label for="search" class="label">고객사</label>
-							<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.custNm" v-on:keyup="onlyName" @input="onlyName" maxlength="20"/>
-						</div>
-						<div class="input_box">
-							<label for="search" class="label">인증코드</label>
-							<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.authcd080" v-on:keyup="onlyNum" @input="onlyNum" maxlength="6"/>
-						</div>
-						<div class="input_box">
-							<label for="search" class="label">수신번호</label>
-							<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.rcvblckno" v-on:keyup="onlyNum" @input="onlyNum" maxlength="11"/>
-						</div>
-						<button type="button" class="button grey" @click="search">조회</button>
-					</div>
-        </div>
-        <div class="info">
-          <div class="count">총 <span> {{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }} </span>건
-						<div class="select_box NumberSe">
-							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
-								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
-							</select>
-					    </div>
-					</div>
-        </div>
-        <div class="table">
-					<custom-grid
-          ref="table"
-           :totalItems="'totalItems'"
-           :url="grid.url"
-           :pagePerRows="grid.pagePerRows"
-           :initialRequest="grid.pagination"
-           :pagination="grid.pagination"
-           :isCheckbox="grid.isCheckbox"
-           :columns="grid.columns"
-           :noDataStr="grid.noDataStr"
-           :addCls="grid.addCls"
-           :header="grid.headder">
-          </custom-grid>
-				</div>
-        <common-modal ref="commmonModal"></common-modal>
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">080 수신번호 차단</h3>
+        <p class="breadcrumb">리스크관리 &gt; 080 수신번호 차단</p>
       </div>
-
+      <div class="search_form">
+        <div class="search_wrap">
+          <div class="input_box">
+            <label for="search" class="label">고객사</label>
+            <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model.trim="grid.params.custNm"
+                   @keypress="onlyName" @input="onlyName" maxlength="20"/>
+          </div>
+          <div class="input_box">
+            <label for="search" class="label">인증코드</label>
+            <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model.trim="grid.params.authcd080"
+                   @keypress="onlyNum" @input="onlyNum" maxlength="6"/>
+          </div>
+          <div class="input_box">
+            <label for="search" class="label">수신번호</label>
+            <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model.trim="grid.params.rcvblckno"
+                   @keypress="onlyNum"
+                   @input="onlyNum" maxlength="11"/>
+          </div>
+          <button type="button" class="button grey" @click="search">조회</button>
+        </div>
+      </div>
+      <div class="info">
+        <div class="count">총 <span> {{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }} </span>건
+          <div class="select_box NumberSe">
+            <select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{
+                  option.text
+                }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="table">
+        <custom-grid
+            ref="table"
+            :totalItems="'totalItems'"
+            :url="grid.url"
+            :pagePerRows="grid.pagePerRows"
+            :initialRequest="grid.pagination"
+            :pagination="grid.pagination"
+            :isCheckbox="grid.isCheckbox"
+            :columns="grid.columns"
+            :noDataStr="grid.noDataStr"
+            :addCls="grid.addCls"
+            :header="grid.headder">
+        </custom-grid>
+      </div>
+      <common-modal ref="commmonModal"></common-modal>
     </div>
+
+  </div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
 import commonModal from "@/components/modal/commonModal";
-import { utils_mixin, chkPattern2 } from '../service/mixins';
+import {utils_mixin, chkPattern2} from '../service/mixins';
+
 //import api from '../service/api';
 class CustomATagRenderer {
-    constructor(props) {
-        this.props = props;
-        const el = document.createElement('a');
-        el.href = 'javascript:void(0);';
-        el.className = 'btn_text';
-        el.innerText= String(props.colValue)
-        this.el = el;
-    }
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText = String(props.colValue)
+    this.el = el;
+  }
 
-    getElement() {
-        return this.el;
-    }
+  getElement() {
+    return this.el;
+  }
 
-    addEvent(selEl) {
-        selEl.addEventListener("click", () => {
-            const { callback } = this.props["cgrido" + this.props.colName].options;
-            callback(this.props);
-        });
-    }
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const {callback} = this.props["cgrido" + this.props.colName].options;
+      callback(this.props);
+    });
+  }
 }
+
 class customBRegNo {
-    constructor(props) {
-        //this.props = props;
-        const el = document.createElement('td');
-        var bregNo = String(props.colValue);
-        el.innerText= bregNo;
-        if(bregNo.length == 10){
-        el.innerText= bregNo.substring(0,3)+'-'+bregNo.substring(3,5)+'-'+bregNo.substring(5,10)
-        }
-        this.el = el;
+  constructor(props) {
+    //this.props = props;
+    const el = document.createElement('td');
+    var bregNo = String(props.colValue);
+    el.innerText = bregNo;
+    if (bregNo.length == 10) {
+      el.innerText = bregNo.substring(0, 3) + '-' + bregNo.substring(3, 5) + '-' + bregNo.substring(5, 10)
     }
+    this.el = el;
+  }
 
-    getElement() {
-        return this.el;
-    }
+  getElement() {
+    return this.el;
+  }
 
-    addEvent(selEl) {
-    }
+  addEvent(selEl) {
+  }
 }
+
 export default {
   name: 'intrcpList',
   mixins: [utils_mixin, chkPattern2],
@@ -106,13 +116,13 @@ export default {
     return {
       totalItems: 0,
       userType: [],
-      row:{},
+      row: {},
       perPageCnt: 50,
       pagePerRows: 20,
       options: [
-        { text: '20', value: 20},
-        { text: '50', value: 50},
-        { text: '100', value: 100}
+        {text: '20', value: 20},
+        {text: '50', value: 50},
+        {text: '100', value: 100}
       ],
       grid: {
         url: '/api/v1/bo/riskMgt/zezNum/intrcpList',
@@ -122,34 +132,31 @@ export default {
         addCls: 'box_OFvis',
         header: [
           [
-            { header: 'NO', childNames: [] },
-            { header: '고객사', childNames: [] },
-            { header: '사업자번호', childNames: [] },
-            { header: '인증코드', childNames: [] },
-            { header: '수신번호', childNames: [] },
-            { header: '등록일', childNames: [] },
-            { header: '등록구분', childNames: [] }
+            {header: 'NO', childNames: []},
+            {header: '고객사', childNames: []},
+            {header: '사업자번호', childNames: []},
+            {header: '인증코드', childNames: []},
+            {header: '수신번호', childNames: []},
+            {header: '등록일', childNames: []},
+            {header: '등록구분', childNames: []}
           ]
         ],
 
         columns: [
-          { name: 'no', header: 'NO', align: 'center', width: '5%' },
-          { name: 'custNm', header: '고객사', align: 'center', width: '15%',  renderer: {
-            type: CustomATagRenderer
-            , options: {
-              callback: this.memberDetail,
-            }
-          } },
-          { name: 'bizrno', header: '사업자번호', align: 'center', width: '15%',
-            formatter: props => {
-              let result = props.bizrno.substring(0,3)+'-'+ props.bizrno.substring(3,5)+'-'+ props.bizrno.substring(5,10)
-              return result;
+          {name: 'no', header: 'NO', align: 'center', width: '5%'},
+          {
+            name: 'custNm', header: '고객사', align: 'center', width: '15%', renderer: {
+              type: CustomATagRenderer
+              , options: {
+                callback: this.memberDetail,
+              }
             }
           },
-          { name: 'authcd080', header: '인증코드', align: 'center', width: '15%'},
-          { name: 'rcvblckno', header: '수신번호', align: 'center', width: '15%'},
-          { name: 'regDt', header: '등록일', align: 'center', width: '20%'},
-          { name: 'regTpCd', header: '등록구분', width: '15%', cls: 'td_line' }
+          {name: 'bizrno', header: '사업자번호', align: 'center', width: '15%'},
+          {name: 'authcd080', header: '인증코드', align: 'center', width: '15%'},
+          {name: 'rcvblckno', header: '수신번호', align: 'center', width: '15%'},
+          {name: 'regDt', header: '등록일', align: 'center', width: '20%'},
+          {name: 'regTpCd', header: '등록구분', width: '15%', cls: 'td_line'}
         ],
         noDataStr: '검색 결과가 없습니다.',
         params: {
@@ -168,7 +175,7 @@ export default {
   destroyed() {
 
   },
-  created(){
+  created() {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
   },
   mounted() {
@@ -176,7 +183,7 @@ export default {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
 
     let isKeep = false;
-    if(getCondition) {
+    if (getCondition) {
       this.grid.pagePerRows = getCondition.perPage;
       this.grid.params = getCondition.params;
       page = getCondition.page;
@@ -185,17 +192,17 @@ export default {
     this.search(isKeep);
   },
   methods: {
-    search: function(isKeep) {
-      console.log('this.perPageCnt'+this.perPageCnt);
+    search: function (isKeep) {
+      console.log('this.perPageCnt' + this.perPageCnt);
       //console.log(this.grid.params);
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
-    changePerPage: function(){ 	// 페이지당 조회할 개수
+    changePerPage: function () { 	// 페이지당 조회할 개수
       this.grid.pagePerRows = this.perPageCnt;
       this.search(true);
     },
-    sendStoreData: function() {
+    sendStoreData: function () {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP);
       this.$store.commit('searchcondition/updateSearchCondition', {
@@ -211,20 +218,20 @@ export default {
     memberDetail(props) {
       console.log(props);
       this.row.serviceId = props.userId;
-        this.$router.push({ name: 'subsDetail', params: this.row});
+      this.$router.push({name: 'subsDetail', params: this.row});
     }
   },
   beforeRouteLeave(to, from, next) {
 
-	const getP = this.$refs.table.getPagination();
-	console.log("==========getP : " + getP._currentPage);
-	this.$store.commit('searchcondition/updateSearchCondition', {
-	  page: getP._currentPage,
-	  perPage: this.perPageCnt,
-	  params: this.grid.params
-	});
-	// 라우트 하기전 실행
-	next();
+    const getP = this.$refs.table.getPagination();
+    console.log("==========getP : " + getP._currentPage);
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: getP._currentPage,
+      perPage: this.perPageCnt,
+      params: this.grid.params
+    });
+    // 라우트 하기전 실행
+    next();
   }
 };
 </script>