修复房间流水筛选bug

This commit is contained in:
Dragon
2023-12-20 14:50:49 +08:00
parent ac415d1bcb
commit e2c34e5863

View File

@@ -1,311 +1,351 @@
<template>
<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">
<div class="big-tips">
数据量过大不再默认加载所有的数据请先选择时间后再点查询按钮
</div>
<form id="searchForm" action="/admin/roomSerial/export.action" method="POST">
房主平台号(多个查询以英文逗号分隔): <input type="text" name="erbanNos" id="erbanNos" class="input-sm">
选择时间: <input type="text" name="startTime" id="startTime" class="input-sm">
<input type="text" id="endTime" name="endTime" class="input-sm">
房间类型:
<select name="isPermit" id="isPermit" data-btn-class="btn-warning">
<option value="0">全部</option>
<option value="1">牌照房</option>
<option value="3">新秀房</option>
<!--<option value="4">个播房</option>-->
<option value="4">个播房</option>
</select>
</form>
</div>
<div class="col-sm-8">
<button id="room-serial-refresh" class="btn btn-default">
<i class="glyphicon glyphicon-wrench"></i>查询
</button>
<button id="room-serial-export" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>导出
</button>
</div>
</div>
</section><!-- .content -->
<div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">提示信息</h4>
</div>
<div class="modal-body" id="tipMsg"></div>
</div>
<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">
<div class="big-tips">
数据量过大不再默认加载所有的数据请先选择时间后再点查询按钮
</div>
<form id="searchForm" action="/admin/roomSerial/export.action" method="POST">
房主平台号(多个查询以英文逗号分隔):
<input type="text" name="erbanNos" id="erbanNos" class="input-sm" style="margin-right: 40px;display: inline-block;"/> 选择时间:
<input type="text" name="startTime" id="startTime" class="input-sm" />
<input type="text" id="endTime" name="endTime" class="input-sm" />
<br />
<div style="width: 60%">
房间类型:
<select name="isPermit" id="isPermit" class="input-sm" style="width: 30%;display: inline-block;">
<option value="0">全部</option>
<option value="1">牌照房</option>
<option value="3">新秀房</option>
<!--<option value="4">个播房</option>-->
<option value="4">个播房</option>
</select>
</div>
</form>
</div>
<div class="col-sm-8">
<button id="room-serial-refresh" class="btn btn-default">
<i class="glyphicon glyphicon-wrench"></i>查询
</button>
<button id="room-serial-export" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>导出
</button>
</div>
</div>
</section>
<!-- .content -->
<div class="modal fade" id="roomGiftSerialDetailModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="roomGiftSerialDetailModalTitle">房间明细</h4>
</div>
<div class="modal-body">
<div class="summary col-sm-12">
<div class="col-sm-6">
<span>房间ID</span>
<span id="roomId"></span>
</div>
<div class="col-sm-6">
<span>房间昵称</span>
<span id="roomTitle"></span>
</div>
<div class="col-sm-6">
<span>收礼总钻石</span>
<span id="totalDiamonds"></span>
</div>
<div class="col-sm-6">
<span>房间抽成钻石数</span>
<span id="cutDiamonds"></span>
</div>
</div>
<div id="roomGiftSerialDetailTable"></div>
</div>
<div class="modal-footer">
<h4 id="roundDetailModalFooter"></h4>
<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
</div>
</div>
<div
class="modal fade"
id="tipModal"
tabindex="-1"
role="dialog"
aria-labelledby="modalLabel"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">提示信息</h4>
</div>
<div class="modal-body" id="tipMsg"></div>
</div>
</div>
</div>
<div
class="modal fade"
id="roomGiftSerialDetailModal"
tabindex="-1"
role="dialog"
aria-labelledby="modalLabel"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="roomGiftSerialDetailModalTitle">房间明细</h4>
</div>
<div class="modal-body">
<div class="summary col-sm-12">
<div class="col-sm-6">
<span>房间ID</span>
<span id="roomId"></span>
</div>
<div class="col-sm-6">
<span>房间昵称</span>
<span id="roomTitle"></span>
</div>
<div class="col-sm-6">
<span>收礼总钻石</span>
<span id="totalDiamonds"></span>
</div>
<div class="col-sm-6">
<span>房间抽成钻石数</span>
<span id="cutDiamonds"></span>
</div>
</div>
<div id="roomGiftSerialDetailTable"></div>
</div>
<div class="modal-footer">
<h4 id="roundDetailModalFooter"></h4>
<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';
import { serverError } from '@/utils/maintainer';
import TableHelper from "@/utils/bootstrap-table-helper";
import ComboboxHelper from "@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper";
import { serverError } from "@/utils/maintainer";
export default {
name: "RoomSerialView",
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initData();
name: "RoomSerialView",
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
// ComboboxHelper.build(null, '#isPermit');
$(function () {
$("#table").bootstrapTable("destroy");
$("#table").bootstrapTable({
columns: [
{ field: "userNick", title: "用户名称", align: "center", width: "20%" },
{ field: "userErbanNo", title: "房主平台号", align: "center", width: "15%" },
{ field: "totalGold", title: "总流水", align: "center", width: "10%" },
{
field: "normalTotalGold",
title: "普通礼物流水",
align: "center",
width: "10%",
},
{
field: "backpackTotalGold",
title: "背包礼物流水",
align: "center",
width: "10%",
},
{ field: "totalRadish", title: "萝卜流水", align: "center", width: "10%" },
{ field: "roomTitle", title: "房间标题", align: "center", width: "10%" },
{ field: "executionTime", title: "统计时间", align: "center", width: "15%" },
{ field: "executionTime", title: "统计时间", align: "center", width: "15%" },
{
field: "id",
title: "操作",
align: "center",
width: "10%",
formatter: function (val, row, index) {
const roomUid = row.roomUid;
console.log("roomUid", roomUid);
return (
'<button id="btnDetail" name="btnDetail" class="btn btn-sm btn-info opt-detail" roomUid=' +
roomUid +
">" +
'<i class="glyphicon glyphicon-file"></i> 查看明细</button>' +
'<button id="btnExport" name="btnExport" class="btn btn-sm btn-success opt-export" roomUid=' +
roomUid +
'><i class="glyphicon glyphicon-export"></i>导出明细</button>'
);
},
},
],
undefinedText: 0,
cache: false,
striped: true,
showRefresh: false,
pageSize: 10,
pagination: true,
pageList: [1, 10, 20, 30, 50],
search: false,
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumberpageSizesearchTextsortNamesortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: "undefined",
queryParams: function queryParams(params) {
//设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
searchText: params.searchText,
erbanNos: $("#erbanNos").val(),
startTime: $("#startTime").val(),
endTime: $("#endTime").val(),
isPermit: ComboboxHelper.getSelected("#isPermit"),
};
return param;
},
toolbar: "#toolbar",
url: "",
onLoadSuccess: function () {
//加载成功时执行
console.log("load success");
enableRefreshBtn();
},
onLoadError: function () {
//加载失败时执行
console.log("load fail");
},
});
},
methods: {
initData() {
ComboboxHelper.build(null, '#isPermit');
$(function () {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'userNick', title: '用户名称', align: 'center', width: '20%' },
{ field: 'userErbanNo', title: '房主平台号', align: 'center', width: '15%' },
{ field: 'totalGold', title: '总流水', align: 'center', width: '10%' },
{ field: 'normalTotalGold', title: '普通礼物流水', align: 'center', width: '10%' },
{ field: 'backpackTotalGold', title: '背包礼物流水', align: 'center', width: '10%' },
{ field: 'totalRadish', title: '萝卜流水', align: 'center', width: '10%' },
{ field: 'roomTitle', title: '房间标题', align: 'center', width: '10%' },
{ field: 'executionTime', title: '统计时间', align: 'center', width: '15%' },
{ field: 'executionTime', title: '统计时间', align: 'center', width: '15%' },
{
field: 'id',
title: '操作',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
const roomUid = row.roomUid;
console.log("roomUid", roomUid)
return '<button id="btnDetail" name="btnDetail" class="btn btn-sm btn-info opt-detail" roomUid=' + roomUid + '>' +
'<i class="glyphicon glyphicon-file"></i> 查看明细</button>' +
'<button id="btnExport" name="btnExport" class="btn btn-sm btn-success opt-export" roomUid=' + roomUid +
'><i class="glyphicon glyphicon-export"></i>导出明细</button>';
}
}
],
undefinedText: 0,
cache: false,
striped: true,
showRefresh: false,
pageSize: 10,
pagination: true,
pageList: [1, 10, 20, 30, 50],
search: false,
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumberpageSizesearchTextsortNamesortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
searchText: params.searchText,
erbanNos: $("#erbanNos").val(),
startTime: $("#startTime").val(),
endTime: $("#endTime").val(),
isPermit: ComboboxHelper.getSelected("#isPermit")
};
return param;
},
toolbar: '#toolbar',
url: '',
onLoadSuccess: function () { //加载成功时执行
console.log("load success");
enableRefreshBtn();
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
$('#startTime').datetimepicker({
todayBtn: true,
format: 'yyyy-mm-dd hh:ii:00',
language: 'zh-CN',
autoclose: true
})
$("#startTime").datetimepicker({
todayBtn: true,
format: "yyyy-mm-dd hh:ii:00",
language: "zh-CN",
autoclose: true,
});
$("#endTime").datetimepicker({
todayBtn: true,
format: 'yyyy-mm-dd hh:ii:00',
language: 'zh-CN',
autoclose: true
});
$("#endTime").datetimepicker({
todayBtn: true,
format: "yyyy-mm-dd hh:ii:00",
language: "zh-CN",
autoclose: true,
});
$("#room-serial-refresh").click(function () {
disableRefreshBtn();
$("#table").bootstrapTable('refresh', { url: '/admin/roomSerial/listByPage' });
})
$("#room-serial-refresh").click(function () {
disableRefreshBtn();
$("#table").bootstrapTable("refresh", { url: "/admin/roomSerial/listByPage" });
});
$("#room-serial-export").click(function () {
$("#searchForm").submit();
})
$("#room-serial-export").click(function () {
$("#searchForm").submit();
});
$("#erbanNos").change(function () {
ComboboxHelper.setDef("#isPermit", '0');
if ($(this).val() == '') {
$("#isPermit").btComboBox('enable');
} else {
$("#isPermit").btComboBox('disable');
}
})
$("#erbanNos").change(function () {
ComboboxHelper.setDef("#isPermit", "0");
if ($(this).val() == "") {
$("#isPermit").btComboBox("enable");
} else {
$("#isPermit").btComboBox("disable");
}
});
function disableRefreshBtn() {
$('#room-serial-refresh').attr("disabled", "true");
}
function enableRefreshBtn() {
$('#room-serial-refresh').removeAttr("disabled");
}
// 导出房间流水明细
$('#table').on('click', '.opt-export', function () {
const roomUid = $(this).attr("roomUid");
const start = $('#startTime').val();
const end = $('#endTime').val();
console.log("--------roomUid", roomUid, start, end);
window.location.href = `/admin/roomSerial/exportRoomRevenueDetail?roomUid=${roomUid}&start=${start}&end=${end}`
});
$('#table').on('click', '.opt-detail', function () {
const roomUid = $(this).attr("roomUid");
const start = $('#startTime').val();
const end = $('#endTime').val();
$('#roomGiftSerialDetailTable').bootstrapTable('destroy');
$('#roomGiftSerialDetailTable').bootstrapTable({
columns: [
{ field: 'num', title: '序号', align: 'center', width: '5%' },
{ field: 'erbanNo', title: '平台号', align: 'center', width: '5%' },
{ field: 'nick', title: '昵称', align: 'center', width: '5%' },
{ field: 'amount', title: '收礼总钻石', align: 'center', width: '5%' },
{ field: 'cutDiamonds', title: '房间抽成钻石', align: 'center', width: '5%' },
{ field: 'bigAmount', title: '大光礼物价值', align: 'center', width: '5%', },
{ field: 'bigNum', title: '大光礼物数量', align: 'center', width: '5%', }
],
undefinedText: 0,
cache: false,
striped: true,
showRefresh: false,
pageSize: 20,
pagination: true,
pageList: [20, 50, 100, 200],
search: false,
sidePagination: "server", //表示服务端请求
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
page: params.pageNumber,
pageSize: params.pageSize,
start: start,
end: end,
roomUid: roomUid,
};
return param;
},
ajax: function (request) { //使用ajax请求
$.ajax({
type: "GET",
url: '/admin/roomSerial/listRoomRevenueDetail.action',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: request.data,
success: function (res) {
console.log('res-------', res)
apiResult(res);
request.success({
rows: res.data.rows,
total: res.data.total,
});
$("#roomId").html(res.data.roomId);
$("#roomTitle").html(res.data.roomTitle);
$("#totalDiamonds").html(res.data.totalDiamonds);
$("#cutDiamonds").html(res.data.cutDiamonds);
$("#roomGiftSerialDetailModal").modal('show');
},
error: function (req) {
serverError(req);
}
})
},
onLoadSuccess: function (res) { //加载成功时执行
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
});
function apiResult(json) {
if (json.code == 200 && json.message == 'success') {
return true;
}
$("#tipMsg").text("请求失败,错误信息:" + json.message);
$("#tipModal").modal('show');
return false;
}
});
function disableRefreshBtn() {
$("#room-serial-refresh").attr("disabled", "true");
}
},
function enableRefreshBtn() {
$("#room-serial-refresh").removeAttr("disabled");
}
// 导出房间流水明细
$("#table").on("click", ".opt-export", function () {
const roomUid = $(this).attr("roomUid");
const start = $("#startTime").val();
const end = $("#endTime").val();
console.log("--------roomUid", roomUid, start, end);
window.location.href = `/admin/roomSerial/exportRoomRevenueDetail?roomUid=${roomUid}&start=${start}&end=${end}`;
});
$("#table").on("click", ".opt-detail", function () {
const roomUid = $(this).attr("roomUid");
const start = $("#startTime").val();
const end = $("#endTime").val();
$("#roomGiftSerialDetailTable").bootstrapTable("destroy");
$("#roomGiftSerialDetailTable").bootstrapTable({
columns: [
{ field: "num", title: "序号", align: "center", width: "5%" },
{ field: "erbanNo", title: "平台号", align: "center", width: "5%" },
{ field: "nick", title: "昵称", align: "center", width: "5%" },
{ field: "amount", title: "收礼总钻石", align: "center", width: "5%" },
{
field: "cutDiamonds",
title: "房间抽成钻石",
align: "center",
width: "5%",
},
{ field: "bigAmount", title: "大光礼物价值", align: "center", width: "5%" },
{ field: "bigNum", title: "大光礼物数量", align: "center", width: "5%" },
],
undefinedText: 0,
cache: false,
striped: true,
showRefresh: false,
pageSize: 20,
pagination: true,
pageList: [20, 50, 100, 200],
search: false,
sidePagination: "server", //表示服务端请求
queryParamsType: "undefined",
queryParams: function queryParams(params) {
//设置查询参数
var param = {
page: params.pageNumber,
pageSize: params.pageSize,
start: start,
end: end,
roomUid: roomUid,
};
return param;
},
ajax: function (request) {
//使用ajax请求
$.ajax({
type: "GET",
url: "/admin/roomSerial/listRoomRevenueDetail.action",
contentType: "application/json;charset=utf-8",
dataType: "json",
data: request.data,
success: function (res) {
console.log("res-------", res);
apiResult(res);
request.success({
rows: res.data.rows,
total: res.data.total,
});
$("#roomId").html(res.data.roomId);
$("#roomTitle").html(res.data.roomTitle);
$("#totalDiamonds").html(res.data.totalDiamonds);
$("#cutDiamonds").html(res.data.cutDiamonds);
$("#roomGiftSerialDetailModal").modal("show");
},
error: function (req) {
serverError(req);
},
});
},
onLoadSuccess: function (res) {
//加载成功时执行
console.log("load success");
},
onLoadError: function () {
//加载失败时执行
console.log("load fail");
},
});
});
function apiResult(json) {
if (json.code == 200 && json.message == "success") {
return true;
}
$("#tipMsg").text("请求失败,错误信息:" + json.message);
$("#tipModal").modal("show");
return false;
}
});
},
},
};
</script>
<style scoped>
.big-tips {
color: red;
font-size: larger;
font-weight: bold;
color: red;
font-size: larger;
font-weight: bold;
}
</style>
</style>