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

TC 기능 수정 / 디자인 수정 변경

Browse Source
This commit is contained in:
kimre
2022-07-15 14:21:03 +09:00
parent a4e5cde9f6
commit 34e7957081
91 changed files with 9087 additions and 8673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
frontend/src/modules/calculate/views/CalcList.vue
View File

@@ -6,13 +6,12 @@
<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 txt">조회기간</label>
<p>전월 최대 3개월까지 조회 가능합니다.</p>
<div class="term">
<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"
@@ -23,10 +22,11 @@
v-model="startDate"
@selected="selectedStartDate(0)"
@closed="closeDate('start')"
:picker-options="startDateOptions"
></vuejs-datepicker>
</span>
<span class="hypen">~</span>
<span class="custom_input icon_date">
<span class="hypen">~</span>
<span class="custom_input icon_date">
<vuejs-datepicker
:language="ko"
:format="customFormatter"
@@ -36,32 +36,37 @@
v-model="endDate"
@selected="selectedEndDate(0)"
@closed="closeDate('end')"
:picker-options="endDateOptions"
></vuejs-datepicker>
</span>
</div>
</div>
</div>
<div class="group">
<div class="input_box">
<label for="right" class="label">고객사명</label>
<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="검색어 입력" v-model="grid.params.bizrno"/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
</div>
</form>
<div class="group">
<div class="input_box">
<label for="right" class="label">고객사명</label>
<input class="search-box" type="text" id="" placeholder="검색어 입력" v-model="grid.params.custNm"
maxlength="100" @keyup.enter="search"/>
</div>
<div class="input_box">
<label for="right" class="label">사업자번호</label>
<input class="search-box" type="text" id="" placeholder="검색어 입력" v-model="grid.params.bizrno"
@keypress="onlyNum" @input="onlyNum" maxlength="10" @keyup.enter="search"/>
</div>
<button type="button" class="button grey" @click="search">조회</button>
</div>
</div>
<div class="info">
<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="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" @click="excelDown();">엑셀 다운로드</button>
</div>
@@ -70,23 +75,23 @@
<div class="table calculate scroll">
<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.header"
></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>
<common-modal ref="commmonModal"></common-modal>
</div>
</div>
</template>
@@ -98,9 +103,11 @@ import xlsx from '@/common/excel';
import lodash from 'lodash';
import commonModal from "@/components/modal/commonModal";
import calcMgtApi from "@/modules/calculate/service/calcMgtApi";
import {utils_mixin, chkPattern2} from '../service/mixins';
export default {
name: 'calcList',
mixins: [utils_mixin, chkPattern2],
data() {
return {
// 달력 데이터
@@ -109,136 +116,150 @@ export default {
sDateDiv: 'month',
startDate: new Date(),
endDate: new Date(),
startDt:'',
endDt:'',
startYear:'',
startMonth:'',
endYear:'',
endMonth:'',
row: {},
list:[],
totalCnt: '',
startDateOptions: {disabledDate: this.disabledStDate},
endDateOptions: {disabledDate: this.disabledEdDate},
startDt: '',
endDt: '',
startYear: '',
startMonth: '',
endYear: '',
endMonth: '',
row: {},
list: [],
totalCnt: '',
pageType: 'CALC',
// 테이블 리스트 데이터
perPageCnt: 50,
options: [
{ text: '20', value: 20},
{ text: '50', value: 50},
{ text: '100', value: 100}
{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,
pagination: true,
isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
initialRequest: false,
addCls: 'box_OFvis',
header:[
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'] },
{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)
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: '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 =>{
{
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 =>{
{
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 =>{
{
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 =>{
{
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 =>{
{
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 =>{
{
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 =>{
{
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 =>{
{
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 =>{
{
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 =>{
{
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 =>{
{
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: {
noDataStr: '검색 결과가 없습니다.',
params: {
startMonth: '',
endMonth: '',
},
@@ -246,31 +267,31 @@ export default {
}
};
},
},
components: {
customGrid: customGrid,
commonModal,
vuejsDatepicker,
},
created(){
created() {
this.setPeriodDay(0);
this.gridParamSet();
this.getExcelHeader();
},
destroyed() {
},
mounted() {
let page = 1;
// 페이지 정보 및 검색 조건
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
console.log('getCondition : '+getCondition);
console.log('getCondition : ' + getCondition);
// store에 저장된 페이지 정보 및 검색 조건을 불러오기
let isKeep = false;
if (getCondition) {
this.grid.pagePerRows = getCondition.perPage;
this.grid.params = getCondition.params;
this.grid.params = getCondition.params;
page = getCondition.page;
isKeep = true;
}
@@ -289,7 +310,7 @@ export default {
next();
},
methods: {
search: function(isKeep) {
search: function (isKeep) {
console.log('>>>>>>> search Start >>>>>>');
this.$refs.table.search(this.grid.params, isKeep);
this.grid.params = {
@@ -298,28 +319,28 @@ export default {
custNm: this.grid.params.custNm,
bizrno: this.grid.params.bizrno
};
console.log('this.perPageCnt'+this.perPageCnt);
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);
/*
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
}
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();
@@ -327,12 +348,16 @@ export default {
},
setPeriodDay(day) {
this.periodDay = day;
// this.endDate = new Date();
this.endDate = new Date();
// this.startDate = moment(this.endDate)
// .subtract(day, 'day')
// .subtract(day, 'month')
// .toDate();
console.log(this.startDt)
this.initSetStartDate();
this.initSetEndDate();
// this.disabledStDate(this.startDate)
// this.disabledEndDate(this.endDate)
this.closeDate('start');
this.closeDate('end');
@@ -355,17 +380,25 @@ export default {
},
closeDate(type) {
if (type != undefined && type != null) {
let initStartDate = new Date();
initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 4)
if (type == 'start') {
this.disabledSDate = { from: this.endDate };
this.disabledEDate = { to: this.startDate, from: this.endDate };
this.disabledSDate = {to: initStartDate, from: new Date()};
if (this.startDate !== initStartDate) {
this.disabledEDate = {to: this.startDate, from: new Date()};
}
} else if (type == 'end') {
this.disabledSDate = { from: this.endDate };
this.disabledEDate = { to: this.startDate, from: new Date() };
this.disabledEDate = {to: initStartDate, from: new Date()};
if (this.endDate !== new Date()) {
this.disabledSDate = {from: this.endDate};
this.disabledSDate = {to: initStartDate, from: new Date()};
}
}
}
},
customFormatter: function(date) {
console.log(this.sDateDiv)
customFormatter: function (date) {
// console.log(this.sDateDiv)
if (this.sDateDiv == 'month') {
return moment(date).format('YYYY-MM');
} else if (this.sDateDiv == 'year') {
@@ -374,13 +407,13 @@ export default {
return moment(date).format('YYYY-MM-DD');
}
},
changePerPage: function(){ // 페이지당 조회할 개수
changePerPage: function () { // 페이지당 조회할 개수
this.grid.pagePerRows = this.perPageCnt;
this.search(true);
},
sendStoreData: function() {
sendStoreData: function () {
const getP = this.$refs.table.getPagination();
console.log("==========getP : " + getP._currentPage);
// console.log("==========getP : " + getP._currentPage);
this.$store.commit('searchcondition/updateSearchCondition', {
page: getP._currentPage,
perPage: this.perPageCnt,
@@ -388,7 +421,7 @@ export default {
});
const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
console.log("getCondition : "+ getCondition.perPage);
// console.log("getCondition : " + getCondition.perPage);
},
gridParamSet() {
this.grid.params = {
@@ -398,7 +431,7 @@ export default {
bizrno: this.grid.params.bizrno
}
console.log("gridParamSet()-startMonth : "+ this.grid.params.startMonth);
// console.log("gridParamSet()-startMonth : " + this.grid.params.startMonth);
},
getExcelHeader() {
// 헤더를 mockup으로 관리한다.
@@ -423,7 +456,8 @@ export default {
dataOrder: 'header'
};
// console.log(data);
xlsx.export(data.list, saveFileName, options).then(() => {});
xlsx.export(data.list, saveFileName, options).then(() => {
});
},
async getExcelDataDown() {
try {
@@ -434,25 +468,26 @@ export default {
const result = response.data;
if (result != null && result.retCode == "0000") {
return result.data;
}else{
} else {
return false;
}
} catch (err) {
return false;
}
},
initSetStartDate(){
initSetStartDate() {
let initStartDate = new Date();
initStartDate.setMonth(Number(moment(initStartDate).format('MM')) -4);
initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 4);
this.startDate = initStartDate;
console.log(moment(this.startDate).format('YYYY-MM-DD'));
// console.log(moment(this.startDate).format('YYYY-MM-DD'));
},
initSetEndDate(){
initSetEndDate() {
let initEndDate = new Date();
initEndDate.setMonth(Number(moment(initEndDate).format('MM')) -2);
initEndDate.setMonth(Number(moment(initEndDate).format('MM')) - 1);
this.endDate = initEndDate;
console.log(moment(this.endDate).format('YYYY-MM-DD'));
// console.log(moment(this.endDate).format('YYYY-MM-DD'));
},
}
};
}
;
</script>