社保福利档案新增编辑页面重构

This commit is contained in:
黎永顺 2023-02-16 16:20:45 +08:00
parent 4ee0165885
commit 3cbc12373a
4 changed files with 104 additions and 19 deletions

View File

@ -40,7 +40,7 @@ export default class AccumulationFundForm extends React.Component {
getPaymentForm(this.props.employeeId, "ACCUMULATION_FUND", fundName, this.props.record.paymentOrganization);
};
handlePaymentChange = ({ key, value }) => {
const params = { [key]: value.toString() };
const params = { [key]: !_.isNil(value) ? value.toString() : "" };
const { archivesStore: { accumulationFundPaymentForm, setAccumulationFundPaymentForm } } = this.props;
const { data } = accumulationFundPaymentForm;
let request = { ...data, ...params };
@ -119,7 +119,9 @@ export default class AccumulationFundForm extends React.Component {
key: child["domkey"][0],
label: child.label,
value: !_.isNil(paymentData[child["domkey"][0]]) ? paymentData[child["domkey"][0]].toString() : "",
onChange: this.handlePaymentChange
onChange: this.handlePaymentChange,
min: child.min,
max: child.max
})
}))}
customComponent={<ConsistentWelfare/>}

View File

@ -44,7 +44,7 @@ export default class OtherForm extends React.Component {
key === "otherSchemeId" && onChangeRecordOtherSchemeId(value);
};
handlePaymentChange = ({ key, value }) => {
const params = { [key]: value.toString() };
const params = { [key]: !_.isNil(value) ? value.toString() : "" };
const { archivesStore: { otherPaymentForm, setOtherPaymentForm } } = this.props;
const { data } = otherPaymentForm;
let request = { ...data, ...params };
@ -104,7 +104,9 @@ export default class OtherForm extends React.Component {
key: child["domkey"][0],
label: child.label,
value: !_.isNil(paymentData[child["domkey"][0]]) ? paymentData[child["domkey"][0]].toString() : "",
onChange: this.handlePaymentChange
onChange: this.handlePaymentChange,
min: child.min,
max: child.max
})
}))}
customComponent={<ConsistentWelfare/>}

View File

@ -1,5 +1,6 @@
import React from "react";
import { WeaCheckbox, WeaDatePicker, WeaFormItem, WeaInput, WeaInputNumber, WeaSearchGroup, WeaSelect } from "ecCom";
import { message } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import "./index.less";
@ -7,6 +8,13 @@ import "./index.less";
@inject("archivesStore")
@observer
export default class SocialSecurityForm extends React.Component {
constructor(props) {
super(props);
this.state = {
Welfare: ""
};
}
componentWillMount() {
const { archivesStore } = this.props;
const { getBaseForm, getPaymentForm } = archivesStore;
@ -17,12 +25,23 @@ export default class SocialSecurityForm extends React.Component {
handleFormChange = ({ key, value }) => {
const params = { [key]: value };
const { archivesStore: { socialSecurityForm, setSocialSecurityForm }, onChangeRecordSchemeId } = this.props;
const {
archivesStore: {
socialSecurityForm,
setSocialSecurityForm,
socialSecurityPaymentForm,
setSocialSecurityPaymentForm
},
onChangeRecordSchemeId
} = this.props;
const { data } = socialSecurityForm;
let request = { ...data, ...params };
let form = { ...socialSecurityForm };
form.data = request;
setSocialSecurityForm(form);
console.log(toJS(socialSecurityPaymentForm));
key === "socialSchemeId" && setSocialSecurityPaymentForm({ ...toJS(socialSecurityPaymentForm) });
key === "socialSchemeId" && this.setState({ Welfare: "" });
key === "socialSchemeId" && this.handleFetchPaymentForm(value);
key === "socialSchemeId" && onChangeRecordSchemeId(value);
};
@ -34,7 +53,7 @@ export default class SocialSecurityForm extends React.Component {
};
handlePaymentChange = ({ key, value }) => {
const params = { [key]: value.toString() };
const params = { [key]: !_.isNil(value) ? value.toString() : "" };
const { archivesStore: { socialSecurityPaymentForm, setSocialSecurityPaymentForm } } = this.props;
const { data } = socialSecurityPaymentForm;
let request = { ...data, ...params };
@ -42,11 +61,39 @@ export default class SocialSecurityForm extends React.Component {
form.data = request;
setSocialSecurityPaymentForm(form);
};
handleChangeWelfare = (val) => {
const { archivesStore: { socialSecurityPaymentForm, setSocialSecurityPaymentForm } } = this.props;
let paymentData = toJS(socialSecurityPaymentForm.data);
const [paymentFormItems] = toJS(socialSecurityPaymentForm.items);
const { items } = paymentFormItems;
if (val) {
_.forEach(items, (it) => {
const { min, max, domkey } = it;
const minNum = !_.isNil(min) ? Number(min) : 0, maxNum = !_.isNil(max) ? Number(max) : 0;
if ((val < minNum || val > maxNum) && !_.isNil(min) && !_.isNil(max) && (!!maxNum || !!minNum)) {
message.warning("超出所选缴纳方案设置的基数上下限范围,将自动按基数上下限填充。");
paymentData = {
...paymentData,
[domkey[0]]: (val < minNum && !!minNum) ? minNum : (val > maxNum && !!maxNum) ? maxNum : val
};
} else {
paymentData = { ...paymentData, [domkey[0]]: val };
}
});
} else {
_.forEach(items, (it) => {
const { domkey } = it;
paymentData = { ...paymentData, [domkey[0]]: "" };
});
}
setSocialSecurityPaymentForm({ ...socialSecurityPaymentForm, data: { ...paymentData } });
};
render() {
const { Welfare } = this.state;
const { archivesStore: { socialSecurityForm, socialSecurityPaymentForm } } = this.props;
const { items, data: socialData } = socialSecurityForm;
const paymentData = socialSecurityPaymentForm.data;
const paymentData = toJS(socialSecurityPaymentForm.data);
const paymentItems = socialSecurityPaymentForm.items;
const {
nonPayment = "", schemeAccount = "", socialStartTime = "", socialEndTime = "",
@ -105,10 +152,13 @@ export default class SocialSecurityForm extends React.Component {
key: child["domkey"][0],
label: child.label,
value: !_.isNil(paymentData[child["domkey"][0]]) ? paymentData[child["domkey"][0]].toString() : "",
onChange: this.handlePaymentChange
onChange: this.handlePaymentChange,
min: child.min,
max: child.max
})
}))}
customComponent={<ConsistentWelfare/>}
customComponent={<ConsistentWelfare value={Welfare} onChange={(Welfare) => this.setState({ Welfare })}
onBlurChange={this.handleChangeWelfare}/>}
title={title} col={2} showGroup
/>;
})
@ -118,12 +168,14 @@ export default class SocialSecurityForm extends React.Component {
}
}
export const ConsistentWelfare = (props) => {
const { value, onChange, key } = props;
const { onChange, onBlurChange, value } = props;
return <div className="welfareBaseWrapper">
<span className="title">各项福利基数一致</span>
<WeaInputNumber
style={{ width: 100 }} value={value}
onChange={(val) => onChange({ key, value: val })}
style={{ width: 100 }}
onBlur={onBlurChange}
value={value}
onChange={onChange}
precision={2}
/>
</div>;
@ -147,10 +199,15 @@ export const SocialEditInput = (props) => {
);
};
export const SocialInputNumber = (props) => {
const { key, value, onChange, label, labelColSpan = 12, wrapperColSpan = 12 } = props;
const { key, value, onChange, label, min, max, labelColSpan = 12, wrapperColSpan = 12 } = props;
const minNum = !_.isNil(min) ? Number(min) : 0, maxNum = !_.isNil(max) ? Number(max) : 0;
return (
<WeaFormItem label={label} labelCol={{ span: labelColSpan }} wrapperCol={{ span: wrapperColSpan }}>
<WeaInputNumber value={value} onChange={(val) => onChange({ key, value: val })} min={0} precision={2}/>
<WeaInputNumber
value={value} onChange={(val) => onChange({ key, value: val })} precision={2}
min={minNum > 0 ? minNum : -999999999999999}
max={maxNum > 0 ? maxNum : 999999999999999}
/>
</WeaFormItem>
);
};

