salary-management-front/pc4mobx/hrmSalary/pages/calculateDetail/editSalaryDetail.js

import React from 'react'
import { WeaHelpfulTip, WeaInput } from "ecCom"
import { Row, Col } from 'antd'
import { inject, observer } from 'mobx-react';
import "./index.less"

@inject('calculateStore')
@observer
export default class EditSalaryDetail extends React.Component {
    componentWillMount() {
        const { calculateStore: {acctresultDetail}} = this.props;
        acctresultDetail(this.props.id)
    }

    handleItemValueChange(field, value, isInput) {
        const { calculateStore: { acctresultDetailForm, setAcctresultDetailForm }} = this.props;
        let form = {...acctresultDetailForm}
        if(isInput) {
            form.inputItems = acctresultDetailForm.inputItems.map(item => {
                item = {...item}
                if(item.salaryItemName == field) {
                   item.resultValue = value
                }
                return item;
            })
        } else {
            form.formulaItems = acctresultDetailForm.formulaItems.map(item => {
                item = {...item}
                if(item.salaryItemName == field) {
                   item.resultValue = value
                }
                return item;
            })
        }
        setAcctresultDetailForm(form)
    }


    render() {
        const { calculateStore: { acctresultDetailForm }} = this.props;
        return (
            <div className="editSalaryDetail">
                <div className="detailItemWrapper">
                    <div>
                        <span className="itemTitle">基本信息</span>
                        <WeaHelpfulTip
                            style={{marginLeft: "10px"}}
                            width={200}
                            title="根据账套设置显示"
                            placement="topLeft"
                        />
                    </div>

                    <div className="itemContent">
                        <Row classsName="itemRow">
                            {
                                acctresultDetailForm.employeeInfos && acctresultDetailForm.employeeInfos.map(item => {
                                    return (
                                        <Col span={8}>
                                            <Row>
                                                <Col span={12}>{item.fieldName}</Col>
                                                <Col span={12}>{item.fieldValue}</Col>
                                            </Row>
                                        </Col>
                                    )
                                })
                            }
                        </Row>
                    </div>
                </div>

                <div>
                    <div className="detailItemWrapper">
                        <span className="itemTitle">输入项</span>
                    </div>

                    <div className="itemContent">
                        <Row className="itemRow">
                            {
                                acctresultDetailForm.inputItems && acctresultDetailForm.inputItems.map(item => {
                                    return (
                                        <Col span={8}>
                                            <Row style={{paddingLeft:"10px", paddingRight: "10px"}}>
                                                <Col span={12}>{item.salaryItemName}</Col>
                                                <Col span={12}><WeaInput value={item.resultValue} onChange={(value) => {
                                                    this.handleItemValueChange(item.salaryItemName, value, true)
                                                }}/></Col>
                                            </Row>
                                        </Col>
                                    )
                                })
                            }
                            
                        </Row>
                    </div>
                </div>


                <div>
                    <div className="detailItemWrapper">
                        <span className="itemTitle">公式项</span>
                        <WeaHelpfulTip
                            style={{marginLeft: "10px"}}
                            width={200}
                            title="提示：修改后，若点击核算，将按照公式核算，覆盖修改的数据"
                            placement="topLeft"
                        />
                    </div>

                    <div className="itemContent">
                        <Row className="itemRow">
                            {
                                acctresultDetailForm.formulaItems && acctresultDetailForm.formulaItems.map(item => {
                                    return (
                                        <Col span={8}>
                                            <Row style={{paddingLeft:"10px", paddingRight: "10px"}}>
                                                <Col span={12}>{item.salaryItemName}</Col>
                                                <Col span={12}><WeaInput value={item.resultValue} onChange={(value) => {
                                                    this.handleItemValueChange(item.salaryItemName, value, false)
                                                }}/></Col>
                                            </Row>
                                        </Col>
                                    )
                                })
                            }
                        </Row>
                    </div>
                </div>
            </div>
        )
    }
}