salary-management-front/pc4mobx/hrmSalary/pages/ledger/step4/RuleEditModal.js

import React from 'react'
import { Row, Col, Radio, Button, Modal, message } from 'antd'
import { WeaSelect, WeaHelpfulTip} from 'ecCom'
import { inject, observer } from 'mobx-react';
import {daysOptions} from "../options"
import RequiredLabelTip from '../../../components/requiredLabelTip';
import { notNull } from '../../../util/validate';


@inject('ledgerStore')
@observer
export default class RuleEditModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            itemValue: "",
            effectiveDate: "",
            beforeAdjustmentType: 1,
            afterAdjustmentType: 1,
            initedSelect: false
        }
    }

    componentWillMount() {
        const { ledgerStore: {listSalarySobItem}} = this.props;
        listSalarySobItem().then(() => {
            this.setState({
                initedSelect: true
            })
        })
    }

    beforeAdjustmentTypeChange(e) {
        this.setState({beforeAdjustmentType: e.target.value})
    }

    afterAdjustmentTypeChange(e) { 
        this.setState({afterAdjustmentType: e.target.value})
    }

    validateForm() {
        const {itemValue, effectiveDate, beforeAdjustmentType, afterAdjustmentType} = this.state;
        if(!notNull(itemValue)) {
            message.warning("薪资项目不能为空")
            return false;
        }

        if(!notNull(effectiveDate)) {
            message.warning("计薪规则不能为空")
            return false;
        }

        if(!notNull(beforeAdjustmentType)) {
            message.warning("计薪规则不能为空")
            return false;
        }

        if(!notNull(afterAdjustmentType)) {
            message.warning("计薪规则不能为空")
            return false;
        }

        return true;
    }
    
    handleSave() {
        if(!this.validateForm()) {
            return;
        }
        const { ledgerStore } = this.props;
        const { ruleOptionList } = ledgerStore;
        let salaryItemName = ""
        ruleOptionList.map(item => {
            if(item.key == this.state.itemValue) {
                salaryItemName = item.showname
            }
        })

        this.props.onSave({
            salaryItemId:this.state.itemValue,
            dayOfMonth:this.state.effectiveDate,
            beforeAdjustmentType:this.state.beforeAdjustmentType,
            afterAdjustmentType: this.state.afterAdjustmentType,
            salaryItemName
        })

        this.props.onCancel()
    }
    render() {
        const { ledgerStore } = this.props;
        const { ruleOptionList } = ledgerStore;
        const { beforeAdjustmentType, afterAdjustmentType, initedSelect } = this.state
        return (
            <Modal visible={this.props.visible} onCancel={() => {this.props.onCancel()}} width={800} 
                footer={<Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>}
                title="调薪计薪规则项"
            >
                <div style={{padding: '20px'}}>
                    <Row style={{lineHeight: '40px'}}>
                        <Col span={8}>薪资项目<RequiredLabelTip /></Col>
                        <Col span={16}>
                            {
                                initedSelect && 
                                <WeaSelect style={{width: "200px"}} options={ruleOptionList} value={this.state.itemValue} onChange={(value) => {this.setState({itemValue: value})} } />
                            }
                        </Col>
                    </Row>
                    <Row style={{lineHeight: "40px"}}>
                        <Col span={8}>计薪规则<RequiredLabelTip /></Col>
                        <Col span={16}>
                            <div>
                            <WeaHelpfulTip
                                style={{marginLeft: '10px'}}
                                width={200}
                                title="该规则适用于一个薪资核算周期内只调整一次薪资或个税扣缴义务人的情况，其他情况默认按照分段计薪规则核算"
                                placement="topLeft"
                            />
                            如果：调薪生效日期在
                            <WeaSelect style={{width: '100px'}} options={daysOptions} value={this.state.effectiveDate} onChange={(value) => {this.setState({effectiveDate: value})}}/>

                            （含）之前
                            
                            </div>

                            <div>
                            计薪规则为：
                            <Radio.Group onChange={(value) => {this.beforeAdjustmentTypeChange(value)}} value={beforeAdjustmentType}>
                                <Radio value={1}>取调整后薪资</Radio>
                                <Radio value={2}>分段计薪<WeaHelpfulTip
                                    style={{marginLeft: "10px"}}
                                    width={200}
                                    title="=调整前薪资/当月自然日天数*调整前自然日天数+调整后薪资/当月自然日天数*调整后自然日天数"
                                    placement="topLeft"
                                /></Radio>
                                <Radio value={3}>取平均<WeaHelpfulTip
                                    style={{marginLeft:"10px"}}
                                    width={200}
                                    title="=（调整前薪资+调整后薪资）/2"
                                    placement="topLeft"
                                />
                                </Radio>
                            </Radio.Group>
                            </div>
                            <div>
                                否则：调薪生效日期在 {this.state.effectiveDate} 号之后
                            </div>
                            <div>
                                计薪规则为：
                                <Radio.Group onChange={(value) => {this.afterAdjustmentTypeChange(value)}} value={afterAdjustmentType}>
                                    <Radio value={1}>取调整前薪资</Radio>
                                    <Radio value={2}>分段计薪<WeaHelpfulTip
                                        style={{marginLeft: "10px"}}
                                        width={200}
                                        title="=调整前薪资/当月自然日天数*调整前自然日天数+调整后薪资/当月自然日天数*调整后自然日天数"
                                        placement="topLeft"
                                    /></Radio>
                                    <Radio value={3}>取平均<WeaHelpfulTip
                                        style={{marginLeft: "10px"}}
                                        width={200}
                                        title="=（调整前薪资+调整后薪资）/2"
                                        placement="topLeft"
                                    />
                                    </Radio>
                                </Radio.Group>
                            </div>
                        </Col>
                    </Row>
                </div>
            </Modal>
        )
    }
}