313 lines
11 KiB
JavaScript
313 lines
11 KiB
JavaScript
/*
|
||
* Author: 黎永顺
|
||
* name: 薪资账套基本设置
|
||
* Description:
|
||
* Date: 2022/12/9
|
||
*/
|
||
import React, { Component } from "react";
|
||
import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaInput, WeaSelect, WeaTextarea } from "ecCom";
|
||
import { Col, Row } from "antd";
|
||
import { inject, observer } from "mobx-react";
|
||
import { baseSettingFormItem } from "../config";
|
||
import { getLedgerBasicForm } from "../../../apis/ledger";
|
||
import { getAddMonthYearMonth, getCurrentYearMonth, getSubtractMonthYearMonth } from "../../../util/date";
|
||
import moment from "moment";
|
||
import "./index.less";
|
||
|
||
@inject("taxAgentStore")
|
||
@observer
|
||
class LedgerBaseSetting extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
baseForm: baseSettingFormItem,
|
||
settingBaseInfo: {
|
||
name: "",
|
||
taxAgentId: "",
|
||
taxableItems: "1",
|
||
salaryCycleType: "3",
|
||
salaryCycleFromDay: "1",
|
||
taxCycleType: "3",
|
||
attendCycleType: "3",
|
||
attendCycleFromDay: "1",
|
||
socialSecurityCycleType: "3",
|
||
description: "",
|
||
canEdit: false
|
||
}
|
||
};
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.getTaxAgentSelectListAsAdmin();
|
||
if (this.props.visible && this.props.editId) {
|
||
this.getLedgerBasicForm(this.props.editId);
|
||
}
|
||
|
||
}
|
||
|
||
componentWillReceiveProps(nextProps, nextContext) {
|
||
if (nextProps.visible !== this.props.visible && nextProps.editId) {
|
||
this.getLedgerBasicForm(nextProps.editId);
|
||
}
|
||
if (nextProps.visible !== this.props.visible && !nextProps.editId) {
|
||
this.handleResetBaseInfo();
|
||
}
|
||
}
|
||
|
||
handleResetBaseInfo = () => {
|
||
this.setState({
|
||
settingBaseInfo: {
|
||
name: "",
|
||
taxAgentId: "",
|
||
taxableItems: "1",
|
||
salaryCycleType: "3",
|
||
salaryCycleFromDay: "1",
|
||
taxCycleType: "3",
|
||
attendCycleType: "3",
|
||
attendCycleFromDay: "1",
|
||
socialSecurityCycleType: "3",
|
||
description: "",
|
||
canEdit: "true"
|
||
}
|
||
});
|
||
};
|
||
getLedgerBasicForm = (id) => {
|
||
getLedgerBasicForm({ id }).then(({ status, data }) => {
|
||
if (status) {
|
||
const { basicForm } = data;
|
||
const { settingBaseInfo } = this.state;
|
||
let tmpV = {};
|
||
_.map(Object.keys(settingBaseInfo), key => {
|
||
tmpV[key] = !_.isNil(basicForm[key]) ? basicForm[key].toString() : "";
|
||
});
|
||
this.setState({
|
||
settingBaseInfo: {
|
||
...settingBaseInfo,
|
||
...tmpV
|
||
}
|
||
}, () => {
|
||
this.props.onSaveParams(this.state.settingBaseInfo);
|
||
});
|
||
}
|
||
});
|
||
};
|
||
getTaxAgentSelectListAsAdmin = () => {
|
||
const { taxAgentStore } = this.props;
|
||
const { getTaxAgentSelectListAsAdmin } = taxAgentStore;
|
||
getTaxAgentSelectListAsAdmin().then(({ status, data }) => {
|
||
if (status) {
|
||
const { baseForm } = this.state;
|
||
this.setState({
|
||
baseForm: _.map(baseForm, it => {
|
||
if (it.key === "taxAgentId") {
|
||
return {
|
||
...it,
|
||
options: _.map(data, it => ({ key: it.id, showname: it.content }))
|
||
};
|
||
}
|
||
return { ...it };
|
||
})
|
||
});
|
||
}
|
||
});
|
||
};
|
||
handleChangeField = (key, value) => {
|
||
const { onSaveParams } = this.props;
|
||
const { settingBaseInfo } = this.state;
|
||
this.setState({
|
||
settingBaseInfo: {
|
||
...settingBaseInfo,
|
||
[key]: value
|
||
}
|
||
}, () => {
|
||
onSaveParams(this.state.settingBaseInfo);
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const { editId } = this.props;
|
||
const { baseForm, settingBaseInfo } = this.state;
|
||
const { canEdit, taxAgentId } = settingBaseInfo;
|
||
let taxAgentIdDisabled = false, taxableItemsDisabled = false;
|
||
return (
|
||
<div className="baseSettingWrapper">
|
||
<Row gutter={20}>
|
||
<Col span={18} className="baseSettingLeft">
|
||
{
|
||
_.map(baseForm, item => {
|
||
const { key, label, type, options = [], children = [] } = item;
|
||
taxAgentIdDisabled = key === "taxAgentId" && taxAgentId;
|
||
taxableItemsDisabled = key === "taxableItems" && editId;
|
||
return <WeaFormItem
|
||
key={key} label={label}
|
||
labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}
|
||
>
|
||
{
|
||
type === "INPUT" ?
|
||
<WeaInput value={settingBaseInfo[key]} viewAttr={3} disabled={canEdit !== "true"}
|
||
onChange={(v) => this.handleChangeField(key, v)}/> :
|
||
type === "TEXTAREA" ?
|
||
<WeaTextarea value={settingBaseInfo[key]} disabled={canEdit !== "true"}
|
||
onChange={(v) => this.handleChangeField(key, v)}/> :
|
||
type === "CHECKBOX" ?
|
||
<React.Fragment>
|
||
<WeaCheckbox value={true} viewAttr={1}
|
||
content="【入职日期≤薪资周期止】且【离职日期≥薪资周期起】"/>
|
||
<WeaHelpfulTip width={200} title="提示：最后发薪日期为空，默认为无穷大" placement="topLeft"/>
|
||
</React.Fragment> :
|
||
type === "SELECT" ?
|
||
<WeaSelect value={settingBaseInfo[key]} options={options} viewAttr={3}
|
||
disabled={canEdit !== "true" || taxAgentIdDisabled || taxableItemsDisabled}
|
||
onChange={(v) => this.handleChangeField(key, v)}/> :
|
||
type === "CUSTOM" ?
|
||
<CustomSelect list={children} baseInfo={settingBaseInfo} inputStr={key}
|
||
onChange={(key, v) => this.handleChangeField(key, v)}/> : null
|
||
}
|
||
</WeaFormItem>;
|
||
})
|
||
}
|
||
</Col>
|
||
<Col span={6}><MonthCycleDesc {...settingBaseInfo}/></Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default LedgerBaseSetting;
|
||
|
||
const CustomSelect = (props) => {
|
||
const { list, baseInfo, onChange, inputStr } = props;
|
||
const { salaryCycleType, salaryCycleFromDay, attendCycleType, attendCycleFromDay, canEdit } = baseInfo;
|
||
const salaryCycleStrObj = initPeriodStr("inputStr", salaryCycleType, salaryCycleFromDay);
|
||
const attendCycleStrObj = initPeriodStr("inputStr", attendCycleType, attendCycleFromDay);
|
||
return <Row gutter={10} key={key}>
|
||
{
|
||
_.map(list, item => {
|
||
const { key, options = [] } = item;
|
||
return <Col span={6}>
|
||
<WeaSelect value={baseInfo[key]} options={options} viewAttr={3}
|
||
disabled={canEdit !== "true"}
|
||
onChange={(v) => onChange(key, v)}/>
|
||
</Col>;
|
||
})
|
||
}
|
||
<Col span={12}
|
||
className="desc">{inputStr === "salaryCycleStrObj" ? salaryCycleStrObj.inputStr : attendCycleStrObj.inputStr}</Col>
|
||
</Row>;
|
||
};
|
||
const MonthCycleDesc = (props) => {
|
||
const {
|
||
taxCycleType,
|
||
socialSecurityCycleType,
|
||
salaryCycleFromDay,
|
||
salaryCycleType,
|
||
attendCycleType,
|
||
attendCycleFromDay
|
||
} = props;
|
||
const salaryCycleStrObj = initPeriodStr("salaryCycleStr", salaryCycleType, salaryCycleFromDay);
|
||
const attendCycleStrObj = initPeriodStr("attendCycleStr", attendCycleType, attendCycleFromDay);
|
||
return <div className="baseSettingRight">
|
||
<div className="title">月份周期说明</div>
|
||
<div className="descContent">
|
||
<div>
|
||
例：薪资所属月是<span className="notice">{moment().format("YYYY-MM")}</span>（即核算员工<span
|
||
className="notice">{moment().format("MM")}</span>月的工资）
|
||
</div>
|
||
<div>根据您当前的选择，相应的周期为：</div>
|
||
<div className="descTitle">薪资周期</div>
|
||
<div>
|
||
<span className="notice">{getStartDate(salaryCycleType, salaryCycleFromDay)}</span>至
|
||
<span className="notice">{salaryCycleStrObj.date}</span>
|
||
</div>
|
||
<div className="descTitle">税款所属期</div>
|
||
<div className="notice">{getMonth(taxCycleType)}</div>
|
||
<div className="descTitle">考勤取值周期</div>
|
||
<div>
|
||
<span className="notice">{getStartDate(attendCycleType, attendCycleFromDay)}</span>至
|
||
<span className="notice">{attendCycleStrObj.date}</span>
|
||
</div>
|
||
<div className="descTitle">福利台账月份</div>
|
||
<div>引用<span className="notice">{getMonth(socialSecurityCycleType)}</span>的福利台账数据</div>
|
||
</div>
|
||
</div>;
|
||
};
|
||
|
||
// 获取开始日期
|
||
const getStartDate = (salaryCycleType, day) => {
|
||
day = Number(day);
|
||
return getMonth(salaryCycleType) + "-" + (day < 10 ? "0" + day : day);
|
||
};
|
||
|
||
const getMonth = (salaryCycleType) => {
|
||
switch (salaryCycleType) {
|
||
case "1": // 上上月
|
||
return getSubtractMonthYearMonth(2);
|
||
case "2": // 上月
|
||
return getSubtractMonthYearMonth(1);
|
||
case "3": // 本月
|
||
return getCurrentYearMonth();
|
||
case "4": // 下月
|
||
return getAddMonthYearMonth(1);
|
||
}
|
||
};
|
||
const initPeriodStr = (periodStrType, types, fromDay) => {
|
||
let str = "", tmpDate = null;
|
||
switch (types) {
|
||
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")
|
||
};
|
||
};
|