pay-company/src/pages/bills/temporary/modals/Pay.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { BillsStatusEnum, HouseOrdersPaymentMethodEnum } from '@/gen/Enums';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Form, message } from 'antd';
import * as React from 'react';

export interface PayCreateProps extends MyBetaModalFormProps {
  // 单个账单收款，不需要选择多个账单
}

export default function PayCreate(props: PayCreateProps): React.ReactElement {
  const [form] = Form.useForm();

  return (
    <BetaSchemaForm<ApiTypes.Bill.Bills.OfflinePayment>
      {...MyModalFormProps.props}
      title="录入收款信息"
      trigger={
        <MyButtons.Default
          type="primary"
          size="small"
          title="线下收款"
          disabled={
            props?.item?.status === BillsStatusEnum.Paid.value ||
            props?.item?.status === BillsStatusEnum.Cancelled.value ||
            props?.item?.status === BillsStatusEnum.UnderApproval.value ||
            props?.item?.status === BillsStatusEnum.ToBeConfirmed.value
          }
        />
      }
      labelAlign="left"
      width="800px"
      form={form}
      key={new Date().getTime()}
      onOpenChange={(open: boolean): void => {
        if (open) {
          form.resetFields(); // 清空表单数据
          form.setFieldsValue({
            item: props.item,
          });
        }
      }}
      onFinish={async (values: any) =>
        Apis.Bill.Bills.OfflinePayment({
          ...values,
          total_paid_amount: parseFloat(props?.item?.payable_amount || 0),
          id: props.item?.id || '',
        })
          .then(() => {
            props.reload?.();
            message.success('手动添加账单成功');
            return true;
          })
          .catch(() => false)
      }
      columns={[
        {
          valueType: 'divider',
          fieldProps: {
            orientation: 'left',
            children: '账单信息',
          },
        },
        {
          colProps: { span: 24 },
          renderFormItem: () => (
            <div
              style={{
                padding: '12px',
                backgroundColor: '#f5f5f5',
                borderRadius: '6px',
              }}
            >
              <p>账单ID：{props.item?.id || '-'}</p>
              <p>
                关联项目：
                {props.item?.asset_project?.name || '-'}
              </p>
              <p>
                收款金额：¥ {parseFloat(props?.item?.payable_amount || 0)} 元
              </p>
              <p>账单备注：{props.item?.remark || '-'}</p>
            </div>
          ),
        },
        MyFormItems.EnumRadio({
          key: 'payment_method',
          title: '收款方式',
          colProps: { span: 12 },
          valueEnum: () => {
            const obj: Record<string, any> = JSON.parse(
              JSON.stringify(HouseOrdersPaymentMethodEnum),
            );
            delete obj.WeChat;
            delete obj.Alipay;
            delete obj.TongLian;
            delete obj.Prepayment;
            delete obj.CCB;
            return obj;
          },
          required: true,
        }),
        // {
        //   key: 'total_paid_amount',
        //   title: '收款金额',
        //   valueType: 'digit',
        //   colProps: { span: 6 },
        //   fieldProps: {
        //     style: { width: '100%' },
        //     addonAfter: '元',
        //     disabled: true,
        //   },
        //   formItemProps: { ...rulesHelper.number },
        // },
        {
          key: 'paid_time',
          title: '收款日期',
          valueType: 'date',
          formItemProps: { ...rulesHelper.text },
          colProps: { span: 8 },
        },
        {
          title: '收款备注',
          dataIndex: 'remark',
          colProps: { span: 24 },
        },
        MyFormItems.UploadImages({
          key: 'pay_certificate',
          title: '收款凭证图片',
          uploadType: 'file',
          colProps: { span: 24 },
          max: 10,
        }),

        {
          colProps: { span: 24 },
          renderFormItem: () => (
            <span style={{ color: '#5b5b5bff' }}>
              提示：确认后，需财务审核。
            </span>
          ),
        },
      ]}
    />
  );
}