订单记录表格行尾添加自定义合计

src/views/hard/hard-order/index.vue

@@ -44,8 +44,10 @@
 				:header-cell-style="tableStyle.headerCellStyle"
 				@selection-change="selectionChangHandle"
 				@sort-change="sortChangeHandle"
+				show-summary
+				:summary-method="getSummaries"
 			>
-				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="selection" width="60" align="center" />
 				<el-table-column type="index" label="#" width="50" />
 				<el-table-column width="200" label="用户">
 					<template #default="{ row }">
@@ -118,7 +120,7 @@
 						</div>
 					</template>
 				</el-table-column>
-				<el-table-column width="200px" label="付款信息">
+				<el-table-column width="200px" prop="paymentInformation" label="付款信息">
 					<template #default="{ row }">
 						<div class="status">
 							<span>商品总价</span>
@@ -236,7 +238,8 @@ import { getDicts } from "/@/api/admin/dict"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
-import { ElLoading } from "element-plus"
+import { ElLoading, TableColumnCtx } from "element-plus"
+import { VNode } from "vue"
 
 const { push } = useRouter()
 
@@ -342,6 +345,88 @@ const handleDelete = async (ids: string[]) => {
 		useMessage().error(err.msg)
 	}
 }
+
+interface SummaryMethodProps<T = any> {
+	columns: TableColumnCtx<T>[]
+	data: T[]
+}
+
+// 表格行尾合计
+const getSummaries = (param: SummaryMethodProps) => {
+	const { columns, data } = param
+	const sums: (string | VNode | number)[] = []
+	columns.forEach((column, index) => {
+		if (index === 0) {
+			sums[index] = "合计"
+			return
+		}
+		if (column.property === "paymentInformation") {
+			const totalPriceValues = data.map((item) => Number(item.totalPrice))
+			const extraPriceValues = data.map((item) => Number(item.extraPrice))
+			const payPriceValues = data.map((item) => Number(item.payPrice))
+			if (
+				!totalPriceValues.every((value) => Number.isNaN(value)) &&
+				!extraPriceValues.every((value) => Number.isNaN(value)) &&
+				!payPriceValues.every((value) => Number.isNaN(value))
+			) {
+				// h("div", { style: { textDecoration: "underline" } }, ["Total Cost"])
+				sums[index] = h("div", { style: {} }, [
+					h("div", {}, [
+						h("span", { style: { marginRight: "40px", fontWeight: "bold" } }, ["商品总价"]),
+						h("span", { style: { color: "#67C260" } }, [
+							`${displayPrice(
+								totalPriceValues.reduce((prev, curr) => {
+									const value = Number(curr)
+									if (!Number.isNaN(value)) {
+										return prev + curr
+									} else {
+										return prev
+									}
+								}, 0),
+							)}`,
+						]),
+					]),
+					h("div", { style: {} }, [
+						h("span", { style: { marginRight: "40px", fontWeight: "bold" } }, ["额外支付"]),
+						h("span", { style: { color: "#F56E9B" } }, [
+							`${displayPrice(
+								extraPriceValues.reduce((prev, curr) => {
+									const value = Number(curr)
+									if (!Number.isNaN(value)) {
+										return prev + curr
+									} else {
+										return prev
+									}
+								}, 0),
+							)}`,
+						]),
+					]),
+					h("div", { style: {} }, [
+						h("span", { style: { marginRight: "40px", fontWeight: "bold" } }, ["实际支付"]),
+						h("span", { style: { color: "#355CF6" } }, [
+							`${displayPrice(
+								payPriceValues.reduce((prev, curr) => {
+									const value = Number(curr)
+									if (!Number.isNaN(value)) {
+										return prev + curr
+									} else {
+										return prev
+									}
+								}, 0),
+							)}`,
+						]),
+					]),
+				])
+			} else {
+				sums[index] = "N/A"
+			}
+		} else {
+			sums[index] = ""
+		}
+	})
+
+	return sums
+}
 </script>
 
 <style scoped lang="scss">