mirror of
http://git.mhez-qa.uplus.co.kr/hubez/hubez-admin.git
synced 2025-12-07 09:05:16 +09:00
리스크관리 / 유치채널현황 관리 / 채널관리 추가
This commit is contained in:
kimre
@@ -1,151 +1,318 @@
|
||||
<template>
|
||||
|
||||
<div class="contents">
|
||||
<div class="contents_wrap">
|
||||
<div class="top_wrap">
|
||||
<h3 class="title">정산이력목록조회</h3>
|
||||
<p class="breadcrumb">시스템관리 > 관리자/유치채널 관리</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 class="contents">
|
||||
<div class="contents_wrap">
|
||||
<div class="top_wrap">
|
||||
<h3 class="title">정산이력</h3>
|
||||
<p class="breadcrumb">정산 > 정산이력</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 txt">조회기간</label>
|
||||
<p>전월 최대 3개월까지 조회 가능합니다.</p>
|
||||
<div class="term">
|
||||
<span class="custom_input icon_date">
|
||||
<vuejs-datepicker
|
||||
:language="ko"
|
||||
:format="customFormatter"
|
||||
:disabled-dates="disabledSDate"
|
||||
:minimumView="sDateDiv"
|
||||
:maximumView="sDateDiv"
|
||||
v-model="startDate"
|
||||
@selected="selectedStartDate(0)"
|
||||
@closed="closeDate('start')"
|
||||
></vuejs-datepicker>
|
||||
</span>
|
||||
<span class="hypen">~</span>
|
||||
<span class="custom_input icon_date">
|
||||
<vuejs-datepicker
|
||||
:language="ko"
|
||||
:format="customFormatter"
|
||||
:disabled-dates="disabledEDate"
|
||||
:minimumView="sDateDiv"
|
||||
:maximumView="sDateDiv"
|
||||
v-model="endDate"
|
||||
@selected="selectedEndDate(0)"
|
||||
@closed="closeDate('end')"
|
||||
></vuejs-datepicker>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="input_box">
|
||||
<label for="right" class="label">고객사명</label>
|
||||
<input class="search-box" type="text" id="" placeholder="검색어 입력"/>
|
||||
</div>
|
||||
<div class="input_box">
|
||||
<label for="right" class="label">사업자번호 (생년월일)</label>
|
||||
<input class="search-box" type="text" id="" placeholder="검색어 입력"/>
|
||||
</div>
|
||||
<button type="button" class="button grey">조회</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="info">
|
||||
<div class="count">총 <span>100</span>건
|
||||
<div class="select_box NumberSe">
|
||||
<select name="" id="">
|
||||
<option value="20">20</option>
|
||||
<option value="50" selected>50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button_group">
|
||||
<button type="button" class="button blue download">엑셀 다운로드</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="table calculate scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">날짜</th>
|
||||
<th rowspan="2">고객사명<br>(이름)</th>
|
||||
<th rowspan="2">사업자번호<br>(생년월일)</th>
|
||||
<th rowspan="2">요금제</th>
|
||||
<th rowspan="2">시작금액</th>
|
||||
<th rowspan="2">사용금액</th>
|
||||
<th rowspan="2">이월금액</th>
|
||||
<th rowspan="2">종량금액</th>
|
||||
<th rowspan="2">소멸금액</th>
|
||||
<th rowspan="2">청구금액</th>
|
||||
<th colspan="5">채널별 발송 건수</th>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>전체</th>
|
||||
<th>SMS</th>
|
||||
<th>LMS</th>
|
||||
<th>MMS</th>
|
||||
<th>알림톡</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>유플러스01</td>
|
||||
<td>229-81-39938</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">50,000</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td class="price">100,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>홍길동</td>
|
||||
<td>850505</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">100,000</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>유플러스01</td>
|
||||
<td>229-81-39938</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">50,000</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td class="price">100,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>유플러스01</td>
|
||||
<td>229-81-39938</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">50,000</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td class="price">100,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>유플러스01</td>
|
||||
<td>229-81-39938</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">50,000</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td class="price">100,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>홍길동</td>
|
||||
<td>850505</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">100,000</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>홍길동</td>
|
||||
<td>850505</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">100,000</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>홍길동</td>
|
||||
<td>850505</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">100,000</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>홍길동</td>
|
||||
<td>850505</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">100,000</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2022-02</td>
|
||||
<td>홍길동</td>
|
||||
<td>850505</td>
|
||||
<td>요금제1<br>(50,000)</td>
|
||||
<td class="price">100,000</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">50,000</td>
|
||||
<td>-</td>
|
||||
<td class="price">150,000</td>
|
||||
<td>84,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
<td>21,000,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<div class="arrow-btn">
|
||||
<button class="btn-first" onClick=""></button>
|
||||
<button class="btn-prev" onClick=""></button>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="active"><a href="javascript:void(0)">1</a></li>
|
||||
<li><a href="javascript:void(0)">2</a></li>
|
||||
<li><a href="javascript:void(0)">3</a></li>
|
||||
<li><a href="javascript:void(0)">4</a></li>
|
||||
<li><a href="javascript:void(0)">5</a></li>
|
||||
<li><a href="javascript:void(0)">999</a></li>
|
||||
</ul>
|
||||
<div class="arrow-btn">
|
||||
<button class="btn-next" onClick=""></button>
|
||||
<button class="btn-last" onClick=""></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import customGrid from '@/components/CustomGrid';
|
||||
import moment from "moment";
|
||||
import lodash from 'lodash';
|
||||
//import api from '../service/api';
|
||||
export default {
|
||||
name: 'calcList',
|
||||
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: []
|
||||
}
|
||||
};
|
||||
ko: vdp_translation_ko.js,
|
||||
periodDay: 7,
|
||||
sDateDiv: 'month',
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
customGrid: customGrid
|
||||
customGrid: customGrid,
|
||||
vuejsDatepicker,
|
||||
},
|
||||
created(){
|
||||
this.$store.commit("login/isLogin", true);
|
||||
this.$store.commit("login/isAuthChk", true);
|
||||
this.setPeriodDay(0);
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
@@ -160,6 +327,53 @@ export default {
|
||||
console.log(this.testList.params);
|
||||
this.$refs.table.search(this.testList.params, isKeep);
|
||||
},
|
||||
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) {
|
||||
console.log(this.sDateDiv)
|
||||
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');
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user