jbcheong/hubez-admin
1
0
Fork 0
mirror of http://git.mhez-qa.uplus.co.kr/hubez/hubez-admin.git synced 2025-12-09 00:54:03 +09:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

285
frontend/src/modules/custMgt/views/CustList.vue
View File

@@ -1,285 +0,0 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">청약고객관리</h3>
<p class="breadcrumb">고객관리 &gt; 청약고객관리 &gt; 회원관리</p>
</div>
<div class="top_tab">
<a href="customer_01_list.html" class="on">청약고객관리</a><a href="customer_02_list.html">회원관리</a>
</div>
<div class="search_form">
<div class="search_wrap">
<div class="group">
<div class="input_box cal">
<label for="right" class="label">조회기간</label>
<input class="" type="text" id="" v-model="grid.params.startDt"/>
<input class="" type="text" id="" v-model="grid.params.endDt"/>
</div>
<div class="select_box id">
<label for="right" class="label">상태</label>
<select name="" id="" v-model="grid.params.searchType1">
<option value="">전체</option>
<option value="사용">사용</option>
<option value="정지">정지</option>
</select>
</div>
<div class="select_box">
<label for="right" class="label">구분</label>
<select name="" id="" v-model="grid.params.searchType2">
<option value="">전체</option>
<option value="관리자">관리자</option>
<option value="사용자">사용자</option>
<option value="테스트">테스트</option>
</select>
</div>
</div>
<div class="group">
<div class="select_box">
<label for="right" class="label">상세검색</label>
<select name="" id="" v-model="grid.params.searchType3">
<option value="">전체</option>
<option value="ID">ID</option>
<option value="이름">이름</option>
<option value="관리자ID">관리자ID</option>
</select>
</div>
<div class="input_box">
<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText1"/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
</div>
</div>
<div class="info">
<div class="count">총 <span>{{ totalItems }}</span>건
<div class="select_box NumberSe">
<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
</select>
</div>
</div>
<div class="button_group">
<button type="button" class="button blue">테스트 ID 생성</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>
</div>
</div>
</template>
<script>
import customGrid from '@/components/CustomGrid';
import moment from 'moment';
//import api from '../service/api';
export default {
name: 'custList',
data() {
return {
// 달력 데이터
sDateDiv: 'day',
eDateDiv: 'year',
startDate: null,
endDate: null,
disabledSDate: { from: new Date()},
disabledEDate: { to: new Date()},
// 테이블 리스트 데이터
perPageCnt: 20,
options: [
{ text: '20', value: 20},
{ text: '50', value: 50},
{ text: '100', value: 100}
],
totalItems: 0,
grid: {
url: '/api/v1/bo/custMgt/subsList',
pagePerRows: 20,
pagination: true,
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: false,
addCls: 'box_OFvis',
/*
header: [
[
{ header: 'NO', childNames: [] },
{ header: '서비스 ID\n(관리자 ID)', childNames: [] },
{ header: '고객사명', childNames: [] },
{ header: '가입번호', childNames: [] },
{ header: '가입일', childNames: [] },
{ header: '상태', childNames: [] },
{ header: '유치채널', childNames: [] },
{ header: '요금제', childNames: [] },
{ header: '이월누적금액', childNames: [] }
]
],
*/
columns: [
{ name: 'no', header: 'No', align: 'center', width: 60},
{ name: 'serviceId', header: '서비스 ID\n(관리자 ID)', align: 'center', width: 160 },
{ name: 'custNm', header: '고객사명', align: 'center', width: 130},
{ name: 'regNo', header: '가입번호', align: 'center', width: 130},
{ name: 'regDt', header: '가입일', align: 'center', width: 130, cls: 'td_line'},
{ name: 'stat', header: '상태', align: 'center', width: 130},
{ name: 'channel', header: '유치채널', align: 'center', width: 130},
{ name: 'plan', header: '요금제', align: 'center', width: 130},
{ name: 'carryOver', header: '이월누적금액', align: 'center', width: 130}
],
noDataStr: '검색 결과가 없습니다.',
params: {
searchType1: '',
searchType2: '',
searchType3: '',
searchText1: '',
startDt: '',
endDt: ''
},
excelHeader: []
}
};
},
components: {
customGrid: customGrid,
},
created(){
this.$store.commit("login/isLogin", true);
this.$store.commit("login/isAuthChk", true);
//let cont = document.querySelector(".wrap");
//cont.classList.add("main_wrap");
},
destroyed() {
},
mounted() {
// 달력 세팅
this.grid.params.startDt = this.customFormatter(new Date());
this.grid.params.endDt = this.customFormatter(new Date());
let page = 1;
// 페이지 정보 및 검색 조건
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
console.log('getCondition : '+getCondition);
// store에 저장된 페이지 정보 및 검색 조건을 불러오기
let isKeep = false;
if (getCondition) {
this.grid.pagePerRows = getCondition.perPage;
this.grid.params = getCondition.params;
page = getCondition.page;
isKeep = true;
}
this.search(isKeep);
},
methods: {
search: function(isKeep) {
console.log('this.perPageCnt'+this.perPageCnt);
//console.log(this.grid.params);
this.$refs.table.search(this.grid.params, isKeep);
this.sendStoreData();
},
ModalOpen: function(target){
this.$refs.systemModal.ModalOpen(target);
},
deleteRow: function(){ //로우데이터 삭제하도록 수정
var checkTest = this.$refs.table.checkedElementDatas();
if(checkTest.length == 0){
alert('체크박스에 체크를 해주세요.')
}
for(var i = 0; i < checkTest.length; i++){
alert(checkTest[i].adminId);
}
},
memberDetail: function(data) {
if(data.adminId == 'free'){
this.$router.push({
path: `./views/MemberDetail`
});
}
},
changePerPage: function(){ // 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt;
this.search(true);
},
sendStoreData: function() {
const getP = this.$refs.table.getPagination();
console.log("==========getP : " + getP._currentPage);
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
});
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
console.log("getCondition : "+ getCondition.perPage);
},
customFormatter: function(date) {
// 달력 관련
if (this.sDateDiv == 'month') {
return moment(date).format('YYYY-MM');
} else if (this.sDateDiv == 'year') {
return moment(date).format('YYYY');
} else {
return moment(date).format('YYYY-MM-DD');
}
},
selectedStartDate(day) {
if (this.startDate > this.endDate) {
this.startDate = this.endDate;
}
},
selectedEndDate(day) {
if (day != undefined && day != null) {
this.periodDay = day;
}
},
closeDate(type) {
if (type != undefined && type != null) {
if (type == 'start') {
this.disabledSDate = { from: this.endDate };
this.disabledEDate = { to: this.startDate, from: this.endDate };
} else if (type == 'end') {
this.disabledSDate = { from: this.endDate };
this.disabledEDate = { to: this.startDate, from: new Date() };
}
}
},
},
beforeRouteLeave(to, from, next) {
const getP = this.$refs.table.getPagination();
console.log("==========getP : " + getP._currentPage);
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
});
// 라우트 하기전 실행
next();
}
};
</script>

