salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/socialSecurityForm.js

import React from 'react'
import GroupCard from '../../../components/groupCard'
import { Row, Col, Select } from 'antd';
import { WeaDatePicker, WeaInput, WeaCheckbox } from 'ecCom';
import { inject, observer } from 'mobx-react';
import "./index.less"
import ItemMangeFormModal from '../../dataAcquisition/attendance/itemMangeFormModal';

const { Option } = Select

@inject('archivesStore')
@observer
export default class SocialSecurityForm extends React.Component {
    componentWillMount() {
        const { archivesStore } = this.props;
        const { getBaseForm, getPaymentForm } = archivesStore
        getBaseForm(this.props.employeeId, "SOCIAL_SECURITY")
        getPaymentForm(this.props.employeeId, "SOCIAL_SECURITY", this.props.record.siSchemeId)
    }

    // 表单变化
    handleFormChange(params) {
        const { archivesStore: { socialSecurityForm, setSocialSecurityForm }} = this.props;
        const { data } = socialSecurityForm
        let request = {...data, ...params}
        let form = {...socialSecurityForm}
        form.data = request
        setSocialSecurityForm(form)
    }

    // 获取基数表单
    handleFetchPaymentForm(value) {
        console.log("SOCIAL_SECURITY:", value);
        const { archivesStore: { getPaymentForm }} = this.props;
        getPaymentForm(this.props.employeeId, "SOCIAL_SECURITY", value)
    }

    //基数变化
    handlePaymentChange(params) {
        const { archivesStore: { socialSecurityPaymentForm, setSocialSecurityPaymentForm }} = this.props;
        const { data } = socialSecurityPaymentForm
        let request = {...data, ...params}
        let form = {...socialSecurityPaymentForm}
        form.data = request
        setSocialSecurityPaymentForm(form)
    }

    render() {
        const { archivesStore: { socialSecurityForm, socialSecurityPaymentForm }} = this.props;
        const { items } = socialSecurityForm
        let baseData = socialSecurityForm.data
        let paymentData  = socialSecurityPaymentForm.data
        let paymentItems = socialSecurityPaymentForm.items
        // Integer数据转为string
        let data = {...baseData}
        if(data) {
            Object.keys(data).map(key => {
                if(data[key]) {
                    data[key] = data[key].toString()
                }
            })
        }
        
        return (
            <div className="socialFormWrapper">
                <div style={{overflow: "hidden"}}>
                    <WeaCheckbox style={{float: "right", marginRight: "10px", marginTop: "10px"}} value={data && data.nonPayment} id="nonPayment" content="暂不缴纳" onChange={(value) => {this.handleFormChange({nonPayment: value})}} />
                </div>
                <GroupCard title="社保基础信息" >
                    <Row>
                        <Col span={6} className="formItem">社保起始缴纳月：</Col>
                        <Col span={6} className="formItem">
                            <WeaDatePicker
                                format="yyyy-MM"
                                value={data && data.socialStartTime}
                                onChange={value => this.handleFormChange({socialStartTime: value})}
                            />
                        </Col>
                        <Col span={6} className="formItem">社保最后缴纳月：</Col>
                        <Col span={6} className="formItem">
                            <WeaDatePicker
                                format="yyyy-MM"
                                value={data && data.socialEndTime}
                                onChange={value => this.handleFormChange({socialEndTime: value})}
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6} className="formItem">社保方案名称：</Col>
                        <Col span={6} className="formItem">
                            <Select defaultValue={data && data.socialName} value={data && data.socialName} style={{ width: "100%" }} onChange={(value) => { 
                                this.handleFormChange({socialName: value})
                                this.handleFetchPaymentForm(value)
                            }}>
                                {
                                    items && items[0].items &&items[0].items[0] && items[0].items[0].options.map(item => (
                                        <Option value={item.key}>{item.showname}</Option>
                                    ))
                                }
                            </Select>
                        </Col>
                        <Col span={6} className="formItem">社保账号：</Col>
                        <Col span={6} className="formItem">
                            <WeaInput value={data && data.schemeAccount} onChange={(value) => {this.handleFormChange({schemeAccount: value})}}/>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6} className="formItem">社保缴纳组织：</Col>

                        <Col span={6} className="formItem">
                            <Select defaultValue={data && data.paymentOrganization} value={data && data.paymentOrganization} style={{ width: "100%" }} onChange={(value) => this.handleFormChange({paymentOrganization: value})}>
                                {
                                    items && items[0].items &&items[0].items[1] && items[0].items[1].options.map(item => (
                                        <Option value={item.key}>{item.showname}</Option>
                                    ))
                                }
                            </Select>
                        </Col>
                        <Col span={6} className="formItem">社保个人实际承担方：</Col>
                        <Col span={6} className="formItem">
                            <Select defaultValue={data && data.underTake} value={data && data.underTake} style={{ width: "100%" }} onChange={
                                (value) => {
                                    this.handleFormChange({underTake: value})
                                    this.handleFetchPaymentForm(value)
                            }}>
                                {
                                    items && items[0].items &&items[0].items[2] && items[0].items[2].options.map(item => (
                                        <Option value={item.key}>{item.showname}</Option>
                                    ))
                                }
                            </Select>
                        </Col>
                    </Row>
                </GroupCard>

                {
                    paymentItems  && paymentItems.map(group => (
                        <div>
                            {
                                group.items && group.items.length > 0 && <GroupCard title={group.title} >
                                <Row>
                                {
                                    group.items && group.items.map(item => (
                                        <Col span={12}>
                                            <Row>
                                                <Col span={12} className="formItem">{item.label}：</Col>
                                                <Col span={12} className="formItem">
                                                    <WeaInput 
                                                        type="number"
                                                        value={ paymentData && paymentData[item.domkey[0]]} onChange={(value) => {
                                                            this.handlePaymentChange({[item.domkey[0]]: value})
                                                        }}
                                                    />
                                                    
                                                </Col>
                                            </Row>
                                        </Col>
                                    ))
                                }
                                </Row>
                            </GroupCard>
                            }
                        </div>
                        
                    ))
                }
            </div>
        )
    }
}