hubez-admin/frontend/src/modules/sysMgt/components/AdminRegPop.vue

<template>
	<!-- <div class="wrap bg-wrap"> -->
	<div>
		<div class="dimmed modal20" @click="ModalClose();"></div>
		<div class="popup-wrap modal20">
			<!-- 관리자/유치채널 등록 -->
			<div class="popup modal20 popup_form">
				<div class="pop-head">
					<h3 class="pop-tit" v-if="insertType === 1">관리자 등록</h3>
					<h3 class="pop-tit" v-else>유치채널 사용자 등록</h3>
				</div>
<!--				<form autocomplete="off" ref="adminRegForm">-->
					<table>
						<tbody>
							<tr>
								<th>마당 ID</th>
								<td class="input_search">
									<input type="text" placeholder="아이디 입력" v-model.trim="madangId" ref="madangId">
									<button type="button" class="button grey" @click="searchMadangId()">조회</button>
								</td>
							</tr>
							<tr>
								<th>비밀번호</th>
								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd1" v-model.trim="userPwd1"></td>
							</tr>
							<tr>
								<th>비밀번호 확인</th>
								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd2" v-model.trim="userPwd2"></td>
							</tr>
							<tr>
								<th>이름</th>
								<td><input type="text" @keypress="onlyName" @input="onlyName" v-model.trim="userNm" ref="_userNm" required maxlength="40"></td>
							</tr>
							<tr>
								<th>휴대폰번호</th>
								<td><input type="number" placeholder="- 자 제외 숫자만 입력" v-model.trim="mdn" v-on:keyup="onlyNum" @input="onlyNum" minlength="10" maxlength="11" ref="_phone"></td>
							</tr>
							<tr>
								<th>이메일</th>
								<td><input type="email" v-model.trim="email" @keypress="onlyEmail" @input="onlyEmail" maxlength="20" ref="_email"></td>
							</tr>
							<tr v-if="insertType === 2">
								<th>코드</th>
								<td><input type="text" disabled ref="_code" v-model.trim="code"></td>
							</tr>
							<tr>
								<th>권한</th>
								<td v-if="insertType === 1">
									<div v:class="select_box">
										<select name="" id="right" v-model="auth" ref="_auth">
											<option value="">선택</option>
											<option v-for="(option, i) in authType" v-bind:value="option.autCd" v-bind:key="i">
												{{ option.autNm }}
											</option>
										</select>
									</div>
								</td>
								<td v-else><input type="text" disabled value="대리점"></td>
							</tr>
							<tr>
								<th class="center">상태</th>
								<td>
									<input type="radio" name="state" value="01" id="popup_radio1" v-model="stat">
									<label for="popup_radio1">사용</label>
									<input type="radio" name="state" value="02" id="popup_radio2" v-model="stat">
									<label for="popup_radio2">정지</label>
								</td>
							</tr>
						</tbody>
					</table>
<!--				</form>-->
				<div class="popup-btn2">
					<button class="btn-pcolor" @click="doInsert">저장</button>
					<button class="btn-default" @click="ModalClose();">취소</button>
				</div>
			</div>

			<search-id-popup ref="searchIdPopModal"> </search-id-popup>
      <common-modal ref="commmonModal"></common-modal>

		</div>
	</div>
</template>

<script>
import api from '@/service/api';
import sysMgtApi from "../service/sysMgtApi.js";
import { utils_mixin, chkPattern2 } from '../service/mixins';
import SearchIdPopup from '../components/SearchIdPopup.vue';
import lodash from "lodash";
import commonModal from "../components/commonModal";