234
frontend/src/modules/custMgt/views/MemberAdminDetail.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">청약고객관리</h3>
<p class="breadcrumb">고객관리 &gt; 청약고객관리 &gt; 회원관리</p>
</div>
<div class="table table_form">
<form autocomplete="off">
<table>
<colgroup>
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
</colgroup>
<tbody>
<tr>
<th>이름</th>
<td colspan="2">{{userNm}}</td>
</tr>
<tr>
<th>등록일</th>
<td colspan="2">{{regDt}}</td>
<th class="center">구분</th>
<td colspan="2">{{userType}}</td>
</tr>
<tr>
<th>ID</th>
<td colspan="2">
{{userId}}
<button type="button" class="button grey btn-a">로그인</button>
</td>
<th class="center">관리자명</th>
<td colspan="2">{{adminId}} / {{adminNm}}</td>
</tr>
<tr class="tr_input w30">
<th>발송한도 설정</th>
<td colspan="2">
<input type="text" v-model="sendingLimit" ref="_sendingLimit">
</td>
<th class="center">라인타입</th>
<td colspan="2">
<select name="" id="" v-model="lineType">
<option value="ID">일반</option>
<option value="이름">실시간</option>
<option value="관리자ID">배치</option>
</select>
</td>
</tr>
<tr class="w30">
<th>ID 잠금</th>
<td colspan="2">
<input type="radio" name="userStat" value="01" id="right_radio1" v-model="userStat">
<label for="right_radio1">사용</label>
<input type="radio" name="userStat" value="02" id="right_radio2" v-model="userStat">
<label for="right_radio2">정지</label>
</td>
<th class="center">마지막 접속일</th>
<td colspan="2">{{lastLoginDt}}</td>
</tr>
<tr>
<th>메모</th>
<td colspan="5">
<div class="input-memo">
<textarea class="memo_text" cols="160" rows="10" placeholder="메모 입력란입니다. 작성글은 저장 버튼으로 저장되고 마지막 저장 내용은 남아 있습니다" v-model="memo"></textarea>
<!--
textarea 구글 검색하셔서 태그 옵션 더 확인해보면 좋아요
<textarea name="" id="" cols="30" rows="10" placeholder="메모 입력란입니다. 작성글은 저장 버튼으로 저장되고 마지막 저장 내용은 남아 있습니다"></textarea>
-->
<button type="button" class="button grey btn-a">전체 메모보기</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div>
<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" @click="excelPopOpen();">사용자 ID 대량생성</button>
<button type="button" class="button white del">삭제</button>
</div>
</div>
<div class="table">
<table>
<colgroup>
<col width="10%">
<col width="15%">
<col width="15%">
<col width="15%">
<col width="15%">
<col width="15%">
<col width="15%">
</colgroup>
<thead>
<tr>
<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
<th>NO</th>
<th>ID</th>
<th>이름</th>
<th>휴대폰번호</th>
<th>상태</th>
<th>수정</th>
</tr>
</thead>
<tbody>
<tr v-for="(option, i) in list" v-bind:key="i">
<td><input type="checkbox" checked="" id="admin_check2"><label for="admin_check2"></label></td>
<td>{{ option.no }}</td>
<td>{{ option.userId }}</td>
<td>{{ option.userNm }}</td>
<td>{{ option.mdn }}</td>
<td><input type="checkbox" id="user_id_status01" name="user_id_status"><label class="toggle_switch" for="user_id_status01"></label></td>
<td><button type="button" class="button white btn-a">수정</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pop-btn2">
<button class="btn-default" type="button" @click="toComplete();">취소</button>
<button class="btn-pcolor" type="button">저장</button>
</div>
<member-bulk-reg-pop ref="memberBulkRegPop"> </member-bulk-reg-pop>
</div>
</div>
</template>
<script>
import custMgtApi from "../service/custMgtApi.js";
import MemberBulkRegPop from '../components/MemberBulkRegPop';
export default {
name: 'memberAdminDetail',
data() {
return {
row:{},
list:[],
totalItems: 0,
isView: 1,
userNm:'',
regDt: '',
userType: '',
userId: '',
adminId:'',
adminNm: '',
sendingLimit: '',
lineType: '',
userStat: '',
lastLoginDt: '',
memo: '',
mdn : '',
email: '',
}
},
props: {
serviceId: {
type: String,
default: "",
},
},
components: {
MemberBulkRegPop,
},
created(){
this.memberDetail(this.$route.params.serviceId);
this.$store.commit("login/isLogin", true);
this.$store.commit("login/isAuthChk", true);
},
destroyed() {
},
mounted() {
},
methods: {
async memberDetail(serviceId){
this.row.userId = serviceId;
try {
const response = await custMgtApi.memberAdminDetail(this.row);
const result = response.data;
if (result != null && result.retCode == "0000") {
this.userNm = result.data.userNm;
this.userId = result.data.userId;
this.regDt = result.data.regDt;
this.userType = result.data.userType;
this.adminId = result.data.adminId;
this.adminNm = result.data.adminNm;
this.sendingLimit = result.data.sendingLimit;
this.lineType = result.data.lineType;
this.userStat = result.data.userStat;
this.lastLoginDt = result.data.lastLoginDt;
this.memo = result.data.memo;
this.mdn = result.data.mdn;
this.email = result.data.email;
this.list = result.data.list;
}
} catch (error) {
console.log(error);
alert("실패 하였습니다.");
}
},
// 저장 후 부모창 호출.
toComplete(){
this.$router.push({ name: 'memberList', params: this.row });
},
excelPopOpen() {
console.log(this.adminId);
this.$refs.memberBulkRegPop.excelPopOpen(this.adminId);
},
},
};
import '../../../assets/css/checktoggle.css';
</script>

