269 lines
11 KiB
Vue
269 lines
11 KiB
Vue
<template>
|
|
<section class="content">
|
|
<div class="box box-danger">
|
|
<div class="box-body">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<h1 id="itemTitle"></h1>
|
|
</section>
|
|
<!-- .content -->
|
|
<section class="content">
|
|
<div id="table"></div>
|
|
<div id="toolbar">
|
|
<div class="col-sm-12">
|
|
<label for="gameId" class="col-sm-1 control-label">游戏:</label>
|
|
<div class="col-sm-2">
|
|
<select id="gameId" class="input-sm form-control"></select>
|
|
</div>
|
|
<label for="startTime" class="col-sm-1 control-label">日期:</label>
|
|
<div class="col-sm-2">
|
|
<input type="text" name="startTime" id="startTime" class="input-sm form-control" placeholder="开始日期">
|
|
</div>
|
|
<label for="startTime" class="col-sm-1 control-label">-</label>
|
|
<div class="col-sm-2">
|
|
<input type="text" name="endTime" id="endTime" class="input-sm form-control" placeholder="结束日期">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<button id="btnSearch" class="btn btn-default">
|
|
<i class="glyphicon glyphicon-search"></i>查询
|
|
</button>
|
|
<button id="btnExportAll" class="btn btn-sm btn-primary">
|
|
导出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section><!-- .content -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content" style="width: 190%; left: 50%; transform: translateX(-50%);">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title" id="modalLabel"></h4>
|
|
</div>
|
|
<input type="hidden" name="dateTime" id="detailTime" />
|
|
<div class="modal-body">
|
|
<!-- .content -->
|
|
<div id="detailTable"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="btnExport">导出</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TableHelper from '@/utils/bootstrap-table-helper';
|
|
import { miniGameForBaiShunPage, miniGameForBaiShunDetailPage, miniGameForBaiShunExport, miniGameForBaiShunExportAll } from '@/api/miniGame/miniGameForBaiShun';
|
|
import { getConfigValueByKey } from '@/api/system/sysconf';
|
|
import { buildSelectOption } from '@/utils/system-helper';
|
|
|
|
export default {
|
|
name: 'MiniGameForBaiShunView',
|
|
data() {
|
|
return {
|
|
columns: [
|
|
{ field: 'dateTime', title: '日期', align: 'center', width: '15%' },
|
|
{ field: 'userCount', title: '人数', align: 'center', width: '15%' },
|
|
{ field: 'consumeNum', title: '货币消耗', align: 'center', width: '15%' },
|
|
{ field: 'settleNum', title: '结算总量', align: 'center', width: '15%' },
|
|
{
|
|
field: 'platformNum',
|
|
title: '平台收入',
|
|
align: 'center',
|
|
width: '15%',
|
|
formatter: function (val, row, index) {
|
|
return row.consumeNum - row.settleNum;
|
|
}
|
|
},
|
|
{
|
|
field: 'dateTime',
|
|
title: '操作',
|
|
align: 'center',
|
|
width: '15%',
|
|
valign: 'middle',
|
|
formatter: function (val, row, index) {
|
|
return '<button class="btn btn-sm btn-default opt-detail" data-index="' + index + '">详情</button>';
|
|
}
|
|
}
|
|
],
|
|
detailColumns: [
|
|
{ field: 'erbanNo', title: '用户平台ID', align: 'center', width: '15%' },
|
|
{ field: 'nick', title: '昵称', align: 'center', width: '15%' },
|
|
{ field: 'consumeNum', title: '货币消耗', align: 'center', width: '15%' },
|
|
{ field: 'settleNum', title: '结算总量', align: 'center', width: '15%' },
|
|
{
|
|
field: 'platformNum',
|
|
title: '平台收入',
|
|
align: 'center',
|
|
width: '15%',
|
|
formatter: function (val, row, index) {
|
|
return row.consumeNum - row.settleNum;
|
|
}
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.initGame();
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.$nextTick(function () {
|
|
let $this = this;
|
|
var picker1 = $("#startTime").datetimepicker({
|
|
format: 'yyyy-mm-dd 00:00:00',
|
|
todayBtn: true,
|
|
autoclose: true,
|
|
});
|
|
var picker2 = $("#endTime").datetimepicker({
|
|
format: 'yyyy-mm-dd 00:00:00',
|
|
todayBtn: true,
|
|
autoclose: true
|
|
});
|
|
picker1.on('changeDate', function () {
|
|
var date = $('#startTime').datetimepicker('getDate');
|
|
picker2.datetimepicker('setStartDate', date);
|
|
});
|
|
picker2.on('changeDate', function () {
|
|
var date = $('#endTime').datetimepicker('getDate');
|
|
picker1.datetimepicker('setEndDate', date);
|
|
});
|
|
$this.initTable();
|
|
$('#table').on('click', '.opt-detail', function () {
|
|
$this.detail(this);
|
|
});
|
|
$('#btnSearch').click(function () {
|
|
$this.search();
|
|
});
|
|
$('#btnExport').click(function () {
|
|
$this.export();
|
|
});
|
|
$('#btnExportAll').click(function () {
|
|
$this.exportForAll();
|
|
});
|
|
});
|
|
},
|
|
initTable() {
|
|
let $this = this;
|
|
TableHelper.destroy('#table');
|
|
$('#table').bootstrapTable({
|
|
columns: $this.columns,
|
|
cache: false,
|
|
striped: true,
|
|
showRefresh: false,
|
|
pageSize: 10,
|
|
pagination: true,
|
|
pageList: [1, 10, 20, 30, 50],
|
|
search: false,
|
|
sidePagination: 'server',
|
|
queryParamsType: 'undefined',
|
|
queryParams: function queryParams(params) {
|
|
var param = {
|
|
gameId: $('#gameId').val(),
|
|
startTime: $('#startTime').val(),
|
|
endTime: $('#endTime').val(),
|
|
pageNum: params.pageNumber,
|
|
pageSize: params.pageSize,
|
|
};
|
|
return param;
|
|
},
|
|
ajax: function(request) {
|
|
miniGameForBaiShunPage(request.data).then(res => {
|
|
let data = res.data;
|
|
request.success({
|
|
'rows': data.records,
|
|
'total': data.total
|
|
});
|
|
});
|
|
},
|
|
toolbar: '#toolbar',
|
|
});
|
|
},
|
|
search() {
|
|
TableHelper.doRefresh('#table');
|
|
},
|
|
detail(obj) {
|
|
const currentData = $('#table').bootstrapTable('getData')[$(obj).data('index')];
|
|
let dateTime = currentData.dateTime;
|
|
$('#modalLabel').html('日期:' + dateTime);
|
|
$('#detailTime').val(dateTime);
|
|
TableHelper.destroy('#detailTable');
|
|
$('#detailTable').bootstrapTable({
|
|
columns: this.detailColumns,
|
|
cache: false,
|
|
striped: true,
|
|
showRefresh: false,
|
|
pageSize: 10,
|
|
pagination: true,
|
|
pageList: [1, 10, 20, 30, 50],
|
|
search: false,
|
|
sidePagination: 'server',
|
|
queryParamsType: 'undefined',
|
|
queryParams: function queryParams(params) {
|
|
var param = {
|
|
gameId: $('#gameId').val(),
|
|
dateTime: $('#detailTime').val(),
|
|
pageNum: params.pageNumber,
|
|
pageSize: params.pageSize,
|
|
};
|
|
return param;
|
|
},
|
|
ajax: function(request) {
|
|
miniGameForBaiShunDetailPage(request.data).then(res => {
|
|
let data = res.data;
|
|
request.success({
|
|
'rows': data.records,
|
|
'total': data.total
|
|
});
|
|
});
|
|
},
|
|
});
|
|
$("#detailModal").modal('show');
|
|
},
|
|
export() {
|
|
miniGameForBaiShunExport({
|
|
dateTime: $('#detailTime').val(),
|
|
});
|
|
},
|
|
initGame() {
|
|
getConfigValueByKey({
|
|
configId: 'BAISHUN_GAME'
|
|
}).then(res => {
|
|
if (res.data) {
|
|
let data = JSON.parse(res.data.configValue);
|
|
buildSelectOption(
|
|
"#gameId",
|
|
data[0],
|
|
data.map((v) => {
|
|
return {
|
|
value: v.gameId,
|
|
text: v.gameName,
|
|
};
|
|
})
|
|
);
|
|
}
|
|
});
|
|
},
|
|
exportForAll() {
|
|
miniGameForBaiShunExportAll({
|
|
gameId: $('#gameId').val(),
|
|
startTime: $('#startTime').val(),
|
|
endTime: $('#endTime').val(),
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style> |