调用弹框
<TransferOfDebtForm
onCancel={() => {}}
onSubmit={() => {
ref.current?.reload()
}}
id={record.id}
notRepaidAmount={record.notRepaidAmount}
/>
ModalFom
import React, { useEffect, useRef, useState } from 'react'
import useStores from '../../store'
import { Button, message, Tooltip } from 'antd'
import type { ProFormInstance } from '@ant-design/pro-form'
import { ModalForm } from '@ant-design/pro-form'
import { useIntl } from 'umi'
import ProCard from '@ant-design/pro-card'
import { observer } from 'mobx-react'
import {
dateToADDate,
MliFormDatePicker,
MliFormDigit,
MliFormRow,
MliFormSelect,
useLookups
} from '@mli/app-common'
export type UpdateFormProps = {
onCancel: () => void
onSubmit: () => void
id: string
notRepaidAmount: number
}
const TransferOfDebtForm: React.FC<UpdateFormProps> = (props) => {
const { formatMessage } = useIntl()
const momentTW = require('moment-taiwan')
const moduleName = 'agentDebtRecordEntity'
const stores = useStores()
const formRef = useRef<ProFormInstance>()
const [visible, setVisible] = useState<boolean>(false)
const { formatLookups } = useLookups(['CMS_TypeofCreditorright'])
useEffect(() => {
if (props.notRepaidAmount && visible) {
formRef.current?.setFieldsValue({ debtTotBadAmt: Math.abs(props.notRepaidAmount) })
}
}, [visible])
//債權移轉確認
return (
<ModalForm
grid
labelWrap
title={formatMessage({ id: 'agentDebtRecordEntity.TransferOfDebtForm.title' })}
width="840px"
formRef={formRef}
visible={visible}
trigger={
<Tooltip
key="transferOfDebt"
title={formatMessage({
id: 'agentDebtRecordEntity.button.transferOfDebt'
})}
>
<Button type="link">
<i className="iconfont icon-confirmation-claims" />
</Button>
</Tooltip>
}
onVisibleChange={async (open: boolean) => {
if (open !== visible) {
setVisible(open)
formRef.current?.resetFields()
}
}}
modalProps={{
onCancel: () => {
setVisible(false)
}
}}
onFinish={async () => {
const formData = formRef.current?.getFieldsValue()
const body = {
data: [props.id],
debtCategoryDate: dateToADDate(formData.debtCategoryDate, formatMessage),
debtCategoryCode: formData.debtCategoryCode
}
const result = await stores.batchTransferOfDebt(body)
if (result) {
message.success(formatMessage({ id: 'common.message.success' }))
props.onSubmit()
setVisible(false)
}
}}
>
<ProCard>
<MliFormRow style={{ position: 'relative', marginRight: 0 }}>
{/* 債權轉移日期 */}
<MliFormDatePicker
moduleName="agentDebtRecordEntity.TransferOfDebtForm"
columnName="debtCategoryDate"
required
initialValue={momentTW().startOf('month').subtract(1, 'days')}
/>
{/* 債權分類 */}
<MliFormSelect
moduleName={moduleName}
columnName="debtCategoryCode"
required
options={formatLookups.CMS_TypeofCreditorright?.filter((s) =>
['4', '5'].includes(s.value)
)}
/>
{/*轉銷呆賬金額*/}
<MliFormDigit
moduleName="agentDebtRecordEntity"
columnName="debtTotBadAmt"
required
disabled={true}
fieldProps={{
formatter: (value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value) => value!.replace(/\$\s?|(,*)/g, '')
}}
/>
</MliFormRow>
</ProCard>
</ModalForm>
)
}
export default observer(TransferOfDebtForm)