channel_manage/src/views/distribution/statistics/index.vue

<!--
 * @Descripttion: 业绩统计
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-09 16:08:16
 * @LastEditors: zzx
 * @LastEditTime: 2025-02-19 16:08:16
-->
<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="hover">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float: right" type="primary" @click="handleSearchList()" size="small">
                    查询搜索
                </el-button>
                <el-button style="float: right; margin-right: 15px" @click="handleResetSearch()" size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="分销员姓名：">
                        <el-input v-model="listQuery.userName" class="input-width" placeholder="请输入用户名称"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="分销员手机号：">
                        <el-input v-model="listQuery.phone" class="input-width" placeholder="请输入手机号码"
                            clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="hover">
            <div class="title">
                <div class="titleContent">
                    <i class="el-icon-tickets"></i>
                    <span>数据列表</span>
                    <span class="tips">提现说明:限每月10号-15号提交提现申请，且只能提交一次</span>
                </div>
                <el-button class="ml10" type="info" size="small" :loading="downloadLoading" :disabled="exportDisabled" icon="el-icon-printer"
                    @click="exportAllExcel">导出</el-button>
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable" :data="list" style="width: 100%" v-loading="listLoading" border>
                <el-table-column label="上级分销员手机号" align="center" prop="superiorsPhone">
                    <template slot-scope="scope">
                        {{ scope.row.superiorsPhone || '无上级' }}
                    </template>
                </el-table-column>
                <el-table-column label="分销员层级" align="center" prop="">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type==2" type="success">一级</el-tag>
                        <el-tag v-if="scope.row.type==3" type="warning">二级</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="分销员姓名" align="center" prop="">
                    <template slot-scope="scope">
                        <span>{{ scope.row.userName || '--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="分销员手机号" align="center" prop="phone"></el-table-column>
                <!-- <el-table-column label="用户购券金额/元" align="center" prop="userTopAllMoney"></el-table-column> -->
                <!-- <el-table-column label="待清算金额/元" align="center" prop="unconsumedMoney"></el-table-column> -->
                <!-- <el-table-column label="用户退款金额/元" align="center" prop="userRefundAllMoney"></el-table-column> -->
                <el-table-column label="用户消费金额/元" align="center" prop="userConsumeAllMoney"></el-table-column>
                <el-table-column label="未提现佣金/元" align="center" prop="unWithdrawMoney"></el-table-column>
                <el-table-column label="待结算佣金/元" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.unSettleAccountMoney || '0' }}
                    </template>
                </el-table-column>
                <el-table-column label="已结算佣金/元" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.settleAccountMoney || '0' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="isAdmin != 0" size="mini" type="warning" plain
                            @click="withdrawApplyfor(scope.row)">
                            提现申请
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="提现申请" :visible.sync="forbiddenDialogVisible" width="40%" center>
            <el-descriptions border>
                <el-descriptions-item label="分销员姓名">{{ dialogQuery.userName }}</el-descriptions-item>
                <el-descriptions-item label="分销员手机号">{{ dialogQuery.phone }}</el-descriptions-item>
                <el-descriptions-item label="本次提现订单数/笔">{{ dialogQuery.orderCount || '--' }}</el-descriptions-item>
                <el-descriptions-item label="本次提现金额/元">{{ dialogQuery.unWithdrawMoney }}</el-descriptions-item>
            </el-descriptions>
            <div style="margin-top: 10px;font-size: 14px;color: #F4B01D ;">说明:提现的订单为今天( {{ new
                Date().toLocaleDateString() }}
                )之前</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="forbiddenDialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="confirmRequest" :loading="requestLoading" size="small">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { performanceList, withdrawRequest } from "@/api/distribution";
import { formatDate } from "@/utils/date";
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    userName: null,
    phone: null,
    startTime: '',
    endTime: ''
};
export default {
    name: "statistics",
    data() {
        return {
            exportDisabled: false,
            isAdmin: null,
            downloadLoading: false,
            requestLoading: false,
            date: "",
            listQuery: Object.assign({}, defaultListQuery),
            list: null,
            total: null,
            listLoading: false,
            forbiddenDialogVisible: false,
            dialogQuery: {}
        };
    },
    watch: {
        date(val) {
            if (val) {
                this.listQuery.startTime = Date.parse(val[0]);
                this.listQuery.endTime = Date.parse(val[1]);
            } else {
                this.listQuery.startTime = "";
                this.listQuery.endTime = "";
            }
        },
    },
    created() {
        this.isAdmin = localStorage.getItem("isAdmin");
        this.getList();
    },
    filters: {
        formatDateTime(time) {
            if (time == null || time === "") {
                return "N/A";
            }
            let date = new Date(time);
            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        },
    },
    methods: {
        // 跳转至记录列表
        // pushRecords(row) {
        //     this.$router.push({
        //         path: "/distribution/records",
        //         query: {
        //             adminUserId: row.adminUserId,
        //         },
        //     });
        // },
        // 导出
        exportAllExcel() {
            this.downloadLoading = true
            const allData = [];
            let query = JSON.parse(JSON.stringify(this.listQuery))
            query.pageSize = this.total
            query.page = 0
            performanceList(query).then(res => {
                this.downloadLoading = false
                if (res.code == 200) {
                    allData.push(...res.data.list);
                    this.exportExcel(allData);
                }
            });
        },

        // 导出数据处理
        exportExcel(r) {
            const data = r.map((item) => {
                return {
                    "上级分销员手机号": item.superiorsPhone || '无上级',
                    "分销员层级": item.type == 2 ? '一级' : '二级',
                    "分销员姓名": item.userName|| '--',
                    "分销员手机号": item.phone,
                    "用户消费金额/元": item.userConsumeAllMoney,
                    "未提现佣金/元": item.unWithdrawMoney,
                    "待结算佣金/元": item.unSettleAccountMoney,
                    "已结算佣金/元": item.settleAccountMoney,
                }
            })
            const worksheet = XLSX.utils.json_to_sheet(data);
            const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
            const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
            FileSaver.saveAs(blob, '分销统计表.xlsx');
        },

        // 结算申请
        withdrawApplyfor(row) {
            this.forbiddenDialogVisible = true;
            this.dialogQuery = row;
        },

        // 确认
        confirmRequest() {
            this.requestLoading = true;
            setTimeout(() => {
                this.requestLoading = false;

            },1000)
            withdrawRequest({ adminUserId: this.dialogQuery.adminUserId }).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.forbiddenDialogVisible = false;
                    this.getList();
                }
            })
        },

        handleResetSearch() {
            this.listQuery = Object.assign({}, defaultListQuery);
        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            performanceList(this.listQuery).then((response) => {
                this.listLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
                if(this.list.length <= 0){
                    this.exportDisabled = true;
                }else{
                    this.exportDisabled = false;
                }
            });
        },
    },
};
</script>
<style scoped lang="scss">
.title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .titleContent {
        .tips {
            font-size: 13px;
            color: #ff0000;
            margin-left: 20px;
        }
    }
}

.pushRecords {
    color: #409EFF;
    cursor: pointer;
}
</style>