<template> <div class="wrap"> <div class="tab-wrap"> <ul> <li> <button class="tab active">사용자 관리</button> </li> <li> <button @click="accessLogPage()" class="tab">접속기록 조회</button> </li> </ul> </div> <div> <div> <h2 class="page-title">사용자 등록</h2> </div> <hr class="margin"> <div class="form-wrap"> <div class="flex m-b"> <span>아이디 : </span> <input type="text" placeholder="ID" v-model="user.user_id"> <button type="button" class="idchk green-btn" @click="idChcek">중복확인</button> </div> <div class="flex m-b"> <span>비밀번호 : </span> <input type="password" placeholder="Password" v-model="user.user_pw"> </div> <div class="flex m-b"> <span>비밀번호 확인 : </span> <input type="password" placeholder="Confirm Password" v-model="passwordCheck"> </div> <div class="flex m-b"> <span>이름 : </span> <input type="text" placeholder="Name" v-model="user.user_nm"> </div> <div class="flex m-b"> <span>전화번호 : </span> <input type="text" placeholder=" '-' 을 제외하고 입력해주세요." maxlength="13" v-model="user.user_telno" @change="phoneCheck" @keyup="getPhoneMask(user.user_telno)"> <p style="color:red" v-if="telno_boolean === false">&nbsp;전화번호 9~11자리를 입력해주세요.</p> </div> <div class="flex m-b"> <span>이메일 : </span> <input type="text" placeholder=" 예) qwer@naver.com" v-model="user.user_eml" @change="emailCheck"> <p style="color:red" v-if="email_boolean === false">&nbsp;잘못된 이메일 형식입니다.</p> </div> <div class="flex m-b"> <span>관리구역 : </span> <select v-model="searchCip_rvnCode"> <option value="">시/도</option> </select> <select name="" id=""> <option value="">시/군/구</option> </select> <select name="" id=""> <option value="">읍/면/동</option> </select> </div> <div class="flex m-b"> <span>비고 : </span> <input type="text" placeholder="참고사항을 입력해주세요." v-model="user.rm"> </div> <div class="flex m-b"> <span>권한 : </span> <label for="radio_1"> <input type="radio" name="radio" id="radio_1" value="시청관리자" v-model="user.user_author"> 시청관리자 </label> <label for="radio_2"> <input type="radio" name="radio" id="radio_2" value="지자체관리자" v-model="user.user_author"> 지자체관리자 </label> </div> <div class="btn-wrap"> <button type="button" class="green-btn" @click="userInsertCheck">등록</button> <span class="btn-2 gray-btn" @click="userSelectListPage()">취소</span> </div> </div> </div> </div> <div class="modal-wrap" v-if="modal_insert == true"> <div class="modal-bg"> </div> <div class="modal"> <p>사용자를 <span class="txt-point">등록</span>하시겠습니까?</p> <div class="btn-wrap"> <button type="button" class="green-btn" @click="userInsert">확인</button> <button type="button" class="gray-btn" @click="modal_insert = false">취소</button> </div> </div> </div> </template> <script> import axios from 'axios'; import COMMON_UTIL from '../../../resources/js/commonUtil.ts'; export default { data: () => { return { user: { user_id: null, user_pw: null, user_nm: null, user_telno: null, user_eml: null, user_author: null, rm: null }, passwordCheck: null, passwordCheckFlag: null, telno_boolean: true, email_boolean: true, idChcek_boolean: false, telno: null, modal_insert: false }; }, methods: { //ID 중복 검사 idChcek: function() { const vm = this; axios({ url: '/user/userSelectOne.json', method: 'post', herders: { 'Content-Type': "application/json; charset=UTF-8", }, data: vm.user }).then( function (response) { console.log("idCheck - response : ", response.data); if(response.data != null) { alert("중복된 ID 입니다."); vm.idChcek_boolean = false; return false; } else { alert("사용가능한 ID 입니다."); vm.idChcek_boolean = true; return true; } }).catch( function (error) { console.log("idCheck - error : ", error); alert("중복검사 오류, 다시 시도해주세요."); vm.idChcek_boolean = false; }); }, //전화번호 입력 시 자동 '-' 삽입 getPhoneMask: function(telNumber) { var res = COMMON_UTIL.getMask(telNumber) this.user.user_telno = res }, emailCheck: function() { this.email_boolean = true; if (COMMON_UTIL.checkEmail(this.user.user_eml) === false) this.email_boolean = false; }, phoneCheck: function() { this.telno_boolean = true; if (COMMON_UTIL.checkPhone(this.user.user_telno) === false) this.telno_boolean = false; }, // 등록버튼 클릭 시 빈칸 검사 userInsertCheck: function() { if (COMMON_UTIL.isEmpty(this.user.user_id) === false) { alert('ID를 입력해주세요.'); return false; } if (this.idChcek_boolean === false) { alert("ID중복검사를 완료해주세요.") return false; } if (COMMON_UTIL.isEmpty(this.user.user_pw) === false) { alert('비밀번호를 입력해주세요.'); return false; } if (COMMON_UTIL.checkPassword(this.user.user_pw, this.passwordCheck) === false) { alert('비밀번호가 일치하지 않습니다.'); return false; } if (COMMON_UTIL.isEmpty(this.user.user_nm) === false) { alert('이름을 입력해주세요.'); return false; } if (COMMON_UTIL.isEmpty(this.user.user_telno) === false) { alert('전화번호를 입력해주세요.'); return false; } if (COMMON_UTIL.checkPhone(this.user.user_telno) === false) { alert('전화번호 형식을 확인해주세요.'); return false; } if (COMMON_UTIL.isEmpty(this.user.user_eml) === false) { alert('이메일을 입력해주세요.'); return false; } if (COMMON_UTIL.checkEmail(this.user.user_eml) === false) { alert('이메일 형식을 확인해주세요.'); return false; } // if (COMMON_UTIL.isEmpty(this.user.) === false) { // alert('관리구역을 선택해주세요.'); // return false; // } if (COMMON_UTIL.isEmpty(this.user.user_author) === false) { alert('권한을 선택해주세요.'); return false; } this.modal_insert = true }, // 사용자 등록 userInsert: function() { const vm = this; //서버 전송 값에는 '-' 를 제외하고 숫자만 저장 vm.user.user_telno = vm.user.user_telno.replace(/[^0-9]/g, ''); axios({ url: '/user/userInsert.json', method: 'post', herders: { 'Content-Type': "application/json; charset=UTF-8", }, data: vm.user }).then(function (response) { console.log("userInsert - response : ", response); let result = response.data; if (result > 0) { alert("사용자 등록을 완료 하였습니다."); vm.userSelectListPage(); } else { alert("등록 실패, 관리자에게 문의해주세요."); vm.modal_insert = false; } }).catch(function (error) { console.log("userInsert - error : ", error); alert("사용자 등록 오류, 관리자에게 문의해주세요."); vm.modal_insert = false; }) }, //사용자 목록 페이지 이동 userSelectListPage: function () { this.$router.push({ path: '/UserManagement.page'}); }, //접속기록조회 페이지 이동 accessLogPage: function () { this.$router.push({ path: '/AccessRecord.page'}); }, }, watch: {}, computed: {}, mounted() { console.log("Main4 mounted"); }, }; </script> <style scoped> .wrap { width: 155rem; margin: 100px auto; } .tab-wrap { margin-bottom: 30px; } .tab-wrap ul { display: flex; gap: 2rem; } .tab { display: inline-block; width: 20rem; height: 3rem; line-height: 3rem; text-align: center; border-radius: 5px; background: #fff; color: #949292; border: 1px solid #949292; } .tab.active { background: #13833b; color: #fff; border-color: #13833b; } h2.page-title { font-size: 24px; } hr.margin { margin: 30px 0; } .form-wrap { width: 52rem; margin: 0 auto; } .idchk { margin-left: 1rem; } .btn-wrap { margin-top: 30px; text-align: center; } .btn-2 { display: inline-block; padding: 0.3rem 2rem; font-size: 13.333px; color: #000; } .btn-wrap>*:not(:last-child) { margin-right: 2rem; } .form-wrap .flex span { display: inline-block; width: 10rem; padding: 0 5px; } .form-wrap input:not([type="radio"]) { min-width: 30rem; } .form-wrap select { min-width: 9rem; } .form-wrap select:not(:last-child) { margin-right: 1.5rem; } .form-wrap input[type="radio"] { vertical-align: middle; } .form-wrap label:not(:last-child) { margin-right: 2rem; } .modal-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .modal-bg { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6); } .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 350px; padding: 5rem; z-index: 2; background-color: #fff; border-radius: 1rem; text-align: center; } .modal .btn-wrap { margin-top: 15px; text-align: center; } .txt-point { color: #13833b; } </style>