319 lines
9.4 KiB
Vue
319 lines
9.4 KiB
Vue
<template>
|
||
<div class="agent-send-salary">
|
||
<div class="container">
|
||
<div class="handle-box">
|
||
<el-form
|
||
ref="searchForm"
|
||
:model="searchForm"
|
||
:rules="searchRule"
|
||
label-width="90px"
|
||
:disabled="tableLoading"
|
||
>
|
||
<div class="search-line">
|
||
<el-form-item label="分区" prop="partitionId">
|
||
<partition-select v-model:partition-id="searchForm.partitionId"
|
||
v-model:partition-infos="partitionArr"
|
||
v-model:after-init="getData"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="充值代理ID" prop="chargeAgentErbanNo">
|
||
<el-input
|
||
v-model.trim="searchForm.chargeAgentErbanNo"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="主播ID" prop="erbanNo">
|
||
<el-input
|
||
v-model.trim="searchForm.erbanNo"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="时间" class="large">
|
||
<el-form-item prop="startTime">
|
||
<el-date-picker
|
||
type="datetime"
|
||
placeholder="选择开始时间"
|
||
v-model="searchForm.startTime"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-col :span="2" align="center">-</el-col>
|
||
<el-form-item prop="endTime">
|
||
<el-date-picker
|
||
type="datetime"
|
||
placeholder="选择结束时间"
|
||
v-model="searchForm.endTime"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
<div class='title'>统计时间按照东八区统计。东三区时间筛选需要增加5小时！！！！！</div>
|
||
|
||
<el-form-item label-width="40px">
|
||
<el-button type="primary" @click="handSearch">搜索</el-button>
|
||
<el-button plain @click="resetSearchForm">重置搜索</el-button>
|
||
<el-button type="primary" @click="chargeGameAgentExportFun"
|
||
>导出</el-button
|
||
>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
<el-button type="text" class="total"
|
||
>转增薪资总额:{{ total ? total.toLocaleString() : "0" }}</el-button
|
||
>
|
||
</div>
|
||
<div class="table">
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
v-loading="tableLoading"
|
||
@header-click="headerCopy"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column align="center" prop="partitionDesc" label="分区">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="receiveErbano"
|
||
label="充值代理ID"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="receiveNick"
|
||
label="充值代理昵称"
|
||
>
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
align="center"
|
||
prop="receiveAbbr"
|
||
label="充值代理国家"
|
||
>
|
||
</el-table-column> -->
|
||
<el-table-column align="center" prop="erbano" label="主播ID">
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="nick" label="主播昵称">
|
||
</el-table-column>
|
||
<!-- <el-table-column align="center" prop="abbr" label="主播国家">
|
||
</el-table-column> -->
|
||
<el-table-column align="center" prop="tradeUsb" label="转增游戏薪资">
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="gold" label="对应金币数">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="createTimeStr"
|
||
label="创建时间"
|
||
width="160"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<table-pagination
|
||
:pageParams="pageParams"
|
||
:pageTotal="pageTotal"
|
||
:page-sizes="[10, 20, 100, 200]"
|
||
@handleSizeChange="handleSizeChange"
|
||
@handlePageChange="handlePageChange"
|
||
></table-pagination>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
chargeGameAgentList,
|
||
chargeGameAgentSum,
|
||
chargeGameAgentExport,
|
||
} from "@/api/relAgency/relAgency.js";
|
||
import TablePagination from "@/components/common/TablePagination";
|
||
import { formatDate, formatDateYMD } from "@/utils/relDate";
|
||
import { dateFormat } from "@/utils/system-helper";
|
||
// @ts-ignore
|
||
import { ElMessage } from "element-plus";
|
||
import { ref } from "vue";
|
||
import PartitionSelect from "@/views/common/partitionSelect.vue";
|
||
export default {
|
||
name: "agentSendGameSalary",
|
||
components: {PartitionSelect, TablePagination },
|
||
data() {
|
||
return {
|
||
total: 0,
|
||
btnLoading: false, // 导出弹出框(dialog)的确认按钮
|
||
tableLoading: false, // 表格是否加载中
|
||
|
||
tableData: [], // 接口返回的表格数据
|
||
pageTotal: 0, // 接口返回的表格总条数
|
||
pageParams: {
|
||
pageNo: 1,
|
||
pageSize: 20,
|
||
},
|
||
// 搜索表单相关
|
||
searchForm: {
|
||
erbanNo: null,
|
||
chargeAgentErbanNo: null,
|
||
startTime: null,
|
||
endTime: null,
|
||
partitionId: undefined,
|
||
},
|
||
partitionArr: [],
|
||
searchRule: {
|
||
startTime: [
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
this.$refs["searchForm"].validateField("endTime");
|
||
callback();
|
||
},
|
||
trigger: "change",
|
||
},
|
||
],
|
||
endTime: [
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
const { startTime } = this.searchForm;
|
||
if (startTime !== null && startTime !== "" && value) {
|
||
if (value <= startTime) {
|
||
callback(new Error("须晚于开始时间"));
|
||
} else {
|
||
callback();
|
||
}
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
trigger: "change",
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.tableLoading = true;
|
||
|
||
let { pageParams, searchForm } = this;
|
||
console.log(searchForm);
|
||
searchForm.startTime = searchForm.startTime
|
||
? dateFormat(searchForm.startTime, "yyyy-MM-dd hh:mm:ss")
|
||
: null;
|
||
searchForm.endTime = searchForm.endTime
|
||
? dateFormat(searchForm.endTime, "yyyy-MM-dd hh:mm:ss")
|
||
: null;
|
||
searchForm = JSON.parse(JSON.stringify(searchForm));
|
||
pageParams = JSON.parse(JSON.stringify(pageParams));
|
||
Object.keys(searchForm).forEach((item) => {
|
||
if (
|
||
!searchForm[item] ||
|
||
(searchForm[item] !== undefined && searchForm[item] === "")
|
||
) {
|
||
delete searchForm[item];
|
||
}
|
||
});
|
||
Object.assign(pageParams, searchForm);
|
||
console.log(pageParams);
|
||
|
||
chargeGameAgentList(pageParams).then((res) => {
|
||
this.tableLoading = false;
|
||
if (res.code == 200) {
|
||
let data = res.data;
|
||
this.tableData = data.records;
|
||
this.pageTotal = data.total;
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
chargeGameAgentSum(pageParams).then((res) => {
|
||
if (res.code == 200) {
|
||
this.total = res.data;
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 导出
|
||
chargeGameAgentExportFun() {
|
||
|
||
let { pageParams, searchForm } = this;
|
||
console.log(searchForm);
|
||
searchForm.startTime = searchForm.startTime
|
||
? dateFormat(searchForm.startTime, "yyyy-MM-dd hh:mm:ss")
|
||
: null;
|
||
searchForm.endTime = searchForm.endTime
|
||
? dateFormat(searchForm.endTime, "yyyy-MM-dd hh:mm:ss")
|
||
: null;
|
||
searchForm = JSON.parse(JSON.stringify(searchForm));
|
||
pageParams = JSON.parse(JSON.stringify(pageParams));
|
||
Object.keys(searchForm).forEach((item) => {
|
||
if (
|
||
!searchForm[item] ||
|
||
(searchForm[item] !== undefined && searchForm[item] === "")
|
||
) {
|
||
delete searchForm[item];
|
||
}
|
||
});
|
||
Object.assign(pageParams, searchForm);
|
||
console.log(pageParams);
|
||
|
||
chargeGameAgentExport(pageParams).then((res) => {});
|
||
},
|
||
// 点击搜索
|
||
handSearch() {
|
||
this.$refs["searchForm"].validate((valid) => {
|
||
if (valid) {
|
||
this.pageParams.pageNo = 1;
|
||
this.getData();
|
||
}
|
||
});
|
||
},
|
||
// 重置搜索表单
|
||
resetSearchForm() {
|
||
this.$refs["searchForm"].resetFields();
|
||
this.pageParams.pageNo = 1;
|
||
this.getData();
|
||
},
|
||
|
||
// 分页导航
|
||
handleSizeChange(val) {
|
||
// this.$set(this.pageParams, 'pageSize', val);
|
||
this.pageParams.pageSize = val;
|
||
this.getData();
|
||
},
|
||
handlePageChange(val) {
|
||
// this.$set(this.pageParams, 'pageNo', val);
|
||
this.pageParams.pageNo = val;
|
||
this.getData();
|
||
},
|
||
headerCopy(column, e) {
|
||
this.$copy(column.label);
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scope>
|
||
.exportBtn {
|
||
margin-bottom: 20px;
|
||
}
|
||
.total {
|
||
font-size: 18px;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
}
|
||
.search-line {
|
||
width: 38%;
|
||
}
|
||
.title{
|
||
color: red;
|
||
font-size: 16px;
|
||
margin-bottom: 18px;
|
||
margin-left:40px;
|
||
}
|
||
</style>
|