View File

@ -1,4 +1,4 @@
import { action, observable } from "mobx";
import { action, observable, toJS } from "mobx";
import { message } from "antd";
import { WeaForm, WeaTableNew } from "comsMobx";
import { removePropertyCondition } from "../util/response";
@ -176,7 +176,7 @@ export class ArchivesStore {
_.map(baseList.items, item => {
obj = {
...obj,
[item["domkey"][0]]: "0"
[item["domkey"][0]]: ""
};
});
}
@ -207,13 +207,37 @@ export class ArchivesStore {
let paymentForm = "";
if (welfareType === "SOCIAL_SECURITY") {
baseForm = JSON.stringify(this.socialSecurityForm.data);
paymentForm = this.socialSecurityForm.data.socialSchemeId ? JSON.stringify(this.socialSecurityPaymentForm.data) : "";
if (this.socialSecurityForm.data.socialSchemeId) {
const socialSecurityPaymentData = toJS(this.socialSecurityPaymentForm).data;
const socialSecurityPaymentItems = toJS(this.socialSecurityPaymentForm).items[0].items;
const payload = socialSecurityPaymentItems.reduce((pre, cur) => {
const { domkey } = cur;
return Object.assign(pre, { [domkey[0]]: socialSecurityPaymentData[domkey[0]] ? socialSecurityPaymentData[domkey[0]].toString() : "0" });
}, {});
paymentForm = JSON.stringify(payload);
}
} else if (welfareType === "ACCUMULATION_FUND") {
baseForm = JSON.stringify(this.accumulationFundForm.data);
paymentForm = this.accumulationFundForm.data.fundSchemeId ? JSON.stringify(this.accumulationFundPaymentForm.data) : "";
if (this.accumulationFundForm.data.fundSchemeId) {
const accumulationFundPaymentData = toJS(this.accumulationFundPaymentForm).data;
const accumulationFundPaymentItems = toJS(this.accumulationFundPaymentForm).items[0].items;
const payload = accumulationFundPaymentItems.reduce((pre, cur) => {
const { domkey } = cur;
return Object.assign(pre, { [domkey[0]]: accumulationFundPaymentData[domkey[0]] ? accumulationFundPaymentData[domkey[0]].toString() : "0" });
}, {});
paymentForm = JSON.stringify(payload);
}
} else if (welfareType === "OTHER") {
baseForm = JSON.stringify(this.otherForm.data);
paymentForm = this.otherForm.data.otherSchemeId ? JSON.stringify(this.otherPaymentForm.data) : "";
if (this.otherForm.data.fundSchemeId) {
const otherPaymentData = toJS(this.otherPaymentForm).data;
const otherPaymentItems = toJS(this.otherPaymentForm).items[0].items;
const payload = otherPaymentItems.reduce((pre, cur) => {
const { domkey } = cur;
return Object.assign(pre, { [domkey[0]]: otherPaymentData[domkey[0]] ? otherPaymentData[domkey[0]].toString() : "0" });
}, {});
paymentForm = JSON.stringify(payload);
}
}
return new Promise((resolve, reject) => {
API.save({ welfareType, baseForm, paymentForm }).then(res => {