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

리스크관리 / 유치채널현황 관리 / 채널관리 추가

Browse Source
This commit is contained in:
kimre
2022-06-24 18:14:06 +09:00
parent 2a073eca83
commit 056ccf20e1
87 changed files with 5931 additions and 2114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
frontend/src/modules/attractMgt/views/ChannelList.vue
View File

@@ -1,107 +1,392 @@
<template>
<div class="contents">
<div class="contents_wrap">
<div class="top_wrap">
<h3 class="title">유치채널 목록조회</h3>
<p class="breadcrumb">시스템관리 &gt; 권한 관리</p>
</div>
<div class="info">
<div class="count">총 <span>4</span>건</div>
<div class="button_group">
<button type="button" class="button blue add" onclick="location.href='system_right_add.html';">권한 추가</button>
</div>
</div>
<div class="table">
<table>
<colgroup>
<col width="10%"/>
<col width="20%"/>
<col width="20%"/>
<col width="15%"/>
<col width="20%"/>
<col width="15%"/>
</colgroup>
<thead>
<tr>
<th>NO</th>
<th>코드</th>
<th>권한명</th>
<th>상태</th>
<th>등록일</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Admin_01</td>
<td>슈퍼관리자</td>
<td>사용</td>
<td>2022-03-10</td>
<td class="two_btn_group">
<button type="button" class="button grey" onclick="location.href='system_right_modify.html';">수정</button>
<button type="button" class="button white delete">삭제</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Admin_01</td>
<td>슈퍼관리자</td>
<td>사용</td>
<td>2022-03-10</td>
<td class="two_btn_group">
<button type="button" class="button grey">수정</button>
<button type="button" class="button white delete">삭제</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Admin_01</td>
<td>슈퍼관리자</td>
<td>사용</td>
<td>2022-03-10</td>
<td class="two_btn_group">
<button type="button" class="button grey">수정</button>
<button type="button" class="button white delete">삭제</button>
</td>
</tr>
<tr>
<td>1</td>
<td>Admin_01</td>
<td>슈퍼관리자</td>
<td>사용</td>
<td>2022-03-10</td>
<td class="two_btn_group">
<button type="button" class="button grey">수정</button>
<button type="button" class="button white delete">삭제</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<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="group">
<div class="input_box cal">
<label for="right" class="label">조회기간</label>
<div class="term">
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledSDate"
v-model="startDate"
@selected="selectedStartDate(0)"
@closed="closeDate('start')"
></vuejs-datepicker>
</span>~
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
:disabled-dates="disabledEDate"
v-model="endDate"
@selected="selectedEndDate(0)"
@closed="closeDate('end')"
></vuejs-datepicker>
</span>
</div>
</div>
<div class="select_box id">
<label for="subsSttusCd" class="label">상태</label>
<select name="subsSttusCd" id="subsSttusCd" v-model="grid.params.subsSttusCd">
<option value="" selected>전체</option>
<option v-for="(option, i) in subsSttusCdList" v-bind:value="option.code" v-bind:key="i">
{{ option.codeNm }}
</option>
</select>
</div>
<div class="select_box">
<label for="custTyCd" class="label">구분</label>
<select name="custTyCd" id="custTyCd" v-model="grid.params.custTyCd">
<option value="" selected>전체</option>
<option v-for="(option, i) in custTyCdList" v-bind:value="option.code" v-bind:key="i">
{{ option.codeNm }}
</option>
</select>
</div>
<div class="input_box">
<label for="right" class="label">유치자 마당ID</label>
<input class="" type="text" id="" placeholder="검색어 입력" v-model="grid.params.loginId"/>
</div>
<div class="input_box">
<label for="right" class="label">유치업체</label>
<input class="" type="text" id="" placeholder="검색어 입력" v-model="grid.params.norgNm"/>
</div>
</div>
<div class="group">
<div class="select_box">
<label for="right" class="label">상세검색</label>
<select name="" id="" v-model="grid.params.searchType">
<option value="01">고객사명</option>
<option value="02">이름</option>
<option value="03">사업자등록번호(생년월일)</option>
</select>
</div>
<div class="input_box">
<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText"/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
</div>
</form>
<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>
<common-modal ref="commmonModal"></common-modal>
</div>
</div>
</template>
<script>
import commonModal from "@/components/modal/commonModal";
import customGrid from '@/components/CustomGrid';
import moment from 'moment';
import api from '@/service/api.js';
import channelMgtApi from "../service/channelMgtApi.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: 'channelList',
data() {
return {
ko: vdp_translation_ko.js,
periodDay: 7,
sDateDiv: 'day',
startDate: new Date(),
endDate: new Date(),
row:{},
pageType:'CHANNEL',
subsSttusCdList:[],
custTyCdList:[],
openPicker: false,
// 테이블 리스트 데이터
perPageCnt: 50,
options: [
{ text: '20', value: 20},
{ text: '50', value: 50},
{ text: '100', value: 100}
],
totalItems: 0,
grid: {
url: '/api/v1/bo/attractMgt/channelList',
pagePerRows: 50,
pagination: true,
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: false,
addCls: 'box_OFvis',
columns: [
{ name: 'no', header: 'No', align: 'center', width: '6%'},
{ name: 'subsDt', header: '가입일', align: 'center', width: '11%'},
{ name: 'norgNm', header: '유치업체', align: 'center', width: '10%'},
{ name: 'loginId', header: '마당ID(이름)', align: 'center', width: '10%', renderer: {
type: CustomATagRenderer
, options: {
callback: this.channelDetail,
}
}
},
{ name: 'custNm', header: '고객사명', align: 'center', width: '10%'},
{ name: 'bizrno', header: '사업자등록번호(생년월일)', align: 'center', width: '12%'},
{ name: 'userNm', header: '이름', align: 'center', width: '10%'},
{ name: 'subsSttusCd', header: '상태', align: 'center', width: '10%'},
{ name: 'custTyCd', header: '구분', align: 'center', width: '10%'},
{ name: 'sndCnt', header: '전체발송건수', align: 'center', width: '11%'}
],
noDataStr: '검색 결과가 없습니다.',
params: {
searchType: '',
searchText: '',
subsStDt: '',
subsEdDt: '',
subsSttusCd: '',
loginId: '',
norgNm: ''
},
excelHeader: []
}
};
},
},
components: {
customGrid: customGrid,
commonModal,
vuejsDatepicker,
},
created(){
this.$store.commit("login/isLogin", true);
this.$store.commit("login/isAuthChk", true);
this.setCodeData();
this.getExcelHeader();
this.setPeriodDay(0);
},
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();
},
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);
},
async getExcelDataDown() {
try {
let response;
const params = {
subsStDt: this.grid.params.subsStDt,
subsEdDt: this.grid.params.subsEdDt,
searchType1: this.grid.params.searchType,
searchText1: this.grid.params.searchText,
loginId: this.grid.params.loginId,
norgNm: this.grid.params.norgNm
};
response = await channelMgtApi.channelListExcel(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) {
this.row.title = '유치채녈현황';
this.row.msg1 = '조회된 데이터가 없습니다.';
this.$refs.commmonModal.alertModalOpen(this.row);
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으로 관리한다.
channelMgtApi.getExcelHeader(this.pageType).then(res => {
this.excelHeader = res;
});
},
channelDetail(props){
//TODO 전달값 셋팅 필요.
this.$router.push({ name: 'channelDetail', params: this.row });
},
setCodeData() {
// 상태 옵션 셋팅.
api.commCode({'grpCd' : 'SUBS_STTUS_CD'}).then(response => {
this.subsSttusCdList = response.data.data.list;
});
api.commCode({'grpCd' : 'CUST_TY_CD'}).then(response => {
this.custTyCdList = response.data.data.list;
});
},
setPeriodDay(day) {
this.periodDay = day;
this.endDate = new Date();
this.startDate = moment(this.endDate)
.subtract(day, 'day')
.toDate();
this.closeDate('start');
this.closeDate('end');
},
selectedStartDate(day) {
if (day != undefined && day != null) {
this.periodDay = day;
}
if (this.startDate > this.endDate) {
this.startDate = this.endDate;
}
console.log(this.disabledSDate)
// this.grid.params.startDt = day
},
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() };
}
}
},
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');
}
},
},
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>
</script>