606 lines
20 KiB
Vue
606 lines
20 KiB
Vue
<template>
|
|
<div class="anchor-salary-operate">
|
|
<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="erbanNo">
|
|
<el-input v-model.trim="searchForm.erbanNo"
|
|
placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="公会ID"
|
|
prop="agencyId">
|
|
<el-input v-model.trim="searchForm.agencyId"
|
|
placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="公会长ID"
|
|
prop="agencyOwnerId">
|
|
<el-input v-model.trim="searchForm.agencyOwnerId"
|
|
placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="周期"
|
|
prop="dateCycle">
|
|
<el-select placeholder="请选择"
|
|
v-model="searchForm.dateCycle">
|
|
<el-option v-for="(item, i) in dateCycleList"
|
|
:key="i"
|
|
:label="item.startDateStr + '~' + item.endDateStr"
|
|
:value="item.dateCycle"></el-option>
|
|
</el-select>
|
|
</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>
|
|
</div>
|
|
<div class="table">
|
|
<el-table :data="tableData"
|
|
border
|
|
v-loading="tableLoading"
|
|
@header-click="headerCopy"
|
|
style="width: 100%">
|
|
<!-- <el-table-column align="center" prop="dateCycle" label="周期" width="105">
|
|
<template v-slot="scope">
|
|
{{ dateCycleType(scope.row.dateCycle) }}
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column align="center"
|
|
prop="partitionDesc"
|
|
label="分区" />
|
|
<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="agencyId"
|
|
label="公会ID">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="agencyOwnerErbanNo"
|
|
label="公会长ID">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="agencyOwnerRegionDesc"
|
|
label="公会长地区">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="diamondFlow"
|
|
label="钻石流水">
|
|
<template v-slot="scope">
|
|
{{
|
|
scope.row.diamondFlow
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="diamondToUsb"
|
|
label="钻石兑换薪资">
|
|
<template v-slot="scope">
|
|
<el-button type="text"
|
|
@click="handleOpen(1, scope.row)">
|
|
{{ scope.row.diamondToUsb + "us" }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="usbToGold"
|
|
label="薪资兑换金币">
|
|
<template v-slot="scope">
|
|
<el-button type="text"
|
|
@click="handleOpen(2, scope.row)">
|
|
{{ scope.row.usbToGold + "us" }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="usbToAgent"
|
|
label="薪资转增代理">
|
|
<template v-slot="scope">
|
|
<el-button type="text"
|
|
@click="handleOpen(3, scope.row)">
|
|
{{ scope.row.usbToAgent + "us" }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="usbToOwner"
|
|
label="薪资转增公会长">
|
|
<template v-slot="scope">
|
|
<el-button type="text"
|
|
@click="handleOpen(4, scope.row)">
|
|
{{ scope.row.usbToOwner + "us" }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="officialWithdram"
|
|
label="官方提现">
|
|
<template v-slot="scope">
|
|
<el-button type="text"
|
|
@click="handleOpen(5, scope.row)">
|
|
{{ scope.row.officialWithdram + "us" }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="platformOperationUsb"
|
|
label="官方操作">
|
|
<template v-slot="scope">
|
|
<el-button type="text"
|
|
@click="handleOpen(9, scope.row)">
|
|
{{ scope.row.platformOperationUsb + "us" }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="usb"
|
|
label="剩余薪资">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="diamond"
|
|
label="钻石余额(当前)">
|
|
<template v-slot="scope">
|
|
{{
|
|
scope.row.diamond ? scope.row.diamond.toLocaleString() : "null"
|
|
}}
|
|
</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>
|
|
|
|
<!-- 弹出框 -->
|
|
<el-dialog :title="dialogTitle"
|
|
v-model="dialogVisible"
|
|
width="60%">
|
|
<el-table :data="dialogData"
|
|
border
|
|
class="received-table"
|
|
v-loading="dialogLoading">
|
|
<el-table-column prop="createTime"
|
|
label="日期"
|
|
align="center">
|
|
<template v-slot="scope">{{
|
|
convertTimestamp(scope.row.createTime)
|
|
}}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="nick"
|
|
label="主播昵称"
|
|
align="center"></el-table-column>
|
|
<el-table-column prop="erbano"
|
|
label="主播ID"
|
|
align="center"></el-table-column>
|
|
<!-- 薪资兑换金币6 -->
|
|
<el-table-column v-if="dialogType == 6"
|
|
prop="gold"
|
|
label="兑换金币数量"
|
|
align="center">
|
|
<template v-slot="scope">
|
|
{{ scope.row.gold ? scope.row.gold.toLocaleString() : "0" }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 钻石兑换薪资1 -->
|
|
<el-table-column v-if="dialogType == 1"
|
|
prop="exDiamond"
|
|
label="兑换钻石数量"
|
|
align="center">
|
|
<template v-slot="scope">
|
|
{{
|
|
scope.row.exDiamond ? scope.row.exDiamond.toLocaleString() : "0"
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="dialogType == 1 || dialogType == 6"
|
|
prop="tradeUsb"
|
|
label="兑换薪资数"
|
|
align="center">
|
|
<template v-slot="scope">
|
|
{{ scope.row.tradeUsb + "us" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="dialogType == 1"
|
|
prop="afterDiamond"
|
|
label="钻石余额"
|
|
align="center">
|
|
<template v-slot="scope">
|
|
{{
|
|
scope.row.afterDiamond
|
|
? scope.row.afterDiamond.toLocaleString()
|
|
: "0"
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 薪资转增代理2 -->
|
|
<el-table-column v-if="dialogType == 2"
|
|
prop="receiveErbano"
|
|
label="充值代理ID"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="dialogType == 2"
|
|
prop="receiveNick"
|
|
label="充值代理名称"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="dialogType == 2"
|
|
prop="beforeUsb"
|
|
label="当前薪资"
|
|
align="center">
|
|
<template v-slot="scope">
|
|
{{ scope.row.beforeUsb + "us" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="dialogType == 2"
|
|
prop="tradeUsb"
|
|
label="转增代理"
|
|
align="center">
|
|
<template v-slot="scope">
|
|
{{ scope.row.tradeUsb + "us" }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 薪资转增公会长3 -->
|
|
<el-table-column v-if="dialogType == 3 || dialogType == 4 || dialogType == 9"
|
|
prop="receiveNick"
|
|
label="公会长昵称"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="dialogType == 3 || dialogType == 4 || dialogType == 9"
|
|
prop="receiveErbano"
|
|
label="公会长ID"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="dialogType == 3"
|
|
prop="tradeUsb"
|
|
label="转增公会长"
|
|
align="center">
|
|
<template v-slot="scope">
|
|
{{ scope.row.tradeUsb + "us" }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 官方提现4 -->
|
|
<el-table-column v-if="dialogType == 4"
|
|
prop="tradeUsb"
|
|
label="官方提现"
|
|
align="center">
|
|
<template v-slot="scope">
|
|
{{ scope.row.tradeUsb + "us" }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column v-if="dialogType == 9"
|
|
align="center"
|
|
prop="type"
|
|
label="赠送方式">
|
|
<template v-slot="scope">
|
|
{{ scope.row.type == '9'?'官方增加薪资':'官方减少薪资' }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column v-if="dialogType == 9"
|
|
align="center"
|
|
prop="tradeUsb"
|
|
label="操作数量">
|
|
<template v-slot="scope">
|
|
{{ scope.row.tradeUsb + "us" }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column v-if="dialogType == 9"
|
|
align="center"
|
|
prop="remark"
|
|
label="备注">
|
|
</el-table-column>
|
|
|
|
<el-table-column align="center"
|
|
prop="afterUsb"
|
|
label="剩余薪资">
|
|
<template v-slot="scope">
|
|
{{ scope.row.afterUsb + "us" }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<table-pagination :pageParams="pageParams1"
|
|
:pageTotal="pageTotal1"
|
|
:page-sizes="[5, 10, 20]"
|
|
@handleSizeChange="handleSizeChange1"
|
|
@handlePageChange="handlePageChange1"></table-pagination>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getDateCycleList,
|
|
getAnchorSalaryBill,
|
|
anchorSalaryBillDetail,
|
|
} from "@/api/relAgency/relAgency.js";
|
|
import TablePagination from "@/components/common/TablePagination";
|
|
import { formatDate, formatDateYMD } from "@/utils/relDate";
|
|
// @ts-ignore
|
|
import { ElMessage } from "element-plus";
|
|
import PartitionSelect from "@/views/common/partitionSelect.vue";
|
|
|
|
export default {
|
|
name: "anchorSalaryOperate",
|
|
components: { PartitionSelect, TablePagination },
|
|
data () {
|
|
return {
|
|
dateCycleList: [],
|
|
btnLoading: false, // 导出弹出框(dialog)的确认按钮
|
|
tableLoading: false, // 表格是否加载中
|
|
|
|
tableData: [], // 接口返回的表格数据
|
|
pageTotal: 0, // 接口返回的表格总条数
|
|
pageParams: {
|
|
pageNo: 1,
|
|
pageSize: 20,
|
|
},
|
|
// 搜索表单相关
|
|
searchForm: {
|
|
agencyOwnerId: null,
|
|
agencyId: null,
|
|
dateCycle: null,
|
|
erbanNo: 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",
|
|
},
|
|
],
|
|
},
|
|
dialogData: [], //弹窗表格数据
|
|
dialogVisible: false,
|
|
dialogLoading: false,
|
|
pageTotal1: 0, // 接口返回的表格总条数
|
|
pageParams1: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
},
|
|
dialogParams: {},
|
|
dialogTitle: "钻石兑换薪资",
|
|
dialogType: 1,
|
|
};
|
|
},
|
|
created () {
|
|
this.getDateCycleList();
|
|
},
|
|
methods: {
|
|
getDateCycleList () {
|
|
getDateCycleList({ month: 3 }).then((res) => {
|
|
this.dateCycleList = res.data || [];
|
|
this.searchForm.dateCycle = res.data ? res.data[0].dateCycle : undefined;
|
|
});
|
|
},
|
|
getData () {
|
|
if (this.searchForm.dateCycle == undefined) {
|
|
return;
|
|
}
|
|
|
|
this.tableLoading = true;
|
|
|
|
let { pageParams, searchForm } = this;
|
|
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);
|
|
|
|
getAnchorSalaryBill(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",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 弹窗
|
|
handleOpen (index, row) {
|
|
switch (index) {
|
|
case 1:
|
|
this.dialogTitle = "钻石兑换薪资";
|
|
this.dialogType = 1;
|
|
break;
|
|
case 3:
|
|
this.dialogTitle = "薪资转增代理";
|
|
this.dialogType = 2;
|
|
break;
|
|
case 4:
|
|
this.dialogTitle = "薪资转增公会长";
|
|
this.dialogType = 3;
|
|
break;
|
|
case 5:
|
|
this.dialogTitle = "官方提现";
|
|
this.dialogType = 4;
|
|
break;
|
|
case 2:
|
|
this.dialogTitle = "薪资兑换金币";
|
|
this.dialogType = 6;
|
|
break;
|
|
case 9:
|
|
this.dialogTitle = "官方操作";
|
|
this.dialogType = 9;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
this.dialogParams = {
|
|
salaryType: index,
|
|
dateCycle: this.searchForm.dateCycle,
|
|
uid: row.uid,
|
|
hallId: row.hallId,
|
|
};
|
|
this.pageParams1 = {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
};
|
|
console.log(this.dialogParams);
|
|
|
|
this.getDetail();
|
|
},
|
|
getDetail () {
|
|
let { pageParams1, dialogParams } = this;
|
|
pageParams1 = JSON.parse(JSON.stringify(pageParams1));
|
|
dialogParams = JSON.parse(JSON.stringify(dialogParams));
|
|
Object.keys(dialogParams).forEach((item) => {
|
|
if (
|
|
!dialogParams[item] ||
|
|
(dialogParams[item] !== undefined && dialogParams[item] === "")
|
|
) {
|
|
delete dialogParams[item];
|
|
}
|
|
});
|
|
Object.assign(pageParams1, dialogParams);
|
|
this.dialogVisible = true;
|
|
this.dialogLoading = true;
|
|
anchorSalaryBillDetail(pageParams1).then((res) => {
|
|
if (res.success === true) {
|
|
let data = res.data;
|
|
this.dialogData = data.records;
|
|
this.pageTotal1 = data.total;
|
|
}
|
|
this.dialogLoading = false;
|
|
});
|
|
},
|
|
// 点击搜索
|
|
handSearch () {
|
|
this.$refs["searchForm"].validate((valid) => {
|
|
if (valid) {
|
|
this.pageParams.pageNo = 1;
|
|
this.getData();
|
|
}
|
|
});
|
|
},
|
|
// 重置搜索表单
|
|
resetSearchForm () {
|
|
this.$refs["searchForm"].resetFields();
|
|
this.pageParams.pageNo = 1;
|
|
this.tableData = [];
|
|
this.getData();
|
|
},
|
|
// 分页导航
|
|
handleSizeChange (val) {
|
|
this.pageParams.pageSize = val;
|
|
this.getData();
|
|
},
|
|
handlePageChange (val) {
|
|
this.pageParams.pageNo = val;
|
|
this.getData();
|
|
},
|
|
// 弹窗分页导航
|
|
handleSizeChange1 (val) {
|
|
this.pageParams1.pageSize = val;
|
|
this.getDetail();
|
|
},
|
|
handlePageChange1 (val) {
|
|
this.pageParams1.pageNo = val;
|
|
this.getDetail();
|
|
},
|
|
|
|
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);
|
|
};
|
|
},
|
|
dateCycleType () {
|
|
const { dateCycleList } = this;
|
|
return function (value) {
|
|
for (let item of dateCycleList) {
|
|
if (item.dateCycle === value) {
|
|
return (
|
|
this.convertTimestamp1(item.startDate) +
|
|
"~" +
|
|
this.convertTimestamp1(item.endDate)
|
|
);
|
|
}
|
|
}
|
|
return "";
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scope>
|
|
.el-button--text {
|
|
font-size: 16px;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
.search-line {
|
|
width: 38%;
|
|
}
|
|
</style>
|