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
353
frontend/src/modules/calculate/service/mixins.js
Normal file
353
frontend/src/modules/calculate/service/mixins.js
Normal file
@@ -0,0 +1,353 @@
|
||||
import lodash from "lodash";
|
||||
|
||||
const utils_mixin = {
|
||||
methods:{
|
||||
/** * 이메일 형식 체크 * * @param 데이터 */
|
||||
emailCheck(email,rtnArrYn) {
|
||||
if(this.isNull(rtnArrYn)){
|
||||
rtnArrYn='N';
|
||||
}
|
||||
// var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
|
||||
var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
|
||||
|
||||
if(regExp.test(email) == false) {
|
||||
// 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
|
||||
if(rtnArrYn == 'Y'){
|
||||
return email;
|
||||
}
|
||||
return false;
|
||||
}else{
|
||||
var myArray = regExp.exec(email);
|
||||
if(rtnArrYn == 'Y'){
|
||||
return myArray;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
},
|
||||
/** * 전화번호 포맷으로 변환 * * @param 데이터 */
|
||||
formatPhone(phoneNum,fmt,rtnArrYn) {
|
||||
if(this.isNull(fmt)){
|
||||
fmt='';
|
||||
}
|
||||
if(this.isNull(rtnArrYn)){
|
||||
fmt='N';
|
||||
}
|
||||
if(this.isPhone(phoneNum)) {
|
||||
var rtnNum;
|
||||
var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
|
||||
var myArray;
|
||||
if(regExp.test(phoneNum)){
|
||||
myArray = regExp.exec(phoneNum);
|
||||
rtnNum = myArray[1]+fmt + myArray[2]+fmt+myArray[3];
|
||||
if(rtnArrYn == 'Y'){
|
||||
return myArray;
|
||||
}
|
||||
return rtnNum;
|
||||
} else {
|
||||
regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
|
||||
if(regExp.test(phoneNum)){
|
||||
myArray = regExp.exec(phoneNum);
|
||||
rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
|
||||
if(rtnArrYn == 'Y'){
|
||||
return myArray;
|
||||
}
|
||||
return rtnNum;
|
||||
} else {
|
||||
return phoneNum;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return phoneNum;
|
||||
}
|
||||
},
|
||||
/** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
|
||||
formatMobile(phoneNum,fmt,rtnArrYn) {
|
||||
|
||||
if(this.isNull(fmt)){
|
||||
fmt='';
|
||||
}
|
||||
if(this.isNull(rtnArrYn)){
|
||||
fmt='N';
|
||||
}
|
||||
if(this.isMobile(phoneNum)) {
|
||||
|
||||
var rtnNum;
|
||||
var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
|
||||
var myArray;
|
||||
|
||||
if(regExp.test(phoneNum)){
|
||||
|
||||
myArray = regExp.exec(phoneNum);
|
||||
rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
|
||||
if(rtnArrYn == 'Y'){
|
||||
return myArray;
|
||||
}
|
||||
return rtnNum;
|
||||
} else {
|
||||
return phoneNum;
|
||||
}
|
||||
} else {
|
||||
return phoneNum;
|
||||
}
|
||||
},
|
||||
|
||||
/** * 전화번호 형식 체크 * * @param 데이터 */
|
||||
isPhone(phoneNum) {
|
||||
var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
|
||||
if(regExp.test(phoneNum)){
|
||||
return true;
|
||||
} else {
|
||||
regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
|
||||
if(regExp.test(phoneNum)){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/** * 핸드폰번호 형식 체크 * * @param 데이터 */
|
||||
isMobile(phoneNum) {
|
||||
var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
|
||||
var myArray;
|
||||
if(regExp.test(phoneNum)){
|
||||
myArray = regExp.exec(phoneNum);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
isMobile2(phoneNum) {
|
||||
var regExp =/(1[016789])([0-9]{3,4})([0-9]{4})$/;
|
||||
var myArray;
|
||||
if(regExp.test(phoneNum)){
|
||||
myArray = regExp.exec(phoneNum);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
isNull(obj){
|
||||
if(lodash.isNil(obj) || lodash.trim(obj) == ''){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getParent(name){
|
||||
let p = this.$parent;
|
||||
while(typeof p !== 'undefined'){
|
||||
if(p.$options.name == name) {
|
||||
return p;
|
||||
}else {
|
||||
p = p.$parent;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getJsonObj(str){
|
||||
return JSON.parse(JSON.stringify(str));
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
var chkPattern2 = {
|
||||
data: function () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selSesStorage(keyLike){
|
||||
if(this.isNull(keyLike)){
|
||||
return null;
|
||||
}
|
||||
if(sessionStorage.length > 0){
|
||||
let keyList = [];
|
||||
for(let i=0;i<sessionStorage.length;i++){
|
||||
const keyNm = sessionStorage.key(i);
|
||||
if(keyNm.indexOf(keyLike) > -1){
|
||||
keyList.push({name : keyNm, value : sessionStorage.getItem(keyNm)});
|
||||
}
|
||||
}
|
||||
if(keyList.length > 0){
|
||||
return keyList;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
delSesStorage(keyList){
|
||||
if(this.isNull(keyList)){
|
||||
return null;
|
||||
}
|
||||
if(keyList.length > 0){
|
||||
keyList.map((o) => (sessionStorage.removeItem(o.name)));
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
setGridMouseDownActive(){
|
||||
const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
|
||||
if(window.getEventListeners(ele).mousedown){
|
||||
ele.removeEventListener('mousedown',window.getEventListeners(ele).mousedown[0].listener);
|
||||
}
|
||||
},
|
||||
restrictChars : function($event,regExp,hanYn){
|
||||
|
||||
if(this.isNull(hanYn)){
|
||||
hanYn='N';
|
||||
}
|
||||
if(hanYn === 'N' && $event.type === 'keydown'){
|
||||
if($event.keyCode === 229){
|
||||
$event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if($event.type === 'keypress'){
|
||||
//한글 처리 불가
|
||||
if(regExp.test(String.fromCharCode($event.charCode))) {
|
||||
return true;
|
||||
}else{
|
||||
$event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if(hanYn === 'N' && ( $event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')){
|
||||
$event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g,'');
|
||||
$event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
setLenth: function (e, len) {
|
||||
this.cut(e, len);
|
||||
},
|
||||
onlyCustom: function (e,strRegExp,hanYn) {
|
||||
var regExp_g = new RegExp(strRegExp,'g');
|
||||
this.cut(e);
|
||||
return this.restrictChars(e,regExp_g,hanYn);
|
||||
},
|
||||
onlyCommon: function(strRegExp, e, len, isEventCall, hanYn) {
|
||||
var regExp_g = new RegExp(strRegExp,'g');
|
||||
if(isEventCall === 'N'){
|
||||
if(!this.cut(e, len, isEventCall)){
|
||||
return false;
|
||||
}
|
||||
if(!regExp_g.test(e.value)){
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
this.cut(e, len);
|
||||
return this.restrictChars(e,regExp_g,hanYn);
|
||||
},
|
||||
onlyNum: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[0-9]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
onlyEng: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[A-Za-z]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
onlyLowerEng: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[a-z]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
onlyUpperEng: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[A-Z]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
onlyEmail: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
onlyName: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
|
||||
},
|
||||
onlyTitle: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
|
||||
},
|
||||
onlyText: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
|
||||
},
|
||||
onlyPassword: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
onlyId: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[A-Za-z0-9_\.\-]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
onlyIp: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[0-9,.*]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
onlyRoleNm_Space: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
|
||||
},
|
||||
onlyRoleId_UnderBar: function (e, len, isEventCall) {
|
||||
var strRegExp = '^[a-zA-Z0-9_]*$';
|
||||
return this.onlyCommon(strRegExp, e, len, isEventCall);
|
||||
},
|
||||
cut: function (ele, len, isValidChk) {
|
||||
let e=ele;
|
||||
if (typeof ele.target != "undefined") {
|
||||
e=ele.target;
|
||||
}
|
||||
let max = this.isNull(len) ? e.attributes.maxlength.value : len;
|
||||
let str = e.value;
|
||||
|
||||
if (this.bytes(str) > max) {
|
||||
if(this.isNull(isValidChk)){
|
||||
e.value = this.cutBytes(str, max);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
cutBytes: function (str, len) {
|
||||
while(1 === 1){
|
||||
if(this.bytes(str) <= len){
|
||||
return str;
|
||||
}
|
||||
str = str.slice(0,-1);
|
||||
}
|
||||
},
|
||||
bytes: function (str) {
|
||||
var length = ((s,b,i,c) => {
|
||||
// for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1); // 한글 3바이트
|
||||
// for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1); //한글 2바이트
|
||||
b=0,i=0;
|
||||
while(1 === 1){
|
||||
c = s.charCodeAt(i++);
|
||||
if (isNaN(c)) {
|
||||
break;
|
||||
}
|
||||
b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
|
||||
}
|
||||
return b
|
||||
})(str);
|
||||
return length;
|
||||
},
|
||||
checkPhone: function(str) {
|
||||
str = str.replace(/[-\s]+/g, '');
|
||||
if (str.charAt(0)!="0"){
|
||||
str = "0"+str;
|
||||
}
|
||||
if (str.length<10||str.length>12){return "";}
|
||||
if (isNaN(str)){return ""; }
|
||||
if (str.substr(0,2)!="01" && str.substr(0,3)!="070" && str.substr(0,4)!="0505" && str.substr(0,4)!="0503"){return ""; }
|
||||
return str;
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
export { utils_mixin, chkPattern2 };
|
||||
@@ -44,26 +44,24 @@
|
||||
<div class="group">
|
||||
<div class="input_box">
|
||||
<label for="right" class="label">고객사명</label>
|
||||
<input class="search-box" type="text" id="" placeholder="검색어 입력"/>
|
||||
<input class="search-box" type="text" id="" placeholder="검색어 입력" v-model="grid.params.custNm"/>
|
||||
</div>
|
||||
<div class="input_box">
|
||||
<label for="right" class="label">사업자번호 (생년월일)</label>
|
||||
<input class="search-box" type="text" id="" placeholder="검색어 입력"/>
|
||||
<label for="right" class="label">사업자번호</label>
|
||||
<input class="search-box" type="text" id="" placeholder="검색어 입력" v-model="grid.params.bizrno"/>
|
||||
</div>
|
||||
<button type="button" class="button grey">조회</button>
|
||||
<button type="button" class="button grey" @click="search">조회</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="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</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">엑셀 다운로드</button>
|
||||
</div>
|
||||
@@ -71,261 +69,263 @@
|
||||
</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>
|
||||
<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.header"
|
||||
></custom-grid>
|
||||
</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>
|
||||
|
||||
<common-modal ref="commmonModal"></common-modal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import customGrid from '@/components/CustomGrid';
|
||||
//import { utils_mixin, chkPattern2 } from '../service/mixins';
|
||||
import moment from "moment";
|
||||
import xlsx from '@/common/excel';
|
||||
import lodash from 'lodash';
|
||||
//import api from '../service/api';
|
||||
import commonModal from "@/components/modal/commonModal";
|
||||
|
||||
export default {
|
||||
name: 'calcList',
|
||||
//mixins: [utils_mixin, chkPattern2],
|
||||
data() {
|
||||
return {
|
||||
// 달력 데이터
|
||||
ko: vdp_translation_ko.js,
|
||||
periodDay: 7,
|
||||
sDateDiv: 'month',
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
}
|
||||
|
||||
startDt:'',
|
||||
endDt:'',
|
||||
startYear:'',
|
||||
startMonth:'',
|
||||
endYear:'',
|
||||
endMonth:'',
|
||||
row: {},
|
||||
list:[],
|
||||
totalCnt: '',
|
||||
|
||||
pageType: 'SUBS',
|
||||
|
||||
// 테이블 리스트 데이터
|
||||
perPageCnt: 50,
|
||||
options: [
|
||||
{ text: '20', value: 20},
|
||||
{ text: '50', value: 50},
|
||||
{ text: '100', value: 100}
|
||||
],
|
||||
totalItems: 0,
|
||||
|
||||
grid: {
|
||||
url: '/api/v1/bo/calculate/calcList',
|
||||
pagePerRows: 20,
|
||||
pagination: true,
|
||||
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
|
||||
initialRequest: false,
|
||||
addCls: 'box_OFvis',
|
||||
|
||||
header:[
|
||||
[
|
||||
{ header: '날짜', childNames: [] },
|
||||
{ header: '고객사명', childNames: [] },
|
||||
{ header: '사업자번호', childNames: [] },
|
||||
{ header: '요금제', childNames: [] },
|
||||
{ header: '시작금액', childNames: [] },
|
||||
{ header: '사용금액', childNames: [] },
|
||||
{ header: '이월금액', childNames: [] },
|
||||
{ header: '종량금액', childNames: [] },
|
||||
{ header: '소멸금액', childNames: [] },
|
||||
{ header: '청구금액', childNames: [] },
|
||||
{ header: '채널별 발송 건수', childNames: ['totalSndCnt','smsSndCnt','lmsSndCnt','mmsSndCnt','atlkSndCnt'] },
|
||||
]
|
||||
],
|
||||
|
||||
columns: [
|
||||
{ name: 'useYm', header: '날짜', align: 'center'},
|
||||
{ name: 'custNm', header: '고객사명', align: 'center', width: '130px'},
|
||||
{ name: 'bizrno', header: '사업자번호', align: 'center', width: '120px'
|
||||
,formatter: props => {
|
||||
let result = props.bizrno.substring(0,3)+'-'+ props.bizrno.substring(3,5)+'-'+ props.bizrno.substring(5,10)
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'prodNm', header: '요금제', align: 'center', width: '160px'
|
||||
,formatter: props => {
|
||||
let result = "<p>"+ props.prodNm+"</p>\n<p>("+props.prodAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')+")</p>";
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'startAmt', header: '시작금액', align: 'center'
|
||||
,formatter: props =>{
|
||||
let result = props.startAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'useAmt', header: '사용금액', align: 'center'
|
||||
,formatter: props =>{
|
||||
let result = props.useAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'cfwdAmt', header: '이월금액', align: 'center'
|
||||
,formatter: props =>{
|
||||
let result = props.cfwdAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'mrtUseAmt', header: '종량금액', align: 'center'
|
||||
,formatter: props =>{
|
||||
let result = props.mrtUseAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'extncAmt', header: '소멸금액', align: 'center'
|
||||
,formatter: props =>{
|
||||
let result = props.extncAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'billingAmt', header: '청구금액', align: 'center'
|
||||
,formatter: props =>{
|
||||
let result = props.billingAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'totalSndCnt', header: '전체', align: 'center', cls: 'td_line'
|
||||
,formatter: props =>{
|
||||
let result = props.totalSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'smsSndCnt', header: 'SMS', align: 'center', cls: 'td_line'
|
||||
,formatter: props =>{
|
||||
let result = props.smsSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'lmsSndCnt', header: 'LMS', align: 'center', cls: 'td_line'
|
||||
,formatter: props =>{
|
||||
let result = props.lmsSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'mmsSndCnt', header: 'MMS', align: 'center', cls: 'td_line'
|
||||
,formatter: props =>{
|
||||
let result = props.mmsSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
{ name: 'atlkSndCnt', header: '알림톡', align: 'center', cls: 'td_line'
|
||||
,formatter: props =>{
|
||||
let result = props.atlkSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return result;
|
||||
}
|
||||
},
|
||||
],
|
||||
noDataStr: '검색 결과가 없습니다.',
|
||||
params: {
|
||||
startMonth: '',
|
||||
endMonth: '',
|
||||
},
|
||||
excelHeader: []
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
components: {
|
||||
customGrid: customGrid,
|
||||
commonModal,
|
||||
vuejsDatepicker,
|
||||
},
|
||||
created(){
|
||||
this.$store.commit("login/isLogin", true);
|
||||
this.$store.commit("login/isAuthChk", true);
|
||||
this.setPeriodDay(0);
|
||||
this.gridParamSet();
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
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);
|
||||
},
|
||||
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();
|
||||
},
|
||||
methods: {
|
||||
search: function(isKeep) {
|
||||
console.log(this.testList.params);
|
||||
this.$refs.table.search(this.testList.params, isKeep);
|
||||
console.log('>>>>>>> search Start >>>>>>');
|
||||
this.$refs.table.search(this.grid.params, isKeep);
|
||||
this.grid.params = {
|
||||
startMonth: moment(this.startDate).format('YYYYMM'),
|
||||
endMonth: moment(this.endDate).format('YYYYMM'),
|
||||
custNm: this.grid.params.custNm,
|
||||
bizrno: this.grid.params.bizrno
|
||||
};
|
||||
console.log('this.perPageCnt'+this.perPageCnt);
|
||||
console.log(this.grid.params);
|
||||
/*
|
||||
var currentDate = new Date();
|
||||
var currentMonth = moment(currentDate).format('YYYYMM');
|
||||
console.log('[currentMonth]:'+currentMonth);
|
||||
|
||||
if(moment(this.grid.params.startMonth).isBefore(moment(currentMonth).subtract(0, 'months').format('YYYYMM')) ||
|
||||
moment(this.grid.params.endMonth).isBefore(moment(currentMonth).subtract(0, 'months').format('YYYYMM'))){
|
||||
this.row.title = '발송통계';
|
||||
this.row.msg1 = '검색 기간은 전월만 선택 가능 합니다.';
|
||||
this.$refs.commmonModal.alertModalOpen(this.row);
|
||||
return false
|
||||
}
|
||||
*/
|
||||
if (moment(this.grid.params.startMonth).isBefore(moment(this.grid.params.endMonth).subtract(2, 'months').format('YYYYMM'))) {
|
||||
//alert('검색 기간은 전월 최대 3개월까지 선택 가능 합니다.');
|
||||
this.row.title = '발송통계';
|
||||
this.row.msg1 = '검색 기간은 전월 최대 3개월까지 선택 가능 합니다.';
|
||||
this.$refs.commmonModal.alertModalOpen(this.row);
|
||||
return false
|
||||
}
|
||||
|
||||
this.$refs.table.search(this.grid.params, isKeep);
|
||||
this.sendStoreData();
|
||||
|
||||
},
|
||||
setPeriodDay(day) {
|
||||
this.periodDay = day;
|
||||
@@ -374,6 +374,32 @@ export default {
|
||||
return moment(date).format('YYYY-MM-DD');
|
||||
}
|
||||
},
|
||||
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);
|
||||
},
|
||||
gridParamSet() {
|
||||
this.grid.params = {
|
||||
startMonth: moment(this.startDate).format('YYYYMM'),
|
||||
endMonth: moment(this.endDate).format('YYYYMM'),
|
||||
custNm: this.grid.params.custNm,
|
||||
bizrno: this.grid.params.bizrno
|
||||
}
|
||||
|
||||
console.log("gridParamSet()-startMonth : "+ this.grid.params.startMonth);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user