298
frontend/src/modules/custMgt/views/MemberDetail.vue
View File

@@ -1,165 +1,163 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">회원 정보 상세 조회</h3>
<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
</div>
<form autocomplete="off" class="search_form">
<div class="search_wrap">
<div class="select_box">
<label for="right" class="label">권한</label>
<select name="" id="right">
<option value="전체">전체</option>
<option value="대리점">대리점</option>
<option value="운영자">운영자</option>
</select>
</div>
<div class="select_box">
<label for="right" class="label">상태</label>
<select name="" id="right">
<option value="전체">전체</option>
<option value="사용">사용</option>
<option value="중지">중지</option>
</select>
</div>
<div class="input_box id">
<label for="id1" class="label">ID</label>
<input type="text" id="id1" placeholder="검색어 입력"/>
</div>
<div class="input_box">
<label for="name" class="label">이름(대리점명)</label>
<input type="text" id="name" placeholder="검색어 입력"/>
</div>
<button type="button" class="button grey">조회</button>
</div>
</form>
<div class="info">
<div class="count">총 <span>100</span>건</div>
<div class="button_group">
<button type="button" class="button blue admin">관리자 등록</button>
<button type="button" class="button blue channel">유지채널 등록</button>
<button type="button" class="button white delete">삭제</button>
</div>
</div>
<!-- <div class="table">
<table>
<colgroup>
<col width="5%"/>
<col width="15%"/>
<col width="15%"/>
<col width="20%"/>
<col width="20%"/>
<col width="5%"/>
<col width="20%"/>
</colgroup>
<thead>
<tr>
<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
<th>NO</th>
<th>권한</th>
<th>이름(대리점명)</th>
<th>ID</th>
<th>상태</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
<td>10</td>
<td>대리점</td>
<td>유플러스</td>
<td><a href="javascript:void(0)">uplus1</a></td>
<td>사용</td>
<td>2022-03-10</td>
</tr>
</tbody>
</table>
</div> -->
<div class="table">
<custom-grid
ref="table"
:totalItems="'totalItems'"
:url="testList.url"
:perPage="testList.perPage"
:initialRequest="testList.initialRequest"
:pagination="testList.pagination"
:isCheckbox="testList.isCheckbox"
:columns="testList.columns"
:noDataStr="testList.noDataStr"
:addCls="testList.addCls"
:header="testList.header"
></custom-grid>
</div>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">청약고객관리</h3>
<p class="breadcrumb">고객관리 &gt; 청약고객관리 &gt; 회원관리</p>
</div>
<div class="table table_form">
<form autocomplete="off">
<table>
<colgroup>
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="tr_input">
<th>이름</th>
<td colspan="2">
<input type="text" v-model="userNm">
</td>
</tr>
<tr>
<th>등록일</th>
<td colspan="2">{{regDt}}</td>
<th class="center">관리자 ID</th>
<td colspan="2">{{adminId}}</td>
</tr>
<tr>
<th>ID</th>
<td colspan="2">
{{userId}}
<button type="button" class="button grey btn-a">로그인</button>
</td>
<th class="center">구분</th>
<td colspan="2">{{userType}}</td>
</tr>
<tr class="tr_input">
<th>휴대폰번호</th>
<td colspan="2">
<input type="text" v-model="mdn">
</td>
<th class="center">이메일</th>
<td colspan="2">
<input type="text" v-model="email">
</td>
</tr>
<tr class="w30">
<th>잠금</th>
<td colspan="2">
<input type="radio" name="userStat" value="01" id="right_radio1" v-model="userStat">
<label for="right_radio1">사용</label>
<input type="radio" name="userStat" value="02" id="right_radio2" v-model="userStat">
<label for="right_radio2">정지</label>
</td>
<th class="center">최종접속일</th>
<td colspan="2">{{lastLoginDt}}</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="pop-btn2">
<button class="btn-default" type="button" @click="toComplete();">취소</button>
<button class="btn-pcolor" type="button">저장</button>
</div>
</div>
</div>
</template>
<script>
import customGrid from '@/components/CustomGrid';
//import api from '../service/api';
import custMgtApi from "../service/custMgtApi.js";
export default {
name: 'custList',
data() {
return {
testList: {
url: '/api/v1/bo/sysMgt/adminList',
perPage: 20,
pagination: true,
isCheckbox: true,
initialRequest: false,
addCls: 'box_OFvis',
header: [
[
{ header: 'NO', childNames: [] },
{ header: '권한', childNames: [] },
{ header: '이름(대리점명)', childNames: [] },
{ header: 'ID', childNames: [] },
{ header: '상태', childNames: [] },
{ header: '등록일', childNames: [] }
]
],
columns: [
{ name: 'no', header: 'NO', align: 'center', width: 60 },
{ name: 'auth', header: '권한', align: 'left', width: 160 },
{ name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
{ name: 'adminId', header: 'ID', align: 'center', width: 130},
{ name: 'adminStat', header: '상태', align: 'center', width: 130},
{ name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
],
noDataStr: '검색 결과가 없습니다.',
// params: {
// apprResult: '',
// searchType: '',
// searchText: '',
// startDate: '',
// endDate: ''
// },
excelHeader: []
}
};
},
name: 'memberDetail',
watch:{
stat(){
console.log('watch : ', this.stat)
}
},
data() {
return {
row:{},
userNm:'',
regDt: '',
userType: '',
userId: '',
adminId:'',
adminNm: '',
sendingLimit: '',
lineType: '',
userStat: '',
lastLoginDt: '',
userStat:'',
memo: '',
mdn : '',
email: '',
}
},
props: {
serviceId: {
type: String,
default: "",
},
},
components: {
customGrid: customGrid
},
created(){
this.memberDetail(this.$route.params.serviceId);
this.$store.commit("login/isLogin", true);
this.$store.commit("login/isAuthChk", true);
},
destroyed() {
},
mounted() {
let isKeep = false;
isKeep = true;
this.search(isKeep);
},
},
methods: {
search: function(isKeep) {
console.log(this.testList.params);
this.$refs.table.search(this.testList.params, isKeep);
},
}
async memberDetail(serviceId){
this.row.userId = serviceId;
try {
const response = await custMgtApi.memberDetail(this.row);
const result = response.data;
console.log(result);
if (result != null && result.retCode == "0000") {
// isView
this.userNm = result.data.userNm;
this.userId = result.data.userId;
this.regDt = result.data.regDt;
this.userType = result.data.userType;
this.adminId = result.data.adminId;
this.adminNm = result.data.adminNm;
this.sendingLimit = result.data.sendingLimit;
this.lineType = result.data.lineType;
this.userStat = result.data.userStat;
this.lastLoginDt = result.data.lastLoginDt;
this.memo = result.data.memo;
this.mdn = result.data.mdn;
this.email = result.data.email;
}
} catch (error) {
console.log(error);
alert("실패 하였습니다.");
}
},
// 저장 후 부모창 호출.
toComplete(){
this.$router.push({ name: 'memberList', params: this.row });
},
},
};
</script>

