refactor(components): 重构业务详情组件布局并添加付款记录功能
- 移除未使用的 column 工具函数 - 将平铺模式的卡片布局改为直接映射渲染 - 统一移动端和桌面端的卡片方向为垂直布局 - 移除动态列跨度计算，统一设置为 24 列 - 在付款记录列表中添加付款任务 VO 属性 - 从付款记录列表中移除账号列的固定宽度 - 将付款记录列表集成到付款任务详情的标签页中 - 更新本地化文件中的付款记录和任务编号字段 - 调整付款记录列表的容器样式配置
This commit is contained in:
shenyifei
parent
b98026b9b7
commit
22889e3f1b
@ -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 (
|
||||
<ProCard ghost={true} direction={'column'}>
|
||||
{contextItems?.map((item, index) => (
|
||||
<ProCard
|
||||
key={item.key || index}
|
||||
bordered={true}
|
||||
headerBordered={false}
|
||||
title={item.label}
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
}}
|
||||
// @ts-ignore
|
||||
subTitle={item.subTitle}
|
||||
>
|
||||
{item.children}
|
||||
</ProCard>
|
||||
))}
|
||||
return contextItems?.map((item, index) => (
|
||||
<ProCard
|
||||
key={item.key || index}
|
||||
bordered={true}
|
||||
headerBordered={false}
|
||||
title={item.label}
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
}}
|
||||
// @ts-ignore
|
||||
subTitle={item.subTitle}
|
||||
>
|
||||
{item.children}
|
||||
</ProCard>
|
||||
);
|
||||
));
|
||||
}
|
||||
|
||||
// Tab 模式：使用 tabs 渲染
|
||||
@ -149,17 +144,14 @@ export default function BizDetail<
|
||||
<ProFormDependency name={[`${method}VO`, 'isMobile', 'activeKey']}>
|
||||
{(data, form) => {
|
||||
return (
|
||||
<ProCard
|
||||
ghost={true}
|
||||
gutter={24}
|
||||
direction={data.isMobile ? 'column' : 'row'}
|
||||
>
|
||||
<ProCard ghost={true} gutter={24} direction={'column'}>
|
||||
<ProCard
|
||||
bordered={true}
|
||||
headerBordered={true}
|
||||
colSpan={
|
||||
data.isMobile || formContext === undefined ? 24 : 6
|
||||
}
|
||||
colSpan={24}
|
||||
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={
|
||||
data.isMobile || formContext === undefined ? 24 : 6
|
||||
}
|
||||
colSpan={24}
|
||||
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>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user