159 lines
7.7 KiB
JavaScript
159 lines
7.7 KiB
JavaScript
import React from 'react'
|
||
import { inject, observer } from 'mobx-react';
|
||
import { Row, Col, Select } from 'antd'
|
||
import { WeaDatePicker, WeaInput } from 'ecCom'
|
||
import GroupCard from '../../../components/groupCard'
|
||
import "./index.less"
|
||
|
||
@inject('archivesStore')
|
||
@observer
|
||
export default class AccumulationFundForm extends React.Component {
|
||
|
||
componentWillMount() {
|
||
const { archivesStore: { getBaseForm }} = this.props;
|
||
getBaseForm(this.props.employeeId, "ACCUMULATION_FUND");
|
||
}
|
||
|
||
// 表单变化
|
||
handleFormChange(params) {
|
||
const { archivesStore: { socialSecurityForm, setSocialSecurityForm }} = this.props;
|
||
const { data } = socialSecurityForm
|
||
let request = {...data, ...params}
|
||
let form = {...socialSecurityForm}
|
||
form.data = request
|
||
setSocialSecurityForm(form)
|
||
}
|
||
|
||
|
||
//基数变化
|
||
handlePaymentChange(params) {
|
||
const { archivesStore: { accumulationFundPaymentForm, setAccumulationFundPaymentForm }} = this.props;
|
||
const { data } = accumulationFundPaymentForm
|
||
let request = {...data, ...params}
|
||
let form = {...accumulationFundPaymentForm}
|
||
form.data = request
|
||
setAccumulationFundPaymentForm(form)
|
||
}
|
||
|
||
render() {
|
||
const { archivesStore: { accumulationFundForm, accumulationFundPaymentForm }} = this.props;
|
||
const { items } = accumulationFundForm
|
||
let baseData = accumulationFundForm.data
|
||
let paymentData = accumulationFundPaymentForm.data
|
||
let paymentItems = accumulationFundPaymentForm.items
|
||
let data = {...baseData}
|
||
// Integer数据转为string
|
||
if(data) {
|
||
Object.keys(data).map(key => {
|
||
if(data[key]) {
|
||
data[key] = data[key].toString()
|
||
}
|
||
})
|
||
}
|
||
return (
|
||
<div className="socialFormWrapper">
|
||
<GroupCard title="公积金基础信息" >
|
||
<Row>
|
||
<Col span={6} className="formItem">公积金起始缴纳月：</Col>
|
||
<Col span={6} className="formItem">
|
||
<WeaDatePicker
|
||
format="yyyy-MM"
|
||
value={data && data.fundStartTime}
|
||
onChange={value => this.handleFormChange({fundStartTime: value})}
|
||
/>
|
||
|
||
</Col>
|
||
<Col span={6} className="formItem">公积金最后缴纳月：</Col>
|
||
<Col span={6} className="formItem">
|
||
<WeaDatePicker
|
||
format="yyyy-MM"
|
||
value={data && data.fundEndTime}
|
||
onChange={value => this.handleFormChange({fundEndTime: value})}
|
||
/>
|
||
|
||
</Col>
|
||
</Row>
|
||
<Row>
|
||
<Col span={6} className="formItem">公积金方案名称：</Col>
|
||
<Col span={6} className="formItem">
|
||
<Select defaultValue={data && data.fundName} value={data && data.fundName} style={{ width: 150 }} onChange={(value) => this.handleFormChange({fundName: 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>
|
||
</Row>
|
||
<Row>
|
||
<Col span={6} className="formItem">公积金账号：</Col>
|
||
<Col span={6} className="formItem">
|
||
<WeaInput value={data && data.fundAccount} onChange={(value) => this.handleFormChange({fundAccount: value})} />
|
||
|
||
</Col>
|
||
<Col span={6} className="formItem">补充公积金账号：</Col>
|
||
<Col span={6} className="formItem">
|
||
<WeaInput value={data && data.supplementFundAccount} onChange={(value) => this.handleFormChange({supplementFundAccount: 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: 150 }} 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: 150 }} onChange={(value) => this.handleFormChange({underTake: 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>
|
||
)
|
||
}
|
||
} |