应付管理页面统计

mes-ui/mes-ui-admin-vue3/src/utils/formatter.ts

@@ -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)

mes-ui/mes-ui-admin-vue3/src/views/heli/orderyf/index.vue

@@ -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="cgYf" :formatter="formatAmount"/>
-      <el-table-column label="已付金额(元)" align="center" prop="cgYifu" />
+      <el-table-column label="已付金额(元)" align="center" prop="cgYifu" :formatter="formatAmount"/>
-      <el-table-column label="已付款比例" align="center"  >
+      <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()