export default {
	name: "adminRegPop",
	mixins: [utils_mixin, chkPattern2],
	watch:{
		stat(){
			console.log('watch : ', this.stat)
		}
	},
	data(){
        return{
			row: {},
			authType: [],
			insertType:0,
			madangId:'',
			name:'',
			mdn:'',
			email:'',
			auth:'',
			stat: '',
			userNm:"",
      userPwd1:"",
      userPwd2:"",
			code:"",
			idCheck: false,
			props: {},
        }
    },
	components: {
		SearchIdPopup,
    commonModal,
    },
	model: {
		prop: 'sendData',
		event: 'event-data'
	},
	props: ['sendData'],
	created(){            
		//this.formReset();
		this.setAuthData();
		this.formReset();
    }, 
	methods :{
		doPwdValidate(){			
			if(this.isNull(this.userPwd1)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호를 입력해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._pwd1.focus();
				return false;
			}
			if(this.isNull(this.userPwd2)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._pwd2.focus();
				return false;
			}
			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._pwd2.focus();
				return false;
			}
			const pwdLen = this.bytes(this.userPwd1);
			if(!(pwdLen >= 8 && pwdLen <= 16)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._pwd1.focus();
				return false;
			}
			const pEng = /[A-Za-z]/g;	// 영문자 
			const pNum = /[0-9]/g;	// 숫자 
			const pSpc = /[!@$%^&*]/g; // 특수문자
			if(!(pEng.test(this.userPwd1) && pNum.test(this.userPwd1) && pSpc.test(this.userPwd1))) {
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._pwd1.focus();
				return;
			}
			this.row.adminPw=this.userPwd1;
			return true;
		},
		doValidate(){
			if(!this.idCheck){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '유효한 마당ID가 아닙니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs.madangId.focus();
				return false;
			}
			if(!this.doPwdValidate()){
				return false;
			}
			if(this.isNull(this.userNm)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '이름을 입력해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._userNm.focus();
				return false;
			}
			if(this.isNull(this.mdn)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '휴대폰번호를 입력해주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._phone.focus();
				return false;
			}
			const hp = this.mdn;
			if(!this.isNull(hp) && !this.isMobile(hp)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._phone.focus();
				return false;
			}
			if(this.isNull(this.email)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '이메일을 입력해주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._email.focus();
				return false;
			}
			const email = this.email;
			if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
				this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '이메일 형식이 잘못되었습니다.';
        this.row.msg2 = '확인해 주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._email.focus();
				return false;
			}
			if(this.isNull(this.auth)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '권한을 선택 해주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				this.$refs._auth.focus();
				return false;
			}
			if(this.isNull(this.stat)){
        this.row.title = '관리자/유치채널 관리';
        this.row.msg1 = '상태를 선택 해주세요.';
        this.$refs.commmonModal.alertModalOpen(this.row);
				// this.$refs._auth.focus();
				return false;
			}
			this.row.madangId=this.madangId;
			this.row.name=this.userNm;
			this.row.mdn=hp;
			this.row.email=email;
			if(this.insertType == 2){
				this.row.auth='1003';
			}else{
				this.row.auth=this.auth;
			}
			this.row.stat=this.stat;
			return true;
		},
		// 마당ID 조회
		async searchMadangId(){

			if(!this.madangId){
        // this.row.title = '관리자/유치채널 관리';
        // this.row.msg1 = '마당ID를 입력해주세요.';
        // this.$refs.commmonModal.alertModalOpen(this.row);
        // this.$refs.searchIdPopModal.searchIdModalOpen();
				this.$refs.madangId.focus();
				return false;
			}
			var params = {
        		"madangId": this.madangId
      }
			console.log(this.madangId);

			try {
				const response = await sysMgtApi.selectSearchMadangId(params);
				const result = response.data;
				console.log(result);
				if (result != null && result.retCode == "0000") {					
					this.madangId = result.data.madangId;
					this.userNm = result.data.name;
					this.email = result.data.email;
					this.mdn = result.data.mdn;					

					// 마당ID조회 성공 팝업노출
					this.searchIdPop();
					//console.log(this.userNm);	

					this.idCheck = true;
					this.$refs._pwd1.focus();						
          return false;
				}else if(result.retCode == '1004'){
					//alert('마당ID 정보가 없습니다.');
          // this.row.title = '관리자/유치채널 관리';
          // this.row.msg1 = '마당ID 정보가 없습니다.';
          // this.$refs.commmonModal.alertModalOpen(this.row);
					this.searchIdFailPop();
					this.idCheck = false;
					this.$refs.madangId.focus();
					return false;
				}else {
					//alert('마당ID 조회에 실패하였습니다.');
          // this.row.title = '관리자/유치채널 관리';
          // this.row.msg1 = '마당ID 정보가 없습니다.';
          // this.$refs.commmonModal.alertModalOpen(this.row);
					this.searchIdFailPop();
					this.idCheck = false;
					this.$refs.madangId.focus();
					return false;
				}
			} catch(err) {
				//alert("실패 하였습니다.");
        // this.row.title = '관리자/유치채널 관리';
        // this.row.msg1 = '마당ID 정보가 없습니다.';
        // this.$refs.commmonModal.alertModalOpen(this.row);
				this.searchIdFailPop();
				this.idCheck = false;
				this.$refs.madangId.focus();
				return false;
			}			
			
		},
		searchIdPop(){
			//alert('마당ID 조회 성공 팝업이동 ->');
			var params = {
        		"madangId": this.madangId,
				"userNm": this.userNm,
				"email": this.email,
				"mdn": this.mdn
        	}
			this.$refs.searchIdPopModal.searchIdPop(params);
		},
		searchIdFailPop(){
			//alert('마당ID 조회 실패 팝업이동 ->');
			this.$refs.searchIdPopModal.searchIdFailPop();
		},
		resetRegPop(){
			this.formReset();	
			this.$refs.madangId.focus();
		},


		// 모달 띄우기
		ModalOpen(insertType){
			this.formReset();
			this.insertType=insertType;
      var dimmed = document.getElementsByClassName('modal20');
      for(var i = 0; i < dimmed.length; i++){
        dimmed[i].style.display = 'block';
      }
      this.setAuthData();
		},
		// 모달 끄기
		ModalClose(){
      var dimmed = document.getElementsByClassName('modal20');
      for(var i = 0; i < dimmed.length; i++){
        dimmed[i].style.display = 'none';
      }
			
		},
		// 저장 후 부모창 호출.
		toComplete(){
			this.getParent('adminList').$refs.table.reloadData();
			this.ModalClose();
        },
		async doInsert(){
            if(this.doValidate()){
                try {
					const response = await sysMgtApi.insertAdmin(this.row);
					const result = response.data;
					if (result != null && result.retCode == "0000") {
            this.row.title = '관리자/유치채널 관리';
            this.row.msg1 = '저장 하였습니다.';
            this.$refs.commmonModal.alertModalOpen(this.row);
						this.toComplete();
					}
                } catch(err) {
                  this.row.title = '관리자/유치채널 관리';
                  this.row.msg1 = '실패 하였습니다.';
                  this.$refs.commmonModal.alertModalOpen(this.row);
                }
            }
        },
    setAuthData() {
			// 권한 옵션.
			api.commAuth().then(response => {
				this.authType = response.data.data.list;
			});
		},
		formReset(){
			var type= this.insertType;
			Object.assign(this.$data, this.$options.data());
			this.insertType = type;
		},
	}
}
</script>