시스템관리 - 권한관리, 고객관리 - 청약고객관리/회원관리 추가

This commit is contained in:
kimre
2022-06-09 21:36:05 +09:00
parent b832e1a0be
commit 940707deaa
113 changed files with 9134 additions and 2100 deletions

View File

@@ -0,0 +1,177 @@
<template>
<div class="wrap bg-wrap">
<div class="dimmed modal26" @click="ModalClose();"></div>
<div class="popup-wrap modal26">
<div class="popup modal26">
<div class="pop-head">
<h3 class="pop-tit">관리자명 조회</h3>
</div>
<!--
<div class="pop-cont-detail input_box">-->
<div class="pop-cont-detail">
<label>ID</label>
<div class="input_search">
<input class="search-box" type="text" placeholder="아이디 입력" v-model.trim="madangId" ref="madangId">
<button type="button" class="button grey" @click="searchMadangId()">조회</button>
</div>
</div>
<div class="pop-btn2">
<button class="btn-pcolor">확인</button>
<button class="btn-default" @click="ModalClose();">취소</button>
</div>
</div>
<search-id-popup ref="searchIdPopModal"> </search-id-popup>
</div>
</div>
</template>
<script>
import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import SearchIdPopup from '../components/SearchIdPopup.vue';
export default {
name: "adminNmPop",
data(){
return{
row: {},
authType: [],
insertType:0,
madangId:'',
name:'',
mdn:'',
email:'',
auth:'',
stat: '',
userNm:"",
userPwd1:"",
userPwd2:"",
code:"",
agencyNm:"",
idCheck: false,
props: {},
}
},
components: {
SearchIdPopup,
},
model: {
//prop: 'sendData',
//event: 'event-data'
},
//props: ['sendData'],
created(){
this.setAuthData();
this.formReset();
},
methods : {
// 마당ID 조회
async searchMadangId(){
if(!this.madangId){
alert('마당ID를 입력해주세요');
this.$refs.madangId.focus();
return false;
}
var params = {
"adminId": this.madangId
}
console.log(this.madangId);
try {
const response = await custMgtApi.selectSearchMadangId(params);
const result = response.data;
console.log(result);
if (result != null && result.retCode == "0000") {
this.madangId = result.data.adminId;
this.userNm = result.data.adminNm;
this.code = result.data.adminCd;
this.agencyNm = result.data.agencyNm;
// 마당ID조회 성공 팝업노출
this.searchIdPop();
//console.log(this.userNm);
this.idCheck = true;
//this.$refs._pwd1.focus();
}else if(result.retCode == '1004'){
//alert('마당ID 정보가 없습니다.');
this.searchIdFailPop();
this.idCheck = false;
this.$refs.madangId.focus();
return false;
}else {
//alert('마당ID 조회에 실패하였습니다.');
this.searchIdFailPop();
this.idCheck = false;
this.$refs.madangId.focus();
return false;
}
} catch(err) {
//alert("실패 하였습니다.");
this.searchIdFailPop();
this.idCheck = false;
this.$refs.madangId.focus();
return false;
}
},
searchIdPop(){
//alert('마당ID 조회 성공 팝업이동 ->');
var params = {
"madangId": this.madangId,
"userNm": this.userNm,
"code": this.code,
"agencyNm": this.agencyNm
}
this.$refs.searchIdPopModal.searchIdPop(params);
},
searchIdFailPop(){
//alert('마당ID 조회 실패 팝업이동 ->');
this.$refs.searchIdPopModal.searchIdFailPop();
},
resetRegPop(){
this.formReset();
this.$refs.madangId.focus();
},
setAuthData() {
// 권한 옵션.
api.commAuth().then(response => {
this.authType = response.data.data.list;
});
},
formReset(){
Object.assign(this.$data, this.$options.data());
},
// 모달 띄우기
ModalOpen(){
this.formReset();
var dimmed = document.getElementsByClassName('modal26');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
// 모달 끄기
ModalClose(){
console.log('adminNm modal close');
var dimmed = document.getElementsByClassName('modal26');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
}
}
// import '../../../assets/css/layout.css?ver=02';
// import '../../../assets/css/contents.css?ver=01';
// import '../../../assets/css/common.css?ver=02';
// import '../../../assets/css/style.css';
</script>

View File

@@ -0,0 +1,129 @@
<template>
<div>
<div class="dimmed modal25" onClick="ModalClose();"></div>
<div class="popup-wrap modal25">
<!-- 이월금액 상세내역 -->
<div class="popup modal25 popup_form price">
<div class="pop-head">
<h3 class="pop-tit">이월금액 상세내역</h3>
</div>
<div class="info">
<div class="count"> <span>{{totalCnt}}</span>
<p>최근 3개월 내역을 확인할 있습니다.</p>
</div>
</div>
<form autocomplete="off">
<table class="table-r">
<thead>
<tr>
<th>날짜</th>
<th>시작 금액</th>
<th>사용 금액</th>
<th>이월 금액</th>
<th>소멸 금액</th>
</tr>
</thead>
<tbody>
<tr v-for="(option, i) in list" v-bind:key="i">
<td>{{ option.date }}</td>
<td>{{ option.startAmount }}</td>
<td>{{ option.useAmount }}</td>
<td>{{ option.krrrAmount }}</td>
<td>{{ option.extshAmount }}</td>
</tr>
</tbody>
</table>
</form>
<div class="pop-btn2">
<button class="btn-default" @click="carryOverListPopClose();">닫기</button>
<button class="btn-pcolor download" @click="excelDown();">엑셀 다운로드</button>
</div>
</div>
</div>
</div>
</template>
<script>
//import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import xlsx from '@/common/excel';
import moment from 'moment';
export default {
name: "carryOverListPop",
data(){
return{
row: {},
list:[],
totalCnt: '',
pageType: 'CARRY',
}
},
created(){
this.getExcelHeader();
},
methods :{
// 모달 띄우기
async carryOverListPopOpen(serviceId){
console.log(serviceId);
this.row.serviceId = serviceId;
try {
const response = await custMgtApi.carryOverList(this.row);
const result = response.data;
console.log(result);
if (result != null && result.retCode == "0000") {
this.list = result.data.list;
this.totalCnt = result.data.totalCnt;
}
} catch(err) {
alert("실패 하였습니다.");
}
var dimmed = document.getElementsByClassName('modal25');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
// 모달 끄기
carryOverListPopClose(){
var dimmed = document.getElementsByClassName('modal25');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
toComplete(){
this.getParent('adminList').$refs.table.reloadData();
this.ModalClose();
},
excelDown() {
if (this.list.length <= 0) {
alert('조회된 데이터가 없습니다.');
return false;
}
let today = moment().format('YYYYMMDDHHmmss');
const saveFileName = `이월금액_${today}.xlsx`;
let options = {
header: this.excelHeader,
dataOrder: 'header'
};
// console.log(data);
xlsx.export(this.list, saveFileName, options).then(() => {});
},
getExcelHeader() {
// 헤더를 mockup으로 관리한다.
custMgtApi.getExcelHeader(this.pageType).then(res => {
this.excelHeader = res;
});
},
}
}
</script>
<style>
.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
.popup-btn-wrap button:hover {background: #000; color: #fff;}
</style>

View File

@@ -0,0 +1,255 @@
<template>
<!-- <div class="wrap bg-wrap"> -->
<div>
<div class="dimmed modal33" @click="excelPopClose();"></div>
<div class="popup-wrap modal33">
<!-- 사용자 ID 대량 생성 -->
<div class="popup modal33 popup_form">
<div class="pop-head">
<h3 class="pop-tit">사용자 ID 대량 생성</h3>
</div>
<table>
<tbody>
<tr>
<th>관리자 ID</th>
<td>{{adminId}}</td>
</tr>
<tr>
<th>사용자 ID 업로드</th>
<td>
<div class="pop-btn2 bulk">
<button class="btn-default" @click="sampleDown">샘플 다운로드</button>
<input type="file" ref="file" style="display: none" @change="readFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
<button class="button grey" @click="$refs.file.click()">파일 업로드</button>
</div>
<p class="file" id="uploadFile">
</p>
</td>
</tr>
</tbody>
</table>
<div class="pop-btn2">
<button class="btn-pcolor">저장</button>
<button class="btn-default" @click="excelPopClose">취소</button>
</div>
</div>
</div>
</div>
</template>
<script>
import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import { utils_mixin, chkPattern2 } from '../service/mixins';
import xlsx from '@/common/excel';
import moment from 'moment';
import XLSX from 'xlsx';
export default {
name: "memberBulkRegPop",
mixins: [utils_mixin, chkPattern2],
data(){
return{
row: {},
excelHeader: [],
pageType: 'SAMPLE',
adminId:'',
varList : ["이름","휴대폰번호","기타1","기타2","기타3","기타4"],
varList2 : ["이름","기타1","기타2","기타3","기타4"],
nData : [],
oData : [],
}
},
created(){
this.getExcelHeader();
},
methods :{
// 모달 띄우기
excelPopOpen(adminId){
this.adminId = adminId;
var excelPop = document.getElementsByClassName('modal33');
for(var i = 0; i < excelPop.length; i++){
excelPop[i].style.display = 'block';
}
},
// 모달 끄기
excelPopClose(){
//this.formReset();
var excelPop = document.getElementsByClassName('modal33');
for(var i = 0; i < excelPop.length; i++){
excelPop[i].style.display = 'none';
}
},
// 저장 후 부모창 호출.
toComplete(){
this.getParent('custList').$refs.table.reloadData();
this.ModalClose();
},
async doInsert(){
if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
try {
const response = await custMgtApi.insertTestId(this.row);
const result = response.data;
if (result != null && result.retCode == "0000") {
alert('저장 하였습니다.');
this.toComplete();
}
} catch(err) {
alert("실패 하였습니다.");
}
}
},
async sampleDown(){
let today = moment().format('YYYYMMDDHHmmss');
const saveFileName = `어드민_사용자ID 대량생성_${today}.xlsx`;
let options = {
header: this.excelHeader,
dataOrder: 'header'
};
xlsx.export([], saveFileName, options).then(() => {});
},
getExcelHeader() {
// 헤더를 mockup으로 관리한다.
custMgtApi.getExcelHeader(this.pageType).then(res => {
this.excelHeader = res;
});
},
readFile(event) {
const file = event.target.files[0];
console.log(file.name);
// inner Html.
const button = document.createElement('button');
const text = document.createElement('p');
text.innerText = file.name;
button.addEventListener('click', () => {
this.delFile(event);
})
const root = document.getElementById('uploadFile');
root.appendChild(text);
root.appendChild(button);
let reader = new FileReader();
let tmpResult = {};
const vm = this;
reader.onerror = (e) => {
alert('파일을 읽는 동안 에러가 발생 했습니다.');
}
reader.onloadend = (e) => {
}
reader.onload = (e) => {
let data = reader.result;
let workbook = XLSX.read(data, {type: 'binary'});
workbook.SheetNames.forEach(sheetName => {
workbook.Sheets[sheetName].A1.w = "id";
workbook.Sheets[sheetName].B1.w = "name";
workbook.Sheets[sheetName].C1.w = "mdn";
workbook.Sheets[sheetName].D1.w = "email";
workbook.Sheets[sheetName].E1.w = "stat";
// console.log(workbook.Sheets[sheetName].A1);
const rowObj = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
// const rowObj = XLSX.utils.sheet_to_json(wb.Sheets[sheetName],{raw:true});
tmpResult = rowObj;
const limitCnt = 101;
if(rowObj.length > limitCnt){
alert('100건이상은 등록되지 않습니다.');
return false;
}
for (const [idx,r] of rowObj.entries()) {
if(idx > limitCnt-1 ) {
break;
}
let {ID,이름,휴대폰번호,이메일,ID잠금} = r;
ID = ''+(vm.isNull(ID)?'':ID);
이름 = ''+(vm.isNull(이름)?'':이름);
휴대폰번호 = ''+(vm.isNull(휴대폰번호)?'':휴대폰번호);
이메일 = ''+(vm.isNull(이메일)?'':이메일);
ID잠금 = ''+(vm.isNull(ID잠금)?'':ID잠금);
// 휴대폰번호=''+휴대폰번호;
if(!vm.isMobile(휴대폰번호)){
if(vm.isMobile2(휴대폰번호)){
휴대폰번호='0'+휴대폰번호;
}
}
let {retVal,msg } = vm.validXlxs({이름,휴대폰번호});
if(retVal){
const pVal = [{ name:'이름',val:이름, len:20,},
{ name:'ID잠금',val:ID잠금, len:4,},];
const rVal = vm.isTitle(pVal);
if(rVal.retVal){
vm.nData.push({name:이름,mdn:휴대폰번호,msg});
}else{
vm.oData.push({이름,휴대폰번호,오류내용:rVal.msg});
}
}else{
vm.oData.push({이름,휴대폰번호,오류내용:msg});
}
}
});
console.log(vm.nData);
// this.excelJsonData=tmpResult;
};
reader.readAsBinaryString(file);
},
validXlxs({이름,휴대폰번호}){
if(this.isNull(이름)){
return {retVal:false,msg:'이름 누락'};
}
if(this.isNull(휴대폰번호)){
return {retVal:false,msg:'휴대폰번호 누락'};
}
if(!this.isMobile(휴대폰번호)){
if(!this.isMobile2(휴대폰번호)){
return {retVal:false,msg:'휴대폰번호 형식 오류'};
}
}
return {retVal:true,msg:'정상'};
},
isTitle(pVal) {
for (const o of pVal) {
if (this.bytes(o.val) > o.len) {
return {retVal:false,msg:`${o.name} 컬럼: 문자열 길이 오류(${o.len}자)`};
}
const strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
const regExp_g = new RegExp(strRegExp,'g');
if(!(regExp_g.test(o.val))){
return {retVal:false,msg:`${o.name} 컬럼: 특수 문자 오류`};
}
}
return {retVal:true,msg:'정상'};
},
delFile(event){
console.log("del~~~~");
const file = event.target.files[0];
console.log(file.name);
//this.$refs.file.reset();
this.$refs.file.value=null;
let element = document.getElementById("uploadFile");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
// uploadFile
}
}
}
</script>
<style>
.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
.popup-btn-wrap button:hover {background: #000; color: #fff;}
</style>

View File

@@ -0,0 +1,89 @@
<template>
<MainSlot ref="mainSlot">
<template #list="slotProps">
<div class="info">
<div class="count">사용자ID 정보
<p>( 최대 100개까지 등록 가능 )</p>
</div>
<div class="button_group">
<button type="button" class="button blue add">사용자 ID 생성</button>
<button type="button" class="button blue add">사용자 ID 대량생성</button>
<button type="button" class="button white del">삭제</button>
</div>
</div>
<!-- <div class="table"> -->
<custom-grid
ref="table"
:totalItems="'totalItems'"
:url="grid.url"
:pagePerRows="grid.pagePerRows"
:initialRequest="grid.initialRequest"
:pagination="grid.pagination"
:isCheckbox="grid.isCheckbox"
:columns="grid.columns"
:noDataStr="grid.noDataStr"
:addCls="grid.addCls"
:header="grid.headder"
></custom-grid>
<!-- </div> -->
</template>
</MainSlot>
</template>
<script>
import customGrid from "@/components/CustomGrid";
import MainSlot from '../views/MemberDetail';
export default {
name: "memberDetailList",
data() {
return {
grid: {
url: '/api/v1/bo/custMgt/memberDetailList',
pagePerRows: 20,
pagination: true,
isCheckbox: true, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: false,
addCls: 'box_OFvis',
columns: [
{ name: 'no', header: 'No', align: 'center', width: 60},
{ name: 'userNm', header: '이름', align: 'center', width: 130},
{ name: 'userType', header: '구분', align: 'center', width: 130},
{ name: 'adminId', header: '관리자ID', align: 'center', width: 130, cls: 'td_line'},
{ name: 'userId', header: 'ID', align: 'center', width: 130},
{ name: 'regDt', header: '등록일', align: 'center', width: 130},
{ name: 'userStat', header: '상태', align: 'center', width: 130}
],
noDataStr: '검색 결과가 없습니다.',
params: {}
}
}
},
computed: {
},
created() {
console.log(this.$route.params.serviceId);
this.grid.params.searchText=this.$route.params.searchText;
},
mounted() {
this.toPage('mounted')
},
components: {
"customGrid": customGrid,
MainSlot,
},
methods:{
toPage(lifeCycle){
const page = this.isNull(this.$route.params.page) ?1:this.$route.params.page;
try {
this.$refs.table.movePage(page, true);
}catch(error){
}
},
}
};
</script>

View File

@@ -0,0 +1,144 @@
<template>
<div>
<!-- s: 팝업 -->
<!-- 관리자명 조회 실패시 -->
<div class="dimmed modal27" @click="searchIdFailModalClose();"></div>
<div class="popup-wrap modal27">
<div class="popup modal27">
<div class="pop-head">
<h3 class="pop-tit">관리자명 조회</h3>
</div>
<div class="pop-cont">
<p>입력하신 마당 ID를 조회할 없습니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="searchIdFailModalClose();">확인</button>
</div>
</div>
</div>
<!-- 관리자 ID 조회 -->
<div class="dimmed modal28" @click="searchIdModalCancelClose();"></div>
<div class="popup-wrap modal28">
<div class="popup modal28">
<div class="pop-head">
<h3 class="pop-tit">관리자 ID 조회</h3>
</div>
<div class="pop-cont">
<p>선택하신 정보가 아래와 같습니다.</p>
<p>유치자 정보를 수정하시겠습니까?</p>
</div>
<ul class="pop-cont-detail">
<li>마당ID : {{madangId}}</li>
<li>코드 : {{code}}</li>
<li>이름 : {{name}}</li>
<li>대리점명 : {{agencyNm}}</li>
</ul>
<div class="pop-btn2">
<button class="btn-pcolor" @click="searchIdModalOkClose();">확인</button>
<button class="btn-default" @click="searchIdModalCancelClose();">취소</button>
</div>
</div>
</div>
<!-- 시스템관리 팝업 -->
<!-- e: 팝업 -->
</div>
</template>
<script>
import custMgtApi from "../service/custMgtApi.js";
export default {
data(){
return{
authType: [],
madangId:'',
adminPw:'',
name:'',
mdn:'',
email:'',
auth:'',
stat: '',
code: '',
userNm:"",
agencyNm:"",
}
},
methods :{
// 모달 띄우기(성공모달)
searchIdModalOpen(target){
console.log("SearchIdModalOpen");
var dimmed = document.getElementsByClassName('dimmed modal28');
var wrap = document.getElementsByClassName('popup-wrap modal28');
var obj = document.getElementsByClassName(target);
dimmed[0].style.display = 'block';
wrap[0].style.display = 'block';
obj[0].style.display = 'block';
},
// 성공 모달 끄기(ok)
searchIdModalOkClose(){
var dimmed = document.getElementsByClassName('modal28');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
// 성공 모달 끄기(cancel)
searchIdModalCancelClose(){
var dimmed = document.getElementsByClassName('modal28');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
this.$parent.resetRegPop();
},
// 모달 띄우기(실패모달)
searchIdFailModalOpen(target){
console.log("SearchIdFailModalOpen");
var dimmed = document.getElementsByClassName('dimmed modal27');
var wrap = document.getElementsByClassName('popup-wrap modal27');
var obj = document.getElementsByClassName(target);
dimmed[0].style.display = 'block';
wrap[0].style.display = 'block';
obj[0].style.display = 'block';
},
// 실패 모달 끄기
searchIdFailModalClose(){
var dimmed = document.getElementsByClassName('modal27');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
this.$parent.resetRegPop();
},
searchIdPop(params){
var userName = params.userNm;
this.madangId = params.madangId ;
this.name = params.userNm;
this.code = params.code;
this.agencyNm = params.agencyNm;
//alert( userName + ': 조회 성공');
var dimmed = document.getElementsByClassName('modal28');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
//this.searchIdModalModalOpen('modal18');
},
searchIdFailPop(){
//alert( '조회 실패');
var dimmed = document.getElementsByClassName('modal27');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
}
}
// import '../../../assets/css/layout.css?ver=02';
// import '../../../assets/css/contents.css?ver=01';
// import '../../../assets/css/common.css?ver=02';
// import '../../../assets/css/style.css';
</script>

View File

@@ -0,0 +1,227 @@
<template>
<!-- <div class="wrap bg-wrap"> -->
<div>
<div class="dimmed" @click="ModalClose();"></div>
<div class="popup-wrap">
<!-- 테스트 ID 생성 -->
<div class="popup modal29 popup_form">
<div class="pop-head">
<h3 class="pop-tit">테스트 ID 생성</h3>
</div>
<form autocomplete="off">
<table>
<tbody>
<tr>
<th>ID</th>
<td><input type="text" placeholder="아이디 입력" v-model.trim="userId" ref="_userId" /></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd1" v-model.trim="userPwd1"></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd2" v-model.trim="userPwd2"></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" @keypress="onlyName" @input="onlyName" v-model.trim="userNm" ref="_userNm" required maxlength="40"></td>
</tr>
<tr>
<th>휴대폰번호</th>
<td><input type="number" placeholder="- 자 제외 숫자만 입력" v-model.trim="mdn" v-on:keyup="onlyNum" @input="onlyNum" minlength="10" maxlength="11" ref="_phone"></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="email" v-model.trim="email" @keypress="onlyEmail" @input="onlyEmail" maxlength="20" ref="_email"></td>
</tr>
<tr>
<th class="center">상태</th>
<td>
<input type="radio" name="state" value="01" id="popup_radio1" v-model="userStat">
<label for="popup_radio1">사용</label>
<input type="radio" name="state" value="02" id="popup_radio2" v-model="userStat">
<label for="popup_radio2">정지</label>
</td>
</tr>
</tbody>
</table>
</form>
<div class="pop-btn2">
<button class="btn-default" @click="ModalClose();">취소</button>
<button class="btn-pcolor" @click="doInsert">저장</button>
</div>
</div>
</div>
</div>
</template>
<script>
import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import { utils_mixin, chkPattern2 } from '../service/mixins';
import lodash from "lodash";
export default {
name: "subsRegPop",
mixins: [utils_mixin, chkPattern2],
watch:{
stat(){
console.log('watch : ', this.stat)
}
},
data(){
return{
row: {},
userId:'',
name:'',
mdn:'',
email:'',
userStat: '',
userNm:"",
userPwd1:"",
userPwd2:"",
code:"",
}
},
model: {
prop: 'sendData',
event: 'event-data'
},
props: ['sendData'],
created(){
this.formReset();
},
methods :{
doPwdValidate(){
if(this.isNull(this.userPwd1)){
alert("비밀번호를 입력해 주세요.");
this.$refs._pwd1.focus();
return false;
}
if(this.isNull(this.userPwd2)){
alert("비밀번호 확인을 입력해 주세요.");
this.$refs._pwd2.focus();
return false;
}
if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
alert("비밀번호가 일치하지 않습니다.");
this.$refs._pwd2.focus();
return false;
}
const pwdLen = this.bytes(this.userPwd1);
if(!(pwdLen >= 8 && pwdLen <= 16)){
alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
this.$refs._pwd1.focus();
return false;
}
const pEng = /[A-Za-z]/g; // 영문자
const pNum = /[0-9]/g; // 숫자
const pSpc = /[!@$%^&*]/g; // 특수문자
if(!(pEng.test(this.userPwd1) && pNum.test(this.userPwd1) && pSpc.test(this.userPwd1))) {
alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
this.$refs._pwd1.focus();
return;
}
this.row.userPw=this.userPwd1;
return true;
},
doValidate(){
if(this.isNull(this.userId)){
alert("아이디를 입력해 주세요.");
this.$refs._userId.focus();
return false;
}
if(!this.doPwdValidate()){
return false;
}
if(this.isNull(this.userNm)){
alert("이름을 입력해 주세요");
this.$refs._userNm.focus();
return false;
}
if(this.isNull(this.mdn)){
alert('휴대폰번호를 입력해주세요.');
this.$refs._phone.focus();
return false;
}
const hp = this.mdn;
if(!this.isNull(hp) && !this.isMobile(hp)){
alert("휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요");
this.$refs._phone.focus();
return false;
}
if(this.isNull(this.email)){
alert('이메일을 입력해주세요.');
this.$refs._email.focus();
return false;
}
const email = this.email;
if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
alert("이메일 형식이 잘못되었습니다. 확인해 주세요");
this.$refs._email.focus();
return false;
}
if(this.isNull(this.userStat)){
alert('상태를 선택 해주세요.');
// this.$refs._auth.focus();
return false;
}
this.row.userId=this.userId;
this.row.name=this.userNm;
this.row.mdn=hp;
this.row.email=email;
this.row.userStat=this.userStat;
return true;
},
// 모달 띄우기
ModalOpen(){
var dimmed = document.getElementsByClassName('dimmed');
dimmed[0].style.display = 'block';
var wrap = document.getElementsByClassName('popup-wrap');
wrap[0].style.display = 'block';
var obj = document.getElementsByClassName('modal29');
obj[0].style.display = 'block';
},
// 모달 끄기
ModalClose(){
//this.formReset();
var dimmed = document.getElementsByClassName('dimmed');
dimmed[0].style.display = 'none';
var wrap = document.getElementsByClassName('popup-wrap');
wrap[0].style.display = 'none';
var popup = document.getElementsByClassName('modal29');
popup[0].style.display = 'none';
},
// 저장 후 부모창 호출.
toComplete(){
this.getParent('custList').$refs.table.reloadData();
this.ModalClose();
},
async doInsert(){
if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
try {
const response = await custMgtApi.insertTestId(this.row);
const result = response.data;
if (result != null && result.retCode == "0000") {
alert('저장 하였습니다.');
this.toComplete();
}
} catch(err) {
alert("실패 하였습니다.");
}
}
},
formReset(){
//this.$refs.adminRegForm.reset();
},
}
}
</script>
<style>
.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
.popup-btn-wrap button:hover {background: #000; color: #fff;}
</style>

View File

@@ -0,0 +1,227 @@
<template>
<!-- <div class="wrap bg-wrap"> -->
<div>
<div class="dimmed" @click="ModalClose();"></div>
<div class="popup-wrap">
<!-- 테스트 ID 생성 -->
<div class="popup modal29 popup_form">
<div class="pop-head">
<h3 class="pop-tit">테스트 ID 생성</h3>
</div>
<form autocomplete="off">
<table>
<tbody>
<tr>
<th>ID</th>
<td><input type="text" placeholder="아이디 입력" v-model.trim="userId" ref="_userId" /></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd1" v-model.trim="userPwd1"></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd2" v-model.trim="userPwd2"></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" @keypress="onlyName" @input="onlyName" v-model.trim="userNm" ref="_userNm" required maxlength="40"></td>
</tr>
<tr>
<th>휴대폰번호</th>
<td><input type="number" placeholder="- 자 제외 숫자만 입력" v-model.trim="mdn" v-on:keyup="onlyNum" @input="onlyNum" minlength="10" maxlength="11" ref="_phone"></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="email" v-model.trim="email" @keypress="onlyEmail" @input="onlyEmail" maxlength="20" ref="_email"></td>
</tr>
<tr>
<th class="center">상태</th>
<td>
<input type="radio" name="state" value="01" id="popup_radio1" v-model="userStat">
<label for="popup_radio1">사용</label>
<input type="radio" name="state" value="02" id="popup_radio2" v-model="userStat">
<label for="popup_radio2">정지</label>
</td>
</tr>
</tbody>
</table>
</form>
<div class="pop-btn2">
<button class="btn-default" @click="ModalClose();">취소</button>
<button class="btn-pcolor" @click="doInsert">저장</button>
</div>
</div>
</div>
</div>
</template>
<script>
import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import { utils_mixin, chkPattern2 } from '../service/mixins';
import lodash from "lodash";
export default {
name: "subsRegPop",
mixins: [utils_mixin, chkPattern2],
watch:{
stat(){
console.log('watch : ', this.stat)
}
},
data(){
return{
row: {},
userId:'',
name:'',
mdn:'',
email:'',
userStat: '',
userNm:"",
userPwd1:"",
userPwd2:"",
code:"",
}
},
model: {
prop: 'sendData',
event: 'event-data'
},
props: ['sendData'],
created(){
this.formReset();
},
methods :{
doPwdValidate(){
if(this.isNull(this.userPwd1)){
alert("비밀번호를 입력해 주세요.");
this.$refs._pwd1.focus();
return false;
}
if(this.isNull(this.userPwd2)){
alert("비밀번호 확인을 입력해 주세요.");
this.$refs._pwd2.focus();
return false;
}
if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
alert("비밀번호가 일치하지 않습니다.");
this.$refs._pwd2.focus();
return false;
}
const pwdLen = this.bytes(this.userPwd1);
if(!(pwdLen >= 8 && pwdLen <= 16)){
alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
this.$refs._pwd1.focus();
return false;
}
const pEng = /[A-Za-z]/g; // 영문자
const pNum = /[0-9]/g; // 숫자
const pSpc = /[!@$%^&*]/g; // 특수문자
if(!(pEng.test(this.userPwd1) && pNum.test(this.userPwd1) && pSpc.test(this.userPwd1))) {
alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
this.$refs._pwd1.focus();
return;
}
this.row.userPw=this.userPwd1;
return true;
},
doValidate(){
if(this.isNull(this.userId)){
alert("아이디를 입력해 주세요.");
this.$refs._userId.focus();
return false;
}
if(!this.doPwdValidate()){
return false;
}
if(this.isNull(this.userNm)){
alert("이름을 입력해 주세요");
this.$refs._userNm.focus();
return false;
}
if(this.isNull(this.mdn)){
alert('휴대폰번호를 입력해주세요.');
this.$refs._phone.focus();
return false;
}
const hp = this.mdn;
if(!this.isNull(hp) && !this.isMobile(hp)){
alert("휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요");
this.$refs._phone.focus();
return false;
}
if(this.isNull(this.email)){
alert('이메일을 입력해주세요.');
this.$refs._email.focus();
return false;
}
const email = this.email;
if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
alert("이메일 형식이 잘못되었습니다. 확인해 주세요");
this.$refs._email.focus();
return false;
}
if(this.isNull(this.userStat)){
alert('상태를 선택 해주세요.');
// this.$refs._auth.focus();
return false;
}
this.row.userId=this.userId;
this.row.name=this.userNm;
this.row.mdn=hp;
this.row.email=email;
this.row.userStat=this.userStat;
return true;
},
// 모달 띄우기
ModalOpen(){
var dimmed = document.getElementsByClassName('dimmed');
dimmed[0].style.display = 'block';
var wrap = document.getElementsByClassName('popup-wrap');
wrap[0].style.display = 'block';
var obj = document.getElementsByClassName('modal29');
obj[0].style.display = 'block';
},
// 모달 끄기
ModalClose(){
//this.formReset();
var dimmed = document.getElementsByClassName('dimmed');
dimmed[0].style.display = 'none';
var wrap = document.getElementsByClassName('popup-wrap');
wrap[0].style.display = 'none';
var popup = document.getElementsByClassName('modal29');
popup[0].style.display = 'none';
},
// 저장 후 부모창 호출.
toComplete(){
this.getParent('custList').$refs.table.reloadData();
this.ModalClose();
},
async doInsert(){
if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
try {
const response = await custMgtApi.insertTestId(this.row);
const result = response.data;
if (result != null && result.retCode == "0000") {
alert('저장 하였습니다.');
this.toComplete();
}
} catch(err) {
alert("실패 하였습니다.");
}
}
},
formReset(){
//this.$refs.adminRegForm.reset();
},
}
}
</script>
<style>
.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
.popup-btn-wrap button:hover {background: #000; color: #fff;}
</style>

View File

@@ -0,0 +1,395 @@
<template>
<!-- <div class="wrap bg-wrap"> -->
<div>
<div class="dimmed confirm" @click="confirmModalCancel();"></div>
<div class="popup-wrap confirm">
<!-- 수정 확인 -->
<div class="popup confirm">
<div class="pop-head">
<h3 class="pop-tit">{{title}}</h3>
</div>
<div class="pop-cont">
<p>{{msg}}</p>
</div>
<div class="pop-btn2">
<button class="btn-pcolor" @click="confirmModalClose();">확인</button>
<button class="btn-default" @click="confirmModalCancel();">취소</button>
</div>
</div>
</div>
<!-- 사용자 등록 - 최초 등록 -->
<div class="dimmed confirm-insert" @click="confirmInsertClose();"></div>
<div class="popup-wrap confirm-insert">
<div class="popup confirm-insert">
<div class="pop-head">
<h3 class="pop-tit">사용자 등록</h3>
</div>
<div class="pop-cont">
<p>해당 사용자를 등록하고 인증 메일을</p>
<p>발송하시겠습니까?</p>
<p>사용을 위해서는 등록된 이메일 인증 </p>
<p>서비스 이용이 가능합니다.</p>
</div>
<div class="pop-btn2">
<button class="btn-pcolor" @click="confirmInsert();">확인</button>
<button class="btn-default" @click="confirmInsertClose();">취소</button>
</div>
</div>
</div>
<!-- 사용자 등록 - 이메일 형식 체크 -->
<div class="dimmed validation-email" @click="validationEmailClose();"></div>
<div class="popup-wrap validation-email">
<div class="popup validation-email">
<div class="pop-head">
<h3 class="pop-tit">사용자 등록</h3>
</div>
<div class="pop-cont">
<p>E-mail 형식에 맞지 않습니다.</p>
<p>확인하여 다시 등록 부탁 드립니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="validationEmailClose();">확인</button>
</div>
</div>
</div>
<!-- 사용자 등록 - 아이디 중복 체크 -->
<div class="dimmed validation-id-duplicate" @click="validationIdDuplicateClose();"></div>
<div class="popup-wrap validation-id-duplicate">
<div class="popup validation-id-duplicate">
<div class="pop-head">
<h3 class="pop-tit">사용자 등록</h3>
</div>
<div class="pop-cont">
<p>중복된 아이디가 있습니다.</p>
<p>아이디를 다시 확인하여 등록 부탁드립니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="validationIdDuplicateClose();">확인</button>
</div>
</div>
</div>
<!-- 사용자 등록 - 최대 등록 제한 -->
<div class="dimmed valication-maxlimit" @click="validationMaxlimitClose();"></div>
<div class="popup-wrap validation-maxlimit">
<div class="popup validation-maxlimit">
<div class="pop-head">
<h3 class="pop-tit">사용자 등록</h3>
</div>
<div class="pop-cont">
<p>사용자는 최대 100개까지 등록 가능합니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="validationMaxlimitClose();">확인</button>
</div>
</div>
</div>
<!-- 사용자 등록 - 휴대폰번호 형식 체크 -->
<div class="dimmed valication-phonenumber" @click="valicationPhonenumberClose();"></div>
<div class="popup-wrap valication-phonenumber">
<div class="popup valication-phonenumber">
<div class="pop-head">
<h3 class="pop-tit">사용자 등록</h3>
</div>
<div class="pop-cont">
<p>휴대폰번호를 확인해 주세요.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="valicationPhonenumberClose();">확인</button>
</div>
</div>
</div>
<!-- 사용자 삭제 -->
<div class="dimmed confirm-delete" @click="confirmDeleteClose();"></div>
<div class="popup-wrap confirm-delete">
<div class="popup confirm-delete">
<div class="pop-head">
<h3 class="pop-tit">사용자 삭제</h3>
</div>
<div class="pop-cont">
<p>선택한 사용자를 삭제하시겠습니까?</p>
</div>
<div class="pop-btn2">
<button class="btn-pcolor" @click="confirmDelete();">확인</button>
<button class="btn-default" @click="confirmDeleteClose();">취소</button>
</div>
</div>
</div>
<!-- 사용자 수정 확인 -->
<div class="dimmed confirm-update" @click="confirmUpdateClose();"></div>
<div class="popup-wrap confirm-update">
<div class="popup confirm-update">
<div class="pop-head">
<h3 class="pop-tit">사용자 수정 확인</h3>
</div>
<div class="pop-cont">
<p>변경된 내용을 저장하시겠습니까?</p>
</div>
<div class="pop-btn2">
<button class="btn-pcolor" @click="confirmUpdate();">확인</button>
<button class="btn-default" @click="confirmUpdateClose();">취소</button>
</div>
</div>
</div>
<!-- 사용자 ID 생성 파일 업로드 - 성공 -->
<div class="dimmed success-fileupload" @click="successFileuploadClose();"></div>
<div class="popup-wrap success-fileupload">
<div class="popup success-fileupload">
<div class="pop-head">
<h3 class="pop-tit">사용자 ID 생성 파일 업로드</h3>
</div>
<div class="pop-cont">
<p>정상 업로드 되었습니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="successFileuploadClose();">확인</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "validationConfirmPop",
data(){
return{
row:{},
title:'',
msg: '',
}
},
methods :{
//사용자등록 - 최초등록 Open
confirmInsertOpen(){
var dimmed = document.getElementsByClassName('confirm-insert');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
//this.$parent.
},
//사용자등록 - 최초등록
confirmInsert(){
var dimmed = document.getElementsByClassName('confirm-insert');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
//this.$parent.
},
//사용자등록 - 최초등록 Close
confirmInsertClose(){
var dimmed = document.getElementsByClassName('confirm-insert');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
// 사용자 삭제 Open
confirmDeleteOpen(){
var dimmed = document.getElementsByClassName('confirm-delete');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
//사용자 삭제
confirmDelete(){
var dimmed = document.getElementsByClassName('confirm-delete');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
//사용자 삭제 Close
confirmDeleteClose(){
var dimmed = document.getElementsByClassName('confirm-delete');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
//사용자 수정 확인 Open
confirmUpdateOpen(){
var dimmed = document.getElementsByClassName('confirm-update');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
//사용자 수정 확인
confirmUpdate(){
var dimmed = document.getElementsByClassName('confirm-update');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
this.$parent.updateAdminInfo();
},
// 사용자 수정 Close
confirmUpdateClose(){
var dimmed = document.getElementsByClassName('confirm-update');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
this.toComplete();
},
// 이메일 형식 체크 Open
validationEmailOpen(){
var dimmed = document.getElementsByClassName('validation-email');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
// 이메일 형식 체크 Close
validationEmailClose(){
var dimmed = document.getElementsByClassName('validation-email');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
// 아이디 중복 체크 Open
validationIdDuplicateOpen(){
var dimmed = document.getElementsByClassName('validation-id-duplicate');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
// 아이디 중복 체크 Close
validationIdDuplicateClose(){
var dimmed = document.getElementsByClassName('validation-id-duplicate');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
// 최대 등록 제한 Open
validationMaxlimitOpen(){
var dimmed = document.getElementsByClassName('validation-maxlimit');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
// 최대 등록 제한 Close
validationMaxlimitClose(){
var dimmed = document.getElementsByClassName('validation-maxlimit');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
// 휴대폰번호 형식 체크 Open
valicationPhonenumberOpen(){
var dimmed = document.getElementsByClassName('valication-phonenumber');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
// 휴대폰번호 형식 체크 Close
valicationPhonenumberClose(){
var dimmed = document.getElementsByClassName('valication-phonenumber');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
},
// 사용자 ID 생성 파일 업로드 - 성공 Open
successFileuploadOpen(){
var dimmed = document.getElementsByClassName('success-fileupload');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
},
// 사용자 ID 생성 파일 업로드 - 성공 Close
successFileuploadClose(){
var dimmed = document.getElementsByClassName('success-fileupload');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
// 목록페이지 이동
this.toComplete();
},
// 정상완료 후 목록페이지 이동
toComplete(){
this.row.searchType1 = '';
this.row.searchType2= '';
this.row.searchType3= '';
this.row.searchText1= '';
this.row.startDt= '';
this.row.endDt= '';
this.row.page = 1;
this.$router.push({ name: 'subsList', params: this.row });
},
// 모달 오픈
confirmModalOpen(props){
var dimmed = document.getElementsByClassName('confirm');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'block';
}
// var modal41 = document.getElementsByClassName('modal41');
// modal41[0].style.display = 'block';
this.title = props.title;
this.msg = props.msg;
},
// 모달 끄기(ok)
confirmModalClose(){
var dimmed = document.getElementsByClassName('confirm');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
this.row.result = true;
// 부모 함수 호출.
this.$parent.confirmCalbackFnc(this.row);
},
// 모달 끄기(취소)
confirmModalCancel(){
var dimmed = document.getElementsByClassName('confirm');
for(var i = 0; i < dimmed.length; i++){
dimmed[i].style.display = 'none';
}
this.row.result = false;
// 부모 함수 호출.
this.$parent.confirmCalbackFnc(this.row);
},
}
}
</script>
<style>
.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
.popup-btn-wrap button:hover {background: #000; color: #fff;}
</style>