Merge branch 'feature/V2-社保福利方案新增字段' into develop
This commit is contained in:
commit
e20c25e691
|
|
@ -106,47 +106,68 @@ export const insertUpdateColumns = [
|
|||
{
|
||||
title: "类型名称",
|
||||
dataIndex: "insuranceName",
|
||||
key: "insuranceName"
|
||||
key: "insuranceName",
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: "是否缴费",
|
||||
dataIndex: "isPayment",
|
||||
key: "isPayment"
|
||||
key: "isPayment",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "缴纳对象",
|
||||
dataIndex: "paymentScope",
|
||||
key: "paymentScope"
|
||||
key: "paymentScope",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "缴纳周期",
|
||||
dataIndex: "paymentCycle",
|
||||
key: "paymentCycle",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "核算方式",
|
||||
dataIndex: "accountType",
|
||||
key: "accountType",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "基数下限",
|
||||
dataIndex: "lowerLimit",
|
||||
key: "lowerLimit"
|
||||
key: "lowerLimit",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "基数上限",
|
||||
dataIndex: "upperLimit",
|
||||
key: "upperLimit"
|
||||
key: "upperLimit",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "缴纳比例%",
|
||||
dataIndex: "paymentProportion",
|
||||
key: "paymentProportion"
|
||||
key: "paymentProportion",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "固定费用",
|
||||
dataIndex: "fixedCost",
|
||||
key: "fixedCost"
|
||||
key: "fixedCost",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "有效小数位",
|
||||
dataIndex: "validNum",
|
||||
key: "validNum"
|
||||
key: "validNum",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "进位规则",
|
||||
dataIndex: "rententionRule",
|
||||
key: "rententionRule"
|
||||
key: "rententionRule",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import React from "react";
|
||||
import { WeaInput, WeaInputNumber, WeaSelect, WeaTable } from "ecCom";
|
||||
import { WeaHelpfulTip, WeaInput, WeaInputNumber, WeaSelect, WeaTable } from "ecCom";
|
||||
import { Col, Row, Switch } from "antd";
|
||||
import { insertUpdateColumns } from "./columns";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import SmallTab from "../../../components/smallTab";
|
||||
import PaymentPeriodModal from "./paymentPeriodModal";
|
||||
import "./index.less";
|
||||
|
||||
@inject("programmeStore", "salaryFileStore", "taxAgentStore")
|
||||
|
|
@ -14,7 +15,12 @@ export default class DefaultSlideForm extends React.Component {
|
|||
this.state = {
|
||||
value: "SCHEME_TOWN",
|
||||
selectItem: "个人",
|
||||
dataSource: {}
|
||||
dataSource: {},
|
||||
paymentPeriodModal: {
|
||||
visible: false,
|
||||
record: {},
|
||||
cycleSetting: "000000000000"
|
||||
}
|
||||
};
|
||||
insertUpdateColumns.map(item => {
|
||||
if (item.dataIndex == "isPayment") {
|
||||
|
|
@ -153,11 +159,93 @@ export default class DefaultSlideForm extends React.Component {
|
|||
/>
|
||||
);
|
||||
};
|
||||
} 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");
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateDataSource(record, e, key) {
|
||||
updateDataSource = (record, e, key) => {
|
||||
const {
|
||||
programmeStore: {
|
||||
defaultCompanyDataSource,
|
||||
|
|
@ -167,6 +255,11 @@ export default class DefaultSlideForm extends React.Component {
|
|||
}
|
||||
} = 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],
|
||||
|
|
@ -198,7 +291,44 @@ export default class DefaultSlideForm extends React.Component {
|
|||
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");
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { taxAgentStore } = this.props;
|
||||
|
|
@ -207,6 +337,7 @@ export default class DefaultSlideForm extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { paymentPeriodModal } = this.state;
|
||||
const { programmeStore, salaryFileStore, taxAgentStore } = this.props;
|
||||
const { userStatusList } = salaryFileStore;
|
||||
const { taxAgentAdminOption, getTaxAgentSelectListAsAdmin } = taxAgentStore;
|
||||
|
|
@ -284,7 +415,7 @@ export default class DefaultSlideForm extends React.Component {
|
|||
onChange={(visibleVal) => {
|
||||
let requestParams = { ...this.props.requestParams };
|
||||
visibleVal === "1" && getTaxAgentSelectListAsAdmin();
|
||||
(visibleVal === "0" || visibleVal === "") && (requestParams.taxAgentIds = '');
|
||||
(visibleVal === "0" || visibleVal === "") && (requestParams.taxAgentIds = "");
|
||||
requestParams.sharedType = visibleVal;
|
||||
this.props.onChange(requestParams);
|
||||
}}
|
||||
|
|
@ -346,13 +477,26 @@ export default class DefaultSlideForm extends React.Component {
|
|||
dataSource={defaultPersonDataSource}
|
||||
columns={insertUpdateColumns}
|
||||
pagination={false}
|
||||
scroll={{ x: "1000px" }}
|
||||
/>
|
||||
: <WeaTable
|
||||
dataSource={defaultCompanyDataSource}
|
||||
columns={insertUpdateColumns}
|
||||
pagination={false}
|
||||
scroll={{ x: "1000px" }}
|
||||
/>}
|
||||
</div>
|
||||
<PaymentPeriodModal
|
||||
{...paymentPeriodModal}
|
||||
onCancel={() => this.setState({
|
||||
paymentPeriodModal: {
|
||||
visible: false,
|
||||
record: {},
|
||||
cycleSetting: "000000000000"
|
||||
}
|
||||
})}
|
||||
onSetPaymentPeriod={this.handleSetPaymentPeriod}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -71,3 +71,37 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//设置缴纳周期
|
||||
.paymentPeriodWrapper {
|
||||
.paymentPeriodContent {
|
||||
padding: 16px;
|
||||
|
||||
.paymentPeriodAll {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 8px 8px 45px;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.ant-checkbox-group {
|
||||
padding: 5px 16px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-top: none;
|
||||
|
||||
.ant-checkbox-group-item {
|
||||
margin: 8px 0;
|
||||
padding-left: 30px;
|
||||
width: 33.3%;
|
||||
max-width: 33.3%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 设置缴纳周期
|
||||
* Description:
|
||||
* Date: 2023/2/1
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaDialog } from "ecCom";
|
||||
import { Button, Checkbox } from "antd";
|
||||
import "./index.less";
|
||||
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
|
||||
class PaymentPeriodModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
allSelect: false,
|
||||
monthList: []
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.visible !== this.props.visible && nextProps.visible) {
|
||||
this.setState({
|
||||
monthList: _.filter(_.map(nextProps.cycleSetting.split(""), (item, index) => {
|
||||
return item === "1" ? (index + 1).toString() : "";
|
||||
}), child => !!child)
|
||||
}, () => {
|
||||
this.setState({
|
||||
allSelect: this.state.monthList.length === 12
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChangeALl = (e) => {
|
||||
this.setState({ allSelect: e.target.checked }, () => {
|
||||
if (this.state.allSelect) {
|
||||
this.setState({
|
||||
monthList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
|
||||
}, () => this.props.onSetPaymentPeriod(this.state.monthList));
|
||||
} else {
|
||||
this.setState({
|
||||
monthList: []
|
||||
}, () => this.props.onSetPaymentPeriod(this.state.monthList));
|
||||
}
|
||||
});
|
||||
};
|
||||
handleChangeMonth = (monthList) => {
|
||||
this.setState({ monthList }, () => {
|
||||
this.props.onSetPaymentPeriod(this.state.monthList);
|
||||
this.setState({
|
||||
allSelect: this.state.monthList.length === 12
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { onCancel, visible } = this.props;
|
||||
const { monthList, allSelect } = this.state;
|
||||
const buttons = [
|
||||
<Button type="primary" onClick={onCancel}>保存</Button>,
|
||||
<Button type="ghost" onClick={() => this.setState({ monthList: [], allSelect: false })}>重置</Button>
|
||||
];
|
||||
const options = [
|
||||
{ label: "一月", value: "1" },
|
||||
{ label: "二月", value: "2" },
|
||||
{ label: "三月", value: "3" },
|
||||
{ label: "四月", value: "4" },
|
||||
{ label: "五月", value: "5" },
|
||||
{ label: "六月", value: "6" },
|
||||
{ label: "七月", value: "7" },
|
||||
{ label: "八月", value: "8" },
|
||||
{ label: "九月", value: "9" },
|
||||
{ label: "十月", value: "10" },
|
||||
{ label: "十一月", value: "11" },
|
||||
{ label: "十二月", value: "12" }
|
||||
];
|
||||
return (
|
||||
<WeaDialog
|
||||
onCancel={onCancel}
|
||||
title="设置缴纳周期"
|
||||
visible={visible}
|
||||
style={{ width: 450 }}
|
||||
buttons={buttons}
|
||||
initLoadCss
|
||||
className="paymentPeriodWrapper"
|
||||
>
|
||||
<div className="paymentPeriodContent">
|
||||
<div className="paymentPeriodAll">
|
||||
<Checkbox checked={allSelect} onChange={this.handleChangeALl}>全选</Checkbox>
|
||||
</div>
|
||||
<CheckboxGroup options={options} value={monthList} onChange={this.handleChangeMonth}/>
|
||||
</div>
|
||||
</WeaDialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PaymentPeriodModal;
|
||||
Loading…
Reference in New Issue