File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
인서트
<template>
<div class="content admin-style overflow-y">
<div class="admin-page-title point-font2 mb30">
<p>관리자 관리</p>
</div>
<details open class="form-table-style mb30">
<summary class="point-font2">
<p class="summary-style pl10">기본정보</p>
</summary>
<div class="pt10 pb10">
<table class="form-table">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tr>
<td>
<label for="" class="form-title point-font2 mb10">아이디</label>
<div class="flex align-center">
<div class="gd-10 pl0">
<input
type="text"
class="full-input"
ref="lgnId"
v-model="mberVO['lgnId']"
minlength="5"
maxlength="20"
placeholder="아이디를 입력하세요."
:disabled="editMode == 'update'"
@change="isIdDupCheck = false"
/>
</div>
<div class="gd-2 pl0 pr0" v-show="editMode == 'create'">
<button class="large-btn blue-border-btn"
@click="fnIdDuplication()">중복확인</button>
</div>
</div>
</td>
<td>
<div class="gd-12 pr0">
<label for="" class="form-title point-font2 mb10">이름</label>
<input
type="text"
class="full-input"
ref="mbrNm"
v-model="mberVO.mbrEncptFlnm"
minlength="2"
maxlength="50"
placeholder="이름을 입력하세요."
/>
</div>
</td>
</tr>
<tr v-if="editMode == 'create'">
<td>
<div class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">
<span>비밀번호</span>
</label>
<span
:class="{ 'inline-block ml20': true, 'red-text': errorPwd }"
>영문, 숫자, 특수문자를 조합하여 입력해주세요.(6~20자)</span
>
<input
type="password"
class="full-input"
ref="newPswd"
v-model="pswd.newPswd"
minlength="9"
placeholder="영문, 숫자, 특수문자 조합된 6~20자리"
/>
</div>
</td>
<td>
<div class="gd-12 pr0">
<label for="" class="form-title point-font2 mb10">
<span >비밀번호확인</span>
</label>
<input
type="password"
:class="{ 'full-input': true, 'err-border': pswdChk }"
ref="newPswdChk"
v-model="pswd.newPswdChk"
minlength="9"
placeholder='비밀번호 확인을 입력하세요.'
/>
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">
권한
</label>
<select name="" id="" class="full-select ml0" ref="authrt_cd"
v-model="mberVO.authrtId">
<option :value=null disabled>선택하세요</option>
<option v-for="(authority, idx) in authorityList" :key="idx"
:value=authority.authrtId>
{{ authority.authrtNm }}
</option>
</select>
</div>
</td>
<td>
<div class="gd-12 pr0">
<p class="form-title">소속기관</p>
<input
type="text"
class="full-input"
ref="telno"
v-model="mberVO.ogdpInstNm"
placeholder="소속기관을 입력하세요."
/>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<label for="email" class="form-title point-font2 mb10">이메일</label>
<div class="flex align-center">
<div class="gd-3 pl0">
<input
type="text"
id="email"
class="full-input"
ref="emailId"
v-model="email.id"
placeholder="이메일을 입력하세요."
@change="isEmlDupCheck = false"
/>
</div>
<div>@</div>
<div class="gd-3" v-if="email.select == 'self'">
<input
type="text"
class="full-input"
ref="emailAddress"
v-model="email['address']"
@change="isEmlDupCheck = false"
/>
</div>
<div class="gd-3">
<select
class="full-select"
ref="emailSelect"
v-model="email.select"
@change="isEmlDupCheck = false"
>
<option value="">선택하세요</option>
<option value="self">직접입력</option>
<option value="naver.com">naver.com</option>
<option value="google.com">google.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="nate.com">nate.com</option>
<option value="kakao.com">kakao.com</option>
</select>
</div>
<div class="gd-1 pl0 pr0">
<button class="large-btn blue-border-btn"
@click="fnEmlDuplication()" v-if="editMode == 'create'">중복확인</button>
<button class="large-btn blue-border-btn"
@click="fnEmlDuplication()" v-if="editMode == 'update' && (originalEmailId != email.id || originalEmailSelect != email.select || originalEmailAddress != email.address)">중복확인</button>
</div>
</div>
</td>
</tr>
</table>
</div>
</details>
<div class="flex justify-end align-center no-gutters">
<div class="gd-1 mr10">
<button
class="large-btn blue-btn"
@click="fnInsert"
v-if="editMode == 'create' && pageAuth.wrAuthrtYn == 'Y'"
>
등록
</button>
<button
class="large-btn blue-btn"
@click="fnUpdate"
v-if="editMode == 'update' && pageAuth.mdfcnAuthrtYn == 'Y'"
>
수정
</button>
</div>
<div class="gd-1">
<button class="large-btn gray-btn" @click="fnList">취소</button>
</div>
</div>
</div>
</template>
<script>
// api
import {
adminJoinProc,
findByMbr,
updateAdmProc,
idDupProc,
emlDupProc
} from "../../../../../resources/api/mbrInfo";
import { findAdminAuthority } from "../../../../../resources/api/authrt.js"
export default {
data() {
return {
// 페이지 권한 객체
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
// id
pageId: this.$route.query.pageId,
// 글 작성 모드
// create - 등록 (기본)
// update - 수정
editMode: "create",
// 상세조회 정보 담는 객체
mberVO: {
mbrId: this.pageId,
lgnId: null,
mbrEncptFlnm: null,
mbrEncptPswd: null,
authrtId: null,
ogdpInstNm: null,
mbrEncptEmad: null,
},
pswd: {
newPswd: null,
newPswdChk: null,
},
errorPwd: null,
pswdChk: null,
email: {
id: null,
select: "",
address: null,
},
//아이디 중복검사 여부
isIdDupCheck: false,
//이메일 중복검사 여부
isEmlDupCheck: false,
//권한리스트
authorityList: []
};
},
created() {
// pageId 확인
if (this.pageId != null) {
this.editMode = "update";
this.fnViewDetail();
}
//권한리스트 불러오기
this.adminAuthorityList();
},
methods: {
// 등록
fnInsert() {
// 유효성검사
if (this.valiadtion() == false) {
return;
}
//등록(공통메세지)
if(!confirm(this.$getCmmnMessage("cnf003"))) return
// 데이터 세팅
const data = { ...this.mberVO };
// 비밀번호 추가
data.mbrEncptPswd = this.pswd.newPswd;
// 이메일 합체
data.mbrEncptEmad = this.emailSum();
this.axiosInsert(data);
},
// 조회(상세)
fnViewDetail() {
this.axiosViewDetail();
},
// 수정
fnUpdate() {
// 유효성검사
if (this.valiadtion() == false) {
return;
}
// 데이터 세팅
const data = this.mberVO;
// 이메일 합체
data.mbrEncptEmad = this.emailSum();
if(JSON.stringify(data) === JSON.stringify(this.originalAdminData)) {
alert("수정된 정보가 없습니다.");
return;
} else {
//수정(공통메세지)
if(!confirm(this.$getCmmnMessage("cnf004"))) return;
else this.axiosUpdate(data);
}
},
// 목록
fnList() {
if (!confirm(this.$getCmmnMessage('cnf008'))) return;
this.$router.push({
name: "admAdminManagementSelectList"
});
},
//아이디중복 검사
fnIdDuplication() {
//유효성검사
if(!this.idValidation()) {
this.$refs.lgnId.focus()
return;
} else {
this.axiosIdDuplication();
}
},
//이메일 중복 검사
fnEmlDuplication() {
//유효성검사
let email = this.emailSum();
if (!this.mailValidation(email)) {
return;
} else {
this.axiosEmlDuplication(email);
}
},
//아이디 유효성 검사
idValidation: function () {
// 아이디 입력 여부
this.mberVO.lgnId = this.mberVO.lgnId != null ? this.mberVO.lgnId.trim() : null
if (this.$isEmpty(this.mberVO.lgnId)) {
alert("아이디를 입력해주세요.");
this.$refs.lgnId.focus();
return false;
}
// 아이디 길이
if (this.mberVO.lgnId.length < 5) {
alert("아이디는 5자 이상으로 입력해주세요.");
this.$refs.lgnId.focus();
return false;
}
if (this.mberVO.lgnId.length > 20) {
alert("아이디는 20자 이하로 입력해주세요.");
this.$refs.lgnId.focus();
return false;
}
// 아이디 영어와 숫자만 사용 여부
this.mberVO.lgnId = this.mberVO.lgnId ? this.mberVO.lgnId.trim() : null
if (!this.$idCheck(this.mberVO.lgnId)) {
alert("아이디는 한개 이상의 소문자 알파벳, 숫자, 특수기호(_),(-)만 사용 가능합니다.")
this.$refs.lgnId.focus()
return false;
}
return true;
},
//이메일 유효성 검사
mailValidation: function (email) {
//1.null검사
this.email.id = this.email.id ? this.email.id.trim() : null
if (this.$isEmpty(this.email.id)) {
alert('이메일 ID를 입력해주세요.');
this.$refs.emailId.focus()
return false;
}
// 이메일 선택 여부
if (this.$isEmpty(this.email.select)) {
alert("도메인을 선택하세요.");
this.$refs.emailSelect.focus();
return false;
}
// 이메일 직접입력 입력 여부
if (this.email.select == "self") {
this.email.address = this.email.address ? this.email.address.trim() : null
if (this.$isEmpty(this.email.address)) {
alert("도메인을 입력해주세요.");
this.$refs.emailAddress.focus();
return false;
}
}
//2.정규식 검사
if (!this.$email(email)) {
alert('이메일 형식을 확인해 주세요.');
this.$refs.emailId.focus()
return false;
}
return true;
},
// 비밀번호 유효성 검사
pswdValiadtion() {
if (this.$isEmpty(this.pswd.newPswd)) {
alert("비밀번호를 입력해주세요.")
this.$refs.newPswd.focus();
return false;
} else if (this.$isEmpty(this.pswd.newPswdChk)) {
alert("비밀번호 확인을 입력해주세요.")
this.$refs.newPswdChk.focus();
return false;
} else if (this.pswd.newPswd !== this.pswd.newPswdChk) {
alert("비밀번호가 불일치합니다.");
this.$refs.newPswd.focus();
return false;
} else if (!this.$pwCheck(this.pswd.newPswd)) {
alert('비밀번호는 영문, 숫자, 특수문자를 포함한 6~20자이어야 합니다.')
this.$refs.newPswd.focus();
return false;
}
return true;
},
// 유효성 검사
valiadtion() {
//아이디 중복검사 여부
if(this.editMode === 'create') {
if(this.isIdDupCheck === false) {
alert("ID중복검사를 완료해주세요.")
this.$refs.lgnId.focus()
return false;
}
}
if(!this.idValidation()) return;
// 아이디 영어와 숫자만 사용 여부
this.mberVO.lgnId = this.mberVO.lgnId ? this.mberVO.lgnId.trim() : null
if(!this.$idCheck(this.mberVO.lgnId)) {
alert("아이디는 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.")
this.$refs.lgnId.focus()
return;
}
// 이름 입력 여부
this.mberVO.mbrEncptFlnm = this.mberVO.mbrEncptFlnm != null ? this.mberVO.mbrEncptFlnm.trim() : null
if(this.$isEmpty(this.mberVO.mbrEncptFlnm)) {
alert("이름을 입력해주세요.");
this.$refs.mbrNm.focus();
return false;
}
//이름 한글,영문 체크
if(!this.$checkName(this.mberVO.mbrEncptFlnm)) {
alert("성명에는 한글, 영문만 포함할 수 있습니다.")
this.$refs.mbrNm.focus()
return false;
}
if(this.editMode === 'create') {
// 비밀번호 유효성 검사
if(!this.pswdValiadtion()) return false;
}
//권한 유효성 검사
if(this.$isEmpty(this.mberVO.authrtId)) {
alert("권한을 선택해주세요.")
return false;
}
// 소속기관 유효성 검사
if(this.$isEmpty(this.mberVO.ogdpInstNm)) {
alert("소속기관을 입력해주세요.")
return false;
}
//이메일 변경사항 없으면 중복검사 true
if(this.originalEmailId === this.email.id &&
this.originalEmailSelect === this.email.select &&
this.originalEmailAddress === this.email.address) this.isEmlDupCheck = true;
// if(JSON.stringify(this.originalEmail) === JSON.stringify(this.email)) this.isEmlDupCheck = true;
//이메일 중복검사 여부
if(this.isEmlDupCheck === false) {
alert("이메일 중복검사를 완료해주세요.")
this.$refs.emailId.focus()
return false;
}
let email = this.emailSum();
//이메일 유효성 검사
if(!this.mailValidation(email)) return false;
return true;
},
// 이메일 합체
emailSum() {
if (this.email.select != "self") {
return this.email.id + "@" + this.email.select;
} else {
return this.email.id + "@" + this.email.address;
}
},
// 이메일 분리
emailSplit(data) {
const email = data.mbrEncptEmad.split("@");
this.email.id = email[0];
switch (email[1]) {
case "naver.com":
case "google.com":
case "hanmail.net":
case "nate.com":
case "kakao.com":
this.email.select = email[1];
break;
default:
this.email.select = "self";
this.email.address = email[1];
break;
}
},
// 비밀번호 검증
pswdCheck() {
if (!this.$isEmpty(this.pswd.newPswd)) {
if (
!this.$pwCheck(this.pswd.newPswd) ||
!this.pswd.newPswd ||
this.pswd.newPswd.length < 9 ||
this.pswd.newPswd.length > 20
) {
this.errorPwd = true;
} else if (!this.$isEmpty(this.pswd.newPswd)) {
this.errorPwd = false;
}
} else {
this.errorPwd = null;
}
},
//아이디 중복 검사
async axiosIdDuplication() {
// 데이터 세팅
const data = this.mberVO;
// 실행
this.$store.commit('setLoading', true);
try {
const response = await idDupProc(data);
// axios 결과
alert(response.data.message);
if(response.data.success) this.isIdDupCheck = true;
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
} finally {
this.$store.commit('setLoading', false);
}
},
//이메일 중복 검사
async axiosEmlDuplication(email) {
// 데이터 세팅
const data = {'mbrEncptEmad' : email};
// 실행
this.$store.commit('setLoading', true);
try {
const response = await emlDupProc(data);
// axios 결과
alert(response.data.message);
if(response.data.success) this.isEmlDupCheck = true;
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
} finally {
this.$store.commit('setLoading', false);
}
},
// axios: 등록
async axiosInsert(data) {
this.$store.commit('setLoading', true);
try {
const response = await adminJoinProc(data);
alert(this.$getCmmnMessage('msg001'));
const mbrId = response.data.data;
if (response.status == 200) {
this.$router.push({
name: "admAdminManagementSelectOne",
query: {
pageId: mbrId,
},
});
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
} finally {
this.$store.commit('setLoading', false);
}
},
// axios: 조회(상세)
async axiosViewDetail() {
// 데이터 세팅
const data = { mbrId: this.pageId };
// 실행
try {
const response = await findByMbr(data);
// 객체 삽입
this.mberVO = response.data.data;
this.emailSplit(response.data.data);
if(this.editMode === 'update') {
this.originalAdminData = Object.assign({}, response.data.data);
this.originalEmailId = this.email.id;
this.originalEmailSelect = this.email.select;
this.originalEmailAddress = this.email.address
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
}
},
// axios: 수정
async axiosUpdate(data) {
this.$store.commit('setLoading', true);
try {
const response = await updateAdmProc(data);
alert(this.$getCmmnMessage('msg002'));
if (response.status == 200) {
this.$router.push({
name: "admAdminManagementSelectOne",
query: {
'pageId': this.pageId,
},
});
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
} finally {
this.$store.commit('setLoading', false);
}
},
async adminAuthorityList() {
try {
const response = await findAdminAuthority();
this.authorityList = response.data.data;
} catch(error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
}
},
},
watch: {
"pswd.newPswd"() {
this.pswdCheck();
},
},
computed: {},
components: {},
mounted() {},
};
</script>