362
frontend/src/modules/custMgt/views/MemberList.vue
View File

@@ -3,163 +3,289 @@
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">회원목록조회</h3>
<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
<h3 class="title">청약고객관리</h3>
<p class="breadcrumb">고객관리 &gt; 청약고객관리 &gt; 회원관리</p>
</div>
<form autocomplete="off" class="search_form">
<div class="top_tab">
<a href="javascript:void(0);" @click="toMove('subsList')">청약고객관리</a>
<a href="javascript:void(0);" class="on">회원관리</a>
</div>
<div class="search_form">
<div class="search_wrap">
<div class="select_box">
<label for="right" class="label">권한</label>
<select name="" id="right">
<option value="전체">전체</option>
<option value="대리점">대리점</option>
<option value="운영자">운영자</option>
</select>
<div class="group">
<div class="input_box cal">
<label for="right" class="label">조회기간</label>
<input class="" type="text" id="" v-model="grid.params.startDt"/>
<input class="" type="text" id="" v-model="grid.params.endDt"/>
</div>
<div class="select_box">
<div class="select_box id">
<label for="right" class="label">상태</label>
<select name="" id="right">
<option value="전체">전체</option>
<option value="사용">사용</option>
<option value="중지">중지</option>
<select name="" id="" v-model="grid.params.searchType1">
<option value="" selected>전체</option>
<option v-for="(option, i) in statType" v-bind:value="option.code" v-bind:key="i">
{{ option.codeNm }}
</option>
</select>
</div>
<div class="input_box id">
<label for="id1" class="label">ID</label>
<input type="text" id="id1" placeholder="검색어 입력"/>
<div class="select_box">
<label for="right" class="label">구분</label>
<select name="" id="" v-model="grid.params.searchType2">
<option value="" selected>전체</option>
<option value="01" >관리자</option>
<option value="02" >사용자</option>
<option value="03" >테스트</option>
</select>
</div>
</div>
<div class="group">
<div class="select_box">
<label for="right" class="label">상세검색</label>
<select name="" id="" v-model="grid.params.searchType3">
<option value="" selected>전체</option>
<option value="01" selected>ID</option>
<option value="02">이름</option>
<option value="03">관리자ID</option>
</select>
</div>
<div class="input_box">
<label for="name" class="label">이름(대리점명)</label>
<input type="text" id="name" placeholder="검색어 입력"/>
<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText1"/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
<button type="button" class="button grey">조회</button>
</div>
</form>
<div class="info">
<div class="count">총 <span>100</span>건</div>
<div class="button_group">
<button type="button" class="button blue admin">관리자 등록</button>
<button type="button" class="button blue channel">유지채널 등록</button>
<button type="button" class="button white delete">삭제</button>
</div>
</div>
<!-- <div class="table">
<table>
<colgroup>
<col width="5%"/>
<col width="15%"/>
<col width="15%"/>
<col width="20%"/>
<col width="20%"/>
<col width="5%"/>
<col width="20%"/>
</colgroup>
<thead>
<tr>
<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
<th>NO</th>
<th>권한</th>
<th>이름(대리점명)</th>
<th>ID</th>
<th>상태</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
<td>10</td>
<td>대리점</td>
<td>유플러스</td>
<td><a href="javascript:void(0)">uplus1</a></td>
<td>사용</td>
<td>2022-03-10</td>
</tr>
</tbody>
</table>
</div> -->
<div class="table">
<custom-grid
ref="table"
:totalItems="'totalItems'"
:url="testList.url"
:perPage="testList.perPage"
:initialRequest="testList.initialRequest"
:pagination="testList.pagination"
:isCheckbox="testList.isCheckbox"
:columns="testList.columns"
:noDataStr="testList.noDataStr"
:addCls="testList.addCls"
:header="testList.header"
></custom-grid>
</div>
<div class="info">
<div class="count">총 <span>{{ totalItems }}</span>건
<div class="select_box NumberSe">
<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
</select>
</div>
</div>
<div class="button_group">
<button type="button" class="button blue" @click="ModalOpen();">테스트 ID 생성</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>
<testId-reg-pop ref="testIdRegPop"> </testId-reg-pop>
</div>
</div>
</template>
<script>
import customGrid from '@/components/CustomGrid';
//import api from '../service/api';
import TestIdRegPop from '../components/TestIdRegPop';
import moment from 'moment';
import api from '@/service/api.js';
class CustomATagRenderer {
constructor(props) {
this.props = props;
const el = document.createElement('a');
el.href = 'javascript:void(0);';
el.className = 'btn_text';
el.innerText= String(props.colValue)
this.el = el;
}
getElement() {
return this.el;
}
addEvent(selEl) {
selEl.addEventListener("click", () => {
const { callback } = this.props["cgrido" + this.props.colName].options;
callback(this.props);
});
}
}
export default {
name: 'custList',
name: 'memberList',
data() {
return {
testList: {
url: '/api/v1/bo/sysMgt/adminList',
perPage: 20,
pagination: true,
isCheckbox: true,
// 달력 데이터
sDateDiv: 'day',
eDateDiv: 'year',
startDate: null,
endDate: null,
disabledSDate: { from: new Date()},
disabledEDate: { to: new Date()},
statType: [],
userType: [],
row:{},
// 테이블 리스트 데이터
perPageCnt: 50,
options: [
{ text: '20', value: 20},
{ text: '50', value: 50},
{ text: '100', value: 100}
],
totalItems: 0,
grid: {
url: '/api/v1/bo/custMgt/memberList',
pagePerRows: 20,
pagination: true,
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: false,
addCls: 'box_OFvis',
header: [
[
{ header: 'NO', childNames: [] },
{ header: '권한', childNames: [] },
{ header: '이름(대리점명)', childNames: [] },
{ header: 'ID', childNames: [] },
{ header: '상태', childNames: [] },
{ header: '등록일', childNames: [] }
]
],
columns: [
{ name: 'no', header: 'NO', align: 'center', width: 60 },
{ name: 'auth', header: '권한', align: 'left', width: 160 },
{ name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
{ name: 'adminId', header: 'ID', align: 'center', width: 130},
{ name: 'adminStat', header: '상태', align: 'center', width: 130},
{ name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
{ 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, renderer: {
type: CustomATagRenderer
, options: {
callback: this.memberDetail,
}
}
},
{ name: 'regDt', header: '등록일', align: 'center', width: 130},
{ name: 'userStat', header: '상태', align: 'center', width: 130}
],
noDataStr: '검색 결과가 없습니다.',
// params: {
// apprResult: '',
// searchType: '',
// searchText: '',
// startDate: '',
// endDate: ''
// },
params: {
searchType1: '',
searchType2: '',
searchType3: '',
searchText1: '',
startDt: '',
endDt: ''
},
excelHeader: []
}
};
},
components: {
customGrid: customGrid
customGrid: customGrid,
TestIdRegPop,
},
created(){
this.$store.commit("login/isLogin", true);
this.$store.commit("login/isAuthChk", true);
this.setCodeData();
},
destroyed() {
this.$store.commit('searchcondition/updateSearchCondition', {
page: 1,
perPage: 50,
params: {
searchType1: '',
searchType2: '',
searchType3: '',
searchText1: '',
startDt: '',
endDt: ''
}
});
},
mounted() {
// 달력 세팅
// this.grid.params.startDt = this.customFormatter(new Date());
// this.grid.params.endDt = this.customFormatter(new Date());
let page = 1;
// 페이지 정보 및 검색 조건
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
console.log('getCondition : '+getCondition);
// store에 저장된 페이지 정보 및 검색 조건을 불러오기
let isKeep = false;
isKeep = true;
if (getCondition) {
this.grid.pagePerRows = getCondition.perPage;
this.grid.params = getCondition.params;
page = getCondition.page;
isKeep = true;
}
this.search(isKeep);
},
},
methods: {
search: function(isKeep) {
console.log(this.testList.params);
this.$refs.table.search(this.testList.params, isKeep);
console.log('this.perPageCnt'+this.perPageCnt);
//console.log(this.grid.params);
this.$refs.table.search(this.grid.params, isKeep);
this.sendStoreData();
},
}
toMove(routeName) {
this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
},
ModalOpen: function(){
this.$refs.testIdRegPop.ModalOpen();
},
memberDetail: function(props) {
this.row.serviceId = props.userId;
if(props.userType == '관리자 ID'){
// 관리자 ID용 상세페이지 이동
this.$router.push({ name: 'memberAdminDetail', params: {serviceId : this.row.serviceId} });
} else {
// 사용자 ID용 상세페이지 이동
this.$router.push({ name: 'memberDetail', params: {serviceId : this.row.serviceId} });
}
},
changePerPage: function(){ // 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt;
this.search(true);
},
sendStoreData: function() {
const getP = this.$refs.table.getPagination();
// console.log("==========getP : " + getP._currentPage);
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
});
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
// console.log("getCondition : "+ getCondition.perPage);
},
setCodeData() {
// 상태 옵션 셋팅.
api.commCode({'grpCd' : 'SVCUSER_STTUS_CD'}).then(response => {
this.statType = response.data.data.list;
});
//
api.commCode({'grpCd' : 'SVCUSER_TP_CD'}).then(response => {
this.userType = response.data.data.list;
});
},
},
beforeRouteLeave(to, from, next) {
const getP = this.$refs.table.getPagination();
console.log("==========getP : " + getP._currentPage);
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
});
// 라우트 하기전 실행
next();
},
};
</script>

