refactor: 重构MoneyInput组件

src/components/MoneyInput/index.tsx

@@ -1,5 +1,5 @@
 import { formatMoney } from '@/utils/util'
-import { Input } from 'antd'
+import { Form, Input } from 'antd'
 import { InputProps } from 'antd/lib/input'
 import React, { ChangeEvent, useState } from 'react'
 import './index.scss'
@@ -8,41 +8,61 @@ interface iState {
   digit: string
   inputVal: string
 }
-const MoneyInput: React.FC<InputProps> = (props) => {
+
+interface MoneyInputProps extends InputProps {
+  maxPrice?: number
+  setValue: (val: string | null) => void
+}
+const MoneyInput: React.FC<MoneyInputProps> = (props) => {
+  const { maxPrice, setValue, ...restProps } = props
   const [ state, setState ] = useState<iState>({
     digit: '',
     inputVal: ''
   })
+
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    console.log(e.target.value)
-
-    const len = e.target.value.length
-    if (len > 12) return
-    const inputVal = e.target.value
-
-    const digits = {
-      4: '千',
-      5: '万',
-      6: '十万',
-      7: '百万',
-      8: '千万',
-      9: '亿',
-      10: '十亿',
-      11: '百亿',
-      12: '千亿'
-    }
-    if(digits[len]) {
-      setState({ ...state, digit: digits[len], inputVal })
-    } else {
-      setState({ ...state, digit: '', inputVal })
+    const val = e.target.value?.match(/^\d+/)
+    let inputVal = val && val[0] || null
+    if (inputVal) {
+      if (maxPrice && parseFloat(inputVal) > maxPrice) {
+        inputVal = maxPrice.toString()
+      }
+
+      let len = inputVal.length
+
+      if (len > 12) {
+        inputVal = state.inputVal
+        len = state.inputVal.length
+      }
+      const digits = {
+        4: '千',
+        5: '万',
+        6: '十万',
+        7: '百万',
+        8: '千万',
+        9: '亿',
+        10: '十亿',
+        11: '百亿',
+        12: '千亿'
+      }
+      if(digits[len]) {
+        setState({ ...state, digit: digits[len], inputVal })
+      } else {
+        setState({ ...state, digit: '', inputVal })
+      }
     }
+
+    setValue(inputVal)
   }
 
   return (
     <div className="ant-input ant-input-sm">
       <div className="pi-flex-row">
       <span className="pi-fz-14 pi-mg-right-5">￥</span>
-      <Input bordered={false} {...props} onChange={handleChange} type="number" value={state.inputVal} max={999999999999}/>
+      <Form.Item name="price" rules={[ { required: true, message: '请输入合同金额' } ]} noStyle>
+        <Input bordered={false} {...restProps} onChange={handleChange} autoComplete="off"/>
+      </Form.Item>
       </div>
       {
         state.digit ?

src/pages/Contract/Content/Income/components/Modal/index.tsx

@@ -1,5 +1,6 @@
 import Authorization from '@/components/Authorization'
 import DatePicker from '@/components/DatePicker'
+import MoneyInput from '@/components/MoneyInput'
 import { contractPaidStore, contractReturnStore, tenderStore } from '@/store/mobx'
 import { iModalCommonProps } from '@/types/contract'
 import { apiContractSection } from '@/utils/common/api'
@@ -121,12 +122,17 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
   }
 
   // 处理添加回款的金额不应该超出最大值
-  const handleReturnPrice = (e: ChangeEvent<HTMLInputElement>) => {
-    const maxPrice = parseFloat(contractReturnStore.contract.price) - parseFloat(contractReturnStore.contract.returned)
-    if (parseFloat(e.target.value) > maxPrice) {
-      form.setFieldsValue({ price: maxPrice })
-    }
+  const handleMaxPrice = () => {
+    const maxPrice = parseFloat(contractType === 'income' ? contractReturnStore.contract.price : contractPaidStore.contract.price) - parseFloat(contractType === 'income' ? contractReturnStore.contract.returned : contractPaidStore.contract.paid)
+    return maxPrice
   }
+
+  // 当row id或者type变化时，重置表单数据
+  useEffect(() => {
+    form.resetFields()
+  }, [ type, row.id ])
+
+
   return (
     <Modal
       getContainer={false}
@@ -204,8 +210,9 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
                 <Option value={2}>收入合同</Option>
               </Select>
             </Form.Item> */}
-            <Form.Item name="price" label="合同金额" rules={[ { required: true, message: '请输入合同金额' } ]}>
-              <Input type="number" placeholder="输入合同金额" addonAfter={<span>元</span>} />
+            <Form.Item label="合同金额" >
+              {/* <Input type="number" placeholder="输入合同金额" addonAfter={<span>元</span>} /> */}
+              <MoneyInput size="small" setValue={(val: string | null) => form.setFieldsValue({ price: val })}/>
             </Form.Item>
           </>
         ) : (
@@ -219,8 +226,8 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
             <Form.Item name="name" label="合同名称" rules={[ { required: true, message: '请输入项目内容' } ]}>
               <Input />
             </Form.Item>
-            <Form.Item name="price" label="合同金额" rules={[ { required: true, message: '请输入项目金额' } ]}>
-              <Input />
+            <Form.Item label="合同金额" >
+              <MoneyInput size="small" setValue={(val: string | null) => form.setFieldsValue({ price: val })}/>
             </Form.Item>
             <Form.Item name="partyA" label="甲方" rules={[ { required: true, message: '请输入甲方' } ]}>
               <Input />
@@ -241,9 +248,8 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
               <Input.TextArea maxLength={100} />
             </Form.Item>
           </>
-        ) : (
-          ''
-        )}
+        ) : null
+        }
         {type === 'close' ? (
           <>
             <Form.Item name="id" hidden>
@@ -299,8 +305,9 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
             <Form.Item name="time" label="回款日期" rules={[ { required: true, message: '请选择回款日期' } ]}>
               <DatePicker allowClear locale={locale} className="pi-width-100P" />
             </Form.Item>
-            <Form.Item name="price" label="回款金额" rules={[ { required: true, message: '请选择回款金额' } ]}>
-              <Input onChange={handleReturnPrice}/>
+            <Form.Item label="回款金额" >
+              {/* <Input onChange={handleReturnPrice}/> */}
+              <MoneyInput size="small" maxPrice={handleMaxPrice()} setValue={(val: string | null) => form.setFieldsValue({ price: val })}/>
             </Form.Item>
             <Form.Item name="way" label="支付方式" rules={[ { required: true, message: '请选择回款方式' } ]}>
               <Select>{options}</Select>