377 lines
13 KiB
JavaScript
377 lines
13 KiB
JavaScript
import React from "react";
|
||
import {Col, Row} from "antd";
|
||
import {WeaCheckbox, WeaInput, WeaSelect, WeaTextarea} from "ecCom";
|
||
import "./index.less";
|
||
import TipLabel from "../../components/TipLabel";
|
||
import {cycleTypeOption, daysOptions} from "./options";
|
||
import {inject, observer} from "mobx-react";
|
||
import RequiredLabelTip from "../../components/requiredLabelTip";
|
||
import {getAddMonthYearMonth, getCurrentMonth, getCurrentYearMonth, getSubtractMonthYearMonth} from "../../util/date";
|
||
import moment from "moment";
|
||
|
||
@inject("ledgerStore", "taxAgentStore")
|
||
@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);
|
||
}
|
||
}
|
||
|
||
initPeriodStr = (periodStrType, type, fromDay) => {
|
||
let str = "", tmpDate = null;
|
||
switch (type) {
|
||
case "1":
|
||
tmpDate = moment().subtract(2, "month");
|
||
const is_31H = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
|
||
if (fromDay == 1) {
|
||
tmpDate = moment().subtract(2, "month").endOf("month");
|
||
str = `至上上月最后一天`;
|
||
} else {
|
||
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
|
||
.add(is_31H ? 30 : 29, "days");
|
||
str = `至上月${moment(tmpDate).date()}号`;
|
||
}
|
||
break;
|
||
case "2":
|
||
tmpDate = moment().subtract(1, "month");
|
||
const is_31 = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
|
||
if (fromDay == 1) {
|
||
tmpDate = moment().subtract(1, "month").endOf("month");
|
||
str = `至上月最后一天`;
|
||
} else {
|
||
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
|
||
.add(is_31 ? 30 : 29, "days");
|
||
str = `至本月${moment(tmpDate).date()}号`;
|
||
}
|
||
break;
|
||
case "3":
|
||
tmpDate = moment().add(0, "month");
|
||
const is_31K = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
|
||
if (fromDay == 1) {
|
||
tmpDate = moment().endOf("month");
|
||
str = `至本月最后一天`;
|
||
} else {
|
||
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
|
||
.add(is_31K ? 30 : 29, "days");
|
||
str = `至下月${moment(tmpDate).date()}号`;
|
||
}
|
||
break;
|
||
case "4":
|
||
tmpDate = moment().add(1, "month");
|
||
const is_31L = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
|
||
if (fromDay == 1) {
|
||
tmpDate = moment().add(1, "month").endOf("month");
|
||
str = `至下月最后一天`;
|
||
} else {
|
||
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
|
||
.add(is_31L ? 30 : 29, "days");
|
||
str = `至下下月${moment(tmpDate).date()}号`;
|
||
}
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
return {
|
||
[periodStrType]: str,
|
||
date: moment(tmpDate).format("YYYY-MM-DD")
|
||
};
|
||
};
|
||
|
||
render() {
|
||
const {request, ledgerStore, taxAgentStore, edit} = this.props;
|
||
const {baseInfoRequest} = ledgerStore;
|
||
const {taxAgentAdminOption} = taxAgentStore;
|
||
const {
|
||
canEdit = "true",
|
||
name,
|
||
taxAgentId,
|
||
taxableItems,
|
||
salaryCycleType,
|
||
salaryCycleFromDay,
|
||
taxCycleType,
|
||
attendCycleType,
|
||
attendCycleFromDay,
|
||
socialSecurityCycleType,
|
||
description
|
||
} = baseInfoRequest;
|
||
const salaryCycleStrObj = this.initPeriodStr("salaryCycleStr", salaryCycleType, salaryCycleFromDay);
|
||
const attendCycleStrObj = this.initPeriodStr("attendCycleStr", attendCycleType, attendCycleFromDay);
|
||
return (
|
||
<div className="slideBaseForm">
|
||
<Row>
|
||
<Col span={18}>
|
||
<div className="leftContentWrapper">
|
||
<Row className="formItem">
|
||
<Col span={6}>
|
||
账套名称
|
||
<RequiredLabelTip/>
|
||
</Col>
|
||
<Col span={18}>
|
||
<WeaInput
|
||
disabled={canEdit !== "true"}
|
||
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
|
||
disabled={taxAgentId ? edit : false}
|
||
showSearch // 设置select可搜索
|
||
style={{width: 190}}
|
||
options={taxAgentAdminOption}
|
||
value={taxAgentId}
|
||
onChange={v => {
|
||
this.handleChange({taxAgentId: v});
|
||
}}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
<Row className="formItem">
|
||
<Col span={6}>
|
||
薪资类型
|
||
<RequiredLabelTip/>
|
||
</Col>
|
||
<Col span={18}>
|
||
<WeaSelect
|
||
disabled={canEdit !== "true"}
|
||
options={[
|
||
{
|
||
key: "1",
|
||
selected: true,
|
||
showname: "正常工资薪金所得"
|
||
},
|
||
{
|
||
key: "4",
|
||
selected: false,
|
||
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
|
||
disabled={canEdit !== "true"}
|
||
options={cycleTypeOption}
|
||
style={{width: "90px"}}
|
||
value={salaryCycleType}
|
||
onChange={value => {
|
||
this.handleChange({salaryCycleType: value});
|
||
}}
|
||
/>
|
||
<WeaSelect
|
||
disabled={canEdit !== "true"}
|
||
options={daysOptions}
|
||
style={{width: "90px", marginLeft: "10px"}}
|
||
value={salaryCycleFromDay}
|
||
onChange={value => {
|
||
this.handleChange({salaryCycleFromDay: value});
|
||
}}
|
||
/>
|
||
<span style={{marginLeft: "10px"}}>{salaryCycleStrObj.salaryCycleStr}</span>
|
||
</Col>
|
||
</Row>
|
||
<Row className="formItem">
|
||
<Col span={6}>
|
||
税款所属期
|
||
<RequiredLabelTip/>
|
||
</Col>
|
||
<Col span={18}>
|
||
<WeaSelect
|
||
disabled={canEdit !== "true"}
|
||
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
|
||
disabled={canEdit !== "true"}
|
||
options={cycleTypeOption}
|
||
style={{width: "90px"}}
|
||
value={attendCycleType}
|
||
onChange={value => {
|
||
this.handleChange({attendCycleType: value});
|
||
}}
|
||
/>
|
||
<WeaSelect
|
||
disabled={canEdit !== "true"}
|
||
options={daysOptions}
|
||
style={{width: "90px", marginLeft: "10px"}}
|
||
value={attendCycleFromDay}
|
||
onChange={value => {
|
||
this.handleChange({attendCycleFromDay: value});
|
||
}}
|
||
/>
|
||
<span style={{marginLeft: "10px"}}>{attendCycleStrObj.attendCycleStr}</span>
|
||
</Col>
|
||
</Row>
|
||
<Row className="formItem">
|
||
<Col span={6}>
|
||
福利台账月份
|
||
<RequiredLabelTip/>
|
||
</Col>
|
||
<Col span={18}>
|
||
<WeaSelect
|
||
disabled={canEdit !== "true"}
|
||
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
|
||
disabled={canEdit !== "true"}
|
||
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">
|
||
{salaryCycleStrObj.date}
|
||
</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">
|
||
{attendCycleStrObj.date}
|
||
</span>
|
||
</p>
|
||
<div className="tipLabel">福利台账月份</div>
|
||
<p className="greytip">
|
||
引用
|
||
<span className="higelinered">
|
||
{this.getMonth(socialSecurityCycleType)}
|
||
</span>
|
||
的福利台账数据
|
||
</p>
|
||
</TipLabel>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
}
|
||
}
|