311 lines
8.8 KiB
Vue
311 lines
8.8 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">
|
|
<el-select v-model="searchForm.partitionId" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in partitionArr"
|
|
:key="item.id"
|
|
:label="item.desc"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</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>
|
|
|
|
<el-form-item label-width="40px">
|
|
<el-button type="primary" @click="handSearch">搜索</el-button>
|
|
<el-button plain @click="resetSearchForm">重置搜索</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="createTime"
|
|
label="创建时间"
|
|
width="160"
|
|
>
|
|
<template v-slot="scope">
|
|
{{ convertTimestamp(scope.row.createTime) }}
|
|
</template>
|
|
</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 {
|
|
chargeAgentList,
|
|
chargeAgentSum,
|
|
listPartitionInfo,
|
|
} 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";
|
|
export default {
|
|
name: "agentSendSalary",
|
|
components: { 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: "",
|
|
},
|
|
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",
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
// this.getData();
|
|
listPartitionInfo().then((res) => {
|
|
this.partitionArr = res.data;
|
|
this.searchForm.partitionId=this.partitionArr[0].id;
|
|
});
|
|
},
|
|
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);
|
|
|
|
chargeAgentList(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",
|
|
});
|
|
}
|
|
});
|
|
chargeAgentSum(pageParams).then((res) => {
|
|
if (res.code == 200) {
|
|
this.total = res.data;
|
|
} else {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: res.message,
|
|
type: "error",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 点击搜索
|
|
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.pageSize = val;
|
|
this.getData();
|
|
},
|
|
headerCopy(column, e) {
|
|
this.$copy(column.label);
|
|
},
|
|
},
|
|
computed: {
|
|
convertTimestamp1() {
|
|
return function (time) {
|
|
let date = new Date(time);
|
|
return formatDateYMD(date);
|
|
};
|
|
},
|
|
convertTimestamp() {
|
|
return function (time) {
|
|
let date = new Date(time);
|
|
return formatDate(date);
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scope>
|
|
.exportBtn {
|
|
margin-bottom: 20px;
|
|
}
|
|
.total {
|
|
font-size: 18px;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
.search-line {
|
|
width: 38%;
|
|
}
|
|
</style>
|