Files
peko-admin-web/src/views/guildOperationManagement/officialWithdrawRecord.vue
2024-11-15 18:36:50 +08:00

641 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>