feature/2.9.42310.02-社保福利档案页面重构

This commit is contained in:
黎永顺 2023-11-08 13:37:33 +08:00
parent 8162e02796
commit 1eac37cd38
5 changed files with 223 additions and 26 deletions

View File

@ -11,7 +11,7 @@ import * as API from "../../../../../apis/welfareArchive";
import { getTaxAgentSelectList } from "../../../../../apis/taxAgent";
import { getWelfareSearchsForm, welfareConditions } from "../../config";
import { getConditionDomkeys } from "../../../../../util";
import { Button } from "antd";
import { Button, Modal } from "antd";
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;
@ -22,7 +22,7 @@ class Index extends Component {
constructor(props) {
super(props);
this.state = {
loading: false, conditions: []
loading: false, conditions: [], formData: {}
};
}
@ -31,7 +31,7 @@ class Index extends Component {
document.querySelector(".salary-welfare-archive").classList.add("zIndex0-welfare-archive");
this.getBaseForm(nextProps);
} else if (nextProps.visible !== this.props.visible && !nextProps.visible) {
const { archivesStore: { initWelfareProfileForm } } = nextProps;
const { archivesStore: { initWelfareProfileForm, setHasBeenModify } } = nextProps;
document.querySelector(".salary-welfare-archive").classList.remove("zIndex0-welfare-archive");
initWelfareProfileForm();
}
@ -39,12 +39,17 @@ class Index extends Component {
getBaseForm = async (props) => {
const { data: taxAgentList } = await getTaxAgentSelectList();
const { employeeId, paymentOrganization, socialItems } = props;
const {
archivesStore: { welfareProfileForm },
employeeId, paymentOrganization, socialBaseData, fundBaseData, othersBaseData
} = props;
const payload = { employeeId, paymentOrganization, welfareTypeEnum: "" };
API.getBaseForm(payload).then(({ status, data }) => {
if (status) {
const { data: result } = data;
const formData = { ...result, ...socialBaseData, ...fundBaseData, ...othersBaseData };
this.setState({
formData,
conditions: _.map(welfareConditions, o => {
if (o.title === "basic") {
return {
@ -63,15 +68,16 @@ class Index extends Component {
};
})
};
} else if (o.title === "social") {
console.log(props);
} else if (o.title === "social" || o.title === "fund" || o.title === "others") {
const title = o.title === "social" ? getLabel(543194, "社保基础信息") : o.title === "fund" ? getLabel(543197, "公积金基础信息") : getLabel(543198, "其他福利基础信息");
return {
...o, title: getLabel(543194, "社保基础信息"),
...o, title,
items: _.map(o.items, g => {
if (getKey(g) === "socialSchemeId" || getKey(g) === "underTake") {
if (getKey(g) === "socialSchemeId" || getKey(g) === "fundSchemeId" || getKey(g) === "otherSchemeId" || _.lowerCase(getKey(g)).indexOf("take") !== -1) {
const key = _.lowerCase(getKey(g)).indexOf("take") !== -1 ? "underTake" : getKey(g);
return {
...g, label: getLabel(g.lanId, g.label),
options: _.find(socialItems, j => j.domkey[0] === getKey(g)).options
options: _.find(props[`${o.title}Items`], j => j.domkey[0] === key).options
};
}
return { ...g, label: getLabel(g.lanId, g.label) };
@ -85,20 +91,31 @@ class Index extends Component {
};
})
}, () => {
const { archivesStore: { welfareProfileForm } } = props;
console.log(this.state.conditions);
console.log(this.state.conditions, props, formData);
welfareProfileForm.initFormFields(this.state.conditions);
_.map(getConditionDomkeys(this.state.conditions), k => {
if (k === "paymentOrganization") {
welfareProfileForm.updateFields({ [k]: paymentOrganization.toString() });
} else if (_.lowerCase(k).indexOf("social") !== -1 || k === "schemeAccount") {
welfareProfileForm.updateFields({ [k]: formData["SOCIAL_SECURITY"][k] ? formData["SOCIAL_SECURITY"][k].toString() : "" });
} else if (_.lowerCase(k).indexOf("fund") !== -1) {
welfareProfileForm.updateFields({ [k]: formData["ACCUMULATION_FUND"][k] ? formData["ACCUMULATION_FUND"][k].toString() : "" });
} else if (_.lowerCase(k).indexOf("other") !== -1) {
welfareProfileForm.updateFields({ [k]: formData["OTHER"][k] ? formData["OTHER"][k].toString() : "" });
} else {
welfareProfileForm.updateFields({ [k]: result[k] || "" });
welfareProfileForm.updateFields({ [k]: formData[k] || "" });
}
});
});
}
});
};
handleFormChange = (val) => {
const changeKey = _.keys(val)[0];
const { archivesStore: { setHasBeenModify } } = this.props;
console.log(val, changeKey);
setHasBeenModify(true);
};
renderTitle = () => {
const { loading } = this.state;
return <div className="titleDialog">
@ -111,17 +128,31 @@ class Index extends Component {
</div>
</div>;
};
handleClose = () => {
const { archivesStore: { hasBeenModify }, onClose } = this.props;
if (hasBeenModify) {
Modal.confirm({
title: getLabel(131329, "信息确认"),
content: getLabel(111, "确定放弃填写吗?放弃后数据将不会被保存!"),
onOk: () => {
onClose();
}
});
} else {
onClose();
}
};
render() {
const { archivesStore: { welfareProfileForm } } = this.props;
const { conditions } = this.state;
const { conditions, formData } = this.state;
return (
<WeaSlideModal
className="salary-welfare-archive-edit-layout" {...this.props}
top={0} width={760} height={100} measureT={"%"} measureX={"px"} measureY={"%"}
direction={"right"} title={this.renderTitle()}
top={0} width={800} height={100} measureT={"%"} measureX={"px"} measureY={"%"}
direction={"right"} title={this.renderTitle()} onClose={this.handleClose}
content={<div className="salary-welfare-archive-edit-area">
{getWelfareSearchsForm(welfareProfileForm, conditions)}
{getWelfareSearchsForm(welfareProfileForm, conditions, this.handleFormChange, formData)}
</div>}
/>
);

View File

@ -92,8 +92,15 @@ class Index extends Component {
...this.state.welfareEditSlide, visible: true,
employeeId, paymentOrganization,
socialItems: socialItems.data.items[0].items,
socialBaseData: {
SOCIAL_SECURITY: { ...socialItems.data.data, socialUnderTake: socialItems.data.data.underTake }
},
fundItems: fundItems.data.items[0].items,
othersItems: othersItems.data.items[0].items
fundBaseData: {
ACCUMULATION_FUND: { ...fundItems.data.data, fundUnderTake: fundItems.data.data.underTake }
},
othersItems: othersItems.data.items[0].items,
othersBaseData: { OTHER: { ...othersItems.data.data, otherUnderTake: othersItems.data.data.underTake } }
}
});
break;

View File

@ -1,5 +1,5 @@
import React from "react";
import { WeaFormItem, WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup, WeaTools } from "ecCom";
import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup, WeaTools } from "ecCom";
import { WeaSwitch } from "comsMobx";
import { Button } from "antd";
import AdvanceInputBtn from "./components/advanceInputBtn";
@ -451,8 +451,8 @@ export const welfareConditions = [
},
{
defaultshow: true,
title: "social",
col: 2,
title: "social", typename: "SOCIAL_SECURITY",
col: 2, showPaid: true,
items: [
{
colSpan: 3,
@ -469,7 +469,7 @@ export const welfareConditions = [
{
colSpan: 3,
conditionType: "SELECT",
domkey: ["underTake"],
domkey: ["socialUnderTake"],
fieldcol: 14,
label: "社保个人实际承担方",
lanId: 111,
@ -514,9 +514,145 @@ export const welfareConditions = [
viewAttr: 2
}
]
},
{
defaultshow: true,
title: "fund", typename: "ACCUMULATION_FUND",
col: 2, showPaid: true,
items: [
{
colSpan: 3,
conditionType: "SELECT",
domkey: ["fundSchemeId"],
fieldcol: 14,
label: "公积金方案名称",
lanId: 111,
labelcol: 10,
value: "",
options: [],
viewAttr: 2
},
{
colSpan: 3,
conditionType: "SELECT",
domkey: ["fundUnderTake"],
fieldcol: 14,
label: "公积金个人实际承担方",
lanId: 111,
labelcol: 10,
value: "",
options: [],
viewAttr: 2
},
{
colSpan: 3,
conditionType: "MONTHPICKER",
domkey: ["fundStartTime"],
fieldcol: 14,
label: "公积金起始缴纳月",
lanId: 542509,
labelcol: 10,
value: "",
options: [],
viewAttr: 2
},
{
colSpan: 3,
conditionType: "INPUT",
domkey: ["fundAccount"],
fieldcol: 14,
label: "公积金账号",
lanId: 542268,
labelcol: 10,
value: "",
viewAttr: 2
},
{
colSpan: 3,
conditionType: "MONTHPICKER",
domkey: ["fundEndTime"],
fieldcol: 14,
label: "公积金最后缴纳月",
lanId: 542510,
labelcol: 10,
value: "",
options: [],
viewAttr: 2
},
{
colSpan: 3,
conditionType: "INPUT",
domkey: ["supplementFundAccount"],
fieldcol: 14,
label: "补充公积金账号",
lanId: 542270,
labelcol: 10,
value: "",
viewAttr: 2
}
]
},
{
defaultshow: true,
title: "others", typename: "OTHER",
col: 2, showPaid: true,
items: [
{
colSpan: 3,
conditionType: "SELECT",
domkey: ["otherSchemeId"],
fieldcol: 14,
label: "其它福利名称",
lanId: 111,
labelcol: 10,
value: "",
options: [],
viewAttr: 2
},
{
colSpan: 3,
conditionType: "SELECT",
domkey: ["otherUnderTake"],
fieldcol: 14,
label: "其它福利个人实际承担方",
lanId: 111,
labelcol: 10,
value: "",
options: [],
viewAttr: 2
},
{
colSpan: 3,
conditionType: "MONTHPICKER",
domkey: ["otherStartTime"],
fieldcol: 14,
label: "其他福利起始缴纳月",
lanId: 542511,
labelcol: 10,
value: "",
options: [],
viewAttr: 2
},
{
colSpan: 3,
conditionType: "MONTHPICKER",
domkey: ["otherEndTime"],
fieldcol: 14,
label: "其他福利最后缴纳月",
lanId: 542512,
labelcol: 10,
value: "",
options: [],
viewAttr: 2
}
]
}
];
export const getWelfareSearchsForm = (form, condition, onSearch = () => void (0)) => {
export const getWelfareSearchsForm = (form, condition, onChange = () => void (0), payload) => {
const CustomComponent = ({ type }) => {
const value = payload[type].nonPayment ? payload[type].nonPayment.toString() : "";
return <WeaCheckbox value={value} content={getLabel(543196, "暂不缴纳")}/>;
};
const { isFormInit } = form;
const formParams = form.getFormParams();
let group = [];
@ -530,15 +666,16 @@ export const getWelfareSearchsForm = (form, condition, onSearch = () => void (0)
wrapperCol={{ span: `${fields.fieldcol}` }} error={form.getError(fields)}
tipPosition="bottom"
>
<WeaSwitch fieldConfig={fields} form={form} formParams={formParams}/>
<WeaSwitch fieldConfig={fields} form={form} formParams={formParams} onChange={onChange}/>
</WeaFormItem>),
colSpan: 1,
hide: fields.hide
});
});
group.push(
<WeaSearchGroup col={c.col} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}
center={false}
<WeaSearchGroup col={c.col} needTigger={true} showGroup={c.defaultshow} items={items} center={false}
title={c.title}
customComponent={c.showPaid ? <CustomComponent type={c.typename}/> : <span></span>}
className={c.col === 3 ? "basic-welfare-info-wrapper" : c.col === 2 ? "twoColumns-welfare-info-wrapper" : ""}
/>);
});

View File

@ -172,6 +172,23 @@
}
}
.twoColumns-welfare-info-wrapper {
.wea-form-cell-wrapper {
& > div:nth-child(1), & > div:nth-child(3) {
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
& > div:nth-child(2), & > div:nth-child(4) {
border-bottom: 1px solid #e5e5e5;
}
& > div:nth-child(5) {
border-right: 1px solid #e5e5e5;
}
}
}
.wea-search-group, .wea-form-cell {
padding: 0;

View File

@ -11,7 +11,12 @@ export class ArchivesStore {
@observable logForm = new WeaForm(); // 社保福利档案重构-日志查询条件log
@observable welfareForm = new WeaForm(); // 社保福利档案重构-列表查询form
@observable welfareProfileForm = new WeaForm(); // 社保福利档案重构-员工薪资档案form
@action initWelfareProfileForm = () => this.welfareProfileForm = new WeaForm();
@action initWelfareProfileForm = () => {
this.hasBeenModify = false;
this.welfareProfileForm = new WeaForm();
};
@observable hasBeenModify = false; //社保福利档案-员工薪资档数据-是否修改过
@action setHasBeenModify = (v) => this.hasBeenModify = v;//设置社保福利档案-员工薪资档数据
@observable tableStore = new TableStore(