343 lines
10 KiB
Vue
343 lines
10 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<div class="box-body">
|
||
<!-- Content Header (Page header) -->
|
||
<section class="content-header">
|
||
<h1 id="itemTitle"></h1>
|
||
</section>
|
||
<!-- .content -->
|
||
<div id="table"></div>
|
||
<div id="toolbar">
|
||
<form
|
||
id="searchForm"
|
||
action="/admin/recharge/user/give/export"
|
||
method="get"
|
||
target="_blank"
|
||
>
|
||
<div class="col-sm-12">
|
||
<label for="fromErBanNo" class="col-sm-2 control-label"
|
||
>转出人id:</label
|
||
>
|
||
<div class="col-sm-2">
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="fromErBanNo"
|
||
id="fromErBanNo"
|
||
/>
|
||
</div>
|
||
|
||
<label for="toErBanNo" class="col-sm-2 control-label"
|
||
>收入人id:</label
|
||
>
|
||
<div class="col-sm-2">
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="toErBanNo"
|
||
id="toErBanNo"
|
||
/>
|
||
</div>
|
||
<label for="toRegion" class="col-sm-2 control-label"
|
||
>收入人地区:</label
|
||
>
|
||
<div class="col-sm-2">
|
||
<select
|
||
name="toRegion"
|
||
id="toRegion"
|
||
data-btn-class="btn-warning"
|
||
class="form-control"
|
||
>
|
||
<option value="" selected="selected">全部</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<label for="startTime" class="col-sm-2 control-label"
|
||
>时间:</label
|
||
>
|
||
<div class="col-sm-3">
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="startTime"
|
||
id="startTime"
|
||
/>
|
||
</div>
|
||
<label for="endTime" class="col-sm-1 control-label">-</label>
|
||
<div class="col-sm-3">
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
name="endTime"
|
||
id="endTime"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<label for="fromErBanNo" class="col-sm-2 control-label"
|
||
>转出人所属分区:</label
|
||
>
|
||
<div class="col-sm-2">
|
||
<partition-select v-model:partition-id="partitionId" />
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div id="mapObjHtml" style="display:none">
|
||
<span style="
|
||
margin-right: 10px;
|
||
display: inline-block;
|
||
font-size: 18px;
|
||
color: #2049a9;
|
||
">
|
||
金币转赠明细: <b class="b1"></b>
|
||
</span>
|
||
<span style="
|
||
margin-right: 10px;
|
||
display: inline-block;
|
||
font-size: 18px;
|
||
color: #2049a9;
|
||
">
|
||
转赠非充值代理用户总数: <b class="b2"></b>
|
||
</span>
|
||
<span style="
|
||
margin-right: 10px;
|
||
display: inline-block;
|
||
font-size: 18px;
|
||
color: #ee0101;
|
||
">
|
||
转赠子代理金币总和: <b class="b3"></b>
|
||
</span>
|
||
</div>
|
||
<button id="btnSearch" class="btn btn-default">
|
||
<i class="glyphicon glyphicon-search"></i>查询
|
||
</button>
|
||
<button id="btnExport" class="btn btn-default">
|
||
<i class="glyphicon glyphicon-Export"></i>导出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from "@/utils/bootstrap-table-helper";
|
||
import PartitionSelect from "../common/partitionSelect.vue";
|
||
import { ref ,watch} from 'vue';
|
||
export default {
|
||
name: "RechargeDiamondGiveDetailView",
|
||
components: {PartitionSelect},
|
||
setup() {
|
||
const partitionId = ref(undefined);
|
||
// 监听 partitionId 的变化
|
||
watch(partitionId, (newValue) => {
|
||
console.log("partitionId changed to:", newValue);
|
||
// 将 partitionId 的值传递给 jQuery 代码
|
||
window.partitionIdValue = newValue;
|
||
});
|
||
|
||
return {
|
||
partitionId
|
||
};
|
||
},
|
||
created() {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
// const partitionId = partitionId.value;
|
||
$(function () {
|
||
userRegion();
|
||
$("#table").bootstrapTable("destroy");
|
||
var picker1 = $("#startTime").datetimepicker({
|
||
format: "yyyy-mm-dd hh:ii:00",
|
||
todayBtn: true,
|
||
autoclose: true,
|
||
});
|
||
var picker2 = $("#endTime").datetimepicker({
|
||
format: "yyyy-mm-dd hh:ii: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);
|
||
});
|
||
|
||
//导出功能
|
||
$("#btnExport").on("click", function () {
|
||
$("#searchForm").submit();
|
||
});
|
||
|
||
// 查询刷新
|
||
$("#btnSearch").on("click", ()=> {
|
||
// console.log(partitionId)
|
||
$("#table").bootstrapTable({
|
||
columns: [
|
||
{
|
||
field: "createTime",
|
||
title: "时间",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "fromErBanNo",
|
||
title: "转出人peko id",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "fromNick",
|
||
title: "转出人昵称",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "fromClanName",
|
||
title: "转出人所在公会",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "fromRegion",
|
||
title: "转出人所属代充地区",
|
||
align: "center",
|
||
width: "5%",
|
||
formatter: function (val, row, index) {
|
||
var value = "";
|
||
if (val) {
|
||
var array = val.split(",");
|
||
for (let i = 0, len = array.length; i < len; i++) {
|
||
var region = array[i];
|
||
value += region;
|
||
if (i != len - 1) {
|
||
value += "<br/>";
|
||
}
|
||
}
|
||
}
|
||
return value;
|
||
},
|
||
},
|
||
{
|
||
field: "partitionDesc",
|
||
title: "转出人的分区",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "toErBanNo",
|
||
title: "收入人peko id",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "toNick",
|
||
title: "收入人昵称",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "toRegion",
|
||
title: "收入人地区",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "toPartitionDesc",
|
||
title: "收入人的分区",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "inviteCode",
|
||
title: "收入人填写的邀请码",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
{
|
||
field: "diamondNum",
|
||
title: "转赠数额",
|
||
align: "center",
|
||
width: "5%",
|
||
},
|
||
],
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 20,
|
||
pagination: true,
|
||
pageList: [20, 50, 100],
|
||
search: false,
|
||
sidePagination: "server", //表示服务端请求
|
||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||
//设置为limit可以获取limit, offset, search, sort, order
|
||
queryParamsType: "undefined",
|
||
queryParams: (params) =>{
|
||
//设置查询参数
|
||
var param = {
|
||
page: params.pageNumber,
|
||
pageSize: params.pageSize,
|
||
fromErBanNo: $("#fromErBanNo").val(),
|
||
toErBanNo: $("#toErBanNo").val(),
|
||
toRegion: $("#toRegion").val(),
|
||
startTime: $("#startTime").val(),
|
||
endTime: $("#endTime").val(),
|
||
partitionId:window.partitionIdValue
|
||
};
|
||
return param;
|
||
},
|
||
toolbar: "#toolbar",
|
||
url: "/admin/recharge/user/give/dayDetailPage",
|
||
onLoadSuccess: (res)=> {
|
||
//加载成功时执行
|
||
console.log();
|
||
$("#mapObjHtml .b1").text(res.totalMap.totalDiamondNum);
|
||
$("#mapObjHtml .b2").text(res.totalMap.totalDiamondNum4Normal);
|
||
$("#mapObjHtml .b3").text(res.totalMap.totalDiamondNum4Sub);
|
||
},
|
||
onLoadError: ()=> {
|
||
//加载失败时执行
|
||
console.log("load fail");
|
||
},
|
||
});
|
||
TableHelper.doRefresh("#table");
|
||
$('#mapObjHtml').show();
|
||
});
|
||
|
||
//用户地区
|
||
function userRegion() {
|
||
var array;
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/recharge/user/give/getRegion",
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (json) {
|
||
if (json.success == "true" || json.code == 200) {
|
||
array = json.data;
|
||
}
|
||
},
|
||
});
|
||
var $select = $("#toRegion");
|
||
for (let i = 0; i < array.length; i++) {
|
||
var value = array[i];
|
||
var $option = $('<option value="' + value + '" />');
|
||
$option.html(value);
|
||
$select.append($option);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style> |