合同金额自动计算
- 如下图. 进入页面的时候合同金额默认值为系统自动计算
- 在有行信息的时候. 需要把金额累加. 给合同金额赋值.
实现思路:
1: 通过 props 传值,2: 通过 reduce 计算总金额,3: 通过 form.setFieldsValue 方法. 给合同金额赋值
// 父组件页面: 父组件调用子组件的时候. 给子组件一个方法. 用来接收子组件的返回值
render(
<TableForm
...
handleTotal={value =>this.handleTotal(value)}
/>
)
// 子组件页面: 子组件每次新增行信息后都会调用一次获取行信息列表的方法, 在这里把返回值直接给到父组件
getList = () => {const { queryAll} = this.props;
queryAll({contractNum: this.props.contractNum}, res => {const { handleTotal} = this.props;
handleTotal && handleTotal(res);
this.setState({data: res});
});
};
// 父组件页面: 调用给到子组件的方法. 获取行项目总金额
handleTotal = value => {const total = value.reduce((total, item) => total + Number(item.totalPrice), 0)
.toFixed(2);
this.props.form.setFieldsValue({contractMoney:total})
}
通过三目判断和 form.getFieldValue 方法判断合同金额是否展示默认值
<Col md={8} sm={24}>
<Form.Item label="合同金额">
{getFieldDecorator('contractMoney', {initialValue: form.getFieldValue('contractMoney') === undefined ? '系统自动计算' : form.getFieldValue('contractMoney'),
rules: [{required: true}],
})(<Input placeholder="请填写" disabled />)}
</Form.Item>
</Col>