1429319b01
- 将多个组件中的 @chageable/components 导入改为从 @/components 导入 - 在 BoxBrandList.tsx、CostList.tsx、ProductDataList.tsx 等文件中更新 ProFormBizSelect 相关组件导入 - 在 CaptchaModal/index.tsx 中将 Captcha 组件导入从 @chageable/components 改为 @/components - 在 ChannelList.tsx、CompanyList.tsx、EmployeeList.tsx 等文件中更新 ProFormUploadMaterial 导入 - 在 MaterialList.tsx 中更新 ProFormBizTreeSelect 和 ProFormUploadOss 导入 - 在 MenuList.tsx、OrderCostList.tsx 中更新 ProFormBizSelect 相关组件导入 - 在 DealerModal.tsx、MaterialModal.tsx、OrderModal.tsx 等文件中更新 SelectModal 导入 - 在 app.tsx 中将 LeftMenu 导入从 @chageable/components 改为 @/components - 新增 UploadMaterial 组件并添加到 components/index.ts 导出 - 在 Captcha 组件中添加滑动验证码功能，包含样式和交互逻辑 - 在 companyPaymentAccount 工具函数中添加 branchName 字段支持
430 lines
12 KiB
TypeScript
430 lines
12 KiB
TypeScript
import {
|
||
BizEditor,
|
||
ButtonAccess,
|
||
CompanyPaymentAccountSelect,
|
||
InsertPosition,
|
||
MaterialList,
|
||
OrderSupplierInvoiceList,
|
||
ProFormUploadMaterial,
|
||
SupplierFarmerList,
|
||
SupplierInvoiceList,
|
||
SupplierSelect,
|
||
} from '@/components';
|
||
import { business } from '@/services';
|
||
import { formatCurrency } from '@/utils/format';
|
||
import { formatParam } from '@/utils/formatParam';
|
||
import { formLayout } from '@/utils/formLayout';
|
||
import { useIntl } from '@@/exports';
|
||
import {
|
||
ActionType,
|
||
DrawerForm,
|
||
ProCard,
|
||
ProFormDependency,
|
||
ProFormItem,
|
||
ProFormMoney,
|
||
RouteContext,
|
||
RouteContextType,
|
||
} from '@ant-design/pro-components';
|
||
import { Col, Row, Space, Table } from 'antd';
|
||
import { useRef } from 'react';
|
||
|
||
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 actionRef = useRef<ActionType>();
|
||
|
||
const handleSubmit = async (formData: any) => {
|
||
console.log('付款数据：', formData);
|
||
// TODO: 调用付款接口
|
||
// const { success } = await business.paymentTask.pay({
|
||
// ...formData,
|
||
// });
|
||
// if (success) {
|
||
// message.success('付款成功');
|
||
onFinish();
|
||
// }
|
||
// return success;
|
||
return true;
|
||
};
|
||
|
||
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;
|
||
}}
|
||
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.paymentCode',
|
||
})}
|
||
</div>
|
||
<div style={{ fontWeight: 'bold' }}>
|
||
{paymentTaskVO.paymentCode}
|
||
</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="paymentAmount"
|
||
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={'backgroundImageUrl'}
|
||
label={intl.formatMessage({
|
||
id: intlPrefix + '.form.backgroundImageUrl.label',
|
||
})}
|
||
name={'backgroundImageUrlList'}
|
||
transform={(value) => {
|
||
return {
|
||
backgroundImageUrlList: value,
|
||
backgroundImageUrl: value[0],
|
||
};
|
||
}}
|
||
fieldProps={{
|
||
maxCount: 1,
|
||
actionRef: actionRef,
|
||
toolBarRender: () => [
|
||
<MaterialList
|
||
key={'create'}
|
||
ghost={true}
|
||
mode={'create'}
|
||
search={false}
|
||
onValueChange={() => actionRef.current?.reload()}
|
||
/>,
|
||
],
|
||
request: async (params, sorter, filter) => {
|
||
const { data, success, totalCount } =
|
||
await business.material.pageMaterial({
|
||
materialPageQry: formatParam<typeof params>(
|
||
params,
|
||
sorter,
|
||
filter,
|
||
),
|
||
});
|
||
|
||
return {
|
||
data: data || [],
|
||
total: totalCount,
|
||
success,
|
||
};
|
||
},
|
||
}}
|
||
/>
|
||
|
||
{/* 付款备注 */}
|
||
<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>
|
||
);
|
||
}
|