320 lines
11 KiB
JavaScript
320 lines
11 KiB
JavaScript
import React from "react";
|
||
import { Row, Col } from "antd";
|
||
import { toJS } from "mobx";
|
||
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";
|
||
import RequiredLabelTip from "../../components/requiredLabelTip";
|
||
import {
|
||
getCurrentYearMonth,
|
||
getCurrentMonth,
|
||
getSubtractMonthYearMonth,
|
||
getAddMonthYearMonth,
|
||
} from "../../util/date";
|
||
|
||
@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);
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { request, ledgerStore, taxAgentStore, edit } = this.props;
|
||
const { baseInfoRequest } = ledgerStore;
|
||
const { taxAgentOption } = taxAgentStore;
|
||
const {
|
||
canEdit = "true",
|
||
name,
|
||
taxAgentId,
|
||
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}>
|
||
账套名称
|
||
<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={canEdit !== "true" || (taxAgentId ? edit : false)}
|
||
showSearch // 设置select可搜索
|
||
style={{ width: 190 }}
|
||
options={taxAgentOption}
|
||
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: "正常工资薪金所得",
|
||
},
|
||
]}
|
||
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" }}>至本月最后一天</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" }}>至本月最后一天</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">
|
||
{this.getMonth(salaryCycleType)}-30
|
||
</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">
|
||
{this.getMonth(attendCycleType)}-30
|
||
</span>
|
||
</p>
|
||
<div className="tipLabel">福利台账月份</div>
|
||
<p className="greytip">
|
||
引用
|
||
<span className="higelinered">
|
||
{this.getMonth(socialSecurityCycleType)}
|
||
</span>
|
||
的福利台账数据
|
||
</p>
|
||
</TipLabel>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
}
|
||
}
|