应付管理页面统计
This commit is contained in:
parent
bbaccb76e8
commit
d4368b3559
@ -9,7 +9,7 @@ export const fenToYuanFormat = (_, __, cellValue: any, ___) => {
|
||||
/** 数字格式化为两位小数 */
|
||||
// 格式化金额：保留两位小数，加千分位逗号
|
||||
export const formatAmount = (row, column, cellValue) => {
|
||||
if (cellValue == null || cellValue === '') return ''
|
||||
if (cellValue == null || cellValue === '') return '0.00'
|
||||
|
||||
// 转为数字
|
||||
const num = Number(cellValue)
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" class="hl-table" :show-overflow-tooltip="true">
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" class="hl-table" :show-overflow-tooltip="true" border show-summary :summary-method="getSummaries">
|
||||
<el-table-column label="主键" align="center" prop="id" v-if="false"/>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
@ -109,9 +109,18 @@
|
||||
<!-- width="180px"-->
|
||||
<!-- />-->
|
||||
<el-table-column label="供应商名称" align="center" prop="cgGysname"/>
|
||||
<el-table-column label="应付金额(元)" align="center" prop="cgYf" />
|
||||
<el-table-column label="已付金额(元)" align="center" prop="cgYifu" />
|
||||
<el-table-column label="已付款比例" align="center" >
|
||||
<el-table-column label="应付金额(元)" align="center" prop="cgYf" :formatter="formatAmount"/>
|
||||
<el-table-column label="已付金额(元)" align="center" prop="cgYifu" :formatter="formatAmount"/>
|
||||
<el-table-column label="剩余金额(元)" align="center">
|
||||
<template #default="scope">
|
||||
{{
|
||||
scope.row.cgYf !== null && scope.row.cgYifu !== null
|
||||
? Math.max(0, (Number(scope.row.cgYf) - (Number(scope.row.cgYifu) || 0))).toFixed(2)
|
||||
: Number(scope.row.cgYf) >= 0 ? Number(scope.row.cgYf).toFixed(2) : '0.00'
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已付款比例" align="center">
|
||||
<template #default="scope">
|
||||
{{
|
||||
scope.row.cgYifu&&scope.row.cgYf
|
||||
@ -120,8 +129,20 @@
|
||||
}}%
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已开票金额(元)" align="center" prop="amount" />
|
||||
<el-table-column label="已开票比例" align="center" >
|
||||
|
||||
<el-table-column label="已开票金额(元)" align="center" prop="amount" :formatter="formatAmount"/>
|
||||
<el-table-column label="剩余开票金额(元)" align="center" min-width="90">
|
||||
<template #default="scope">
|
||||
{{
|
||||
scope.row.cgYf && scope.row.amount
|
||||
? Math.max(0, (Number(scope.row.cgYf) - Number(scope.row.amount))).toFixed(2)
|
||||
: scope.row.cgYf
|
||||
? Math.max(0, Number(scope.row.cgYf)).toFixed(2)
|
||||
: '0.00'
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已开票比例" align="center" prop="invoicedRatio">
|
||||
<template #default="scope">
|
||||
{{
|
||||
scope.row.cgYf&&scope.row.cgYf
|
||||
@ -160,6 +181,7 @@
|
||||
<!-- 删除-->
|
||||
<!-- </el-button>-->
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
@ -181,6 +203,9 @@ import download from '@/utils/download'
|
||||
import * as OrderYfApi from '@/api/heli/orderyf'
|
||||
import OrderYfForm from './OrderYfForm.vue'
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import {ElTable} from "element-plus";
|
||||
import type { SummaryMethodProps } from 'element-plus'
|
||||
import {formatAmount} from '@/utils/formatter'
|
||||
defineOptions({ name: 'orderyf' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
@ -262,6 +287,66 @@ const handleExport = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const getSummaries = (param: SummaryMethodProps) => {
|
||||
const { columns, data } = param;
|
||||
const sums = [];
|
||||
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '合计';
|
||||
return;
|
||||
}
|
||||
console.log(index);
|
||||
console.log(column);
|
||||
console.log(column.content);
|
||||
// 通过column获取value
|
||||
|
||||
|
||||
// 计算剩余金额（应付金额 - 已付金额）
|
||||
if (column.label.includes('剩余金额')) {
|
||||
const remainingAmounts = data.map(item => Math.max(0, (Number(item.cgYf) || 0) - (Number(item.cgYifu) || 0)));
|
||||
sums[index] = remainingAmounts.reduce((sum, amount) => sum + amount, 0).toFixed(2);
|
||||
return; }
|
||||
|
||||
// 计算剩余开票金额（应付金额 - 已开票金额）
|
||||
if (column.label.includes('剩余开票金额')) {
|
||||
const yfSum = data.reduce((sum, item) => sum + (Number(item.cgYf) || 0), 0);
|
||||
const amountSum = data.reduce((sum, item) => sum + (Number(item.amount) || 0), 0);
|
||||
sums[index] = Number(yfSum - amountSum).toFixed(2);
|
||||
return;
|
||||
}
|
||||
|
||||
// 需要直接汇总的字段
|
||||
const summaryFields = {
|
||||
'cgYf': '应付金额',
|
||||
'cgYifu': '已付金额',
|
||||
'amount': '已开票金额'
|
||||
};
|
||||
|
||||
if (!summaryFields[column.property]) {
|
||||
sums[index] = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const values = data.map(item => Number(item[column.property]));
|
||||
if (!values.every(value => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr;
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0);
|
||||
sums[index] = Number(sums[index]).toFixed(2);
|
||||
} else {
|
||||
sums[index] = '';
|
||||
}
|
||||
});
|
||||
|
||||
return sums;
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user