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
2023-12-12
<template>
<div class="user-wrap">
<div class="content-box">
<div class="title-wrap">
<div class="flex-start">
<img src="../../../../resources/jpg/user-icon.png" alt="회원관리 아이콘" class="title-icon">
<h2 class="main-title">회원관리</h2>
</div>
</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">
<div class="btn-wrap data-select-list">
<div class="data-select">
<select v-model="userListSearch.searchType" name="data-table-sild" id="data-table-sild"
class="data-table-search">
<option v-for="(item, idx) in option1" :key="idx" :value=item.value>
{{ item.name }}
</option>
</select>
<div class="input-group">
<input type="text" class="input" placeholder="검색어를 입력해주세요."
v-model="userListSearch.searchText" @keyup.enter="userSelectList()">
<input class="button--submit" value="검색" type="submit" @click="userSelectList()">
</div>
</div>
<div>
<p>※ 보안을 위해, 이름 검색시 전체 이름을 정확하게 입력해주세요.</p>
</div>
</div>
<table>
<thead>
<tr>
<th>NO</th>
<th>아이디</th>
<th>이름</th>
<th>이메일</th>
<th>승인</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in userList" :key="index" @click="userSelectOnePage(user)">
<td>{{ userIdx - index }}</td>
<td>{{ user.user_id }}</td>
<td>{{ user.user_nm }}</td>
<td>{{ user.user_eml }}</td>
<td><button class="red-btn" v-if="user.create_account_approval === 'N'"
@click.stop="confirmCheck(user.user_id)">승인</button>
<p v-else class="approve">승인 완료</p>
</td>
</tr>
</tbody>
</table>
<div class="flex-center">
<PaginationButton v-if="userListCount > 0" v-model:currentPage="userListSearch.currentPage"
:perPage="userListSearch.perPage" :totalCount="userListCount" :maxRange="5"
:click="userSelectList" />
</div>
</div>
<div v-show="currentTab == 1">
<div class="btn-wrap data-select-list">
<div class="data-select">
<select v-model="companyListSearch.searchType" name="data-table-sild" id="data-table-sild"
class="data-table-search">
<option v-for="(item, idx) in option2" :key="idx" :value=item.value>
{{ item.name }}
</option>
</select>
<div class="input-group">
<input type="text" class="input" placeholder="검색어를 입력해주세요."
v-model="companyListSearch.searchText" @keyup.enter="companySelectList()">
<input class="button--submit" value="검색" type="submit" @click="companySelectList()">
</div>
</div>
<div>
<p>※ 보안을 위해, 담당자명 검색시 전체 이름을 정확하게 입력해주세요.</p>
</div>
</div>
<table>
<thead>
<tr>
<th>NO</th>
<th>아이디</th>
<th>기업명</th>
<th>담당자명</th>
<th>이메일</th>
<th>승인</th>
</tr>
</thead>
<tbody>
<tr v-for="(company, index) in companyList" :key="index"
@click="companySelectOnePage(company)">
<td v-show="company.use_yn === 'Y'">{{ companyIdx - index }}</td>
<td v-show="company.use_yn === 'Y'">{{ company.user_id }}</td>
<td v-show="company.use_yn === 'Y'">{{ company.company_nm }}</td>
<td v-show="company.use_yn === 'Y'">{{ company.user_nm }}</td>
<td v-show="company.use_yn === 'Y'">{{ company.user_eml }}</td>
<td v-show="company.use_yn === 'Y'"><button class="red-btn"
v-if="company.create_account_approval === 'N'"
@click.stop="confirmCheck(company.user_id)">승인</button>
<p v-else class="approve">승인 완료</p>
</td>
</tr>
</tbody>
</table>
<div class="flex-center">
<PaginationButton v-if="companyListCount > 0" v-model:currentPage="companyListSearch.currentPage"
:perPage="companyListSearch.perPage" :totalCount="companyListCount" :maxRange="5"
:click="companySelectList" />
</div>
</div>
<div v-show="currentTab == 2">
<div class="btn-wrap data-select-list">
<div class="data-select">
<select v-model="managerListSearch.searchType" name="data-table-sild" id="data-table-sild"
class="data-table-search">
<option v-for="(item, idx) in option3" :key="idx" :value=item.value>
{{ item.name }}
</option>
</select>
<div class="input-group">
<input type="text" class="input" placeholder="검색어를 입력해주세요."
v-model="managerListSearch.searchText" @keyup.enter="managerSelectList()">
<input class="button--submit" value="검색" type="submit" @click="managerSelectList()">
</div>
</div>
<div>
<p>※ 보안을 위해, 이름 검색시 전체 이름을 정확하게 입력해주세요.</p>
</div>
</div>
<table>
<thead>
<tr>
<th>NO</th>
<th>아이디</th>
<th>이름</th>
<th>이메일</th>
<th>등록자</th>
<th>등록시간</th>
</tr>
</thead>
<tbody>
<tr v-for="(mngr, index) in mngrList" :key="index" @click="adminSelectOnePage(mngr)" class="user-list-padding">
<td>{{ mngrIdx - index }}</td>
<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="flex-center">
<PaginationButton v-if="mngrListCount > 0" v-model:currentPage="managerListSearch.currentPage"
:perPage="managerListSearch.perPage" :totalCount="mngrListCount" :maxRange="5"
:click="managerSelectList" />
</div>
<div class="btn-wrap">
<button class="blue-btn" @click="modalType = 'userInsert'">등록</button>
</div>
</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 class="flex admin-id">
<input type="text" placeholder="ID" v-model="mngr.mngr_id" class="id-input" ref="mngr_id"/>
<button type="button" class="idchk blue-btn" @click="idCheck">중복확인</button>
</div>
<div><input type="password" name="pw" id="pw" placeholder="password" v-model="mngr.mngr_pw" ref="mngr_pw"
@change="passwordSyncCheck()" /></div>
<div>
<input type="password" name="pwCk" id="pwCk" placeholder="password 확인" v-model="passwordCheck" ref="mngr_pwCheck"
@change="passwordSyncCheck()" />
<div v-if="this.passwordCheckFlag === true" style="color:rgb(0, 198, 60); display:block" class="warning">비밀번호
일치</div>
<div v-else-if="this.passwordCheckFlag === false" style="color:red; display:block" class="warning">비밀번호 불일치</div>
</div>
<div><input type="text" placeholder="이름" v-model="mngr.mngr_nm" ref="mngr_nm" /></div>
<div class="flex">
<input type="text" v-model="email_id" placeholder="email" ref="email_id">
<div class="at">@</div>
<input class="mail-input" type="text" v-model="email_domain" :disabled="email_disabled === true" ref="email_domain">
<select @change="emailValue($event.target.value)" class="mail-select">
<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 small-btn" @click="closeModal()">취소</button>
<button class="blue-btn small-btn" @click="managerInsert">저장</button>
</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.js';
import PaginationButton from "../../../component/pagination/PaginationButton.vue";
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,
//아이디 중복
idCheck_boolean: false,
//이메일
email_disabled: true,
email_id: null,
email_domain: null,
// 관리자 목록조회
managerListSearch: {
currentPage: 1,
perPage: 10,
searchType: 'id',
searchText: null,
mngr_id: null,
mngr_nm: null
},
mngrList: [],
mngrListCount: 0,
mngrIdx: 0,
// 사용자 목록조회
userListSearch: {
currentPage: 1,
perPage: 10,
searchType: 'id',
searchText: null,
user_id: null,
user_nm: null
},
userList: [],
userListCount: 0,
userIdx: 0,
// 기관회원 목록조회
companyListSearch: {
currentPage: 1,
perPage: 10,
searchType: 'id',
searchText: null,
user_id: null,
user_nm: null
},
companyList: [],
companyListCount: 0,
companyIdx: 0,
store: useStore(),
option1: [
{ name: '아이디', value: 'id'},
{ name: '이름', value: 'name'},
],
option2: [
{ name: '아이디', value: 'id'},
{ name: '기업명', value: 'cpn_name'},
{ name: '담당자명', value: 'name'},
],
option3: [
{ name: '아이디', value: 'id'},
{ name: '이름', value: 'name'},
],
};
},
methods: {
openModal: function () {
this.isModalOpen = true;
this.passwordSyncCheck()
},
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 = null;
} else if (this.mngr.mngr_pw != this.passwordCheck) {
this.passwordCheckFlag = false;
} else {
this.passwordCheckFlag = true;
}
},
//ID 중복 검사
idCheck: 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.idCheck_boolean = false;
return false;
} else {
alert("사용가능한 ID 입니다.");
vm.idCheck_boolean = true;
return true;
}
}).catch(function (error) {
console.log("idCheck - error : ", error);
alert("중복검사 오류, 다시 시도해주세요.");
vm.idCheck_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를 입력해주세요.');
this.$refs.mngr_id.focus()
return false;
}
if (this.idCheck_boolean === false) {
alert("ID중복검사를 완료해주세요.")
this.$refs.mngr_id.focus()
return false;
}
console.log("this.mngr.mngr_pw",this.mngr.mngr_pw)
if (this.mngr.mngr_pw == '' || this.mngr.mngr_pw == null){
alert("비밀번호를 입력하세요.")
this.$refs.mngr_pw.focus()
return false;
}
if (this.passwordCheckFlag === false){
alert("비밀번호가 일치하지 않습니다.")
this.$refs.mngr_pwCheck.focus()
return false;
}
if (COMMON_UTIL.isEmpty(this.mngr.mngr_nm) === false) {
alert('이름을 입력해주세요.');
this.$refs.mngr_nm.focus()
return false;
}
if (COMMON_UTIL.isEmpty(this.email_id) === false) {
alert('이메일 ID를 입력해주세요.');
this.$refs.email_id.focus()
return false;
}
if (COMMON_UTIL.isEmpty(this.email_domain) === false) {
alert('도메인을 선택 혹은 입력해주세요.');
this.$refs.email_domain.focus()
return false;
}
return true
},
//관리자 등록
managerInsert: async function () {
if (await this.managerInsertCheck() === false) {
return;
}
const vm = this;
vm.mngr.mngr_eml = vm.email_id + '@' + vm.email_domain;
var iv = vm.store.state.key.iv;
var salt = vm.store.state.key.salt;
var passPhrase = vm.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 });
let encryptedMngrId = crypto.AES.encrypt(vm.mngr.mngr_id, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
let encryptedMngrPw = crypto.AES.encrypt(vm.mngr.mngr_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
let encryptedMngrNm = crypto.AES.encrypt(vm.mngr.mngr_nm, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
let encryptedMngrEml = crypto.AES.encrypt(vm.mngr.mngr_eml, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
var data = {
mngr_id: encryptedMngrId,
mngr_pw: encryptedMngrPw,
mngr_nm: encryptedMngrNm,
mngr_eml: encryptedMngrEml,
};
axios({
url: '/managerInsert.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: data
}).then(function (response) {
// console.log("userInsert - response : ", response);
let result = response.data;
if (result > 0) {
alert("사용자 등록을 완료 하였습니다.");
vm.isModalOpen = false;
vm.modalType = null;
vm.mngr.mngr_id = null;
vm.mngr.mngr_pw = null;
vm.mngr.mngr_nm = null;
vm.mngr.mngr_eml = null;
vm.passwordCheck = null;
vm.email_id = null;
vm.email_domain = null;
vm.managerSelectList();
} else {
alert("등록 실패, 관리자에게 문의해주세요.");
vm.isModalOpen = false;
}
}).catch(function (error) {
console.log("userInsert - error : ", error);
alert("사용자 등록 오류, 관리자에게 문의해주세요.");
vm.isModalOpen = false;
})
},
// 관리자 조회
managerSelectList: function () {
const vm = this;
axios({
url: '/managerSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.managerListSearch
}).then(function (response) {
//console.log("managerSelectList - response : ", response.data);
vm.mngrListCount = response.data.managerListCount
vm.mngrList = response.data.managerList;
vm.mngrIdx = vm.mngrListCount - (vm.managerListSearch.currentPage - 1) * vm.managerListSearch.perPage;
}).catch(function (error) {
console.log("managerSelectList - error : ", error);
alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
});
},
// 일반회원 조회
userSelectList: function () {
const vm = this;
axios({
url: '/user/userSelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.userListSearch
}).then(function (response) {
//console.log("userSelectList - response : ", response.data);
vm.userListCount = response.data.userListCount
vm.userList = response.data.userList;
vm.userIdx = vm.userListCount - (vm.userListSearch.currentPage - 1) * vm.userListSearch.perPage;
}).catch(function (error) {
console.log("userSelectList - error : ", error);
alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
});
},
// 기관회원 조회
companySelectList: function () {
const vm = this;
axios({
url: '/company/companySelectList.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.companyListSearch
}).then(function (response) {
//console.log("companySelectList - response : ", response.data);
vm.companyListCount = response.data.companyListCount;
vm.companyList = response.data.companyList;
vm.companyIdx = vm.companyListCount - (vm.companyListSearch.currentPage - 1) * vm.companyListSearch.perPage;
}).catch(function (error) {
console.log("companySelectList - error : ", error);
alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
});
},
//사용자 승인
approval: function (userId) {
const vm = this;
axios({
url: '/user/userApproval.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { user_id: userId }
}).then(function (response) {
if (response.data > 0) {
alert(userId + " 님에 대한 승인이 완료되었습니다.");
vm.userSelectList()
vm.companySelectList()
}
}).catch(function (error) {
console.log("approval - error : ", error);
alert('승인오류, 관리자에게 문의해주세요.');
});
},
//사용자 승인을 위한 confirm창
confirmCheck: function (userId) {
var confirmation = confirm(userId + " 사용자를 승인 하시겠습니까?");
if (confirmation) {
this.approval(userId);
} else {
alert(userId + " 님에 대한 승인을 취소하였습니다. 확인 후 재승인 해주시기 바랍니다.")
}
},
//상세조회 페이지로 이동
userSelectOnePage: function (user) {
this.$router.push({ path: '/adm/userSelectOne.page', query: { 'user_id': user.user_id } });
},
companySelectOnePage: function (company) {
this.$router.push({ path: '/adm/companySelectOne.page', query: { 'user_id': company.user_id } });
},
//상세조회 페이지로 이동
adminSelectOnePage: function (admin) {
this.$router.push({ path: '/adm/userSelectOne.page', query: { 'mngr_id': admin.mngr_id } });
},
},
watch: {
"modalType": function (newValue, oldValue) {
if (this.modalType != null) {
console.log("modalType watch: ", newValue, oldValue);
this.openModal();
}
},
"mngr.mngr_id": function(newVal, oldVal){
this.idCheck_boolean = false;
console.log("this.idCheck_boolean",this.idCheck_boolean)
}
},
computed: {},
components: {
'PaginationButton': PaginationButton,
},
mounted() {
this.managerSelectList();
this.userSelectList();
this.companySelectList();
},
};
</script>