qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/2.10.1.2401.01-社保福利方案重构

This commit is contained in:
黎永顺 2024-02-06 16:56:10 +08:00
parent dc624af9bd
commit 4be5c373ec
6 changed files with 464 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/paymentPeriodModal.js
View File

@ -61,7 +61,9 @@ class PaymentPeriodModal extends Component {
const { monthList, allSelect } = this.state;
const buttons = [
<Button type="primary" onClick={onCancel}>保存</Button>,
<Button type="ghost" onClick={() => this.setState({ monthList: [], allSelect: false })}>重置</Button>
<Button type="ghost" onClick={() => this.setState({
monthList: [], allSelect: false
}, () => this.props.onSetPaymentPeriod(this.state.monthList))}>重置</Button>
];
const options = [
{ label: "一月", value: "1" },

8
pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfarePlan/components/welfarePlanCustomDialog/index.js
View File

@ -40,7 +40,7 @@ class Index extends Component {
if (getKey(o) === "welfareType" && props.customId) {
return { ...o, viewAttr: 1 };
} else {
return { ...o };
return { ...o, viewAttr: props.showOperateBtn ? o.viewAttr : 1 };
}
})
}))
@ -85,13 +85,13 @@ class Index extends Component {
render() {
const { loading, conditions } = this.state;
const { programmeStore: { planCustomForm } } = this.props;
const { programmeStore: { planCustomForm }, showOperateBtn } = this.props;
return (
<WeaDialog
{...this.props} style={{ width: 480, height: 174 }} initLoadCss
buttons={[
buttons={showOperateBtn ? [
<Button type="primary" onClick={this.save} loading={loading}>{getLabel(537558, "保存")}</Button>
]}
] : []}
>
<div className="form-dialog-layout">{getSearchs(planCustomForm, conditions, 1, false)}</div>
</WeaDialog>

79
pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfarePlan/components/welfarePlanEditSlide/index.js
View File

@ -6,8 +6,9 @@
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaSlideModal, WeaTools } from "ecCom";
import { Button, Modal } from "antd";
import { WeaLocaleProvider, WeaSearchGroup, WeaSlideModal, WeaTab, WeaTools } from "ecCom";
import PlanSetTable from "./planSetTable";
import { Button, message, Modal } from "antd";
import * as API from "../../../../../apis/welfareScheme";
import { getTaxAgentSelectListAsAdmin } from "../../../../../apis/taxAgent";
import { getConditionDomkeys, getSearchs } from "../../../../../util";
@ -22,7 +23,7 @@ class Index extends Component {
constructor(props) {
super(props);
this.state = {
loading: false, conditions: []
loading: false, conditions: [], selectedKey: "2", planDatas: []
};
}
@ -33,27 +34,28 @@ class Index extends Component {
} else if (nextProps.visible !== this.props.visible && !nextProps.visible) {
document.querySelector(".salary-welfare-plan-wrapper").classList.remove("zIndex0-welfare-plan");
nextProps.programmeStore.initPlanForm();
this.setState({ loading: false, conditions: [], selectedKey: "2", planDatas: [] });
}
}
getForm = async (props) => {
const { data: result } = await getTaxAgentSelectListAsAdmin();
const { id, welfareTypeEnum, programmeStore: { planForm } } = props;
const { id, welfareTypeEnum, programmeStore: { planForm }, showOperateBtn } = props;
API.getForm(id ? _.assign({ welfareTypeEnum }, { id }) : { welfareTypeEnum }).then(({ status, data }) => {
if (status) {
console.log(data, result);
const { form: { schemeBatch } } = data;
const { form: { schemeBatch, schemeDetailList } } = data;
this.setState({
planDatas: schemeDetailList,
conditions: _.map(planConditons, item => ({
...item, items: _.map(item.items, o => {
if (getKey(o) === "taxAgentIds") {
return {
...o, hide: schemeBatch["sharedType"] === "0" || _.isNil(schemeBatch["sharedType"]),
viewAttr: schemeBatch["sharedType"] === "1" ? 3 : 2,
viewAttr: schemeBatch["sharedType"] === "1" ? 3 : showOperateBtn ? o.viewAttr : 1,
options: _.map(result, k => ({ key: k.id, showname: k.content }))
};
}
return o;
return { ...o, viewAttr: showOperateBtn ? o.viewAttr : 1 };
})
}))
}, () => {
@ -69,15 +71,32 @@ class Index extends Component {
}
});
};
save = async () => {
const { programmeStore: { planForm, setHasBeenModify } } = this.props;
const { programmeStore: { planForm, setHasBeenModify }, welfareTypeEnum, id } = this.props;
planForm.validateForm().then(f => {
if (f.isValid) {
if (planForm.getFormParams().sharedType === "1" && _.isEmpty(planForm.getFormParams().taxAgentIds)) {
planForm.showError("taxAgentIds", getLabel(111, "\"可见范围\"未填写"));
} else {
console.log(planForm.getFormParams());
const { planDatas } = this.state;
const payload = {
insuranceScheme: {
...planForm.getFormParams(), welfareTypeEnum, id,
paymentArea: planForm.getFormParams().paymentType
},
insuranceSchemeDetailList: planDatas
};
this.setState({ loading: true });
API[id ? "updateScheme" : "createScheme"](payload).then(({ status, errormsg }) => {
this.setState({ loading: false });
if (status) {
message.success(getLabel(30700, "操作成功！"));
setHasBeenModify(false);
this.props.onClose(true);
} else {
message.error(errormsg);
}
}).catch(() => this.setState({ loading: false }));
}
} else {
f.showErrors();
@ -138,19 +157,47 @@ class Index extends Component {
}
setHasBeenModify(true);
};
renderTab = () => {
const { selectedKey } = this.state;
return <WeaTab
keyParam="viewcondition" selectedKey={selectedKey}
datas={[
{ title: getLabel(500201, "个人"), viewcondition: "2" },
{ title: getLabel(1851, "公司"), viewcondition: "1" }
]} onChange={v => this.setState({ selectedKey: v })}
/>;
};
handleSetPlanDatas = (datas) => {
const { programmeStore: { setHasBeenModify } } = this.props;
const { planDatas } = this.state;
//先统一上下限值
let dataSource = _.reduce(planDatas, (pre, cur) => {
const curData = _.find(datas, o => o.insuranceId === cur.insuranceId);
return [...pre, { ...cur, lowerLimit: curData.lowerLimit, upperLimit: curData.upperLimit }];
}, []);
//再赋值修改值
dataSource = _.reduce(dataSource, (pre, cur) => {
const curData = _.find(datas, o => o.id === cur.id);
return [...pre, { ...cur, ...curData }];
}, []);
this.setState({ planDatas: dataSource }, () => setHasBeenModify(true));
};
render() {
const { conditions } = this.state;
const {
programmeStore: { planForm, setHasBeenModify }, showOperateBtn, visible
} = this.props;
const { conditions, planDatas, selectedKey } = this.state;
const { programmeStore: { planForm }, showOperateBtn } = this.props;
return (
<WeaSlideModal
className="welfare-plan-edit-layout" {...this.props}
top={0} width={800} height={100} measureT="%" measureX="px" measureY="%"
top={0} width={1000} height={100} measureT="%" measureX="px" measureY="%"
direction={"right"} title={this.renderTitle()} onClose={() => this.handleClose(false)}
content={<div className="welfare-plan-edit-area">
{getSearchs(planForm, conditions, 1, false, this.onChange)}
<WeaSearchGroup showGroup needTigger title={this.renderTab()}>
<PlanSetTable dataSource={planDatas} selectedKey={selectedKey} showOperateBtn={showOperateBtn}
onPlanSet={this.handleSetPlanDatas}/>
</WeaSearchGroup>
</div>}
/>
);

337
pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfarePlan/components/welfarePlanEditSlide/planSetTable.js Normal file
View File

@ -0,0 +1,337 @@
/*
* 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" ? 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" }
]} 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>);

46
pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfarePlan/components/welfarePlanList/index.js
View File

@ -44,6 +44,7 @@ class Index extends Component {
componentWillReceiveProps(nextProps, nextContext) {
if ((nextProps.selectedKey !== this.props.selectedKey) || (nextProps.isQuery !== this.props.isQuery)) {
this.setState({
welfarePlanEditSlide: { visible: false, id: "", welfareTypeEnum: "", title: "" },
pageInfo: { ...this.state.pageInfo, current: 1, pageSize: 10, total: 0 }
}, () => this.getList(nextProps));
}
@ -57,7 +58,10 @@ class Index extends Component {
}
getList = (props) => {
const { programmeStore: { planSearchForm }, selectedKey: welfareTypeEnum, customQuery } = props;
const {
programmeStore: { planSearchForm }, selectedKey: welfareTypeEnum, customQuery,
taxAgentStore: { showOperateBtn }
} = props;
const { pageInfo } = this.state;
const originPayload = { ...pageInfo, welfareTypeEnum }, customPayload = { welfareTypeEnum: customQuery },
welfarePayload = { ...planSearchForm.getFormParams() };
@ -100,7 +104,10 @@ class Index extends Component {
break;
case "isUse":
col = {
...col, render: (__, record) => (<WeaCheckbox value={record[dataIndex] + ""} display="switch"/>)
...col, render: (__, record) => (<WeaCheckbox
value={record[dataIndex] + ""} display="switch" viewAttr={showOperateBtn ? 2 : 1}
onChange={value => this.handleCustomBenefitsSwitch(record, value)}
/>)
};
break;
default:
@ -184,6 +191,35 @@ class Index extends Component {
break;
}
};
handleCustomBenefitsSwitch = ({ id }, isUse) => {
Modal.confirm({
title: getLabel(131329, "信息确认"),
content: isUse === "1" ? getLabel(111, "确定要启用吗？") : getLabel(111, "确定要停用吗？"),
onOk: () => {
const payload = { id, isUse };
API.updateCustomCategoryStatus(payload).then(({ status, errormsg }) => {
if (status) {
message.success("操作成功");
this.getList(this.props);
} else {
message.error(errormsg || "操作失败");
}
});
},
onCancel: () => {
this.setState({
dataSource: _.map(this.state.dataSource, item => {
if (item.id === id) {
return {
...item, isUse: item.isUse
};
}
return { ...item };
})
});
}
});
};
render() {
const { dataSource, columns, pageInfo, loading, copyDialog, customDialog, welfarePlanEditSlide } = this.state;
@ -244,7 +280,7 @@ class Index extends Component {
title: getLabel(18610, "操作"),
dataIndex: "operation", width: 120,
render: (__, record) => (<a href="javascript:void(0);"
onClick={() => this.handleOpts("view", record)}>{getLabel(33564, "查看")}</a>)
onClick={() => this.handleOpts(selectedKey === "CUSTOM" ? "custom-edit" : "edit", record)}>{getLabel(33564, "查看")}</a>)
}]}
/>
</div>
@ -259,7 +295,7 @@ class Index extends Component {
}, () => isRefrese && this.getList(this.props))}
/>
{/*新建编辑自定义方案*/}
<WelfarePlanCustomDialog {...customDialog} selectedKey={selectedKey}
<WelfarePlanCustomDialog {...customDialog} selectedKey={selectedKey} showOperateBtn={showOperateBtn}
onCancel={(isRefrese) => this.setState({
customDialog: { ...customDialog, visible: false, customId: "" }
}, () => isRefrese && this.getList(this.props))}
@ -267,7 +303,7 @@ class Index extends Component {
{/*新建编辑方案*/}
<WelfarePlanEditSlide {...welfarePlanEditSlide} showOperateBtn={showOperateBtn}
onClose={(isFresh) => this.setState({
welfarePlanEditSlide: { ...welfarePlanEditSlide, visible: isFresh }
welfarePlanEditSlide: { ...welfarePlanEditSlide, visible: false }
}, () => isFresh && this.getList(this.props))}
/>
</div>

16
pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfarePlan/index.less
View File

@ -103,6 +103,22 @@
}
.welfare-plan-edit-layout {
.flex-center {
display: flex;
align-items: center;
.wea-select {
flex: 1;
margin-right: 4px;
}
}
.ant-table-fixed-left {
.ant-table-tbody > tr {
height: 41px !important;
}
}
.titleDialog {
display: flex;
justify-content: space-between;