Files
peko-admin-web/src/views/ssGuild/LuckyNumberSubmissionRecord.vue

235 lines
7.3 KiB
Vue

<template>
<div class="box">
<div class="inquire">
<span>分区</span>
<partition-select
v-model:partition-id="formData.partitionId"
@update:partitionId="changeLevel"
/>
</div>
<div class="inquire">
<div class="block">
<span class="demonstration">日期</span>
<el-date-picker
v-model="dateTime"
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
</div>
<el-button class="primary" type="primary" @click="getData()"
>查询</el-button
>
<!-- 表格数据 -->
<el-table
v-loading="tableData.loadingOuter"
:data="tableData.dataOuter"
ref="multipleTable"
@selection-change="handleSelectionChange"
border
style="width: 100%; margin-top: 25px"
>
<el-table-column prop="date" align="center" label="日期" />
<el-table-column prop="partitionDesc" align="center" label="分区" />
<el-table-column prop="erbanNo" align="center" label="平台号" />
<el-table-column prop="nick" align="center" label="用户昵称" />
<el-table-column prop="input" align="center" label="提交记录">
<template v-slot="scope">
{{ scope.row.numberList }}
</template>
</el-table-column>
<el-table-column prop="input" align="center" label="花费金币" />
<el-table-column prop="luckyNumber" align="center" label="Moli当期数字" />
<el-table-column prop="jackpot" align="center" label="奖池累计金币" />
<el-table-column prop="luckyPlayerNumber" align="center" label="瓜分记录">
<template v-slot="scope">
<el-button @click="editFun(scope.row)" type="text" size="small">
{{ scope.row.luckyPlayerNumber }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
style="margin-top: 10px"
class="paginationClass"
:current-page="formData.pageNo"
:page-size="formData.pageSize"
:page-sizes="[10, 20, 50, 100, 200]"
layout="sizes, prev, pager, next"
:total="tableData.totalOuter"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<!-- 详情 -->
<el-dialog v-model="detailsDialog" title="幸运数字瓜分记录" width="70%">
<!-- 内表格 -->
<el-table v-loading="tableData.loadingInner" :data="tableData.dataInner" border
style="width: 100%; margin-top: 25px">
<el-table-column prop="date" align="center" label="日期" />
<el-table-column prop="partitionDesc" align="center" label="分区" />
<el-table-column prop="erbanNo" align="center" label="平台号" />
<el-table-column prop="nick" align="center" label="用户昵称" />
<el-table-column prop="input" align="center" label="提交记录">
<template v-slot="scope">
{{ scope.row.numberList }}
</template>
</el-table-column>
<el-table-column prop="input" align="center" label="花费金币" />
<el-table-column prop="luckyNumber" align="center" label="Moli当期数字" />
<el-table-column prop="jackpot" align="center" label="奖池累计金币" />
<el-table-column prop="output" align="center" label="瓜分金币" />
</el-table>
<el-pagination style="margin-top: 10px" class="paginationClass" :current-page="dialogPagination.pageNo"
:page-size="dialogPagination.pageSize" :page-sizes="[10, 20, 50, 100, 200]"
layout="sizes, prev, pager, next" :total="tableData.totalInner" @size-change="detailhandleSizeChange"
@current-change="detailhandleCurrentChange" />
<!-- 操作 -->
<template #footer>
<span class="dialog-footer">
<el-button type="primary" class="primary" @click="detailsDialog = false;detailPageType = 0">关闭</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { ref, onMounted, reactive } from "vue";
import PartitionSelect from "@/views/common/partitionSelect.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { dateFormat } from "@/utils/system-helper";
import { getluckyNumberList } from "@/api/SsGuild/LuckyNumber";
export default {
name: "LuckyNumberSubmissionRecord",
components: {
PartitionSelect,
},
setup() {
const formData = reactive({
partitionId: undefined,
pageNo: 1,
pageSize: 10,
startTime: "",
endTime: "",
});
const dateTime = ref([]);
const tableData = reactive({
dataOuter: [],
dataInner: [],
loadingOuter: false,
loadingInner: false,
totalOuter: 0,
totalInner: 0,
});
const dialogPagination = reactive({
pageNo: 1,
pageSize: 10,
date:'',
partitionId: undefined,
})
const detailsDialog = ref(false);
const getData = () => {
tableData.loadingOuter = true;
let time = dateTime.value;
if (time && time.length > 0) {
formData.startTime = dateFormat(time[0], "yyyy-MM-dd");
formData.endTime = dateFormat(time[1], "yyyy-MM-dd");
} else {
formData.startTime = "";
formData.endTime = "";
}
getluckyNumberList(formData).then((res) => {
if (res.code == 200) {
tableData.dataOuter = res.data.rows;
tableData.totalOuter = res.data.total;
tableData.loadingOuter = false;
} else {
tableData.loadingOuter = false;
ElMessage.error(res.message);
}
});
};
const editFun = (row) => {
tableData.loadingInner = true;
dialogPagination.date = row.date;
dialogPagination.partitionId = formData.partitionId;
getluckyNumberList(dialogPagination).then((res) => {
if (res.code == 200) {
tableData.dataInner = res.data.rows;
tableData.totalInner = res.data.total;
tableData.loadingInner = false;
detailsDialog.value = true;
} else {
tableData.loadingInner = false;
ElMessage.error(res.message);
}
});
};
const handleSizeChange = (val) => {
formData.pageSize = val;
getData();
};
const handleCurrentChange = (val) => {
formData.pageNo = val;
getData();
};
const detailhandleSizeChange = (val) => {
dialogPagination.pageSize = val;
editFun();
};
const detailhandleCurrentChange = (val) => {
dialogPagination.pageNo = val;
editFun();
};
return {
formData,
dateTime,
tableData,
getData,
handleSizeChange,
handleCurrentChange,
editFun,
dialogPagination,
detailsDialog
};
},
};
</script>
<style lang="less" scoped>
.box {
padding-top: 20px;
background: #ecf0f5;
.inquire {
display: inline-block;
margin-right: 20px;
span {
margin-right: 10px;
}
.input {
width: 180px;
margin-right: 10px;
}
}
.dialogTableVisibleBut {
display: block;
margin: 30px 0 0 830px;
}
.paginationClass {
margin: 15px 0 5px 0px;
}
}
</style>