refactor(components): 重构业务详情组件布局并添加付款记录功能

- 移除未使用的 column 工具函数
- 将平铺模式的卡片布局改为直接映射渲染
- 统一移动端和桌面端的卡片方向为垂直布局
- 移除动态列跨度计算，统一设置为 24 列
- 在付款记录列表中添加付款任务 VO 属性
- 从付款记录列表中移除账号列的固定宽度
- 将付款记录列表集成到付款任务详情的标签页中
- 更新本地化文件中的付款记录和任务编号字段
- 调整付款记录列表的容器样式配置

packages/app-operation/src/components/Biz/BizDetail.tsx

@@ -1,5 +1,4 @@
 import { BizValueType, ButtonAccess } from '@/components';
-import column from '@/utils/column';
 import { formLayout } from '@/utils/formLayout';
 import { useIntl } from '@@/exports';
 import {
@@ -59,25 +58,21 @@ export default function BizDetail<
 
 		// 平铺模式：直接垂直堆叠所有内容
 		if (formContextMode === 'flat') {
-			return (
+			return contextItems?.map((item, index) => (
-				<ProCard ghost={true} direction={'column'}>
+				<ProCard
-					{contextItems?.map((item, index) => (
+					key={item.key || index}
-						<ProCard
+					bordered={true}
-							key={item.key || index}
+					headerBordered={false}
-							bordered={true}
+					title={item.label}
-							headerBordered={false}
+					style={{
-							title={item.label}
+						marginBottom: 16,
-							style={{
+					}}
-								marginBottom: 16,
+					// @ts-ignore
-							}}
+					subTitle={item.subTitle}
-							// @ts-ignore
+				>
-							subTitle={item.subTitle}
+					{item.children}
-						>
-							{item.children}
-						</ProCard>
-					))}
 				</ProCard>
-			);
+			));
 		}
 
 		// Tab 模式：使用 tabs 渲染
@@ -149,17 +144,14 @@ export default function BizDetail<
 						<ProFormDependency name={[`${method}VO`, 'isMobile', 'activeKey']}>
 							{(data, form) => {
 								return (
-									<ProCard
+									<ProCard ghost={true} gutter={24} direction={'column'}>
-										ghost={true}
-										gutter={24}
-										direction={data.isMobile ? 'column' : 'row'}
-									>
 										<ProCard
 											bordered={true}
 											headerBordered={true}
-											colSpan={
+											colSpan={24}
-												data.isMobile || formContext === undefined ? 24 : 6
+											style={{
-											}
+												marginBottom: 16,
+											}}
 										>
 											<ProDescriptions<BizVO, BizValueType>
 												params={{ data: data[`${method}VO`] }}
@@ -170,10 +162,9 @@ export default function BizDetail<
 													})
 												}
 												columns={[...columns]}
-												column={column(data.isMobile, formContext)}
 											/>
 										</ProCard>
-										{renderFormContext(data, form, data.isMobile ? 24 : 18)}
+										{renderFormContext(data, form, 24)}
 									</ProCard>
 								);
 							}}
@@ -207,13 +198,14 @@ export default function BizDetail<
 						<ProFormDependency name={[`${method}VO`, 'isMobile', 'activeKey']}>
 							{(data, form) => {
 								return (
-									<ProCard ghost={true} gutter={24} direction={'row'}>
+									<ProCard ghost={true} gutter={24} direction={'column'}>
 										<ProCard
 											bordered={true}
 											headerBordered={true}
-											colSpan={
+											colSpan={24}
-												data.isMobile || formContext === undefined ? 24 : 6
+											style={{
-											}
+												marginBottom: 16,
+											}}
 										>
 											<ProDescriptions<BizVO, BizValueType>
 												params={{ data: data[`${method}VO`] }}
@@ -224,10 +216,9 @@ export default function BizDetail<
 													})
 												}
 												columns={[...columns]}
-												column={column(data.isMobile, formContext)}
 											/>
 										</ProCard>
