salary-management-front/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js

import React from 'react'
import { Row, Col } from 'antd'
import { WeaSelect, WeaTextarea, WeaInput, WeaCheckbox } from "ecCom"
import "./index.less"
import TipLabel from '../../components/TipLabel'
import { daysOptions, cycleTypeOption } from './options'
import { inject, observer } from 'mobx-react';
import RequiredLabelTip from "../../components/requiredLabelTip"
import { getCurrentYearMonth, getCurrentMonth, getSubtractMonthYearMonth, getAddMonthYearMonth} from '../../util/date'

@inject('ledgerStore')
@observer
export default class SlideBaseForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: "",
            taxableItems: 1
        }
    }
    componentWillMount() {
        const { edit } = this.props;
        const { ledgerStore: {initBaseInfoRequest}} = this.props;
        if(edit) {
            const { ledgerStore: { getLedgerBasicForm }} = this.props;
            getLedgerBasicForm()
        } else {
            initBaseInfoRequest();
        }
    }

    handleChange(params) {
        const { ledgerStore: {baseInfoRequest, setBaseInfoRequest}} = this.props;
        let request= {...baseInfoRequest}
        Object.keys(params).map(key => {
            request[key] = params[key]
        })
        setBaseInfoRequest(request)
    }

    // 获取开始日期
    getStartDate(salaryCycleType, day) {
        day = Number(day)
        return this.getMonth(salaryCycleType) + "-" + (day < 10 ? "0" + day : day)
    }

    // 获取开始月份
    getMonth(salaryCycleType) {
        switch(salaryCycleType) {
            case "1": // 上上月
                return getSubtractMonthYearMonth(2) 
            case "2": //  上月
                return getSubtractMonthYearMonth(1) 
            case "3": // 本月
                return getCurrentYearMonth() 
            case "4": // 下月
                return getAddMonthYearMonth(1) 
        }
    }

    render() {
        const { request, ledgerStore } = this.props;
        const { baseInfoRequest } = ledgerStore;
        const { name, taxableItems, salaryCycleType, salaryCycleFromDay,
        taxCycleType, attendCycleType, attendCycleFromDay, socialSecurityCycleType,
        description} = baseInfoRequest
        return (
            <div className="slideBaseForm">
                <Row>
                    <Col span={18}>
                        <div className="leftContentWrapper">
                            <Row className="formItem">
                                <Col span={6}>账套名称<RequiredLabelTip /></Col>
                                <Col span={18}>
                                    <WeaInput style={{width: "190px"}} value={name} onChange={(value) => {this.handleChange({name: value})}}/>
                                </Col>
                            </Row>
                            <Row className="formItem">
                                <Col span={6}>薪资类型<RequiredLabelTip /></Col>
                                <Col span={18}>
                                    <WeaSelect options={[{
                                        key: "1",
                                        selected: true,
                                        showname: "正常工资薪金所得"
                                    }]} style={{width: "190px"}} value={taxableItems} onChange={(value) => {this.handleChange({taxableItems: value})}}/>
                                </Col>
                            </Row>
                            <Row className="formItem">
                                <Col span={6}>薪资周期<RequiredLabelTip /></Col>
                                <Col span={18}>
                                    <WeaSelect options={cycleTypeOption} style={{width: "90px"}} value={salaryCycleType} onChange={(value) => {this.handleChange({salaryCycleType: value})}}/>
                                    <WeaSelect options={daysOptions} style={{width: "90px", marginLeft: '10px'}} value={salaryCycleFromDay} onChange={(value) => {this.handleChange({salaryCycleFromDay: value})}}/>
                                    <span style={{marginLeft: "10px"}}>至本月最后一天</span>
                                </Col>
                            </Row>
                            <Row className="formItem">
                                <Col span={6}>税款所属期<RequiredLabelTip /></Col>
                                <Col span={18}>
                                    <WeaSelect options={cycleTypeOption} style={{width: "90px"}} value={taxCycleType} onChange={(value) => {this.handleChange({taxCycleType: value})}}/>
                                </Col>
                            </Row>
                            <Row className="formItem">
                                <Col span={6}>考勤周期<RequiredLabelTip /></Col>
                                <Col span={18}>
                                    <WeaSelect options={cycleTypeOption} style={{width: "90px"}} value={attendCycleType} onChange={(value) => {this.handleChange({attendCycleType: value})}}/>
                                    <WeaSelect options={daysOptions} style={{width: "90px", marginLeft: "10px"}} value={attendCycleFromDay} onChange={(value) => {this.handleChange({attendCycleFromDay: value})}}/>
                                    <span style={{marginLeft: "10px"}}>至本月最后一天</span>
                                </Col>
                            </Row>
                            <Row className="formItem">
                                <Col span={6}>福利台账月份<RequiredLabelTip /></Col>
                                <Col span={18}>
                                    <WeaSelect options={cycleTypeOption} style={{width: "90px"}} value={socialSecurityCycleType} onChange={(value) => {this.handleChange({socialSecurityCycleType: value})}}/>
                                </Col>
                            </Row>

                            <Row className="formItem">
                                <Col span={6}>核算人员范围<RequiredLabelTip /></Col>
                                <Col span={18}>
                                    <WeaCheckbox value={true} viewAttr={1} content="【入职日期≤薪资周期止】且【离职日期≥薪资周期起】" />
                                </Col>
                            </Row>
                            <Row className="formItem">
                                <Col span={6}>备注</Col>
                                <Col span={18}>
                                <WeaTextarea style={{width: "190px"}} value={description} onChange={(value) => {this.handleChange({description: value})}} />
                                </Col>
                            </Row>
                        </div>
                    </Col>
                    <Col span={6}>
                        <div className="rightContentWrapper">
                            <TipLabel title="月份周期说明">
                                <p className="greytip">例：薪资所属月是<span className="higelinered">{getCurrentYearMonth()}</span>（即核算员工<span className="higelinered">{getCurrentMonth()}</span>月的工资）</p>
                                <p className="greytip">根据您当前的选择，相应的周期为：</p>
                                <div className="tipLabel">薪资周期</div>
                                <p className="greytip"><span className="higelinered">{this.getStartDate(salaryCycleType, salaryCycleFromDay)}</span>至<span className="higelinered">{this.getMonth(salaryCycleType)}-30</span></p>
                                <div className="tipLabel">税款所属期</div>
                                <p className="greytip higelinered">{this.getMonth(taxCycleType)}</p>
                                <div className="tipLabel">考勤取值周期</div>
                                <p className="greytip"><span className="higelinered">{this.getStartDate(attendCycleType, attendCycleFromDay)}</span>至<span className="higelinered">{this.getMonth(attendCycleType)}-30</span></p>
                                <div className="tipLabel">福利台账月份</div>
                                <p className="greytip">引用<span className="higelinered">{this.getMonth(socialSecurityCycleType)}</span>的福利台账数据</p>
                            </TipLabel>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}