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="user-wrap">
<div class="content-box">
<div class="title-wrap">
<h2 class="main-title">회원관리</h2>
</div>
<div class="content-wrap">
<ul class="tab-menu">
<li v-for="(tab, index) in tabMenu" :key="index">
<a @click="currentTab = index" :class="{ active: currentTab === index }">{{ tab }}</a>
</li>
</ul>
<div class="tab-content">
<div v-show="currentTab == 0">
<table>
<thead>
<tr>
<th>아이디</th>
<th>기업명</th>
<th>담당자명</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in user1" :key="index">
<td>{{ user.id }}</td>
<td>{{ user.company }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
<div v-show="currentTab == 1">
<table>
<thead>
<tr>
<th>아이디</th>
<th>기업명</th>
<th>담당자명</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in user2" :key="index">
<td>{{ user.id }}</td>
<td>{{ user.company }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
<div v-show="currentTab == 2">
<table>
<thead>
<tr>
<th>아이디</th>
<th>담당자명</th>
<th>이메일</th>
<th>등록자</th>
<th>등록시간</th>
</tr>
</thead>
<tbody>
<tr v-for="(mngr, index) in mngrList" :key="index">
<td>{{ mngr.mngr_id }}</td>
<td>{{ mngr.mngr_nm }}</td>
<td>{{ mngr.mngr_eml }}</td>
<td>{{ mngr.rgtr_id }}</td>
<td>{{ mngr.reg_dt }}</td>
</tr>
</tbody>
</table>
<div class="btn-wrap">
<button class="blue-btn" @click="modalType = 'userInsert'">등록</button>
</div>
</div>
</div>
</div>
</div>
<div v-show="isModalOpen" class="modal-wrapper">
<div class="modal-container">
<div class="modal-title">
<h2>관리자 등록</h2>
</div>
<div v-show="modalType == 'userInsert'" class="modal-content-monthly ">
<div>
<input type="text" placeholder="ID" v-model="mngr.mngr_id" />
<button type="button" class="idchk green-btn" @click="idChcek">중복확인</button>
</div>
<div><input type="password" name="pw" id="pw" placeholder="password" v-model="mngr.mngr_pw"
@change="passwordSyncCheck()" /></div>
<div>
<input type="password" name="pwCk" id="pwCk" placeholder="password 확인" v-model="passwordCheck"
@change="passwordSyncCheck()" />
<div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
<div v-else style="color:red">비밀번호 불일치</div>
</div>
<div><input type="text" placeholder="이름" v-model="mngr.mngr_nm" /></div>
<div class="flex">
<span>이메일 : </span>
<input type="text" v-model="email_id">
<div> @ </div>
<input class="m-r" type="text" v-model="email_domain" :disabled="email_disabled === true">
<select @change="emailValue($event.target.value)">
<option selected disabled>선택하세요</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="daum.net">daum.net</option>
<option value="nate.com">nate.com</option>
<option value="null">직접입력</option>
</select>
</div>
</div>
<div class="modal-end">
<button class="dark-gray-btn mgl5" @click="closeModal()">취소</button>
<button class="blue-btn" @click="managerInsert">저장</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { useStore } from "vuex";
import axios from "axios";
import crypto from "crypto-js";
import COMMON_UTIL from '../../../../resources/js/commonUtil.ts';
export default {
data() {
return {
currentTab: 0,
tabMenu: ['일반회원', '기관회원', '관리자'],
// 모달창 오픈 상태
isModalOpen: false,
// 모달창 타입
modalType: null,
mngr: {
mngr_id: null,
mngr_pw: null,
mngr_nm: null,
mngr_eml: null,
},
// 비밀번호 체크
passwordCheck: null,
passwordCheckFlag: false,
//아이디 중복
idChcek_boolean: false,
//이메일
email_disabled: true,
email_id: null,
email_domain: null,
// 사용자 목록조회
userListSearch: {
currentPage: 1,
perPage: 10,
startDate: null,
endDate: null,
mngr_id: null,
mngr_nm: null
},
mngrList: [],
store: useStore(),
};
},
methods: {
openModal: function () {
this.isModalOpen = true;
},
closeModal: function () {
this.isModalOpen = false;
console.log("1");
this.modalType = null;
console.log("2");
},
//비밀번호 매칭 확인
passwordSyncCheck: function () {
if (this.mngr.mngr_pw != this.passwordCheck) this.passwordCheckFlag = false;
else this.passwordCheckFlag = true;
},
//ID 중복 검사
idChcek: function () {
const vm = this;
axios({
url: '/managerSelectOne.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.mngr
}).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;
});
},
//이메일 도메인 자동 입력
emailValue: function (value) {
if (value === 'null') {
this.email_disabled = false;
this.email_domain = null;
}
else {
this.email_disabled = true;
this.email_domain = value;
}
},
// 등록버튼 클릭 시 빈칸 검사
managerInsertCheck: function () {
if (COMMON_UTIL.isEmpty(this.mngr.mngr_id) === false) {
alert('ID를 입력해주세요.');
return false;
}
if (this.idChcek_boolean === false) {
alert("ID중복검사를 완료해주세요.")
return false;
}
if (COMMON_UTIL.isEmpty(this.mngr.mngr_pw) === false) {
alert('비밀번호를 입력해주세요.');
return false;
}
if (COMMON_UTIL.isEmpty(this.mngr.mngr_nm) === false) {
alert('이름을 입력해주세요.');
return false;
}
if (COMMON_UTIL.isEmpty(this.email_id) === false) {
alert('이메일 ID를 입력해주세요.');
return false;
}
if (COMMON_UTIL.isEmpty(this.email_domain) === false) {
alert('이메일을 선택 혹은 입력해주세요.');
return false;
}
return true
},
//사용자 등록
managerInsert: async function () {
if (await this.managerInsertCheck() === false) {
return;
}
this.mngr.mngr_eml = this.email_id + '@' + this.email_domain;
console.log(this.mngr.mngr_eml)
var iv = this.store.state.key.iv;
var salt = this.store.state.key.salt;
var passPhrase = this.store.state.key.ENC_KEY;
var keySize = 128;
var iterationCount = 1000;
var key128Bits100Iterations = crypto.PBKDF2(passPhrase, crypto.enc.Hex.parse(salt), { keySize: keySize / 32, iterations: iterationCount });
this.mngr.mngr_id = crypto.AES.encrypt(this.mngr.mngr_id, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
this.mngr.mngr_pw = crypto.AES.encrypt(this.mngr.mngr_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
this.mngr.mngr_nm = crypto.AES.encrypt(this.mngr.mngr_nm, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
this.mngr.mngr_eml = crypto.AES.encrypt(this.mngr.mngr_eml, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
const vm = this;
axios({
url: '/managerInsert.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.mngr
}).then(function (response) {
// console.log("userInsert - response : ", response);
let result = response.data;
if (result > 0) {
alert("사용자 등록을 완료 하였습니다.");
vm.isModalOpen = false;
vm.userSelectList();
} else {
alert("등록 실패, 관리자에게 문의해주세요.");
vm.isModalOpen = false;
}
}).catch(function (error) {
console.log("userInsert - error : ", error);
alert("사용자 등록 오류, 관리자에게 문의해주세요.");
vm.isModalOpen = false;
})
},
userSelectList: function () {
const vm = this;
axios({
url: '/managerSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.userListSearch
}).then(function (response) {
console.log("userSelectList - response : ", response.data);
vm.mngrListCount = response.data.managerListCount
vm.mngrList = response.data.managerList;
}).catch(function (error) {
console.log("userSelectList - error : ", error);
alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
});
},
},
watch: {
"modalType": function (newValue, oldValue) {
if (this.modalType != null) {
console.log("modalType watch: ", newValue, oldValue);
this.openModal();
}
},
},
computed: {},
components: {},
mounted() {
this.userSelectList();
},
};
</script>
<style scoped>
.user-wrap,
.content-box {
width: 100%;
height: 100%;
font-size: 1.3rem;
}
.tab-menu {
display: flex;
justify-content: flex-start;
align-items: center;
}
.tab-menu li a {
padding: 10px 15px;
display: block;
font-size: 1.6rem;
border-radius: 5px 5px 0 0;
cursor: pointer;
border: 1px solid #ddd;
border-bottom: 0;
}
.tab-menu li a.active {
background-color: #f8f8f8;
color: #2b7cff;
font-weight: 800;
border: 0;
}
.tab-content {
width: 100%;
height: 100%;
background-color: #f8f8f8;
padding: 15px;
}
</style>