403 lines
13 KiB
JavaScript
403 lines
13 KiB
JavaScript
import React from "react";
|
||
import { WeaHelpfulTip, WeaInputNumber, WeaLocaleProvider, WeaSelect, WeaTab } from "ecCom";
|
||
import { Switch, Table } from "antd";
|
||
import { insertUpdateColumns } from "./columns";
|
||
import { inject, observer } from "mobx-react";
|
||
import PaymentPeriodModal from "./paymentPeriodModal";
|
||
import "./index.less";
|
||
import SchemeInfoForm from "./schemeInfoForm";
|
||
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
@inject("programmeStore", "salaryFileStore", "taxAgentStore")
|
||
@observer
|
||
export default class DefaultSlideForm extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "SCHEME_TOWN",
|
||
selectedKey: "PERSONAL",
|
||
dataSource: {},
|
||
paymentPeriodModal: {
|
||
visible: false,
|
||
record: {},
|
||
cycleSetting: "000000000000"
|
||
}
|
||
};
|
||
}
|
||
|
||
updateDataSource = (record, e, key) => {
|
||
const {
|
||
programmeStore: {
|
||
defaultCompanyDataSource,
|
||
defaultPersonDataSource,
|
||
setDefaultPersonDataSource,
|
||
setDefaultCompanyDataSource
|
||
}
|
||
} = this.props;
|
||
let result = { ...record };
|
||
if (key === "paymentCycle" && e === "1") {
|
||
result["accountType"] = "1";
|
||
} else if (key === "paymentCycle" && e === "0") {
|
||
result["accountType"] = record.accountType;
|
||
}
|
||
result[key] = e;
|
||
if (key === "upperLimit" || key === "lowerLimit") {
|
||
let dataSource = [...defaultPersonDataSource],
|
||
dataSource_company = [...defaultCompanyDataSource];
|
||
dataSource = dataSource.map(item => {
|
||
if (item.insuranceName === result.insuranceName) return { ...item, [key]: e };
|
||
else return item;
|
||
});
|
||
dataSource_company = dataSource_company.map(item => {
|
||
if (item.insuranceName === result.insuranceName) return { ...item, [key]: e };
|
||
else return item;
|
||
});
|
||
setDefaultPersonDataSource(dataSource);
|
||
setDefaultCompanyDataSource(dataSource_company);
|
||
} else {
|
||
if (this.state.selectedKey === "PERSONAL") {
|
||
let dataSource = [...defaultPersonDataSource];
|
||
dataSource = dataSource.map(item => {
|
||
if (item.id == result.id) return result;
|
||
else return item;
|
||
});
|
||
setDefaultPersonDataSource(dataSource);
|
||
} else {
|
||
let dataSource = [...defaultCompanyDataSource];
|
||
dataSource = dataSource.map(item => {
|
||
if (item.id == result.id) return result;
|
||
else return item;
|
||
});
|
||
setDefaultCompanyDataSource(dataSource);
|
||
}
|
||
}
|
||
};
|
||
|
||
handleSetPaymentPeriod = (cycleSetting) => {
|
||
let cycleObj = {
|
||
1: "0",
|
||
2: "0",
|
||
3: "0",
|
||
4: "0",
|
||
5: "0",
|
||
6: "0",
|
||
7: "0",
|
||
8: "0",
|
||
9: "0",
|
||
10: "0",
|
||
11: "0",
|
||
12: "0"
|
||
};
|
||
if (!_.isEmpty(cycleSetting)) {
|
||
_.forEach(cycleSetting, item => {
|
||
_.assign(cycleObj, { [item]: "1" });
|
||
});
|
||
} else {
|
||
_.forEach(Object.keys(cycleObj), item => {
|
||
_.assign(cycleObj, { [item]: "0" });
|
||
});
|
||
}
|
||
const tmpVStr = _.reduce(Object.values(cycleObj), (pre, cur) => {
|
||
return pre + cur;
|
||
}, "");
|
||
this.setState({
|
||
paymentPeriodModal: {
|
||
...this.state.paymentPeriodModal,
|
||
cycleSetting: tmpVStr
|
||
}
|
||
}, () => {
|
||
this.updateDataSource(this.state.paymentPeriodModal.record, tmpVStr, "cycleSetting");
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const { paymentPeriodModal } = this.state;
|
||
const { programmeStore, requestParams, onChange } = this.props;
|
||
const { defaultPersonDataSource, defaultCompanyDataSource } = programmeStore;
|
||
insertUpdateColumns.map(item => {
|
||
if (item.dataIndex == "isPayment") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
item.render = (text, record) => {
|
||
return (
|
||
<Switch
|
||
checked={text}
|
||
onChange={e => {
|
||
this.updateDataSource(record, e, "isPayment");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "validNum") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
let options = [
|
||
{
|
||
key: "0",
|
||
selected: false,
|
||
showname: "0"
|
||
},
|
||
{
|
||
key: "1",
|
||
selected: false,
|
||
showname: "1"
|
||
},
|
||
{
|
||
key: "2",
|
||
selected: true,
|
||
showname: "2"
|
||
}
|
||
];
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaSelect
|
||
options={options}
|
||
value={String(text)}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "validNum");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "rententionRule") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
let options = [
|
||
{
|
||
key: "1",
|
||
selected: false,
|
||
showname: getLabel(19766, "原始数据")
|
||
},
|
||
{
|
||
key: "2",
|
||
selected: false,
|
||
showname: getLabel(389654, "四舍五入")
|
||
},
|
||
{
|
||
key: "3",
|
||
selected: false,
|
||
showname: getLabel(542722, "向上舍入")
|
||
},
|
||
{
|
||
key: "4",
|
||
selected: false,
|
||
showname: getLabel(542723, "向下舍入")
|
||
},
|
||
{
|
||
key: "5",
|
||
selected: false,
|
||
showname: getLabel(542724, "见分进角")
|
||
},
|
||
{
|
||
key: "6",
|
||
selected: false,
|
||
showname: getLabel(543157, "向上取偶")
|
||
}
|
||
];
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaSelect
|
||
options={options}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "rententionRule");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "paymentProportion") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaInputNumber
|
||
min={0}
|
||
precision={3}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "paymentProportion");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "fixedCost") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaInputNumber
|
||
min={0}
|
||
precision={2}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "fixedCost");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "upperLimit") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaInputNumber
|
||
min={record.lowerLimit || 0}
|
||
precision={2}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "upperLimit");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "lowerLimit") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaInputNumber
|
||
min={0}
|
||
max={record.upperLimit || 99999999999}
|
||
precision={2}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "lowerLimit");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex === "paymentCycle") {
|
||
item.title = <div>
|
||
<span>{getLabel(543158, "缴纳周期")}</span>
|
||
<WeaHelpfulTip
|
||
style={{ paddingLeft: 8 }}
|
||
width={480}
|
||
title={
|
||
<div>
|
||
<div>例：养老保险缴纳周期选择3/6/9/12；</div>
|
||
<br/>
|
||
<div>
|
||
若：核算方式选择基数求和*比例；则数据核算逻辑为：
|
||
账单月1月2月时，养老保险不会被核算；
|
||
账单月3月时，养老保险核算金额为：养老保险月缴纳基数*3*缴纳比例+固定费用*3
|
||
（3代表1月2月3月 3个月，*3代表3个月基数相加和固定费用相加）
|
||
</div>
|
||
<br/>
|
||
<div>
|
||
若：核算方式选择基数*比例再求和；则数据核算逻辑为：
|
||
账单月1月2月时，养老保险不会被核算；
|
||
账单月3月时，养老保险核算金额为：
|
||
将1~3月算出来的【养老保险月缴纳基数*缴纳比例+固定费用】求和
|
||
</div>
|
||
<br/>
|
||
<div>
|
||
若：缴纳周期选择选择月缴，则核算方式默认为【基数*比例+固定费用】，不可修改
|
||
</div>
|
||
</div>
|
||
}
|
||
placement="topLeft"
|
||
/>
|
||
</div>;
|
||
item.render = (text, record) => {
|
||
return (
|
||
<div style={{ display: "flex", alignItems: "center" }}>
|
||
<WeaSelect
|
||
options={[
|
||
{ key: "0", showname: getLabel(543159, "月缴") },
|
||
{ key: "1", showname: getLabel(131673, "自定义") }
|
||
]}
|
||
style={{ width: "80%" }}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "paymentCycle");
|
||
}}
|
||
/>
|
||
{
|
||
record.paymentCycle === "1" &&
|
||
<a href="javascript: void(0);" style={{ paddingLeft: 4, color: "#5d9cec" }}
|
||
onClick={() => this.setState({
|
||
paymentPeriodModal: {
|
||
visible: true,
|
||
record: record,
|
||
cycleSetting: record.cycleSetting || "000000000000"
|
||
}
|
||
})}>{getLabel(30747, "设置")}</a>
|
||
}
|
||
</div>
|
||
);
|
||
};
|
||
} else if (item.dataIndex === "accountType") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
item.render = (text, record) => {
|
||
if (record.paymentCycle === "0") {
|
||
return (
|
||
<div style={{
|
||
maxWidth: 200,
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap"
|
||
}}>{getLabel(543160, "基数*比例+固定费用")}</div>
|
||
);
|
||
} else {
|
||
return (
|
||
<WeaSelect
|
||
style={{ width: "100%" }}
|
||
options={[
|
||
{ key: "1", showname: getLabel(543161, "∑基数*比例+∑固定费用") },
|
||
{ key: "2", showname: getLabel(543162, "∑(基数*比例+固定费用)") }
|
||
]}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "accountType");
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
};
|
||
} else if (item.dataIndex === "insuranceName") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
} else if (item.dataIndex === "paymentScope") {
|
||
item.title = getLabel(item.lanId, item.title);
|
||
}
|
||
|
||
});
|
||
return (
|
||
<div className="defaultSlideForm">
|
||
<SchemeInfoForm {...this.props} onChangeFieldsItem={(val) => onChange({ ...requestParams, ...val })}/>
|
||
|
||
<div className="tableBar">
|
||
<WeaTab
|
||
datas={[
|
||
{ title: getLabel(500201, "个人"), viewcondition: "PERSONAL" },
|
||
{ title: getLabel(1851, "公司"), viewcondition: "COMPANY" }
|
||
]}
|
||
keyParam="viewcondition"
|
||
selectedKey={this.state.selectedKey}
|
||
onChange={selectedKey => this.setState({ selectedKey })}
|
||
/>
|
||
|
||
<div className="tableWrapper">
|
||
{this.state.selectedKey === "PERSONAL"
|
||
? <Table
|
||
dataSource={defaultPersonDataSource}
|
||
columns={insertUpdateColumns}
|
||
pagination={false}
|
||
scroll={{ x: 1000 }}
|
||
/>
|
||
: <Table
|
||
dataSource={defaultCompanyDataSource}
|
||
columns={insertUpdateColumns}
|
||
pagination={false}
|
||
scroll={{ x: 1000 }}
|
||
/>}
|
||
</div>
|
||
<PaymentPeriodModal
|
||
{...paymentPeriodModal}
|
||
onCancel={() => this.setState({
|
||
paymentPeriodModal: {
|
||
visible: false,
|
||
record: {},
|
||
cycleSetting: "000000000000"
|
||
}
|
||
})}
|
||
onSetPaymentPeriod={this.handleSetPaymentPeriod}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|