添加立减金 加款弹窗中 金额交互显示以及相关限制

src/pages/plan/knockGold/Dialog.jsx

@@ -4,18 +4,25 @@ import Ipt from '../../../components/input/main'
 import Form from '../../../components/form/main'
 import FormItem from '../../../components/form-item/main'
 import rules from './rules'
-import { Button } from 'zent'
+import { Button, Notify } from 'zent'
 
 export default ({ data, onChangeMoney }) => {
   const [stateData, setStateData] = useState({ addNew: '' })
   const ref = useRef()
   useEffect(() => {
-    setStateData({ stateData: data })
+    setStateData({ ...data })
   }, [data])
 
   function submit() {
     if (ref.current.validator()) {
-      onChangeMoney(false, stateData.addNew)
+      if (
+        Number(stateData?.money) + Number(stateData.addNew) <
+        Number(stateData?.all_budget)
+      ) {
+        onChangeMoney(false, Number(stateData.addNew))
+      } else {
+        Notify.error('加款失败')
+      }
     }
   }
 
@@ -23,10 +30,16 @@ export default ({ data, onChangeMoney }) => {
     <>
       <div className='dialog_p'>
         <p>
-          预估当前消耗余额为<span className='red'> 60000.21</span>元
+          预估当前消耗余额为
+          <span className='red'> {stateData?.money} </span>元
         </p>
         <p>
-          预估当前剩余余额为<span className='green'> 60000.21</span>元
+          预估当前剩余余额为
+          <span className='green'>
+            {' '}
+            {stateData?.all_budget - stateData?.money}{' '}
+          </span>
+          元
         </p>
         <Form ref={ref} model={stateData} rules={rules.addNew}>
           <FormItem
@@ -37,10 +50,10 @@ export default ({ data, onChangeMoney }) => {
             <Ipt
               className='addNew'
               onChange={(value) => {
-                setStateData({ addNew: value })
+                setStateData({ ...stateData, addNew: value })
               }}
               onClearItem={() => {
-                setStateData({ addNew: '' })
+                setStateData({ ...stateData, addNew: '' })
               }}
               kind='number'
               value={stateData.addNew}
@@ -74,10 +87,21 @@ export default ({ data, onChangeMoney }) => {
         </Form>
         <p>
           预估充值后总充值批次金额为
-          <span className='blue'> 60000.21</span> 元
+          <span className='blue'>
+            {' '}
+            {(Number(stateData?.money) | 0) + (stateData?.addNew | 0)}{' '}
+          </span>
+          元
         </p>
         <p>
-          预估充值后剩余余额为<span className='blue'> 60000.21</span>元
+          预估充值后剩余余额为
+          <span className='blue'>
+            {' '}
+            {stateData?.all_budget -
+              stateData?.money -
+              (stateData?.addNew | 0)}{' '}
+          </span>
+          元
         </p>
       </div>
       <p className='dflexajce'>

src/pages/plan/knockGold/index.jsx

@@ -25,6 +25,10 @@ import {
 import _, { isArray } from 'lodash'
 import AddNewDialog from './Dialog'
 import MobileComponent from './mobileCmponent'
+const getTimeList = [
+  { key: 1, text: '立即生效' },
+  { key: 2, text: '次日生效' }
+]
 export default class adduserinfo extends React.Component {
   constructor(props) {
     super(props)
@@ -53,13 +57,14 @@ export default class adduserinfo extends React.Component {
         early_notifier: [], //'预警通知人',
         create_time: '', // '创建时间',
         creator: '', // '创建人,
-        addNew: '', //加款
         receive_number: '', //领取个数
         receive_type: '1', //领取类型
         usable_time: '', //可用时间
         fixed_time: '', //固定时间
         timer: '', //领取时间段
-        timer_type: '2' //领取时间段类型
+        timer_type: '2', //领取时间段类型
+        effect_date_type: '', //生效日期类型
+        effect_date: '' //生效日期
       },
       cur_product: {},
       productOption: [],
@@ -193,6 +198,14 @@ export default class adduserinfo extends React.Component {
           Notify.error('面额必须大于立减金额')
           return false
         }
+        if (this.state.model.money > this.state.model.all_budget) {
+          Notify.error('批次充值金额必须小于总预算')
+          return false
+        }
+        if (this.state.model.denomination > this.state.model.all_budget) {
+          Notify.error('面额必须小于总预算')
+          return false
+        }
 
         //缓存
         let temp = []
@@ -378,14 +391,20 @@ export default class adduserinfo extends React.Component {
                 width={'520px'}
                 alignment={'left'}
               />
-              {this.state.model.id ? (
+              {/* {this.state.model.id ? (
                 <Button
                   onClick={(e) => {
                     this.setState({ visible: true })
                   }}>
                   加款
                 </Button>
-              ) : null}
+              ) : null} */}
+              <Button
+                onClick={(e) => {
+                  this.setState({ visible: true })
+                }}>
+                加款
+              </Button>
             </FormItem>
           </Form>
         </Card>
@@ -636,24 +655,28 @@ export default class adduserinfo extends React.Component {
                   }}>
                   <Radio value='1'>领取后</Radio>
                 </RadioGroup>
-                <div className='zent-demo-select-basic'>
+                <div className='zent-demo-select-basic select-basic'>
                   <Select
-                    width='120px'
                     clearable
-                    options={[]}
+                    options={getTimeList}
                     placeholder='选择一项'
+                    onChange={(value) => {
+                      this.onInputChange(value, 'effect_date_type')
+                    }}
+                    value={this.state.model.effect_date_type}
+                    className='select-basic'
                     // disabled={this.props?.data?.id ? true : false}
                   />
                 </div>
                 <Ipt
                   onChange={(value) => {
-                    this.onInputChange(value, 'product_name')
+                    this.onInputChange(value, 'effect_date')
                   }}
                   onClearItem={() => {
-                    this.onInputChange('', 'product_name')
+                    this.onInputChange('', 'effect_date')
                   }}
                   // disabled={this.props?.data?.id ? true : false}
-                  value={this.state.model.product_name}
+                  value={this.state.model.effect_date}
                   placeholder={'请输入'}
                   labelWidth={'0px'}
                   maxLength={16}
@@ -661,7 +684,7 @@ export default class adduserinfo extends React.Component {
                   height={'36px'}
                   unit='天'
                   countShow={false}
-                  width={'292px'}
+                  width={'172px'}
                   alignment={'left'}
                 />
               </div>
@@ -792,10 +815,10 @@ export default class adduserinfo extends React.Component {
             onClose={() => this.setState({ visible: false })}
             title='加款'>
             <AddNewDialog
-              data={''}
-              onChangeMoney={(isVisible, data) => {
+              data={this.state.model}
+              onChangeMoney={(isVisible, data = 0) => {
                 const models = this.state.model
-                models.addNew = data
+                models.money = data + Number(models.money)
                 this.setState({ visible: isVisible, model: models })
               }}
             />