优化订单记录表格行尾自定义合计

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

@@ -361,65 +361,36 @@ const getSummaries = (param: SummaryMethodProps) => {
 			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),
-							)}`,
+			const priceVNode: VNode[] & string[] = []
+			;[
+				{ column: "totalPrice", columnName: "商品总价", color: "#67C260" },
+				{ column: "extraPrice", columnName: "额外支付", color: "#F56E9B" },
+				{ column: "payPrice", columnName: "实际支付", color: "#355CF6" },
+			].forEach(({ column, columnName, color }: any, index: number) => {
+				const values = data.map((item) => Number(item[column]))
+				if (!values.every((value) => Number.isNaN(value))) {
+					priceVNode.push(
+						h("div", {}, [
+							h("span", { style: { marginRight: "40px", minWidth: "60px", fontWeight: "bold" } }, [columnName]),
+							h("span", { style: { color, minWidth: "50px", flex: 1 } }, [
+								displayPrice(
+									values.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 {
+					priceVNode.push("NaN")
+				}
+			})
+			sums[index] = h("div", { style: {} }, [...priceVNode])
 		} else {
 			sums[index] = ""
 		}