b98026b9b7
- 在BizContainer中新增company和paymentTask类型的支持 - 添加ProFormSelect组件用于公司选择 - 实现公司列表和付款任务列表的渲染功能 - 更新typing.ts中支持新的valueType类型 - 集成business服务的公司列表API - 添加PaymentTaskFormItem和PaymentTaskList组件导出 - 优化付款任务创建和支付流程 - 修复付款凭证字段名称和数据结构 - 添加完整的付款记录列表页面和组件 - 更新本地化文件中的付款相关文案 - 修正数据类型定义中的ID字段类型 - 添加付款记录的统计和筛选功能
418 lines
11 KiB
TypeScript
418 lines
11 KiB
TypeScript
import {
|
||
BizEditor,
|
||
ButtonAccess,
|
||
CompanyPaymentAccountSelect,
|
||
InsertPosition,
|
||
OrderSupplierInvoiceList,
|
||
ProFormUploadMaterial,
|
||
SupplierFarmerList,
|
||
SupplierInvoiceList,
|
||
SupplierSelect,
|
||
} from '@/components';
|
||
import { business } from '@/services';
|
||
import { formatCurrency } from '@/utils/format';
|
||
import { formLayout } from '@/utils/formLayout';
|
||
import { useIntl } from '@@/exports';
|
||
import {
|
||
DrawerForm,
|
||
ProCard,
|
||
ProFormDependency,
|
||
ProFormItem,
|
||
ProFormMoney,
|
||
RouteContext,
|
||
RouteContextType,
|
||
} from '@ant-design/pro-components';
|
||
import { Col, message, Row, Space, Table } from 'antd';
|
||
import dayjs from 'dayjs';
|
||
|
||
export interface IPaymentTaskPayProps {
|
||
insertPosition?: InsertPosition;
|
||
paymentTaskVO: BusinessAPI.PaymentTaskVO;
|
||
onFinish: () => void;
|
||
}
|
||
|
||
export default function PaymentTaskPay(props: IPaymentTaskPayProps) {
|
||
const { paymentTaskVO, onFinish } = props;
|
||
const intl = useIntl();
|
||
const intlPrefix = 'paymentTask';
|
||
|
||
// 计算剩余付款金额
|
||
const unpaidAmount =
|
||
(paymentTaskVO.totalAmount || 0) - (paymentTaskVO.paidAmount || 0);
|
||
|
||
const handleSubmit = async (formData: any) => {
|
||
console.log('付款数据：', formData);
|
||
|
||
// 获取选中账户的详细信息
|
||
const { data: accountData } =
|
||
await business.companyPaymentAccount.showCompanyPaymentAccount({
|
||
companyPaymentAccountShowQry: {
|
||
accountId: formData.companyPaymentAccountId,
|
||
},
|
||
});
|
||
|
||
if (!accountData) {
|
||
message.error('获取账户信息失败');
|
||
return false;
|
||
}
|
||
|
||
// 构建符合接口要求的数据结构
|
||
const payData: BusinessAPI.PaymentTaskPayCmd = {
|
||
paymentTaskId: paymentTaskVO.paymentTaskId,
|
||
paidAmount: formData.paidAmount,
|
||
...accountData,
|
||
paidAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||
paidCredentials: formData.paidCredentials || [],
|
||
remark: formData.remark,
|
||
};
|
||
|
||
console.log('转换后的付款数据：', payData);
|
||
|
||
const { success } = await business.paymentTask.payPaymentTask(payData);
|
||
if (success) {
|
||
message.success('付款成功');
|
||
onFinish();
|
||
}
|
||
return success;
|
||
};
|
||
|
||
return (
|
||
<RouteContext.Consumer>
|
||
{(value: RouteContextType) => {
|
||
const { isMobile } = value;
|
||
return (
|
||
<DrawerForm
|
||
title={intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.title',
|
||
})}
|
||
{...formLayout(isMobile)}
|
||
width={isMobile ? '100%' : '85%'}
|
||
drawerProps={{
|
||
destroyOnHidden: true,
|
||
}}
|
||
params={{
|
||
paymentTaskId: paymentTaskVO.paymentTaskId,
|
||
}}
|
||
request={async (params) => {
|
||
const { data } = await business.paymentTask.showPaymentTask({
|
||
paymentTaskShowQry: params,
|
||
});
|
||
|
||
return {
|
||
...data,
|
||
paidAmount: undefined,
|
||
};
|
||
}}
|
||
trigger={
|
||
<ButtonAccess
|
||
key={'pay'}
|
||
permission={'operation-payment-task-pay'}
|
||
type={'link'}
|
||
size={'small'}
|
||
>
|
||
{intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.button',
|
||
})}
|
||
</ButtonAccess>
|
||
}
|
||
onFinish={handleSubmit}
|
||
>
|
||
{/* 模块1：付款任务信息 */}
|
||
<ProFormItem
|
||
style={{
|
||
width: '100%',
|
||
}}
|
||
label={intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.section.taskInfo',
|
||
})}
|
||
>
|
||
<ProCard bordered>
|
||
<Row gutter={[16, 16]}>
|
||
<Col span={6}>
|
||
<div>
|
||
<div style={{ color: '#999', marginBottom: 4 }}>
|
||
{intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.taskInfo.supplierName',
|
||
})}
|
||
</div>
|
||
<div style={{ fontWeight: 'bold' }}>
|
||
{paymentTaskVO.supplierVO?.name}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div>
|
||
<div style={{ color: '#999', marginBottom: 4 }}>
|
||
{intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.taskInfo.totalAmount',
|
||
})}
|
||
</div>
|
||
<div style={{ fontWeight: 'bold' }}>
|
||
{formatCurrency(paymentTaskVO.totalAmount || 0)}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div>
|
||
<div style={{ color: '#999', marginBottom: 4 }}>
|
||
{intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.taskInfo.paidAmount',
|
||
})}
|
||
</div>
|
||
<div style={{ fontWeight: 'bold' }}>
|
||
{formatCurrency(paymentTaskVO.paidAmount || 0)}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={6}>
|
||
<div>
|
||
<div style={{ color: '#999', marginBottom: 4 }}>
|
||
{intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.taskInfo.unpaidAmount',
|
||
})}
|
||
</div>
|
||
<div style={{ fontWeight: 'bold', color: '#ff4d4f' }}>
|
||
{formatCurrency(unpaidAmount)}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<Row gutter={[16, 16]} style={{ marginTop: 16 }}>
|
||
<Col span={12}>
|
||
<div>
|
||
<div style={{ color: '#999', marginBottom: 4 }}>
|
||
{intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.taskInfo.paymentTaskSn',
|
||
})}
|
||
</div>
|
||
<div style={{ fontWeight: 'bold' }}>
|
||
{paymentTaskVO.paymentTaskSn}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={12}>
|
||
<div>
|
||
<div style={{ color: '#999', marginBottom: 4 }}>
|
||
{intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.taskInfo.taskName',
|
||
})}
|
||
</div>
|
||
<div style={{ fontWeight: 'bold' }}>
|
||
{paymentTaskVO.taskName}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</ProCard>
|
||
</ProFormItem>
|
||
|
||
{/* 模块2：瓜农车次列表 */}
|
||
<ProFormDependency name={['orderSupplierVOList']}>
|
||
{({ orderSupplierVOList }) => {
|
||
return (
|
||
<ProFormItem
|
||
name="orderSupplierVOList"
|
||
style={{
|
||
width: '100%',
|
||
}}
|
||
label={intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.section.orderSupplier',
|
||
})}
|
||
>
|
||
<ProCard bordered>
|
||
<OrderSupplierInvoiceList
|
||
rowKey="orderSupplierId"
|
||
dataSource={orderSupplierVOList || []}
|
||
columns={[
|
||
{
|
||
title: '开票瓜农',
|
||
dataIndex: 'supplierInvoiceVO',
|
||
key: 'supplierName',
|
||
render: (
|
||
supplierInvoiceVO: BusinessAPI.SupplierInvoiceVO,
|
||
) => {
|
||
return (
|
||
supplierInvoiceVO && (
|
||
<SupplierFarmerList
|
||
ghost={true}
|
||
mode={'detail'}
|
||
supplierId={supplierInvoiceVO.supplierId}
|
||
trigger={() => (
|
||
<a>{supplierInvoiceVO.supplierName}</a>
|
||
)}
|
||
/>
|
||
)
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: '发票编码',
|
||
dataIndex: 'supplierInvoiceVO',
|
||
render: (
|
||
supplierInvoiceVO: BusinessAPI.SupplierInvoiceVO,
|
||
) => {
|
||
return (
|
||
<SupplierInvoiceList
|
||
ghost={true}
|
||
mode={'detail'}
|
||
supplierInvoiceId={
|
||
supplierInvoiceVO.supplierInvoiceId
|
||
}
|
||
trigger={() => (
|
||
<Space>
|
||
<a>{supplierInvoiceVO.invoiceSn}</a>
|
||
</Space>
|
||
)}
|
||
/>
|
||
);
|
||
},
|
||
},
|
||
]}
|
||
pagination={false}
|
||
size="small"
|
||
summary={(pageData) => {
|
||
let totalAmount = 0;
|
||
pageData.forEach(
|
||
({ invoiceAmount, depositAmount }) => {
|
||
totalAmount +=
|
||
(invoiceAmount || 0) - (depositAmount || 0);
|
||
},
|
||
);
|
||
return (
|
||
<Table.Summary fixed>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={0} colSpan={4}>
|
||
<strong>合计</strong>
|
||
</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={1}>
|
||
<strong style={{ color: '#ff4d4f' }}>
|
||
{formatCurrency(totalAmount)}
|
||
</strong>
|
||
</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={2} />
|
||
</Table.Summary.Row>
|
||
</Table.Summary>
|
||
);
|
||
}}
|
||
/>
|
||
</ProCard>
|
||
</ProFormItem>
|
||
);
|
||
}}
|
||
</ProFormDependency>
|
||
|
||
{/* 模块3：本次付款 */}
|
||
<ProFormMoney
|
||
name="paidAmount"
|
||
label={intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.currentPayment.amount',
|
||
})}
|
||
placeholder={intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.currentPayment.amountPlaceholder',
|
||
})}
|
||
required={true}
|
||
fieldProps={{
|
||
precision: 2,
|
||
min: 0.01,
|
||
max: unpaidAmount,
|
||
}}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.currentPayment.amountRequired',
|
||
}),
|
||
},
|
||
{
|
||
type: 'number',
|
||
max: unpaidAmount,
|
||
message: `付款金额不能超过剩余金额 ${formatCurrency(unpaidAmount)}`,
|
||
},
|
||
]}
|
||
/>
|
||
|
||
{/* 收款人 */}
|
||
<SupplierSelect
|
||
key={'supplierId'}
|
||
params={{
|
||
type: 'FARMER',
|
||
}}
|
||
name="supplierId"
|
||
label={intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.currentPayment.payeeName',
|
||
})}
|
||
placeholder={intl.formatMessage({
|
||
id:
|
||
intlPrefix + '.modal.pay.currentPayment.payeeNamePlaceholder',
|
||
})}
|
||
required={true}
|
||
initialValue={paymentTaskVO.supplierVO?.name}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: intl.formatMessage({
|
||
id:
|
||
intlPrefix +
|
||
'.modal.pay.currentPayment.payeeNameRequired',
|
||
}),
|
||
},
|
||
]}
|
||
/>
|
||
|
||
{/* 选择付款账户 */}
|
||
<CompanyPaymentAccountSelect
|
||
name={'companyPaymentAccountId'}
|
||
label={'付款账户'}
|
||
placeholder={'请选择付款账户'}
|
||
required={true}
|
||
params={{
|
||
status: true,
|
||
}}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请选择付款账户',
|
||
},
|
||
]}
|
||
/>
|
||
|
||
{/* 上传付款凭证 */}
|
||
<ProFormUploadMaterial
|
||
key={'paidCredentials'}
|
||
label={intl.formatMessage({
|
||
id: intlPrefix + '.form.paidCredentials.label',
|
||
})}
|
||
name={'paidCredentials'}
|
||
fieldProps={{
|
||
maxCount: 9,
|
||
}}
|
||
/>
|
||
|
||
{/* 付款备注 */}
|
||
<ProFormDependency key={'remark'} name={['remark']}>
|
||
{({ remark }, form) => {
|
||
return (
|
||
<BizEditor
|
||
key={'remark'}
|
||
value={remark}
|
||
onChange={(value) => {
|
||
form.setFieldValue('remark', value);
|
||
}}
|
||
label={intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.remark.label',
|
||
})}
|
||
name={'remark'}
|
||
placeholder={intl.formatMessage({
|
||
id: intlPrefix + '.modal.pay.remark.placeholder',
|
||
})}
|
||
/>
|
||
);
|
||
}}
|
||
</ProFormDependency>
|
||
</DrawerForm>
|
||
);
|
||
}}
|
||
</RouteContext.Consumer>
|
||
);
|
||
}
|