516
frontend/src/modules/custMgt/views/SubsDetail.vue
View File

@@ -1,165 +1,381 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">청약 정보 상세 조회</h3>
<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
<h3 class="title">청약고객관리</h3>
<p class="breadcrumb">고객관리 &gt; 청약고객관리</p>
</div>
<form autocomplete="off" class="search_form">
<div class="search_wrap">
<div class="select_box">
<label for="right" class="label">권한</label>
<select name="" id="right">
<option value="전체">전체</option>
<option value="대리점">대리점</option>
<option value="운영자">운영자</option>
</select>
</div>
<div class="select_box">
<label for="right" class="label">상태</label>
<select name="" id="right">
<option value="전체">전체</option>
<option value="사용">사용</option>
<option value="중지">중지</option>
</select>
</div>
<div class="input_box id">
<label for="id1" class="label">ID</label>
<input type="text" id="id1" placeholder="검색어 입력"/>
</div>
<div class="input_box">
<label for="name" class="label">이름(대리점명)</label>
<input type="text" id="name" placeholder="검색어 입력"/>
</div>
<button type="button" class="button grey">조회</button>
</div>
</form>
<div class="info">
<div class="count">총 <span>100</span>건</div>
<div class="button_group">
<button type="button" class="button blue admin">관리자 등록</button>
<button type="button" class="button blue channel">유지채널 등록</button>
<button type="button" class="button white delete">삭제</button>
</div>
<div class="title">기본정보</div>
</div>
<!-- <div class="table">
<table>
<colgroup>
<col width="5%"/>
<col width="15%"/>
<col width="15%"/>
<col width="20%"/>
<col width="20%"/>
<col width="5%"/>
<col width="20%"/>
</colgroup>
<thead>
<tr>
<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
<th>NO</th>
<th>권한</th>
<th>이름(대리점명)</th>
<th>ID</th>
<th>상태</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
<td>10</td>
<td>대리점</td>
<td>유플러스</td>
<td><a href="javascript:void(0)">uplus1</a></td>
<td>사용</td>
<td>2022-03-10</td>
</tr>
</tbody>
</table>
</div> -->
<div class="table">
<custom-grid
ref="table"
:totalItems="'totalItems'"
:url="testList.url"
:perPage="testList.perPage"
:initialRequest="testList.initialRequest"
:pagination="testList.pagination"
:isCheckbox="testList.isCheckbox"
:columns="testList.columns"
:noDataStr="testList.noDataStr"
:addCls="testList.addCls"
:header="testList.header"
></custom-grid>
</div>
<div class="table table_form">
<form autocomplete="off">
<table>
<colgroup>
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="tr_input w75">
<th>고객사명</th>
<td colspan="2"><input type="text" disabled v-model="custNm"></td>
</tr>
<tr class="tr_input w75">
<th>대표자명</th>
<td colspan="2"><input type="text" disabled v-model="reprNm"></td>
<th class="center">사용자 구분</th>
<td colspan="2"><input type="text" disabled v-model="custType"></td>
</tr>
<tr class="tr_input">
<th>사업장 주소</th>
<td colspan="5">
<div class="input-address">
<input type="text" disabled v-model="adr1">
<input type="text" disabled v-model="adr2">
<input type="text" disabled v-model="adr3">
</div>
</td>
</tr>
<tr class="tr_input">
<th>사업자등록번호</th>
<td colspan="2">
<div class="input-bnumber">
<input type="text" disabled v-model="bregNo1">
<input type="text" disabled v-model="bregNo2">
<input type="text" disabled v-model="bregNo3">
</div>
</td>
<th class="center">법인등록번호</th>
<td colspan="2">
<div class="input-double">
<input type="text" disabled v-model="cprRegNo1">
<input type="text" disabled v-model="cprRegNo2">
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="info">
<div class="title">사용정보</div>
</div>
<div class="table table_form">
<form autocomplete="off">
<table>
<colgroup>
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="tr_input w75">
<th>가입일</th>
<td colspan="2"><input type="text" disabled v-model="subsDt"></td>
<th class="center">상태</th>
<td class="center" colspan="2">
<input type="text" disabled v-model="stat">
</td>
</tr>
<tr class="tr_input w75">
<th>요금제</th>
<td colspan="2"><input type="text" disabled v-model="plan"></td>
<th class="center">가입번호</th>
<td colspan="2"><input type="text" disabled v-model="subsNo"></td>
</tr>
<tr class="tr_input w75">
<th>관리자명</th>
<td colspan="2">
<div class="input-double">
<input type="text" v-model="adminId">
<input type="text" v-model="adminNm">
<button type="button" class="button grey btn-a" @click="searchIDPopOpen">변경</button>
</div>
</td>
<th class="center">유치자명</th>
<td colspan="2">
<div class="input-double">
<input type="text" disabled v-model="channelId">
<input type="text" disabled v-model="channelNm">
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="info">
<div class="title">사용자 데이터</div>
</div>
<div class="table table_form">
<form autocomplete="off">
<table>
<colgroup>
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
<col style="width:140px">
<col style="width:auto">
<col style="width:auto">
</colgroup>
<tbody>
<tr class="tr_input w75">
<th>서비스 ID</th>
<td colspan="2"><input type="text" disabled v-model="serviceId"></td>
<th class="center">이용권한</th>
<td colspan="2"><input type="text" disabled v-model="useAuth"></td>
</tr>
<tr class="tr_input w75">
<th>사용자명</th>
<td colspan="2"><input type="text" disabled v-model="userNm"></td>
<th class="center">휴대폰 번호</th>
<td colspan="2"><input type="text" disabled v-model="mdn"></td>
</tr>
<tr class="tr_input w75">
<th>이월누적금액</th>
<td colspan="2">
<div class="input-double button-double">
<input type="text" disabled v-model="carryOver">
<button type="button" class="button grey" @click="carryOverListPopOpen();">이월금액보기</button>
</div>
</td>
<th class="center">사용자ID 개수</th>
<td colspan="2">
<div class="input-double button-double">
<input type="text" disabled v-model="userCnt">
<button type="button" class="button grey">사용자ID 확인</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="pop-btn2">
<button class="btn-default" type="button" @click="toComplete();">취소</button>
<button class="btn-pcolor" type="button" @click="confirmPopOpen();">저장</button>
</div>
<!--이월금액 모달.-->
<carry-Over-List-Pop ref="carryOverListPop"></carry-Over-List-Pop>
<!--수정 확인 모달-->
<validation-confirm-pop ref="validationConfirmPop"></validation-confirm-pop>
<!--관리자명 조회 모달-->
<admin-nm-pop ref="adminNmPop"></admin-nm-pop>
</div>
</div>
</template>
<script>
import customGrid from '@/components/CustomGrid';
//import api from '../service/api';
import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import CarryOverListPop from '../components/CarryOverListPop';
//import ConfirmPop from '@/components/modal/confirm';
import ValidationConfirmPop from '../components/ValidationConfirmPop';
//import SearchIDPop from '@/components/modal/searchID';
import AdminNmPop from '../components/AdminNmPop';
export default {
name: 'custList',
data() {
return {
testList: {
url: '/api/v1/bo/sysMgt/adminList',
perPage: 20,
pagination: true,
isCheckbox: true,
initialRequest: false,
addCls: 'box_OFvis',
header: [
[
{ header: 'NO', childNames: [] },
{ header: '권한', childNames: [] },
{ header: '이름(대리점명)', childNames: [] },
{ header: 'ID', childNames: [] },
{ header: '상태', childNames: [] },
{ header: '등록일', childNames: [] }
]
],
columns: [
{ name: 'no', header: 'NO', align: 'center', width: 60 },
{ name: 'auth', header: '권한', align: 'left', width: 160 },
{ name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
{ name: 'adminId', header: 'ID', align: 'center', width: 130},
{ name: 'adminStat', header: '상태', align: 'center', width: 130},
{ name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
],
noDataStr: '검색 결과가 없습니다.',
// params: {
// apprResult: '',
// searchType: '',
// searchText: '',
// startDate: '',
// endDate: ''
// },
excelHeader: []
}
};
},
components: {
customGrid: customGrid
},
destroyed() {
},
mounted() {
let isKeep = false;
isKeep = true;
this.search(isKeep);
},
methods: {
search: function(isKeep) {
console.log(this.testList.params);
this.$refs.table.search(this.testList.params, isKeep);
name: "subsDetail",
data(){
return{
row: {},
custNm: '',
reprNm: '',
custType: '',
adr1: '',
adr2: '',
adr3: '',
bregNo: '',
bregNo1: '',
bregNo3: '',
bregNo2: '',
cprRegNo: '',
cprRegNo1: '',
cprRegNo2: '',
birth: '',
subsDt: '',
stat: '',
plan: '',
subsNo: '',
adminId: '',
adminNm: '',
bindDis: '',
channelId: '',
channelNm: '',
useAuth: '',
userNm: '',
mdn: '',
carryOver: '',
userCnt: '',
saveConfirm:false,
props: {},
}
},
}
};
props: {
serviceId: {
type: String,
default: "",
},
},
components: {
CarryOverListPop,
//ConfirmPop,
//SearchIDPop,
ValidationConfirmPop,
AdminNmPop,
},
created(){
this.$store.commit("login/isLogin", true);
this.$store.commit("login/isAuthChk", true);
console.log(this.$route.params.serviceId);
this.subsDetail(this.$route.params.serviceId);
// checkVaildBizNum
},
methods :{
doValidate(){
// if(this.isNull(this.userId)){
// alert("아이디를 입력해 주세요.");
// this.$refs._userId.focus();
// return false;
// }
return true;
},
// 저장 후 부모창 호출.
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 });
},
async doInsert(props){
console.log(props);
// 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 subsDetail(serviceId){
this.row.serviceId = serviceId;
try {
const response = await custMgtApi.subsDetail(this.row);
const result = response.data;
console.log(result);
if (result != null && result.retCode == "0000") {
this.custNm = result.data.custNm;
this.reprNm = result.data.reprNm;
this.custType = result.data.custType;
this.adr1 = result.data.adr1;
this.adr2 = result.data.adr2;
this.adr3 = result.data.adr3;
this.bregNo = result.data.bregNo;
this.cprRegNo = result.data.cprRegNo;
this.birth = result.data.birth;
this.subsDt = result.data.subsDt;
this.stat = result.data.stat;
this.plan = result.data.plan;
this.subsNo = result.data.subsNo;
this.adminId = result.data.adminId;
this.adminNm = result.data.adminNm;
this.bindDis = result.data.bindDis;
this.channelId = result.data.channelId;
this.channelNm = result.data.channelNm;
this.serviceId = result.data.serviceId;
this.useAuth = result.data.useAuth;
this.userNm = result.data.userNm;
this.mdn = result.data.mdn;
this.carryOver = result.data.carryOver;
this.userCnt = result.data.userCnt;
if(this.bregNo != '' && this.bregNo != null){
this.bregNo1 = this.bregNo.substr(0, 3);
this.bregNo2 = this.bregNo.substr(3, 2);
this.bregNo3 = this.bregNo.substr(5);
}
if(this.cprRegNo != '' && this.cprRegNo != null){
this.cprRegNo1 = this.cprRegNo.substr(0, 6);
this.cprRegNo2 = this.cprRegNo.substr(6);
}
}
} catch (error) {
alert("실패 하였습니다.");
}
},
// updateAdminInfo 청약고객-사용정보-관리자ID,관리자명 수정
async updateAdminInfo() {
this.row.serviceId = this.$route.params.serviceId;
this.row.adminId = this.adminId;
this.row.adminNm = this.adminNm;
try {
const response = await custMgtApi.updateAdminInfo(this.row);
const result = response.data;
console.log(result);
if (result != null && result.retCode == "0000") {
alert('저장 하였습니다.');
this.toComplete();
} else {
alert("실패 하였습니다.");
}
} catch (error) {
alert("실패 하였습니다.");
}
},
carryOverListPopOpen: function(){
this.$refs.carryOverListPop.carryOverListPopOpen(this.serviceId);
},
confirmPopOpen: function(){
if(this.doValidate()){
// this.row.title = '사용자 수정 확인';
// this.row.msg = '변경된 내용을 저장하시겠습니까?';
// console.log(this.row);
// this.$refs.confirmPop.confirmModalOpen(this.row);
this.$refs.validationConfirmPop.confirmUpdateOpen();
}
},
confirmCalbackFnc: function(props){
console.log(props);
if(props.result){
this.doInsert(props.result);
}
},
searchIDPopOpen: function(){
this.$refs.adminNmPop.ModalOpen();
},
searchIDCalbackFnc: function(props){
console.log(props);
if(props.result){
this.doInsert(props.result);
}
},
}
}
</script>

