641 lines
20 KiB
Vue
641 lines
20 KiB
Vue
<template>
|
||
<div class="official-withdraw-record">
|
||
<div class="container">
|
||
<div class="region-box">
|
||
<el-radio-group v-model="region">
|
||
<el-radio
|
||
v-for="(item, index) in userAreaRegion"
|
||
:key="index"
|
||
:label="item.value"
|
||
>{{ item.name }}</el-radio
|
||
>
|
||
</el-radio-group>
|
||
</div>
|
||
<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="MoliStar ID" prop="agencyOwnerErbanNo">
|
||
<el-input
|
||
v-model.trim="searchForm.agencyOwnerErbanNo"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="提现状态" prop="status">
|
||
<el-select v-model="searchForm.status">
|
||
<el-option label="审核中" value="0"></el-option>
|
||
<el-option label="审核通过" value="1"></el-option>
|
||
<el-option label="未通过" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="提现账户" prop="accountType">
|
||
<el-select v-model="searchForm.accountType">
|
||
<el-option label="Vodafone" value="VODAFONE"></el-option>
|
||
<el-option label="Payonner" value="PAYONNER"></el-option>
|
||
<el-option label="USD" value="USDT"></el-option>
|
||
<el-option label="Bank" value="BANK"></el-option>
|
||
<el-option label="Other" value="OTHER"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="国家" prop="country">
|
||
<el-select v-model="searchForm.country">
|
||
<el-option
|
||
v-for="(item, index) in adminCountryArr"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</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 type="primary" plain @click="resetSearchForm"
|
||
>重置搜索</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
class="exportBtn"
|
||
@click="confirmExport2Excel"
|
||
>导出</el-button
|
||
>
|
||
<el-button @click="handleChangeAll()" type="info" plain
|
||
>批量发放</el-button
|
||
>
|
||
<el-button
|
||
@click="
|
||
centerDialogVisible = true;
|
||
centerDialogVisibleType = 1;
|
||
"
|
||
type="info"
|
||
plain
|
||
>批量驳回</el-button
|
||
>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<div class="table">
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
v-loading="tableLoading"
|
||
@header-click="headerCopy"
|
||
@selection-change="handleSelectionChange"
|
||
style="width: 100%; overflow-x: auto"
|
||
>
|
||
<el-table-column type="selection"> </el-table-column>
|
||
<el-table-column align="center" prop="erbanNo" label="MoliStar ID" />
|
||
<el-table-column align="center" prop="partitionDesc" label="分区" />
|
||
<el-table-column align="center" prop="nick" label="昵称" />
|
||
<el-table-column align="center" prop="accountCountry" label="国家" />
|
||
<el-table-column
|
||
align="center"
|
||
prop="blocked"
|
||
label="用户当前账户状态"
|
||
>
|
||
<template v-slot="scope">
|
||
{{ scope.row.blocked ? "封禁" : "正常" }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="status" label="申请状态">
|
||
<template v-slot="scope">
|
||
{{
|
||
scope.row.status == 0
|
||
? "审核中"
|
||
: scope.row.status == 1
|
||
? "通过"
|
||
: "未通过"
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="createTime" label="申请时间" />
|
||
<el-table-column
|
||
align="center"
|
||
prop="accountType"
|
||
label="提现类型 "
|
||
/>
|
||
<el-table-column
|
||
align="center"
|
||
prop="guildUsdNum"
|
||
label="提现薪资US"
|
||
/>
|
||
<el-table-column align="center" prop="currency" label="发放币种" />
|
||
<el-table-column align="center" prop="currencyNum" label="发放金额" />
|
||
<el-table-column align="center" prop="withdrawRate" label="手续费" />
|
||
<el-table-column align="center" prop="withdrawNum" label="核销薪资" />
|
||
<el-table-column align="center" prop="remark" label="驳回理由">
|
||
<template v-slot="scope">
|
||
{{ scope.row.remark ? scope.row.remark : "/" }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="hallSalary"
|
||
label="操作"
|
||
width="150"
|
||
>
|
||
<template v-slot="scope">
|
||
<div v-if="scope.row.status == 0">
|
||
<el-button
|
||
@click="handleChange(scope.row)"
|
||
type="text"
|
||
size="mini"
|
||
>
|
||
发放
|
||
</el-button>
|
||
<el-button
|
||
@click="
|
||
centerDialogVisible = true;
|
||
centerDialogVisibleType = 2;
|
||
centerDialogVisibleID = scope.row.id;
|
||
"
|
||
type="text"
|
||
size="mini"
|
||
>
|
||
驳回
|
||
</el-button>
|
||
</div>
|
||
<div>
|
||
<el-button
|
||
@click="accountInfosFun(scope.row)"
|
||
type="text"
|
||
size="mini"
|
||
>
|
||
查看详情
|
||
</el-button>
|
||
</div>
|
||
</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>
|
||
<!-- 驳回弹窗 -->
|
||
<el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
|
||
<span> 请选择驳回理由:</span>
|
||
<div class="boxs">
|
||
<el-radio class="radios" v-model="radio" label="用户消息提供不足"
|
||
>用户消息提供不足</el-radio
|
||
>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="centerDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="dialogClick()"> 确认 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 提现详情弹窗 -->
|
||
<el-dialog v-model="centerDialogVisible2" title="提现详情">
|
||
<div class="boxs2">
|
||
<div>申请提现时间:{{ accountDetails.createTime }}</div>
|
||
<div>申请ID:{{ accountDetails.erbanNo }}</div>
|
||
<div>country:{{ accountDetails.country }}</div>
|
||
<div>payeeAccount:{{ accountDetails.bank_account }}</div>
|
||
<div>Bank Name:{{ accountDetails.bank_name }}</div>
|
||
<div>SWIFT Code:{{ accountDetails.swift_code }}</div>
|
||
<div>payeeName::{{ accountDetails.full_name }}</div>
|
||
<div>address:{{ accountDetails.address }}</div>
|
||
<div>提现薪资US:{{ accountDetails.guildUsdNum }}</div>
|
||
<div>
|
||
发放金额:{{ accountDetails.currency }}
|
||
{{ accountDetails.currencyNum }}
|
||
</div>
|
||
<div>提现手续费:{{ accountDetails.withdrawRate }}</div>
|
||
<div>核销薪资:{{ accountDetails.withdrawNum }}</div>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="centerDialogVisible2 = false">确认</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
agencyWithdrawList,
|
||
agencyWithdrawExamineExport,
|
||
agencyWithdrawSet,
|
||
agencyWithdrawBatchSet,
|
||
batchReject,
|
||
adminCountry,
|
||
listPartitionInfo,
|
||
} from "@/api/relAgency/relAgency.js";
|
||
import TablePagination from "@/components/common/TablePagination";
|
||
import { formatDate, formatDateYMD } from "@/utils/relDate";
|
||
import { dateFormat } from "@/utils/system-helper";
|
||
import { ElMessage } from "element-plus";
|
||
import { ElMessageBox } from "element-plus"; // 正确引入 ElM
|
||
// 混入
|
||
// import Mixin from '../../mixin/mixRegion.js';
|
||
|
||
export default {
|
||
name: "officialWithdrawRecord",
|
||
// mixins: [Mixin],
|
||
components: { TablePagination },
|
||
data() {
|
||
return {
|
||
dateCycleList: [],
|
||
btnLoading: false, // 导出弹出框(dialog)的确认按钮
|
||
tableLoading: false, // 表格是否加载中
|
||
|
||
tableData: [], // 接口 返回的表格数据
|
||
pageTotal: 0, // 接口返回的表格总条数
|
||
pageParams: {
|
||
pageNo: 1,
|
||
pageSize: 20,
|
||
},
|
||
centerDialogVisible: false, //驳回弹窗
|
||
centerDialogVisibleType: null, //驳回弹窗
|
||
centerDialogVisibleID: null, //驳回弹窗
|
||
centerDialogVisible2: false, //操作弹窗
|
||
radio: "用户消息提供不足", //驳回原因
|
||
// 搜索表单相关
|
||
searchForm: {
|
||
agencyOwnerErbanNo: null,
|
||
status: null,
|
||
startTime: null,
|
||
endTime: null,
|
||
adminCountry: null,
|
||
country: null,
|
||
partitionId: null,
|
||
},
|
||
partitionArr: [],
|
||
adminCountryArr: [],
|
||
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",
|
||
},
|
||
],
|
||
},
|
||
idStr: [], //批量删除ID
|
||
// 查看薪资弹窗数据存储
|
||
accountDetails: {
|
||
createTime: null,
|
||
erbanNo: null,
|
||
country: null,
|
||
bank_account: null,
|
||
bank_name: null,
|
||
swift_code: null,
|
||
full_name: null,
|
||
address: null,
|
||
guildUsdNum: null,
|
||
currency: null,
|
||
currencyNum: null,
|
||
withdrawRate: null,
|
||
withdrawNum: null,
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
adminCountry().then((res) => {
|
||
this.adminCountryArr = res.data;
|
||
});
|
||
listPartitionInfo().then((res) => {
|
||
this.partitionArr = res.data;
|
||
this.searchForm.partitionId = this.partitionArr[0].id;
|
||
this.getData();
|
||
});
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.tableLoading = true;
|
||
|
||
let { pageParams, searchForm } = this;
|
||
searchForm.startTime = searchForm.startTime
|
||
? dateFormat(searchForm.startTime, "yyyy-MM-dd hh:mm:ss")
|
||
: "";
|
||
searchForm.endTime = searchForm.endTime
|
||
? dateFormat(searchForm.endTime, "yyyy-MM-dd hh:mm:ss")
|
||
: "";
|
||
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);
|
||
console.log(searchForm);
|
||
agencyWithdrawList(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",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
handleSelectionChange(rows) {
|
||
this.idStr = null;
|
||
this.idStr = rows.map((obj) => obj.id).join(",");
|
||
},
|
||
handleChangeAll() {
|
||
ElMessageBox.confirm("确定要结算吗", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
agencyWithdrawBatchSet({ ids: this.idStr }).then((res) => {
|
||
if (res.success === true) {
|
||
ElMessage({
|
||
type: "success",
|
||
message: "操作成功!",
|
||
});
|
||
this.getData();
|
||
this.idStr = null;
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {
|
||
ElMessage({
|
||
type: "warning ",
|
||
message: "已取消",
|
||
});
|
||
});
|
||
},
|
||
// 查看详情处理函数
|
||
accountInfosFun(res) {
|
||
var obj = JSON.parse(res.accountInfos);
|
||
console.log(obj);
|
||
this.accountDetails.createTime = res.createTime ? res.createTime : "-";
|
||
this.accountDetails.erbanNo = res.erbanNo ? res.erbanNo : "-";
|
||
this.accountDetails.country = obj.country ? obj.country : "-";
|
||
this.accountDetails.bank_account = obj.bank_account
|
||
? obj.bank_account
|
||
: "-";
|
||
this.accountDetails.bank_name = obj.bank_name ? obj.bank_name : "-";
|
||
this.accountDetails.swift_code = obj.swift_code ? obj.swift_code : "-";
|
||
this.accountDetails.full_name = obj.full_name ? obj.full_name : "-";
|
||
this.accountDetails.address = obj.address ? obj.address : "-";
|
||
this.accountDetails.guildUsdNum = res.guildUsdNum ? res.guildUsdNum : "-";
|
||
this.accountDetails.currency = res.currency ? res.currency : "-";
|
||
this.accountDetails.currencyNum = res.currencyNum ? res.currencyNum : "-";
|
||
this.accountDetails.withdrawRate = res.withdrawRate
|
||
? res.withdrawRate
|
||
: "-";
|
||
this.accountDetails.withdrawNum = res.withdrawNum ? res.withdrawNum : "-";
|
||
this.centerDialogVisible2 = true;
|
||
},
|
||
// 批量驳回
|
||
dialogClick() {
|
||
batchReject({
|
||
ids:
|
||
this.centerDialogVisibleType == 1
|
||
? this.idStr
|
||
: this.centerDialogVisibleID,
|
||
remark: this.radio,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
ElMessage({
|
||
type: "success",
|
||
message: "操作成功!",
|
||
});
|
||
this.getData();
|
||
this.centerDialogVisible = false;
|
||
this.idStr = null;
|
||
} else {
|
||
ElMessage({
|
||
type: "error",
|
||
message: res.message,
|
||
});
|
||
}
|
||
})
|
||
.catch(() => {
|
||
ElMessage({
|
||
type: "warning ",
|
||
message: "已取消",
|
||
});
|
||
});
|
||
},
|
||
handleChange(row) {
|
||
ElMessageBox.confirm("确定要结算吗", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
agencyWithdrawSet({ ids: row.id }).then((res) => {
|
||
if (res.success === true) {
|
||
ElMessage({
|
||
type: "success",
|
||
message: "操作成功!",
|
||
});
|
||
this.getData();
|
||
this.idStr = null;
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {
|
||
ElMessage({
|
||
type: "warning ",
|
||
message: "已取消",
|
||
});
|
||
});
|
||
},
|
||
// 点击搜索
|
||
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();
|
||
},
|
||
// 确认导出
|
||
confirmExport2Excel() {
|
||
ElMessageBox.confirm("确定以当前筛选条件导出Excel吗?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
this.btnLoading = true;
|
||
let { searchForm } = this;
|
||
searchForm = JSON.parse(JSON.stringify(searchForm));
|
||
Object.keys(searchForm).forEach((item) => {
|
||
if (
|
||
!searchForm[item] ||
|
||
(searchForm[item] !== undefined && searchForm[item] === "")
|
||
) {
|
||
delete searchForm[item];
|
||
}
|
||
});
|
||
Object.assign(searchForm, { pageSize: 10000, pageNo: 1 });
|
||
|
||
agencyWithdrawExamineExport(searchForm)
|
||
.then((res) => {
|
||
if (res) {
|
||
this.exportVisible = false;
|
||
this.btnLoading = false;
|
||
let time = formatDate(new Date());
|
||
let alink = document.createElement("a");
|
||
alink.download = `官方提现记录${time}.xls`;
|
||
alink.style.display = "none";
|
||
const blob = new Blob([res.data]);
|
||
alink.href = URL.createObjectURL(blob);
|
||
document.body.appendChild(alink);
|
||
alink.click();
|
||
URL.revokeObjectURL(alink.href);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.error(err); // 打印错误信息
|
||
ElMessage.error("导出失败");
|
||
});
|
||
})
|
||
.catch(() => {
|
||
ElMessage({
|
||
type: "info",
|
||
message: "取消",
|
||
});
|
||
});
|
||
},
|
||
// 分页导航
|
||
handleSizeChange(val) {
|
||
this.pageParams.pageSize = val;
|
||
this.getData();
|
||
},
|
||
handlePageChange(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: 0;
|
||
}
|
||
.text {
|
||
margin-left: 20px;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
}
|
||
.search-line {
|
||
width: 38%;
|
||
}
|
||
.boxs {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
word-wrap: break-word; /* 允许在单词内换行 */
|
||
overflow-wrap: break-word; /* 同上,现代浏览器推荐使用 */
|
||
white-space: normal; /* 允许换行 */
|
||
}
|
||
.radios {
|
||
display: block !important;
|
||
width: 100% !important;
|
||
word-wrap: break-word !important; /* 允许在单词内换行 */
|
||
overflow-wrap: break-word !important; /* 同上,现代浏览器推荐使用 */
|
||
white-space: normal !important; /* 允许换行 */
|
||
height: auto !important;
|
||
}
|
||
.boxs2 div {
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
}
|
||
</style>
|