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

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

This commit is contained in:
黎永顺 2023-02-14 13:38:19 +08:00
parent 38ca2cc421
commit 4ce7eca139
4 changed files with 245 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/baseForm.js
View File

@ -1,64 +1,43 @@
import React from "react";
import GroupCard from "../../../components/groupCard";
import { Col, Row, Tooltip } from "antd";
import { WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
import { inject, observer } from "mobx-react";
import "./index.less";
@inject("archivesStore")
@observer
export default class BaseForm extends React.Component {
componentWillMount() {
const { archivesStore: { getBaseForm } } = this.props;
getBaseForm(this.props.employeeId);
}
render() {
const { archivesStore: { baseFormData } ,record} = this.props;
const { archivesStore: { baseFormData }, record } = this.props;
const { username, department, position, telephone, hiredate, dimissionDate } = baseFormData;
const { paymentOrganizationName } = record;
const baseItems = [
{ com: Input("姓名", username) },
{ com: Input("部门", department) },
{ com: Input("岗位", position) },
{ com: Input("手机号", telephone) },
{ com: Input("入职日期", hiredate) },
{ com: Input("合同到期日期", dimissionDate) }
];
const taxagentItems = [
{ com: Input("个税扣缴义务人", paymentOrganizationName, 6, 18) }
];
return (
<div className="socialFormWrapper">
<GroupCard title="基本信息">
<Row>
<Col span={4} className="formItem borderR-none borderB-none">姓名:</Col>
<Col span={4} className="formItem borderR-none borderB-none">
<Tooltip title={baseFormData.username}>
<span>{baseFormData.username}</span>
</Tooltip>
</Col>
<Col span={4} className="formItem borderR-none borderB-none">部门:</Col>
<Col span={4} className="formItem borderR-none borderB-none">
<Tooltip title={baseFormData.department}>
<span>{baseFormData.department}</span>
</Tooltip>
</Col>
<Col span={4} className="formItem borderR-none borderB-none">岗位:</Col>
<Col span={4} className="formItem borderB-none">
<Tooltip title={baseFormData.position}>
<span>{baseFormData.position}</span>
</Tooltip>
</Col>
</Row>
<Row>
<Col span={4} className="formItem borderR-none">入职日期:</Col>
<Col span={4} className="formItem borderR-none">{baseFormData.hiredate}</Col>
<Col span={4} className="formItem borderR-none">手机号:</Col>
<Col span={4} className="formItem borderR-none">
<Tooltip title={baseFormData.telephone}>
<span>{baseFormData.telephone}</span>
</Tooltip>
</Col>
<Col span={4} className="formItem borderR-none">合同到期日期:</Col>
<Col span={4} className="formItem">{baseFormData.dimissionDate}</Col>
</Row>
</GroupCard>
<GroupCard title="个税扣缴义务人">
<Row>
<Col span={6} className="formItem borderR-none">个税扣缴义务人：</Col>
<Col span={6} className="formItem">{record.paymentOrganizationName}</Col>
</Row>
</GroupCard>
<WeaSearchGroup title="基本信息" items={baseItems} col={3} showGroup/>
<WeaSearchGroup title="个税扣缴义务人" items={taxagentItems} col={1} showGroup/>
</div>
);
}
}
const Input = (label, value, labelColSpan = 12, wrapperColSpan = 12) => {
return (
<WeaFormItem label={label} labelCol={{ span: labelColSpan }} wrapperCol={{ span: wrapperColSpan }}>
<WeaInput value={value} viewAttr={1}/>
</WeaFormItem>
);
};

152
pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/index.js
View File

@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, Dropdown, Menu, message, Modal, Popover } from "antd";
import { WeaHelpfulTip, WeaSlideModal, WeaTab, WeaTable, WeaTop } from "ecCom";
import { getSearchs, renderLoading } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import { getSearchs, renderLoading } from "../../../util";
import BaseForm from "./baseForm";
import SlideModalTitle from "../../../components/slideModalTitle";
import SocialSecurityForm from "./socialSecurityForm";
@ -50,9 +50,7 @@ export default class Archives extends React.Component {
total: 0
}
};
this.record = {};
this.pageInfo = { current: 1, pageSize: 10 };
}
componentDidMount() {
@ -94,16 +92,16 @@ export default class Archives extends React.Component {
});
};
handleEdit(record) {
handleEdit = (record) => {
this.record = record;
this.setState({ employeeId: record.employeeId, editSlideVisible: true });
}
};
setStep(step) {
setStep = (step) => {
this.setState({ step });
}
};
getColumns() {
getColumns = () => {
const { columns, pageInfo, selectedKey } = this.state;
const { taxAgentStore: { showOperateBtn } } = this.props;
let tmpV = _.map(columns.filter(item => item.display === "TRUE"), (item, index) => {
@ -206,49 +204,54 @@ export default class Archives extends React.Component {
);
}
}] : [];
}
};
// 保存
handleEditSlideSave = () => {
const { selectedTab } = this.state;
const { archivesStore: { save, socialSecurityForm, accumulationFundForm, otherForm } } = this.props;
if (selectedTab == 1) {
const { data } = socialSecurityForm;
if (data.socialSchemeId && !data.socialStartTime) {
Modal.warning({
title: "信息确认",
content: "必要信息不完整，红色*为必填项！"
});
return;
}
save("SOCIAL_SECURITY").then(() => {
this.query();
});
} else if (selectedTab == 2) {
const { data } = accumulationFundForm;
if (data.fundSchemeId && !data.fundStartTime) {
Modal.warning({
title: "信息确认",
content: "必要信息不完整，红色*为必填项！"
});
return;
}
save("ACCUMULATION_FUND").then(() => {
this.query();
});
} else if (selectedTab == 3) {
const { data } = otherForm;
if (data.otherSchemeId && !data.otherStartTime) {
Modal.warning({
title: "信息确认",
content: "必要信息不完整，红色*为必填项！"
});
return;
}
save("OTHER").then(() => {
this.query();
});
if (!this.handleSave) {
this.handleSave = _.debounce(() => {
const { selectedTab } = this.state;
const { archivesStore: { save, socialSecurityForm, accumulationFundForm, otherForm } } = this.props;
if (selectedTab == 1) {
const { data } = socialSecurityForm;
if (data.socialSchemeId && !data.socialStartTime) {
Modal.warning({
title: "信息确认",
content: "必要信息不完整，红色*为必填项！"
});
return;
}
save("SOCIAL_SECURITY").then(() => {
this.query();
});
} else if (selectedTab == 2) {
const { data } = accumulationFundForm;
if (data.fundSchemeId && !data.fundStartTime) {
Modal.warning({
title: "信息确认",
content: "必要信息不完整，红色*为必填项！"
});
return;
}
save("ACCUMULATION_FUND").then(() => {
this.query();
});
} else if (selectedTab == 3) {
const { data } = otherForm;
if (data.otherSchemeId && !data.otherStartTime) {
Modal.warning({
title: "信息确认",
content: "必要信息不完整，红色*为必填项！"
});
return;
}
save("OTHER").then(() => {
this.query();
});
}
}, 500);
}
this.handleSave();
};
// 导入
@ -264,34 +267,34 @@ export default class Archives extends React.Component {
};
// 导入预览
handlePreviewImport(params) {
handlePreviewImport = (params) => {
const { archivesStore: { previewCurData } } = this.props;
previewCurData(params);
}
};
// 导入
handleImport(params) {
handleImport = (params) => {
const { archivesStore: { importBatch } } = this.props;
const { runStatus } = this.state;
importBatch({ ...params, runStatus });
}
};
// 导入完成
handleFinish() {
handleFinish = () => {
const { archivesStore: { initImportParams } } = this.props;
initImportParams();
this.setState({ importVisible: false, step: 0 }, () => {
this.query();
});
}
};
// 初始化导入参数
handleInitModal() {
handleInitModal = () => {
const { archivesStore: { setPreviewCurDataColumns, setPreviewCurDataDataSource, setImportResult } } = this.props;
setPreviewCurDataColumns([]);
setPreviewCurDataDataSource([]);
setImportResult({});
}
};
// 选项设置
onSelectChange = selectedRowKeys => {
@ -299,7 +302,7 @@ export default class Archives extends React.Component {
};
// 关闭导入框
handleImportCancel() {
handleImportCancel = () => {
const { archivesStore: { initImportParams, getTableDatas } } = this.props;
initImportParams();
@ -307,7 +310,7 @@ export default class Archives extends React.Component {
getTableDatas();
}
this.setState({ importVisible: false, step: 0 });
}
};
//切换tab
handleChangeTab = (selectedKey) => {
@ -536,24 +539,7 @@ export default class Archives extends React.Component {
form, condition, showSearchAd, setShowSearchAd,
previewCurDataColumns, previewCurDataDataSource, importResult
} = archivesStore;
if (_.isEmpty(this.getColumns())) { // 无权限处理
return renderLoading();
}
const rightMenu = [// 右键菜单
// {
// key: 'BTN_COLUMN',
// icon: <i className='icon-coms-Custom' />,
// content: '显示列定制',
// onClick: this.showColumn
// },
];
const collectParams = { // 收藏功能配置
favname: "社保福利档案",
favouritetype: 1,
objid: 0,
link: "wui/index.html#/ns_demo03/index",
importantlevel: 1
};
if (_.isEmpty(this.getColumns())) return renderLoading();
const adBtn = [ // 高级搜索内部按钮
<Button type="primary" onClick={() => {
setShowSearchAd(false);
@ -729,8 +715,6 @@ export default class Archives extends React.Component {
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>
<WeaTab
datas={tabCondition}
@ -778,10 +762,12 @@ export default class Archives extends React.Component {
className="slideOuterWrapper"
visible={this.state.editSlideVisible}
top={0}
width={48}
measureT="%"
width={800}
measureX="px"
height={100}
direction={"right"}
measure={"%"}
measureY="%"
direction="right"
title={
<SlideModalTitle
subtitle={"员工福利档案"}
@ -796,11 +782,7 @@ export default class Archives extends React.Component {
(showOperateBtn && selectedKey !== "stop" && selectedTab != 0) ?
[<Button type="primary" onClick={() => this.handleEditSlideSave()}>保存</Button>] : []
}
subItemChange={
(selectedTab) => {
this.setState({ selectedTab });
}
}
subItemChange={selectedTab => this.setState({ selectedTab })}
/>
}
content={<div>

65
pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/index.less
View File

@ -1,36 +1,32 @@
.socialFormWrapper {
.formItem {
height: 40px;
line-height: 40px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #e2e2e2;
margin-bottom: 0 !important;
.ant-select-selection{
height: 30px;
border-radius: 0;
.wea-search-group {
padding: 0 16px;
.wea-form-cell-wrapper {
border: 1px solid #e5e5e5;
border-bottom: none;
border-right: none;
margin: 0 16px;
.wea-form-cell {
padding: 4px 16px;
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
}
}
}
.borderR-none {
border-right: none;
}
.borderB-none {
border-bottom: none;
}
}
.mySalaryBenefitsWrapper{
.tdEllipsis{
.mySalaryBenefitsWrapper {
.tdEllipsis {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.optWrapper {
display: flex;
align-items: center;
@ -40,6 +36,7 @@
}
}
}
//提示语
.helpWrapper {
display: flex;
@ -50,30 +47,32 @@
}
}
.slideOuterWrapper{
.wea-slide-modal-title{
.slideOuterWrapper {
.wea-slide-modal-title {
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close{
.rodal-close {
z-index: 99;
top: 10px!important;
top: 10px !important;
}
}
@media (min-width: 1260px){
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: 100%!important;
@media (min-width: 1260px) {
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: 100% !important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: calc(100% - 96px)!important;
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: calc(100% - 96px) !important;
}
}
}

251
pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/socialSecurityForm.js
View File

@ -1,9 +1,6 @@
import React from "react";
import GroupCard from "../../../components/groupCard";
import { Col, Row } from "antd";
import { WeaCheckbox, WeaDatePicker, WeaInput, WeaInputNumber, WeaSelect } from "ecCom";
import { WeaCheckbox, WeaSearchGroup } from "ecCom";
import { inject, observer } from "mobx-react";
import cs from "classnames";
import "./index.less";
@inject("archivesStore")
@ -18,7 +15,9 @@ export default class SocialSecurityForm extends React.Component {
}
// 表单变化
handleFormChange(params) {
handleFormChange = (params) => {
console.log("params", params);
return;
const { archivesStore: { socialSecurityForm, setSocialSecurityForm }, onChangeRecordSchemeId } = this.props;
const { data } = socialSecurityForm;
let request = { ...data, ...params };
@ -27,7 +26,7 @@ export default class SocialSecurityForm extends React.Component {
setSocialSecurityForm(form);
Object.keys(params).length > 1 &&
onChangeRecordSchemeId(params.socialSchemeId);
}
};
// 获取基数表单
handleFetchPaymentForm(value) {
@ -53,137 +52,131 @@ export default class SocialSecurityForm extends React.Component {
let paymentItems = socialSecurityPaymentForm.items;
// Integer数据转为string
let data = { ...baseData };
if (data) {
if (!_.isNil(data)) {
Object.keys(data).map(key => {
if (data[key]) {
if (!_.isNil(data[key])) {
data[key] = data[key].toString();
}
});
}
const { nonPayment } = data;
console.log(baseData, data);
return (
<div className="socialFormWrapper">
<div style={{ overflow: "hidden" }}>
<WeaCheckbox
style={{ float: "right", marginRight: "10px", marginTop: "10px" }}
value={data && data.nonPayment}
id="nonPayment"
content="暂不缴纳"
onChange={(value) => {
this.handleFormChange({ nonPayment: value });
}}
/>
</div>
<GroupCard title="社保基础信息">
<Row>
<Col span={6} className="formItem borderR-none borderB-none">社保起始缴纳月：</Col>
<Col span={6} className="formItem borderR-none borderB-none">
<WeaDatePicker
viewAttr={(socialSecurityForm.data && socialSecurityForm.data.socialSchemeId) ? 3 : 2}
format="YYYY-MM"
value={data && data.socialStartTime}
onChange={value => {
this.handleFormChange({ socialStartTime: value });
}}
/>
</Col>
<Col span={6} className="formItem borderR-none borderB-none">社保方案名称：</Col>
<Col span={6} className="formItem">
<WeaSelect
options={(items && items[0].items && items[0].items[0]) ? [{
key: "",
showname: ""
}, ...items[0].items[0].options] : []}
value={data && data.socialSchemeId}
style={{ width: "100%" }}
onChange={(value, showName) => {
this.handleFormChange({ socialName: showName, socialSchemeId: value });
this.handleFetchPaymentForm(value);
}}
/>
</Col>
</Row>
<Row>
<Col span={6} className="formItem borderR-none borderB-none">社保最后缴纳月：</Col>
<Col span={6} className="formItem borderR-none borderB-none">
<WeaDatePicker
format="YYYY-MM"
value={data && data.socialEndTime}
onChange={value => this.handleFormChange({ socialEndTime: value })}
/>
</Col>
<Col span={6} className="formItem borderR-none">社保账号：</Col>
<Col span={6} className="formItem">
<WeaInput value={data && data.schemeAccount} onChange={(value) => {
this.handleFormChange({ schemeAccount: value });
}}/>
</Col>
</Row>
<Row>
{/*<Col span={6} className="formItem borderR-none">个税扣缴义务人：</Col>*/}
{/*<Col span={6} className="formItem borderR-none">*/}
{/* <Select*/}
{/* defaultValue={data && data.paymentOrganization}*/}
{/* value={data && data.paymentOrganization}*/}
{/* style={{ width: "100%" }}*/}
{/* notFoundContent={"暂无数据"}*/}
{/* onChange={(value) => this.handleFormChange({ paymentOrganization: value })}>*/}
{/* {*/}
{/* items && items[0].items && items[0].items[1] && items[0].items[1].options.map(item => (*/}
{/* <Option value={item.key}>{item.showname}</Option>*/}
{/* ))*/}
{/* }*/}
{/* </Select>*/}
{/*</Col>*/}
<Col span={6} className="formItem borderR-none">社保个人实际承担方：</Col>
<Col span={6} className="formItem">
<WeaSelect
options={(items && items[0].items && items[0].items[2]) ? items[0].items[2].options : []}
value={data && data.underTake}
style={{ width: "100%" }}
onChange={(value) => {
this.handleFormChange({ underTake: value });
}}
/>
</Col>
</Row>
</GroupCard>
{
data.socialSchemeId && paymentItems && paymentItems.map(group => (
<div>
{
group.items && group.items.length > 0 && <GroupCard title={group.title}>
<Row>
{
group.items && group.items.map((item, idx) => (
<Col span={12}>
<Row>
<Col span={12}
className={cs("formItem", "borderR-none", { "borderB-none": idx !== group.items.length - 1 && idx !== group.items.length - 2 })}>{item.label}：</Col>
<Col span={12} className={cs("formItem", {
"borderR-none": idx === 0 || idx === 2,
"borderB-none": idx === 0 || idx === 2 || idx === 1
})}>
<WeaInputNumber
min={0}
precision={2}
value={(paymentData && paymentData[item.domkey[0]]) ? Number(paymentData[item.domkey[0]]) : 0}
onChange={(value) => {
this.handlePaymentChange({ [item.domkey[0]]: value ? String(value) : '0' });
}}
/>
</Col>
</Row>
</Col>
))
}
</Row>
</GroupCard>
}
</div>
))
}
<WeaSearchGroup
title="社保基础信息"
customComponent={<SocialTitle value={nonPayment} onChange={this.handleFormChange}/>}
items={[]} col={2} showGroup needTigger={false}/>
{/*<div style={{ overflow: "hidden" }}>*/}
{/* <WeaCheckbox*/}
{/* style={{ float: "right", marginRight: "10px", marginTop: "10px" }}*/}
{/* value={data && data.nonPayment}*/}
{/* id="nonPayment"*/}
{/* content="暂不缴纳"*/}
{/* onChange={(value) => {*/}
{/* this.handleFormChange({ nonPayment: value });*/}
{/* }}*/}
{/* />*/}
{/*</div>*/}
{/*<GroupCard title="社保基础信息">*/}
{/* <Row>*/}
{/* <Col span={6} className="formItem borderR-none borderB-none">社保起始缴纳月：</Col>*/}
{/* <Col span={6} className="formItem borderR-none borderB-none">*/}
{/* <WeaDatePicker*/}
{/* viewAttr={(socialSecurityForm.data && socialSecurityForm.data.socialSchemeId) ? 3 : 2}*/}
{/* format="YYYY-MM"*/}
{/* value={data && data.socialStartTime}*/}
{/* onChange={value => {*/}
{/* this.handleFormChange({ socialStartTime: value });*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* <Col span={6} className="formItem borderR-none borderB-none">社保方案名称：</Col>*/}
{/* <Col span={6} className="formItem">*/}
{/* <WeaSelect*/}
{/* options={(items && items[0].items && items[0].items[0]) ? [{*/}
{/* key: "",*/}
{/* showname: ""*/}
{/* }, ...items[0].items[0].options] : []}*/}
{/* value={data && data.socialSchemeId}*/}
{/* style={{ width: "100%" }}*/}
{/* onChange={(value, showName) => {*/}
{/* this.handleFormChange({ socialName: showName, socialSchemeId: value });*/}
{/* this.handleFetchPaymentForm(value);*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* <Row>*/}
{/* <Col span={6} className="formItem borderR-none borderB-none">社保最后缴纳月：</Col>*/}
{/* <Col span={6} className="formItem borderR-none borderB-none">*/}
{/* <WeaDatePicker*/}
{/* format="YYYY-MM"*/}
{/* value={data && data.socialEndTime}*/}
{/* onChange={value => this.handleFormChange({ socialEndTime: value })}*/}
{/* />*/}
{/* </Col>*/}
{/* <Col span={6} className="formItem borderR-none">社保账号：</Col>*/}
{/* <Col span={6} className="formItem">*/}
{/* <WeaInput value={data && data.schemeAccount} onChange={(value) => {*/}
{/* this.handleFormChange({ schemeAccount: value });*/}
{/* }}/>*/}
{/* </Col>*/}
{/* </Row>*/}
{/* <Row>*/}
{/* <Col span={6} className="formItem borderR-none">社保个人实际承担方：</Col>*/}
{/* <Col span={6} className="formItem">*/}
{/* <WeaSelect*/}
{/* options={(items && items[0].items && items[0].items[2]) ? items[0].items[2].options : []}*/}
{/* value={data && data.underTake}*/}
{/* style={{ width: "100%" }}*/}
{/* onChange={(value) => {*/}
{/* this.handleFormChange({ underTake: value });*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/*</GroupCard>*/}
{/*{*/}
{/* data.socialSchemeId && paymentItems && paymentItems.map(group => (*/}
{/* <div>*/}
{/* {*/}
{/* group.items && group.items.length > 0 && <GroupCard title={group.title}>*/}
{/* <Row>*/}
{/* {*/}
{/* group.items && group.items.map((item, idx) => (*/}
{/* <Col span={12}>*/}
{/* <Row>*/}
{/* <Col span={12}*/}
{/* className={cs("formItem", "borderR-none", { "borderB-none": idx !== group.items.length - 1 && idx !== group.items.length - 2 })}>{item.label}：</Col>*/}
{/* <Col span={12} className={cs("formItem", {*/}
{/* "borderR-none": idx === 0 || idx === 2,*/}
{/* "borderB-none": idx === 0 || idx === 2 || idx === 1*/}
{/* })}>*/}
{/* <WeaInputNumber*/}
{/* min={0}*/}
{/* precision={2}*/}
{/* value={(paymentData && paymentData[item.domkey[0]]) ? Number(paymentData[item.domkey[0]]) : 0}*/}
{/* onChange={(value) => {*/}
{/* this.handlePaymentChange({ [item.domkey[0]]: value ? String(value) : '0' });*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* </Col>*/}
{/* ))*/}
{/* }*/}
{/* </Row>*/}
{/* </GroupCard>*/}
{/* }*/}
{/* </div>*/}
{/* ))*/}
{/*}*/}
</div>
);
}
}
const SocialTitle = (props) => {
const { value, onChange } = props;
return <WeaCheckbox value={value} content="暂不缴纳" onChange={onChange}/>;
};