165 lines
7.6 KiB
JavaScript
165 lines
7.6 KiB
JavaScript
import React from 'react'
|
||
import { inject, observer } from 'mobx-react';
|
||
import { Row, Col, Select } from 'antd'
|
||
import { WeaDatePicker, WeaInput, WeaCheckbox } from "ecCom";
|
||
import GroupCard from '../../../components/groupCard'
|
||
import "./index.less"
|
||
const { Option } = Select
|
||
|
||
@inject('archivesStore')
|
||
@observer
|
||
export default class OtherForm extends React.Component {
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
inited: false
|
||
}
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { archivesStore: { getBaseForm, getPaymentForm}} = this.props;
|
||
getBaseForm(this.props.employeeId, "OTHER");
|
||
getPaymentForm(this.props.employeeId, "OTHER", this.props.record.otherSchemeId)
|
||
}
|
||
|
||
// 获取基数表单
|
||
handleFetchPaymentForm(value) {
|
||
const { archivesStore: { getPaymentForm }} = this.props;
|
||
getPaymentForm(this.props.employeeId, "OTHER", value)
|
||
}
|
||
|
||
// 表单变化
|
||
handleFormChange(params) {
|
||
const { archivesStore: { otherForm, setOtherForm }} = this.props;
|
||
const { data } = otherForm
|
||
let request = {...data, ...params}
|
||
let form = {...otherForm}
|
||
form.data = request
|
||
setOtherForm(form)
|
||
}
|
||
|
||
//基数变化
|
||
handlePaymentChange(params) {
|
||
const { archivesStore: { otherPaymentForm, setOtherPaymentForm }} = this.props;
|
||
const { data } = otherPaymentForm
|
||
let request = {...data, ...params}
|
||
let form = {...otherPaymentForm}
|
||
form.data = request
|
||
setOtherPaymentForm(form)
|
||
}
|
||
|
||
render() {
|
||
const { archivesStore: { otherForm, otherPaymentForm }} = this.props;
|
||
const { items } = otherForm
|
||
let baseData = otherForm.data
|
||
let data = {...baseData}
|
||
let paymentData = otherPaymentForm.data
|
||
let paymentItems = otherPaymentForm.items
|
||
// Integer数据转为string
|
||
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.otherStartTime}
|
||
onChange={value => this.handleFormChange({otherStartTime: value})}
|
||
/>
|
||
</Col>
|
||
<Col span={6} className="formItem">其他福利最后缴纳月：</Col>
|
||
<Col span={6} className="formItem">
|
||
<WeaDatePicker
|
||
format="yyyy-MM"
|
||
value={data && data.otherEndTime}
|
||
onChange={value => this.handleFormChange({otherEndTime: value})}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
<Row>
|
||
<Col span={6} className="formItem">其他福利方案名称：</Col>
|
||
<Col span={6} className="formItem">
|
||
<Select defaultValue={data && data.otherName} value={data && data.otherName} style={{ width: "100%" }} onChange={(value) => {
|
||
this.handleFormChange({otherName: 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>
|
||
</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})}>
|
||
{
|
||
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>
|
||
{
|
||
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>
|
||
|
||
))
|
||
}
|
||
</GroupCard>
|
||
</div>
|
||
)
|
||
}
|
||
} |