325
frontend/src/modules/custMgt/views/SubsList.vue Normal file
View File

@@ -0,0 +1,325 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">청약고객관리</h3>
<p class="breadcrumb">고객관리 &gt; 청약고객관리 &gt; 청약고객관리</p>
</div>
<div class="top_tab">
<a href="javascript:void(0);" class="on">청약고객관리</a>
<a href="javascript:void(0);" @click="toMove('memberList')">회원관리</a>
</div>
<div class="search_form">
<div class="search_wrap">
<div class="group">
<div class="input_box cal">
<label for="right" class="label">조회기간</label>
<input class="" type="text" id="" v-model="grid.params.startDt"/>
<input class="" type="text" id="" v-model="grid.params.endDt"/>
</div>
<div class="select_box id">
<label for="right" class="label">상태</label>
<select name="" id="" v-model="grid.params.searchType1">
<option value="" selected>전체</option>
<option value="" >사용</option>
<option value="" >미납중지</option>
<option value="" >사용중지</option>
<option value="" >해지</option>
<!-- <option v-for="(option, i) in statType" v-bind:value="option.code" v-bind:key="i">
{{ option.codeNm }}
</option> -->
</select>
</div>
<div class="select_box">
<label for="right" class="label">유치채널</label>
<select name="" id="" v-model="grid.params.searchType2">
<option value="" selected>전체</option>
<option value="" >고객셀프가입</option>
<option value="" >대리점</option>
<option value="" >고객센터</option>
<option value="" >직접영업</option>
<!-- <option v-for="(option, i) in userType" v-bind:value="option.code" v-bind:key="i">
{{ option.codeNm }}
</option> -->
</select>
</div>
</div>
<div class="group">
<div class="select_box">
<label for="right" class="label">상세검색</label>
<select name="" id="" v-model="grid.params.searchType3">
<option value="">전체</option>
<option value="01">고객사명</option>
<option value="02">가입번호</option>
<option value="03">서비스ID</option>
</select>
</div>
<div class="input_box">
<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText1"/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
</div>
</div>
<div class="info">
<div class="count">총 <span>{{ totalItems }}</span>건
<div class="select_box NumberSe">
<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
</select>
</div>
</div>
<div class="button_group">
<button type="button" class="button blue download" @click="excelDown();">엑셀 다운로드</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>
</div>
</div>
</template>
<script>
import customGrid from '@/components/CustomGrid';
import moment from 'moment';
import api from '@/service/api.js';
import custMgtApi from "../service/custMgtApi.js";
import xlsx from '@/common/excel';
class CustomATagRenderer {
constructor(props) {
this.props = props;
const el = document.createElement('a');
el.href = 'javascript:void(0);';
el.className = 'btn_text';
el.innerText= String(props.colValue)
this.el = el;
}
getElement() {
return this.el;
}
addEvent(selEl) {
selEl.addEventListener("click", () => {
const { callback } = this.props["cgrido" + this.props.colName].options;
callback(this.props);
});
}
}
export default {
name: 'subsList',
data() {
return {
// 달력 데이터
sDateDiv: 'day',
eDateDiv: 'year',
startDate: null,
endDate: null,
disabledSDate: { from: new Date()},
disabledEDate: { to: new Date()},
statType: [],
userType: [],
row:{},
pageType: 'SUBS',
// 테이블 리스트 데이터
perPageCnt: 50,
options: [
{ text: '20', value: 20},
{ text: '50', value: 50},
{ text: '100', value: 100}
],
totalItems: 0,
grid: {
url: '/api/v1/bo/custMgt/subsList',
pagePerRows: 20,
pagination: true,
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: false,
addCls: 'box_OFvis',
columns: [
{ name: 'no', header: 'No', align: 'center', width: 60},
{ name: 'serviceId', header: '서비스 ID\n(관리자 ID)', align: 'center', width: 160 , renderer: {
type: CustomATagRenderer
, options: {
callback: this.custDetail,
}
}
},
{ name: 'custNm', header: '고객사명', align: 'center', width: 130},
{ name: 'regNo', header: '가입번호', align: 'center', width: 130},
{ name: 'regDt', header: '가입일', align: 'center', width: 130, cls: 'td_line'},
{ name: 'stat', header: '상태', align: 'center', width: 130},
{ name: 'channel', header: '유치채널', align: 'center', width: 130},
{ name: 'plan', header: '요금제', align: 'center', width: 130},
{ name: 'carryOver', header: '이월누적금액', align: 'center', width: 130}
],
noDataStr: '검색 결과가 없습니다.',
params: {
searchType1: '',
searchType2: '',
searchType3: '',
searchText1: '',
startDt: '',
endDt: ''
},
excelHeader: []
}
};
},
components: {
customGrid: customGrid
},
created(){
this.$store.commit("login/isLogin", true);
this.$store.commit("login/isAuthChk", true);
this.setCodeData();
this.getExcelHeader();
},
destroyed() {
},
mounted() {
// 달력 세팅
let page = 1;
// 페이지 정보 및 검색 조건
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
console.log('getCondition : '+getCondition);
// store에 저장된 페이지 정보 및 검색 조건을 불러오기
let isKeep = false;
if (getCondition) {
this.grid.pagePerRows = getCondition.perPage;
this.grid.params = getCondition.params;
page = getCondition.page;
isKeep = true;
}
this.search(isKeep);
},
methods: {
search: function(isKeep) {
console.log('this.perPageCnt'+this.perPageCnt);
//console.log(this.grid.params);
this.$refs.table.search(this.grid.params, isKeep);
this.sendStoreData();
},
toMove(routeName) {
this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
},
custDetail(props){
this.row.serviceId = props.serviceId;
this.$router.push({ name: 'subsDetail', params: this.row });
},
changePerPage: function(){ // 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt;
this.search(true);
},
sendStoreData: function() {
const getP = this.$refs.table.getPagination();
console.log("==========getP : " + getP._currentPage);
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
});
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
console.log("getCondition : "+ getCondition.perPage);
},
setCodeData() {
// 상태 옵션 셋팅.
api.commCode({'grpCd' : 'SVCUSER_STTUS_CD'}).then(response => {
this.statType = response.data.data.list;
});
//
api.commCode({'grpCd' : 'SVCUSER_TP_CD'}).then(response => {
this.userType = response.data.data.list;
});
},
async getExcelDataDown() {
try {
let response;
const params = {
startDt: this.grid.params.startDt,
endDt: this.grid.params.endDt,
searchType1: this.grid.params.searchType1,
searchType2: this.grid.params.searchType2,
searchType3: this.grid.params.searchType3,
searchText1: this.grid.params.searchText1
};
response = await custMgtApi.subsListExcel(params);
const result = response.data;
if (result != null && result.retCode == "0000") {
return result.data;
}else{
return false;
}
} catch (err) {
return false;
}
}, // end of getExcelDataDown
async excelDown() {
if (this.$refs.table.getData().length <= 0) {
alert('조회된 데이터가 없습니다.');
return false;
}
let today = moment().format('YYYYMMDDHHmmss');
const saveFileName = `청약고객정보_${today}.xlsx`;
const data = await this.getExcelDataDown();
let options = {
header: this.excelHeader,
dataOrder: 'header'
};
// console.log(data);
xlsx.export(data.list, saveFileName, options).then(() => {});
},
getExcelHeader() {
// 헤더를 mockup으로 관리한다.
custMgtApi.getExcelHeader(this.pageType).then(res => {
this.excelHeader = res;
});
},
},
beforeRouteLeave(to, from, next) {
const getP = this.$refs.table.getPagination();
console.log("==========getP : " + getP._currentPage);
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
params: this.grid.params
});
// 라우트 하기전 실행
next();
},
};
</script>