-										{renderFormContext(data, form, data.isMobile ? 24 : 18)}
+										{renderFormContext(data, form, 24)}
 									</ProCard>
 								);
 							}}

packages/app-operation/src/components/PaymentRecord/PaymentRecordList.tsx

@@ -10,6 +10,7 @@ import React, { useRef, useState } from 'react';
 interface IPaymentRecordListProps {
 	ghost?: boolean;
 	paymentRecordId?: BusinessAPI.PaymentRecordVO['paymentRecordId'];
+	paymentTaskVO?: BusinessAPI.PaymentTaskVO;
 	search?: boolean;
 	onValueChange?: () => void;
 	mode?: ModeType;
@@ -24,6 +25,7 @@ export default function PaymentRecordList(props: IPaymentRecordListProps) {
 		mode = 'page',
 		trigger,
 		onValueChange,
+		paymentTaskVO,
 	} = props;
 	const intl = useIntl();
 	const intlPrefix = 'paymentRecord';
@@ -132,7 +134,6 @@ export default function PaymentRecordList(props: IPaymentRecordListProps) {
 			dataIndex: 'accountNumber',
 			key: 'accountNumber',
 			ellipsis: true,
-			width: 180,
 		},
 		{
 			title: intl.formatMessage({ id: intlPrefix + '.column.paidAmount' }),
@@ -277,6 +278,7 @@ export default function PaymentRecordList(props: IPaymentRecordListProps) {
 			modeType={mode}
 			onValueChange={onValueChange}
 			container={{
+				ghost,
 				fieldProps: {
 					ghost,
 				},
@@ -330,6 +332,9 @@ export default function PaymentRecordList(props: IPaymentRecordListProps) {
 						...(activeKey !== 'ALL' && {
 							paidState: activeKey,
 						}),
+						...(paymentTaskVO && {
+							paymentTaskId: paymentTaskVO.paymentTaskId,
+						}),
 						targetType: 'SUPPLIER',
 					},
 					toolbar: {

packages/app-operation/src/components/PaymentTask/PaymentTaskList.tsx

@@ -4,6 +4,7 @@ import {
 	InvoicerStatisticCard,
 	ModeType,
 	OrderSupplierInvoiceList,
+	PaymentRecordList,
 	PaymentTaskCreate,
 	PaymentTaskPay,
 	SupplierFarmerList,
@@ -416,6 +417,20 @@ export default function PaymentTaskList(props: IPaymentTaskListProps) {
 						},
 					]
 				: []),
+			// 付款记录 Tab
+			{
+				label: intl.formatMessage({
+					id: intlPrefix + '.detail.tab.paymentRecord',
+				}),
+				key: 'paymentRecord',
+				children: (
+					<PaymentRecordList
+						paymentTaskVO={paymentTaskVO}
+						ghost={true}
+						search={false}
+					/>
+				),
+			},
 		];
 	};
 

packages/app-operation/src/locales/zh-CN.ts

@@ -2641,6 +2641,7 @@ export default {
 					'(实际瓜农≠开票方，注意核实收款人)',
 				noInvoiceList: '无发票车次列表',
 				'noInvoiceList.subTitle': '(需微信个人支付，必须上传截图)',
+				paymentRecord: '付款记录',
 			},
 			invoiceType: {
 				selfInvoice: '自开票',
@@ -2720,7 +2721,7 @@ export default {
 					totalAmount: '总应付金额',
 					paidAmount: '已付金额',
 					unpaidAmount: '剩余付款金额',
-					paymentRecordSn: '任务编号',
+					paymentTaskSn: '任务编号',
 					taskName: '任务名称',
 				},
 				currentPayment: {

packages/app-operation/src/utils/column.ts

@@ -1,14 +0,0 @@
-export default function column(isMobile?: boolean, formContext?: any) {
-	if (isMobile || formContext !== undefined) {
-		return 1;
-	}
-
-	return {
-		xs: 1,
-		sm: 1,
-		md: 2,
-		lg: 2,
-		xl: 2,
-		xxl: 3,
-	};
-}