<template> <div class="wrap"> <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=" Name" v-model="manager.mngr_nm"> </div> <div class="flex m-b"> <span>전화번호 : </span> <input type="text" placeholder=" '-' 을 제외하고 입력해주세요." maxlength="13" v-model="manager.mngr_telno" @change="phoneCheck" @keyup="getPhoneMask(manager.mngr_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="manager.mngr_eml" @change="emailCheck"> <p style="color:red" v-if="email_boolean === false">&nbsp;잘못된 이메일 형식입니다.</p> </div> <div class="flex m-b"> <span>소속명 : </span> <input type="text" placeholder=" 소속정보를 입력해주세요." v-model="manager.mngr_ogdp_info"> </div> <div class="btn-wrap"> <button type="button" class="green-btn" @click="managerUpdateCheck">수정</button> <button type="button" class="green-btn" @click="modal_delete = true">삭제</button> <button class="btn-2 gray-btn" @click="managerSelectListPage">취소</button> </div> </div> </div> </div> <div class="modal-wrap" v-if="modal_update == 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="managerUpdate">확인</button> <button type="button" class="gray-btn" @click="modal_update = false">취소</button> </div> </div> </div> <div class="modal-wrap" v-if="modal_delete == true"> <div class="modal-bg"> </div> <div class="modal"> <p> 해당 기능은 데이터 <span class="txt-point-red">삭제</span>기능입니다.<br> 데이터 <span class="txt-point-red">삭제</span> 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br> <span class="txt-point-red">삭제</span>를 원하시면 아래 삭제 버튼을 눌러주세요. </p> <div class="btn-wrap"> <button type="button" class="green-btn" @click="managerDelete">삭제</button> <button type="button" class="gray-btn" @click="modal_delete = false">취소</button> </div> </div> </div> </template> <script> import axios from 'axios'; import COMMON_UTIL from '../../../resources/js/commonUtil.ts'; import { useRoute } from 'vue-router'; export default { data: () => { return { manager: { mngr_nm: null, mngr_telno: null, mngr_eml: null, mngr_ogdp_info: null }, route: useRoute(), telno_boolean: true, email_boolean: true, modal_update: false, modal_delete: false }; }, methods: { managerSelectOne: function() { const vm = this; axios({ url: '/managerSelectOne.json', method: 'post', headers: { "Content-Type": "application/json; charset=UTF-8" }, data: vm.route.query }).then(function(response) { console.log("managerSelectOne - response : ", response.data); vm.manager = response.data; vm.manager.mngr_telno = vm.HyphenMinus(response.data.mngr_telno); }).catch(function(error) { console.log("managerSelectOne - error : ", error); }); }, // 전화번호 '-' 추가 후 출력 HyphenMinus: function (telno) { return COMMON_UTIL.HyphenMinus(telno); }, //전화번호 입력 시 자동 '-' 삽입 getPhoneMask: function(telNumber) { var res = COMMON_UTIL.getMask(telNumber) this.manager.mngr_telno = res //서버 전송 값에는 '-' 를 제외하고 숫자만 저장 this.manager.mngr_telno = this.telno.replace(/[^0-9]/g, '') }, emailCheck: function() { this.email_boolean = true; if (COMMON_UTIL.checkEmail(this.manager.mngr_eml) === false) this.email_boolean = false; }, phoneCheck: function() { this.telno_boolean = true; if (COMMON_UTIL.checkPhone(this.manager.mngr_telno) === false) this.telno_boolean = false; }, // 수정버튼 클릭 시 빈칸 검사 managerUpdateCheck: function() { if (COMMON_UTIL.isEmpty(this.manager.mngr_nm) === false) { alert('이름을 입력해주세요.'); return false; } if (COMMON_UTIL.isEmpty(this.manager.mngr_telno) === false) { alert('전화번호를 입력해주세요.'); return false; } if (COMMON_UTIL.checkPhone(this.manager.mngr_telno) === false) { alert('전화번호 형식을 확인해주세요.'); return false; } if (COMMON_UTIL.isEmpty(this.manager.mngr_eml) === false) { alert('이메일을 입력해주세요.'); return false; } if (COMMON_UTIL.checkEmail(this.manager.mngr_eml) === false) { alert('이메일 형식을 확인해주세요.'); return false; } if (COMMON_UTIL.isEmpty(this.manager.mngr_ogdp_info) === false) { alert('소속정보를 입력해주세요.'); return false; } this.modal_update = true }, // 횡단보도 유지보수 담당자 수정 managerUpdate: function() { const vm = this; //서버 전송 값에는 '-' 를 제외하고 숫자만 저장 vm.manager.mngr_telno = vm.manager.mngr_telno.replace(/[^0-9]/g, ''); axios({ url: '/managerUpdate.json', method: 'post', herders: { 'Content-Type': "application/json; charset=UTF-8", }, data: vm.manager }).then(function (response) { console.log("managerUpdate - response : ", response.data); let result = response.data; if (result > 0) { alert("횡단보도 유지보수 담당자 수정을 완료 하였습니다."); vm.managerSelectListPage(); } else { alert('수정 실패, 관리자에게 문의해주세요.'); vm.modal_update = false; } }).catch(function(error) { console.log("managerInsert - error : ", error); alert('횡단보도 유지보수 담당자 등록 오류, 관리자에게 문의해주세요.'); vm.modal_update = false; }) }, //횡단보도 유지보수 담당자 삭제 managerDelete: function() { const vm = this; axios({ url: '/managerDelete.json', method: 'post', headers: { 'Content-Type': "application/json; charset=UTF-8", }, data: vm.manager }).then(function(response) { console.log("managerDelete - response : ",response.data); let result = response.data; if(result > 0) { alert("횡단보도 유지보수 담당자 삭제를 완료 하였습니다."); vm.managerSelectListPage(); } else { alert("삭제 실패, 관리자에게 문의해주세요."); vm.modal_delete = false; } }).catch(function (error) { console.log("managerDelete - error : ", error); alert("횡단보도 유지보수 담당자 삭제 오류, 관리자에게 문의해주세요."); vm.modal_delete = false; }) }, //횡단보도 유지보수 관리자 목록 페이지 이동 managerSelectListPage: function () { this.$router.push({ path : '/ChargeManagement.page'}); }, }, watch: {}, computed: {}, mounted() { console.log("Main4 mounted"); this.managerSelectOne(); }, }; </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; } .txt-point-red { color: red; } </style>