340 lines
12 KiB
JavaScript
340 lines
12 KiB
JavaScript
/*
|
||
* Author: 黎永顺
|
||
* name: 社保方案重构-方案设置列表
|
||
* Description:
|
||
* Date: 2024/2/5
|
||
*/
|
||
import React, { Component } from "react";
|
||
import { WeaCheckbox, WeaHelpfulTip, WeaInputNumber, WeaLocaleProvider, WeaSelect, WeaTableEdit } from "ecCom";
|
||
import PaymentPeriodModal from "../../../programme/paymentPeriodModal";
|
||
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
|
||
class PlanSetTable extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
datas: [], paymentPeriodModal: {
|
||
visible: false, record: {}, cycleSetting: "000000000000"
|
||
}
|
||
};
|
||
}
|
||
|
||
componentWillReceiveProps(nextProps, nextContext) {
|
||
if (nextProps.selectedKey !== this.props.selectedKey || nextProps.dataSource !== this.props.dataSource) {
|
||
this.setState({ datas: _.filter(nextProps.dataSource, o => String(o.paymentScopeValue) === nextProps.selectedKey) });
|
||
}
|
||
}
|
||
|
||
/*
|
||
* Author: 黎永顺
|
||
* Description: 缴纳周期-自定义设置
|
||
* Params:
|
||
* Date: 2024/2/6
|
||
*/
|
||
handleSetPaymentPeriod = (cycleSetting) => {
|
||
const { datas, paymentPeriodModal } = this.state;
|
||
const { record: { id } } = paymentPeriodModal;
|
||
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({
|
||
datas: _.map(datas, o => {
|
||
if (id === o.id) {
|
||
return { ...o, cycleSetting: tmpVStr };
|
||
} else {
|
||
return o;
|
||
}
|
||
})
|
||
}, () => this.props.onPlanSet(this.state.datas));
|
||
};
|
||
|
||
render() {
|
||
const { datas, paymentPeriodModal } = this.state;
|
||
const { showOperateBtn } = this.props;
|
||
const columns = [
|
||
{
|
||
title: getLabel(15795, "类型名称"),
|
||
dataIndex: "insuranceName",
|
||
key: "insuranceName",
|
||
width: 120, fixed: "left",
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: text => (<span>{text}</span>)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543168, "是否缴费"),
|
||
dataIndex: "isPayment",
|
||
key: "isPayment",
|
||
width: 120,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (
|
||
<WeaCheckbox value={(!_.isNil(text) && text) ? "1" : "0"} display="switch" viewAttr={showOperateBtn ? 2 : 1}
|
||
onChange={isPayment => onEdit({
|
||
record: { ...record, isPayment: isPayment === "1" },
|
||
index, key: "custom"
|
||
})}/>
|
||
)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543169, "缴纳对象"),
|
||
dataIndex: "paymentScope",
|
||
key: "paymentScope",
|
||
width: 120,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: text => (<span>{text}</span>)
|
||
}]
|
||
},
|
||
{
|
||
title: <PaymentCycleTitle/>,
|
||
dataIndex: "paymentCycle",
|
||
key: "paymentCycle",
|
||
width: 200,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (<div className="flex-center">
|
||
<WeaSelect value={text} options={[
|
||
{ key: "0", showname: getLabel(543159, "月缴") },
|
||
{ key: "1", showname: getLabel(111, "自定义") }
|
||
]} viewAttr={showOperateBtn ? 2 : 1}
|
||
onChange={paymentCycle => onEdit({
|
||
record: { ...record, paymentCycle, accountType: paymentCycle },
|
||
index, key: "custom"
|
||
})}/>
|
||
{
|
||
showOperateBtn && text === "1" &&
|
||
<a href="javascript:void(0);" onClick={() => this.setState({
|
||
paymentPeriodModal: {
|
||
record: record, visible: true,
|
||
cycleSetting: record.cycleSetting || "000000000000"
|
||
}
|
||
})}>{getLabel(30747, "设置")}</a>
|
||
}
|
||
</div>)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543170, "核算方式"),
|
||
dataIndex: "accountType",
|
||
key: "accountType",
|
||
width: 200,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (
|
||
<WeaSelect viewAttr={(record.paymentCycle === "1" && showOperateBtn) ? 2 : 1} value={text} options={[
|
||
{ key: "0", showname: getLabel(543160, "基数*比例+固定费用"), disabled: record.paymentCycle === "1" },
|
||
{ key: "1", showname: getLabel(543161, "∑基数*比例+∑固定费用") },
|
||
{ key: "2", showname: getLabel(543162, "∑(基数*比例+固定费用)") }
|
||
]} onChange={accountType => onEdit({
|
||
record: { ...record, accountType },
|
||
index, key: "custom"
|
||
})}/>)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543171, "基数下限"),
|
||
dataIndex: "lowerLimit",
|
||
key: "lowerLimit",
|
||
width: 120,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (
|
||
<WeaInputNumber value={text} min={0} max={record.upperLimit || 99999999999} precision={2}
|
||
viewAttr={showOperateBtn ? 2 : 1}
|
||
onChange={lowerLimit => onEdit({
|
||
record: { ...record, lowerLimit },
|
||
index, key: "custom"
|
||
})}/>)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543172, "基数上限"),
|
||
dataIndex: "upperLimit",
|
||
key: "upperLimit",
|
||
width: 120,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (
|
||
<WeaInputNumber value={text} min={record.lowerLimit || 0} precision={2} viewAttr={showOperateBtn ? 2 : 1}
|
||
onChange={upperLimit => onEdit({
|
||
record: { ...record, upperLimit },
|
||
index, key: "custom"
|
||
})}/>)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543173, "缴纳比例%"),
|
||
dataIndex: "paymentProportion",
|
||
key: "paymentProportion",
|
||
width: 120,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (
|
||
<WeaInputNumber value={text} min={0} precision={4} viewAttr={showOperateBtn ? 2 : 1}
|
||
onChange={paymentProportion => onEdit({
|
||
record: { ...record, paymentProportion },
|
||
index, key: "custom"
|
||
})}/>)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543174, "固定费用"),
|
||
dataIndex: "fixedCost",
|
||
key: "fixedCost",
|
||
width: 120,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (
|
||
<WeaInputNumber value={text} min={0} precision={2} viewAttr={showOperateBtn ? 2 : 1}
|
||
onChange={fixedCost => onEdit({
|
||
record: { ...record, fixedCost },
|
||
index, key: "custom"
|
||
})}/>)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543175, "有效小数位"),
|
||
dataIndex: "validNum",
|
||
key: "validNum",
|
||
width: 120,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (
|
||
<WeaSelect value={_.isNil(text) ? "2" : String(text)} options={[
|
||
{ key: "0", showname: "0" },
|
||
{ key: "1", showname: "1" },
|
||
{ key: "2", showname: "2" },
|
||
{ key: "3", showname: "3" },
|
||
{ key: "4", showname: "4" },
|
||
{ key: "5", showname: "5" },
|
||
{ key: "6", showname: "6" },
|
||
{ key: "7", showname: "7" },
|
||
{ key: "8", showname: "8" },
|
||
{ key: "9", showname: "9" },
|
||
{ key: "10", showname: "10" }
|
||
]} viewAttr={showOperateBtn ? 2 : 1}
|
||
onChange={validNum => onEdit({
|
||
record: { ...record, validNum },
|
||
index, key: "custom"
|
||
})}/>)
|
||
}]
|
||
},
|
||
{
|
||
title: getLabel(543176, "进位规则"),
|
||
dataIndex: "rententionRule",
|
||
key: "rententionRule",
|
||
width: 120,
|
||
com: [{
|
||
type: "custom",
|
||
key: "custom",
|
||
render: (text, record, index, onEdit) => (
|
||
<WeaSelect value={_.isNil(text) ? "2" : text} viewAttr={showOperateBtn ? 2 : 1}
|
||
options={[
|
||
{ key: "1", showname: getLabel(19766, "原始数据") },
|
||
{ key: "2", showname: getLabel(389654, "四舍五入") },
|
||
{ key: "3", showname: getLabel(542722, "向上舍入") },
|
||
{ key: "4", showname: getLabel(542723, "向下舍入") },
|
||
{ key: "5", showname: getLabel(542724, "见分进角") },
|
||
{ key: "6", showname: getLabel(543157, "向上取偶") }
|
||
]} onChange={rententionRule => onEdit({
|
||
record: { ...record, rententionRule },
|
||
index, key: "custom"
|
||
})}/>)
|
||
}]
|
||
}
|
||
];
|
||
return (
|
||
<React.Fragment>
|
||
<WeaTableEdit
|
||
columns={columns} datas={datas}
|
||
showDelete={false} showAdd={false} showCopy={false} showTitle={false}
|
||
tableProps={{ scroll: { x: 800 }, bordered: true }}
|
||
onChange={datas => this.setState({ datas }, () => this.props.onPlanSet(this.state.datas))}
|
||
/>
|
||
<PaymentPeriodModal
|
||
{...paymentPeriodModal}
|
||
onCancel={() => this.setState({
|
||
paymentPeriodModal: {
|
||
visible: false, record: {}, cycleSetting: "000000000000"
|
||
}
|
||
})}
|
||
onSetPaymentPeriod={this.handleSetPaymentPeriod}
|
||
/>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default PlanSetTable;
|
||
|
||
const PaymentCycleTitle = () => (<div>
|
||
<span>{getLabel(543158, "缴纳周期")}</span>
|
||
<WeaHelpfulTip
|
||
style={{ paddingLeft: 8 }}
|
||
width={480}
|
||
title={
|
||
<div>
|
||
<div>{getLabel(544738, "例：养老保险缴纳周期选择3/6/9/12；")}</div>
|
||
<br/>
|
||
<div>
|
||
{
|
||
getLabel(544739, "若：核算方式选择基数求和*比例；则数据核算逻辑为：\n" +
|
||
" 账单月1月2月时，养老保险不会被核算；\n" +
|
||
" 账单月3月时，养老保险核算金额为：养老保险月缴纳基数*3*缴纳比例+固定费用*3\n" +
|
||
" （3代表1月2月3月 3个月，*3代表3个月基数相加和固定费用相加）")
|
||
}
|
||
</div>
|
||
<br/>
|
||
<div>
|
||
{
|
||
getLabel(544740, "若：核算方式选择基数*比例再求和；则数据核算逻辑为：\n" +
|
||
" 账单月1月2月时，养老保险不会被核算；\n" +
|
||
" 账单月3月时，养老保险核算金额为：\n" +
|
||
" 将1~3月算出来的【养老保险月缴纳基数*缴纳比例+固定费用】求和")
|
||
}
|
||
</div>
|
||
<br/>
|
||
<div>{getLabel(544741, "若：缴纳周期选择选择月缴，则核算方式默认为【基数*比例+固定费用】，不可修改")}</div>
|
||
</div>
|
||
}
|
||
placement="topLeft"
|
||
/>
|
||
</div>);
|