413 lines
11 KiB
Vue
413 lines
11 KiB
Vue
<template>
|
||
<div class="list-gold-coin-transfer">
|
||
<div class="container">
|
||
<div class="handle-box">
|
||
<el-form
|
||
ref="searchForm"
|
||
:model="searchForm"
|
||
:rules="searchRule"
|
||
label-width="120px"
|
||
:disabled="tableLoading"
|
||
>
|
||
<div class="search-line">
|
||
<el-form-item label="转赠用户平台号" prop="sendUserPlatformNo">
|
||
<el-input
|
||
v-model.number="searchForm.sendUserPlatformNo"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="接收用户平台号" prop="receiveUserPlatformNo">
|
||
<el-input
|
||
v-model.number="searchForm.receiveUserPlatformNo"
|
||
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"
|
||
value-format="yyyy/MM/dd HH:mm:ss"
|
||
></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"
|
||
value-format="yyyy/MM/dd HH:mm:ss"
|
||
></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-button
|
||
type="primary"
|
||
class="mr10"
|
||
@click="exportVisible = true"
|
||
>导出</el-button
|
||
>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
|
||
<p style="color: #00d1b2">当前汇总值：{{ totalCoins }}</p>
|
||
</div>
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
class="table"
|
||
ref="multipleTable"
|
||
header-cell-class-name="table-header"
|
||
@header-click="headerCopy"
|
||
v-loading="tableLoading"
|
||
>
|
||
<el-table-column
|
||
prop="id"
|
||
width="90"
|
||
label="ID"
|
||
align="center"
|
||
fixed="left"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="fromUserNick"
|
||
label="转赠用户昵称"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="fromUserPlatformNo"
|
||
width="120"
|
||
label="转赠用户平台号"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="toUserNick"
|
||
label="接收用户昵称"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="toUserPlatformNo"
|
||
width="120"
|
||
label="接收用户平台号"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="abbr"
|
||
label="接收用户国家"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="goldNum"
|
||
width="110"
|
||
label="金币数量"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column width="160" label="创建时间" align="center">
|
||
<template v-slot="scope">{{
|
||
convertTimestamp(scope.row.createTime)
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column width="160" label="更新时间" align="center">
|
||
<template v-slot="scope">{{
|
||
convertTimestamp(scope.row.updateTime)
|
||
}}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<table-pagination
|
||
:pageParams="pageParams"
|
||
:pageTotal="pageTotal"
|
||
@handleSizeChange="handleSizeChange"
|
||
@handlePageChange="handlePageChange"
|
||
></table-pagination>
|
||
</div>
|
||
<!-- 确认导出弹出框 -->
|
||
<el-dialog
|
||
v-model="exportVisible"
|
||
width="30%"
|
||
:before-close="handlDialogClose"
|
||
>
|
||
<!-- 使用 v-slot 指令提供 'title' 插槽的内容 -->
|
||
<template v-slot:title>
|
||
<div style="display: flex; align-items: center">提示</div>
|
||
</template>
|
||
|
||
<!-- 默认插槽的内容 -->
|
||
<div style="font-size: 16px">确定以当前筛选条件导出Excel吗？</div>
|
||
|
||
<!-- 使用 v-slot 指令提供 'footer' 插槽的内容 -->
|
||
<template v-slot:footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="exportVisible = false" :disabled="dialogDisabled"
|
||
>取 消</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
@click="confirmExport2Excel"
|
||
:loading="btnLoading"
|
||
:disabled="dialogDisabled"
|
||
>确 定</el-button
|
||
>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getGoldCoinTransferList,
|
||
getGoldCoinSumGold,
|
||
} from "@/api/relUserBelongings/relUserBelongings.js";
|
||
import { formatDate } from "@/utils/relDate.js";
|
||
import { exportExcel } from "@/utils/exportExcel.js";
|
||
import TablePagination from "@/components/common/TablePagination.vue";
|
||
export default {
|
||
name: "GoldCoinGiftingHistory",
|
||
components: { TablePagination },
|
||
data() {
|
||
return {
|
||
clickedLineId: null, // 记录被点击的某行数据的id
|
||
clickedLineText: "GIFT_IN_ROOM", // 记录红包类型
|
||
tableData: [], // 接口返回的表格数据
|
||
pageTotal: 0, // 接口返回的表格总条数
|
||
pageParams: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
},
|
||
exportVisible: false,
|
||
tableLoading: false, // 表格是否加载中
|
||
|
||
// 搜索表单相关
|
||
searchForm: {
|
||
sendUserPlatformNo: null, // 接收者平台号
|
||
receiveUserPlatformNo: null, // 发送者平台号
|
||
startTime: null,
|
||
endTime: null,
|
||
},
|
||
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",
|
||
},
|
||
],
|
||
},
|
||
|
||
dialogDisabled: false, // 是否禁用弹出框(dialog)表单元素
|
||
btnLoading: false, // 弹出框(dialog)的确认按钮
|
||
totalCoins: null, //当前金币汇总值
|
||
};
|
||
},
|
||
created() {
|
||
// this.getData();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
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);
|
||
|
||
getGoldCoinSumGold(pageParams).then((res) => {
|
||
if (res.data.success === true) {
|
||
let data = res.data.data;
|
||
this.totalCoins = data;
|
||
}
|
||
});
|
||
getGoldCoinTransferList(pageParams).then((res) => {
|
||
this.tableLoading = false;
|
||
if (res.data.success === true) {
|
||
let data = res.data.data;
|
||
this.tableData = data.list;
|
||
this.pageTotal = data.total;
|
||
}
|
||
});
|
||
},
|
||
// 点击搜索
|
||
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();
|
||
},
|
||
// 弹窗关闭前控制
|
||
handlDialogClose(done) {
|
||
const { dialogDisabled } = this;
|
||
if (dialogDisabled) return;
|
||
done();
|
||
},
|
||
// 重置表单状态
|
||
resetDialog() {
|
||
this.btnLoading = false;
|
||
this.dialogDisabled = false;
|
||
},
|
||
|
||
// 分页导航
|
||
handleSizeChange(val) {
|
||
this.$set(this.pageParams, "pageSize", val);
|
||
this.getData();
|
||
},
|
||
handlePageChange(val) {
|
||
this.$set(this.pageParams, "pageNo", val);
|
||
this.getData();
|
||
},
|
||
headerCopy(column, e) {
|
||
this.$copy(column.label);
|
||
},
|
||
|
||
// 确认导出
|
||
confirmExport2Excel() {
|
||
this.btnLoading = true;
|
||
this.dialogDisabled = 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 });
|
||
|
||
getGoldCoinTransferList(searchForm).then((res) => {
|
||
this.resetDialog();
|
||
if (res.data.success === true) {
|
||
this.exportVisible = false;
|
||
|
||
const list = res.data.data.list;
|
||
list.forEach((item) => {
|
||
item.createTime = formatDate(item.createTime);
|
||
item.updateTime = formatDate(item.updateTime);
|
||
});
|
||
const tHeader = [
|
||
"ID",
|
||
"转赠用户昵称",
|
||
"转赠用户平台号",
|
||
"接收用户昵称",
|
||
"接收用户平台号",
|
||
"接收用户国家",
|
||
"金币数量",
|
||
"创建时间",
|
||
"更新时间",
|
||
];
|
||
const filterVal = [
|
||
"id",
|
||
"fromUserNick",
|
||
"fromUserPlatformNo",
|
||
"toUserNick",
|
||
"toUserPlatformNo",
|
||
"abbr",
|
||
"goldNum",
|
||
"createTime",
|
||
"updateTime",
|
||
];
|
||
const exportName = `金币转赠历史${formatDate(new Date())}`;
|
||
|
||
exportExcel(tHeader, filterVal, list, exportName);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
computed: {
|
||
convertTimestamp() {
|
||
return function (time) {
|
||
let date = new Date(time);
|
||
return formatDate(date);
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.handle-box {
|
||
overflow: hidden;
|
||
.search-line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.el-form-item {
|
||
width: 320px;
|
||
.el-input,
|
||
.el-select {
|
||
width: 200px;
|
||
}
|
||
.el-form-item--small {
|
||
margin-bottom: 0;
|
||
}
|
||
.el-form-item {
|
||
float: left;
|
||
}
|
||
&.large {
|
||
width: 580px;
|
||
.el-form-item {
|
||
width: 200px;
|
||
}
|
||
}
|
||
&.small {
|
||
.el-form-item {
|
||
width: 90px;
|
||
.el-input {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.table-td-thumb {
|
||
display: block;
|
||
margin: auto;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
</style> |