公会主播钻石收入 - 修改表格字段 , 新增薪资明细页面

This commit is contained in:
2025-08-14 11:19:12 +08:00
parent 53c42cff24
commit 6b9b090089
3 changed files with 304 additions and 1 deletions

View File

@@ -0,0 +1,35 @@
import request from '@/utils/request';
// 查询公会成员薪资明细
export const getGuildPolicyQueryMemberPage = query => {
return request({
url: '/admin/guildPolicy2/queryMemberPage',
method: 'get',
params: query
});
};
// 查询公会成员薪资明细导出
export const exportQueryMember = query => {
return request({
url: `/admin/guildPolicy2/queryMemberExport`,
method: 'get',
params: query,
responseType: 'blob'
});
}
// 周期下拉
export const getGuildPolicyCycleDates = query => {
return request({
url: '/admin/guildPolicy2/cycleDates',
method: 'get',
params: query
});
};
// 有效天数明细
export const getGuildPolicyMicDayDetail = query => {
return request({
url: '/admin/guildPolicy2/micDayDetail',
method: 'get',
params: query
});
};

View File

@@ -0,0 +1,267 @@
<template>
<div class="box">
<div class="inquire">
<span>公会ID:</span>
<el-input v-model="formData.guildId" placeholder="" class="input" />
</div>
<div class="inquire">
<span>公会长ID:</span>
<el-input v-model="formData.ownerErbanNo" placeholder="" class="input" />
</div>
<div class="inquire">
<span>主播ID:</span>
<el-input v-model="formData.erbanNo" placeholder="" class="input" />
</div>
<div class="inquire">
<span>周期</span>
<el-select
v-model="selectedDate"
placeholder="请选择"
@change="handleDateChange"
clearable
value-key="cycleDate"
>
<el-option
v-for="item in dateCycleArr"
:key="item.cycleDate"
:label="item.intervalFormatter"
:value="item"
>
</el-option>
</el-select>
</div>
<el-button style="" type="primary" @click="getData()">查询</el-button>
<el-button style="" type="primary" @click="confirmExportExcel()"
>导出</el-button
>
<!-- 表格数据 -->
<el-table
v-loading="tableData.loading"
:data="tableData.data"
ref="multipleTable"
@selection-change="handleSelectionChange"
border
style="width: 100%; margin-top: 25px"
>
<el-table-column prop="guildId" align="center" label="公会ID" />
<el-table-column prop="guildName" align="center" label="公会昵称" />
<el-table-column prop="erbanNo" align="center" label="主播ID" />
<el-table-column prop="nick" align="center" label="主播昵称" />
<el-table-column prop="diamondNum" align="center" label="钻石收入" />
<el-table-column prop="micMinutes" align="center" label="活跃时长(分钟)" />
<el-table-column prop="micDay" align="center" label="有效天数">
<template v-slot="scope">
<el-button @click="micDayDetail(scope.row)" type="text" size="small">
{{ scope.row.micDay }}
</el-button>
</template>
</el-table-column>
<el-table-column
prop="anchorDiamondSalary"
align="center"
label="主播钻石薪资"
/>
<el-table-column
prop="anchorMicSalary"
align="center"
label="主播时长薪资"
/>
<el-table-column prop="ownerSalary" align="center" label="公会长薪资" />
</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.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<!-- 详情 -->
<el-dialog v-model="detailsDialog" title="有效天数明细" width="30%" center>
<!-- 内表格 -->
<el-table
v-loading="tableDataIn.loading"
:data="tableDataIn.data"
border
style="width: 100%; margin-top: 25px"
>
<el-table-column prop="statDate" align="center" label="日期" />
<el-table-column prop="micMinutes" align="center" label="活跃时长(分钟)" />
<el-table-column prop="day" align="center" label="是否有效" >
<template v-slot="scope">
{{ scope.row.micDay>=1?'有效':'无效' }}
</template>
</el-table-column>
</el-table>
<!-- 操作 -->
<template #footer>
<span class="dialog-footer">
<el-button
type="primary"
class="primary"
@click="detailsDialog = false"
>关闭</el-button
>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: "SalaryDetails",
};
</script>
<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
getGuildPolicyQueryMemberPage,
exportQueryMember,
getGuildPolicyCycleDates,
getGuildPolicyMicDayDetail,
} from "@/api/SalaryDetails/SalaryDetails.js";
import { formatDate } from "@/utils/relDate";
const formData = reactive({
pageNo: 1,
pageSize: 10,
erbanNo: "",
guildId: "",
ownerErbanNo: "",
endDate: "",
startDate: "",
});
const selectedDate = ref(null);
const tableData = reactive({
data: [],
total: 0,
loading: false,
});
const tableDataIn = reactive({
data: [],
loading: false,
});
const dateCycleArr = ref([]);
const detailsDialog = ref(false);
// 下拉选择
const handleDateChange = (val) => {
formData.startDate = val.startDate;
formData.endDate = val.endDate;
};
// 查询
const getData = () => {
tableData.loading = true;
getGuildPolicyQueryMemberPage(formData).then((res) => {
if (res.code == 200) {
tableData.data = res.data.rows;
tableData.total = res.data.total;
tableData.loading = false;
} else {
tableData.loading = false;
ElMessage.error(res.message);
}
});
};
// 有效天数详情
const micDayDetail = (row) => {
getGuildPolicyMicDayDetail({
guildMemberId: row.guildMemberId,
endDate: formData.endDate,
startDate: formData.startDate,
}).then((res) => {
if (res.code == 200) {
tableDataIn.data = res.data;
tableDataIn.loading = false;
detailsDialog.value = true;
} else {
tableDataIn.loading = false;
ElMessage.error(res.message);
}
});
};
// 导出
const confirmExportExcel = async () => {
// Object.assign(formData, { pageSize: 10000, pageNo: 1 });
try {
const res = await exportQueryMember(formData);
if (res) {
ElMessage({
message: "导出成功",
type: "success",
});
let time = formatDate(new Date());
let alink = document.createElement("a");
alink.download = `薪资明细${time}.xls`;
alink.style.display = "none";
const blob = new Blob([res]);
alink.href = URL.createObjectURL(blob);
document.body.appendChild(alink);
alink.click();
URL.revokeObjectURL(alink.href);
}
} catch (error) {
ElMessage({
message: error.message,
type: "error",
});
}
};
onMounted(() => {
getGuildPolicyCycleDates().then((res) => {
if (res.code == 200) {
dateCycleArr.value = res.data;
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
});
});
</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;
}
}
.selectBox {
display: flex;
height: 35px;
line-height: 35px;
margin-bottom: 20px;
}
.selectBoxImg {
height: 150px;
}
</style>

View File

@@ -53,7 +53,8 @@
<el-table-column prop="regionName" align="center" label="成员国家" /> <el-table-column prop="regionName" align="center" label="成员国家" />
<el-table-column prop="diamondNum" align="center" label="钻石流水" /> <el-table-column prop="diamondNum" align="center" label="钻石流水" />
<el-table-column prop="micRemainTime" align="center" label="开播时长" /> <el-table-column prop="micRemainTime" align="center" label="开播时长" />
<el-table-column prop="statusDesc" align="center" label="状态" /> <el-table-column prop="validDay" align="center" label="有效天数" />
<el-table-column prop="statusDesc" align="center" label="成员状态" />
</el-table> </el-table>
<!-- 分页 --> <!-- 分页 -->
<el-pagination style="margin-top: 10px" class="paginationClass" :current-page="formData.page" <el-pagination style="margin-top: 10px" class="paginationClass" :current-page="formData.page"