389 lines
12 KiB
JavaScript
389 lines
12 KiB
JavaScript
import React from "react";
|
||
import { WeaHelpfulTip, WeaInputNumber, WeaSelect, WeaTab, WeaTable } 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";
|
||
|
||
@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.render = (text, record) => {
|
||
return (
|
||
<Switch
|
||
checked={text}
|
||
onChange={e => {
|
||
this.updateDataSource(record, e, "isPayment");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "validNum") {
|
||
let options = [
|
||
{
|
||
key: "0",
|
||
selected: false,
|
||
showname: "0"
|
||
},
|
||
{
|
||
key: "1",
|
||
selected: false,
|
||
showname: "1"
|
||
},
|
||
{
|
||
key: "2",
|
||
selected: true,
|
||
showname: "2"
|
||
},
|
||
{
|
||
key: "3",
|
||
selected: false,
|
||
showname: "3"
|
||
}
|
||
];
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaSelect
|
||
options={options}
|
||
value={String(text)}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "validNum");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "rententionRule") {
|
||
let options = [
|
||
{
|
||
key: "1",
|
||
selected: false,
|
||
showname: "原始数据"
|
||
},
|
||
{
|
||
key: "2",
|
||
selected: false,
|
||
showname: "四舍五入"
|
||
},
|
||
{
|
||
key: "3",
|
||
selected: false,
|
||
showname: "向上舍入"
|
||
},
|
||
{
|
||
key: "4",
|
||
selected: false,
|
||
showname: "向下舍入"
|
||
},
|
||
{
|
||
key: "5",
|
||
selected: false,
|
||
showname: "见分进角"
|
||
},
|
||
{
|
||
key: "6",
|
||
selected: false,
|
||
showname: "向上取偶"
|
||
}
|
||
];
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaSelect
|
||
options={options}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "rententionRule");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "paymentProportion") {
|
||
item.render = (text, record) => {
|
||
return (
|
||
<WeaInputNumber
|
||
min={0}
|
||
precision={4}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "paymentProportion");
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "fixedCost") {
|
||
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.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.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>缴纳周期</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>
|
||
<WeaSelect
|
||
options={[
|
||
{ key: "0", showname: "月缴" },
|
||
{ key: "1", showname: "自定义" }
|
||
]}
|
||
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"
|
||
}
|
||
})}>设置</a>
|
||
}
|
||
</div>
|
||
);
|
||
};
|
||
} else if (item.dataIndex === "accountType") {
|
||
item.render = (text, record) => {
|
||
if (record.paymentCycle === "0") {
|
||
return (
|
||
<div>基数*比例+固定费用</div>
|
||
);
|
||
} else {
|
||
return (
|
||
<WeaSelect
|
||
style={{ width: "100%" }}
|
||
options={[
|
||
{ key: "1", showname: "∑基数*比例+∑固定费用" },
|
||
{ key: "2", showname: "∑(基数*比例+固定费用)" }
|
||
]}
|
||
value={text}
|
||
onChange={v => {
|
||
this.updateDataSource(record, v, "accountType");
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
};
|
||
}
|
||
});
|
||
return (
|
||
<div className="defaultSlideForm">
|
||
<SchemeInfoForm {...this.props} onChangeFieldsItem={(val) => onChange({ ...requestParams, ...val })}/>
|
||
|
||
<div className="tableBar">
|
||
<WeaTab
|
||
datas={[
|
||
{ title: "个人", viewcondition: "PERSONAL" },
|
||
{ title: "公司", 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>
|
||
);
|
||
}
|
||
}
|