332 lines
10 KiB
Vue
332 lines
10 KiB
Vue
<template>
|
||
<div class="box">
|
||
<!-- 时间选择器 -->
|
||
<div class="inquire">
|
||
<span>周期</span>
|
||
<el-select v-model="inquire.cycleDate"
|
||
placeholder="请选择">
|
||
<el-option v-for="(item,index) in dateCycleArr"
|
||
:key="index"
|
||
:label="item.startDateStr + '~' + item.endDateStr"
|
||
:value="item.dateCycle">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<!-- <div class="inquire">
|
||
<div class="block">
|
||
<span class="demonstration">日期</span>
|
||
<el-config-provider :locale="zhCn">
|
||
<el-date-picker v-model="inquire.time"
|
||
type="month"
|
||
placeholder="选择月">
|
||
</el-date-picker></el-config-provider>
|
||
</div>
|
||
</div> -->
|
||
<div class="inquire">
|
||
<div class="block">
|
||
<span class="demonstration">会长分区</span>
|
||
<el-select v-model="inquire.partitionId"
|
||
style="width: 75%"
|
||
placeholder="请选择">
|
||
<el-option v-for="item in inquire.inquireonInfos"
|
||
:key="item.id"
|
||
:label="item.desc"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 公会 -->
|
||
<div class="inquire">
|
||
<span>会长ID</span>
|
||
<el-input v-model="inquire.nick"
|
||
placeholder=""
|
||
class="input"></el-input>
|
||
</div>
|
||
<!-- 查询按钮 -->
|
||
<el-button class="primary"
|
||
type="primary"
|
||
@click="getData()">查询</el-button>
|
||
<!-- 导出 -->
|
||
<el-button class="primary"
|
||
type="primary"
|
||
@click="deriveFun()">导出</el-button>
|
||
|
||
<!-- 表格 -->
|
||
<el-table v-loading="loading"
|
||
:data="tableData"
|
||
border
|
||
style="width: 100%; margin-top: 25px">
|
||
<el-table-column prop="ownerErbanNo"
|
||
align="center"
|
||
label="会长ID" />
|
||
<el-table-column prop="name"
|
||
align="center"
|
||
label="公会名称" />
|
||
<el-table-column prop="ownerPartitionName"
|
||
align="center"
|
||
label="会长分区" />
|
||
<el-table-column prop="enable"
|
||
align="center"
|
||
label="是否有效状态">
|
||
<template v-slot="scope">{{ scope.row.enable? '是': '否' }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="memberNum"
|
||
align="center"
|
||
label="成员数" />
|
||
<el-table-column prop="goldIncome"
|
||
align="center"
|
||
label="月金币收入(流水)" />
|
||
<el-table-column prop="goldWage"
|
||
align="center"
|
||
label="金币工资" />
|
||
<el-table-column prop="agentWage"
|
||
align="center"
|
||
label="代理工资" />
|
||
<el-table-column prop="diamondWage"
|
||
align="center"
|
||
label="钻石工资" />
|
||
<el-table-column prop="diamondRemain"
|
||
align="center"
|
||
label="当前钻石余额" />
|
||
<el-table-column align="center"
|
||
label="操作"
|
||
width="260">
|
||
<template v-slot="scope">
|
||
<el-button @click="ediClick(scope.row)"
|
||
class="primary"
|
||
type="primary"
|
||
size="default">查看详情</el-button>
|
||
<el-button @click="deriveFun2(scope.row)"
|
||
class="primary"
|
||
type="primary"
|
||
size="default">导出</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 内嵌单个工会详情 -->
|
||
<el-dialog :title="detailsTitle"
|
||
v-model="detailsDialog">
|
||
<el-table v-loading="loading"
|
||
:data="tableDataDetails"
|
||
border
|
||
style="width: 100%; margin-top: 25px">
|
||
<el-table-column prop="erbanNo"
|
||
align="center"
|
||
label="用户平台ID">
|
||
<template v-slot="scope">
|
||
{{
|
||
scope.row.erbanNo == scope.row.familyOwnerErbanNo
|
||
? scope.row.erbanNo + "(会长)"
|
||
: scope.row.enable
|
||
? scope.row.erbanNo
|
||
: scope.row.erbanNo + "离开"
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="nick"
|
||
align="center"
|
||
label="用户昵称" />
|
||
<el-table-column prop="micRemainTime"
|
||
align="center"
|
||
label="本月直播时长" />
|
||
<el-table-column prop="micVaildDays"
|
||
align="center"
|
||
label="本月有效天数" />
|
||
<el-table-column prop="goldIncome"
|
||
align="center"
|
||
label="月金币收入（流水）" />
|
||
<el-table-column prop="goldWage"
|
||
align="center"
|
||
label="金币工资" />
|
||
<el-table-column prop="agentWage"
|
||
align="center"
|
||
label="代理工资" />
|
||
<el-table-column prop="diamondWage"
|
||
align="center"
|
||
label="钻石工资" />
|
||
<el-table-column prop="diamondRemain"
|
||
align="center"
|
||
label="当前钻石余额" />
|
||
</el-table>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="detailsDialog = false">关闭</el-button>
|
||
<el-button type="primary"
|
||
@click="detailsClickOut()">导出</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 分页 -->
|
||
<el-pagination style="margin-top: 10px"
|
||
class="paginationClass"
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
|
||
layout="sizes, prev, pager, next"
|
||
:total="total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange" />
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
|
||
import {
|
||
statPageFamily,
|
||
listFamilyMember,
|
||
statExportFamilyMember,
|
||
statExportFamily,
|
||
} from "@/api/nobleman/nobleman";
|
||
import { getWageStatListDateCycle } from "@/api/relAgency/relAgency.js";
|
||
// @ts-ignore
|
||
import { ElMessage } from "element-plus";
|
||
export default {
|
||
name: "WagesCount",
|
||
data () {
|
||
return {
|
||
zhCn,
|
||
loading: false,
|
||
//查询所需条件对象
|
||
inquire: {
|
||
nick: "",
|
||
partitionId: 1,
|
||
inquireonInfos: [
|
||
{ desc: "英语区", id: 1 },
|
||
{ desc: "阿拉伯区", id: 2 },
|
||
{ desc: "土耳其区", id: 8 },
|
||
],
|
||
cycleDate: '',
|
||
},
|
||
// 表格
|
||
tableData: [],
|
||
// 分页
|
||
total: 10, //总页数
|
||
currentPage: 1, //页码
|
||
pageSize: 10, //条数
|
||
// 内嵌单个公会详情
|
||
detailsDialog: false,
|
||
detailsTitle: "工会昵称 时间段 结算明细",
|
||
tableDataDetails: [],
|
||
detailsClickOutObj: {},
|
||
// 内嵌单个公会详情2
|
||
detailsDialog2: false,
|
||
detailsTitle2: "工会昵称 用户昵称（ID：0） 时间段 结算明细",
|
||
tableDataDetails2: [],
|
||
detailsClickOutObj2: {},
|
||
dateCycleArr: [],
|
||
};
|
||
},
|
||
created () {
|
||
getWageStatListDateCycle({ month: 4 }).then((res) => {
|
||
if (res.code == 200) {
|
||
this.dateCycleArr = res.data || [];
|
||
this.inquire.cycleDate = this.dateCycleArr[0].dateCycle;
|
||
this.getData();
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
// 查询接口
|
||
getData () {
|
||
// this.loading = true;
|
||
// let time = this.inquire.time;
|
||
// if (time) {
|
||
// time = dateFormat(this.inquire.time, "yyyy-MM");
|
||
// }
|
||
if (this.inquire.cycleDate == "") {
|
||
ElMessage.error("请选择周期");
|
||
return;
|
||
}
|
||
statPageFamily({
|
||
erbanNo: this.inquire.nick,
|
||
partitionId: this.inquire.partitionId,
|
||
cycleDate: this.inquire.cycleDate,
|
||
pageNum: this.currentPage,
|
||
pageSize: this.pageSize,
|
||
}).then((res) => {
|
||
this.total = res.data.total;
|
||
this.tableData = res.data.rows;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
// 导出总外列表
|
||
deriveFun (val) {
|
||
statExportFamily({
|
||
erbanNo: this.inquire.nick,
|
||
cycleDate: this.inquire.cycleDate,
|
||
partitionId: this.inquire.partitionId,
|
||
}).then((res) => { });
|
||
},
|
||
// 导出列表最外层
|
||
deriveFun2 (val) {
|
||
statExportFamilyMember({
|
||
familyId: val.id,
|
||
cycleDate: this.inquire.cycleDate,
|
||
});
|
||
this.detailsDialog = false;
|
||
},
|
||
// 1层查看详情按钮
|
||
ediClick (val) {
|
||
console.log(val);
|
||
var than = this;
|
||
this.detailsClickOutObj = val;
|
||
than.detailsTitle = `[${val.name}] [${this.inquire.cycleDate}]结算明细`;
|
||
listFamilyMember({
|
||
familyId: val.id,
|
||
cycleDate: this.inquire.cycleDate,
|
||
}).then((res) => {
|
||
this.tableDataDetails = res.data;
|
||
this.detailsDialog = true;
|
||
});
|
||
},
|
||
// 导出最外层数据按钮
|
||
detailsClickOut () {
|
||
statExportFamilyMember({
|
||
familyId: this.detailsClickOutObj.id,
|
||
cycleDate: this.inquire.cycleDate,
|
||
});
|
||
this.detailsDialog = false;
|
||
},
|
||
// 分页导航
|
||
handleSizeChange () {
|
||
this.getData();
|
||
},
|
||
handleCurrentChange () {
|
||
this.getData();
|
||
},
|
||
},
|
||
};
|
||
</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>
|