shuhi-ui/src/views/statistic/audit/index.vue

<template>
    <ele-page flex-table>
        <page-search @search="reload" v-if="historyData == '1'" />
        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false" show-summary
            :summary-method="getSummaries" :flex-table="false">
            <template #toolbar="{ row }">
                <div>
                    <el-radio-group @change="handleStatusChange" v-model="historyData">
                        <el-radio-button label="订单审核实时统计" value="0" />
                        <el-radio-button label="订单审核历史统计" value="1" />
                    </el-radio-group>
                    <el-button style="margin-left: 40px" type="success" plain
                        v-permission="'statistic:recycleOrder:export'" v-if="historyData == '1'"
                        @click="handleExportExcel(row)">
                        导出EXCEL
                    </el-button>
                </div>
            </template>
        </common-table>
    </ele-page>
</template>

<script setup>
import { ref, reactive } from 'vue';
import CommonTable from '@/components/CommonPage/CommonTable.vue';
import pageSearch from './components/page-search.vue';

defineOptions({ name: 'AuditOrder' });

const historyData = ref('0');
function handleStatusChange(val) {
    historyData.value = val;
    pageConfig.params = { historyData: val };
    pageRef.value?.reload();
}

/** 表格列配置 */
const columns = ref([
    { type: 'index', label: '#', align: 'center', width: 80 },
    { label: '审核员', prop: 'nickName', align: 'center' },
    { label: '录入审核订单', prop: 'orderNum', align: 'center' },
    { label: '录入书籍数量', prop: 'bookNum', align: 'center' },
    { label: '实际回收数量', prop: 'recycleBookNum', align: 'center' },
    { label: '品相良好', prop: 'goodNum', align: 'center' },
    { label: '品相一般', prop: 'generalNum', align: 'center' },
    { label: '品相极差', prop: 'canRefundNum', align: 'center' },
    {
        label: '不良率',
        prop: 'badRate',
        align: 'center',
        formatter: (row) => {
            const rate = Number(row.badRate) || 0;
            return rate.toFixed(2) + '%';
        }
    },
    { label: '预估金额', prop: 'expectMoney', align: 'center' },
    { label: '审核金额', prop: 'finalMoney', align: 'center' },
    { label: '审核日期', prop: 'statDate', align: 'center' }
]);

/** 页面组件实例 */
const pageRef = ref(null);

const pageConfig = reactive({
    pageUrl: '/order/ordercheck/stat/pagelist', // 默认使用实时统计接口
    params: { historyData: 0 }, // 默认查询实时数据
    exportUrl: '/order/ordercheck/stat/export',
    fileName: '审核统计',
    cacheKey: 'auditOrderTable'
});

/**
 * 自定义表格汇总计算方法
 * @param {Object} param0 - 表格数据和列信息
 * @returns {Array} - 汇总行显示的数据
 */
function getSummaries({ columns, data }) {
    const sums = [];
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计';
            return;
        }

        const values = data.map((item) => Number(item[column.property]));

        if (!values.length) {
            sums[index] = 'N/A';
            return;
        }

        switch (column.property) {
            case 'badRate': {
                // 不良率 = 品相极差总数 / 录入书籍总数
                const totalBadValues = data.map((item) =>
                    Number(item.canRefundNum || 0)
                );
                const totalNumValues = data.map((item) =>
                    Number(item.bookNum || 0)
                );

                const totalBadSum = totalBadValues.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + value;
                    } else {
                        return prev;
                    }
                }, 0);

                const totalNumSum = totalNumValues.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + value;
                    } else {
                        return prev;
                    }
                }, 0);

                if (totalNumSum > 0) {
                    sums[index] =
                        (totalBadSum / totalNumSum).toFixed(2) +
                        '%';
                } else {
                    sums[index] = '0.00%';
                }
                break;
            }
            case 'orderNum':
            case 'bookNum':
            case 'recycleBookNum':
            case 'goodNum':
            case 'generalNum':
            case 'canRefundNum': {
                // 数量类字段求和
                const sum = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + value;
                    } else {
                        return prev;
                    }
                }, 0);
                sums[index] = sum;
                break;
            }
            case 'expectMoney':
            case 'finalMoney': {
                // 金额类字段求和，保留两位小数
                const sum = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + value;
                    } else {
                        return prev;
                    }
                }, 0);
                sums[index] = sum.toFixed(2);
                break;
            }
            default:
                sums[index] = '';
        }
    });

    return sums;
}

//刷新表格
function reload(where) {
    pageRef.value?.reload(where);
}

//导出excel
function handleExportExcel() {
    pageRef.value?.exportData('审核统计');
}
</script>