129 lines
7.1 KiB
JavaScript
129 lines
7.1 KiB
JavaScript
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';
|
||
|
||
@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)
|
||
}
|
||
|
||
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}>账套名称</Col>
|
||
<Col span={18}>
|
||
<WeaInput style={{width: "190px"}} value={name} onChange={(value) => {this.handleChange({name: value})}}/>
|
||
</Col>
|
||
</Row>
|
||
<Row className="formItem">
|
||
<Col span={6}>薪资类型</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}>薪资周期</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}>税款所属期</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}>考勤周期</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}>福利台账月份</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}>核算人员范围</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">例：薪资所属月是2021-11（即核算员工11月的工资）</p>
|
||
<p className="greytip">根据您当前的选择，相应的周期为：</p>
|
||
<div className="tipLabel">薪资周期</div>
|
||
<p className="greytip"><span className="higelinered">2021-11-01</span>至<span className="higelinered">2021-11-30</span></p>
|
||
<div className="tipLabel">税款所属期</div>
|
||
<p className="greytip higelinered">2021-12</p>
|
||
<div className="tipLabel">考勤取值周期</div>
|
||
<p className="greytip"><span className="higelinered">2021-11-01</span>至<span className="higelinered">2021-11-30</span></p>
|
||
<div className="tipLabel">福利台账月份</div>
|
||
<p className="greytip">引用<span className="higelinered">2021-11</span>的福利台账数据</p>
|
||
</TipLabel>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
)
|
||
}
|
||
} |