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

社保福利档案页面重构

This commit is contained in:
黎永顺 2023-02-13 16:00:14 +08:00
parent df12fae609
commit f6f786b33f
4 changed files with 274 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/defaultSlideForm.js
View File

@ -1,11 +1,11 @@
import React from "react";
import { WeaHelpfulTip, WeaInput, WeaInputNumber, WeaSelect, WeaTable } from "ecCom";
import { Col, Row, Switch } from "antd";
import { WeaHelpfulTip, WeaInputNumber, WeaSelect, WeaTab, WeaTable } from "ecCom";
import { 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";
import SchemeInfoForm from "./schemeInfoForm";
@inject("programmeStore", "salaryFileStore", "taxAgentStore")
@observer
@ -14,7 +14,7 @@ export default class DefaultSlideForm extends React.Component {
super(props);
this.state = {
value: "SCHEME_TOWN",
selectItem: "个人",
selectedKey: "PERSONAL",
dataSource: {},
paymentPeriodModal: {
visible: false,
@ -275,7 +275,7 @@ export default class DefaultSlideForm extends React.Component {
setDefaultPersonDataSource(dataSource);
setDefaultCompanyDataSource(dataSource_company);
} else {
if (this.state.selectItem == "个人") {
if (this.state.selectedKey === "PERSONAL") {
let dataSource = [...defaultPersonDataSource];
dataSource = dataSource.map(item => {
if (item.id == result.id) return result;
@ -338,7 +338,7 @@ export default class DefaultSlideForm extends React.Component {
render() {
const { paymentPeriodModal } = this.state;
const { programmeStore, salaryFileStore, taxAgentStore } = this.props;
const { programmeStore, salaryFileStore, taxAgentStore, requestParams, onChange } = this.props;
const { userStatusList } = salaryFileStore;
const { taxAgentAdminOption, getTaxAgentSelectListAsAdmin } = taxAgentStore;
const { defaultPersonDataSource, defaultCompanyDataSource } = programmeStore;
@ -359,120 +359,112 @@ export default class DefaultSlideForm extends React.Component {
showname: "农村"
}
];
const handleSmallTabChange = item => {
this.setState({
selectItem: item.value
});
};
return (
<div className="defaultSlideForm">
<div>
<Row style={{ lineHeight: "40px" }}>
<Col span={6}>
缴纳类型
</Col>
<Col span={18}>
<WeaSelect
style={{ width: "200px" }}
options={options}
viewAttr={3}
value={this.props.requestParams.paymentType}
onChange={(v, showname) => {
let requestParams = { ...this.props.requestParams };
requestParams.paymentType = v;
this.props.onChange(requestParams);
}}
/>
</Col>
</Row>
{/*<div>*/}
{/* <Row style={{ lineHeight: "40px" }}>*/}
{/* <Col span={6}>*/}
{/* 缴纳类型*/}
{/* </Col>*/}
{/* <Col span={18}>*/}
{/* <WeaSelect*/}
{/* style={{ width: "200px" }}*/}
{/* options={options}*/}
{/* viewAttr={3}*/}
{/* value={this.props.requestParams.paymentType}*/}
{/* onChange={(v, showname) => {*/}
{/* let requestParams = { ...this.props.requestParams };*/}
{/* requestParams.paymentType = v;*/}
{/* this.props.onChange(requestParams);*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
<Row style={{ lineHeight: "40px" }}>
<Col span={6}>
方案名称
</Col>
<Col span={18}>
<WeaInput
style={{ width: "200px" }}
viewAttr={3}
value={this.props.requestParams.schemeName}
onChange={value => {
let requestParams = { ...this.props.requestParams };
requestParams.schemeName = value;
this.props.onChange(requestParams);
}}
/>
</Col>
</Row>
<Row style={{ lineHeight: "40px" }}>
<Col span={6}>可见性</Col>
<Col span={18}>
<WeaSelect
style={{ width: "200px" }}
value={this.props.requestParams.sharedType}
options={userStatusList}
onChange={(visibleVal) => {
let requestParams = { ...this.props.requestParams };
visibleVal === "1" && getTaxAgentSelectListAsAdmin();
(visibleVal === "0" || visibleVal === "") && (requestParams.taxAgentIds = "");
requestParams.sharedType = visibleVal;
this.props.onChange(requestParams);
}}
/>
</Col>
</Row>
{
this.props.requestParams.sharedType === "1" &&
<Row style={{ display: "flex", alignItems: "center", height: 40, marginTop: 8 }}>
<Col span={6}>可见性范围</Col>
<Col span={18}>
<WeaSelect
multiple
viewAttr={3}
style={{ width: "200px" }}
value={this.props.requestParams.taxAgentIds}
options={taxAgentAdminOption}
onChange={(value) => {
let requestParams = { ...this.props.requestParams };
requestParams.taxAgentIds = value;
this.props.onChange(requestParams);
}}
/>
</Col>
</Row>
}
<Row style={{ lineHeight: "40px" }}>
<Col span={6}>备注</Col>
<Col span={18}>
<WeaInput
style={{ width: "200px" }}
value={this.props.requestParams.remarks}
onChange={value => {
let requestParams = { ...this.props.requestParams };
requestParams.remarks = value;
this.props.onChange(requestParams);
}}
/>
</Col>
</Row>
</div>
{/* <Row style={{ lineHeight: "40px" }}>*/}
{/* <Col span={6}>*/}
{/* 方案名称*/}
{/* </Col>*/}
{/* <Col span={18}>*/}
{/* <WeaInput*/}
{/* style={{ width: "200px" }}*/}
{/* viewAttr={3}*/}
{/* value={this.props.requestParams.schemeName}*/}
{/* onChange={value => {*/}
{/* let requestParams = { ...this.props.requestParams };*/}
{/* requestParams.schemeName = value;*/}
{/* this.props.onChange(requestParams);*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* <Row style={{ lineHeight: "40px" }}>*/}
{/* <Col span={6}>可见性</Col>*/}
{/* <Col span={18}>*/}
{/* <WeaSelect*/}
{/* style={{ width: "200px" }}*/}
{/* value={this.props.requestParams.sharedType}*/}
{/* options={userStatusList}*/}
{/* onChange={(visibleVal) => {*/}
{/* let requestParams = { ...this.props.requestParams };*/}
{/* visibleVal === "1" && getTaxAgentSelectListAsAdmin();*/}
{/* (visibleVal === "0" || visibleVal === "") && (requestParams.taxAgentIds = "");*/}
{/* requestParams.sharedType = visibleVal;*/}
{/* this.props.onChange(requestParams);*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* {*/}
{/* this.props.requestParams.sharedType === "1" &&*/}
{/* <Row style={{ display: "flex", alignItems: "center", height: 40, marginTop: 8 }}>*/}
{/* <Col span={6}>可见性范围</Col>*/}
{/* <Col span={18}>*/}
{/* <WeaSelect*/}
{/* multiple*/}
{/* viewAttr={3}*/}
{/* style={{ width: "200px" }}*/}
{/* value={this.props.requestParams.taxAgentIds}*/}
{/* options={taxAgentAdminOption}*/}
{/* onChange={(value) => {*/}
{/* let requestParams = { ...this.props.requestParams };*/}
{/* requestParams.taxAgentIds = value;*/}
{/* this.props.onChange(requestParams);*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/* }*/}
{/* <Row style={{ lineHeight: "40px" }}>*/}
{/* <Col span={6}>备注</Col>*/}
{/* <Col span={18}>*/}
{/* <WeaInput*/}
{/* style={{ width: "200px" }}*/}
{/* value={this.props.requestParams.remarks}*/}
{/* onChange={value => {*/}
{/* let requestParams = { ...this.props.requestParams };*/}
{/* requestParams.remarks = value;*/}
{/* this.props.onChange(requestParams);*/}
{/* }}*/}
{/* />*/}
{/* </Col>*/}
{/* </Row>*/}
{/*</div>*/}
<SchemeInfoForm {...this.props} onChangeFieldsItem={(val) => onChange({ ...requestParams, ...val })}/>
<div className="tableBar">
<div>
<SmallTab
items={[
{ title: "个人", value: "个人" },
{ title: "公司", value: "公司" }
]}
onChange={item => {
handleSmallTabChange(item);
}}
/>
</div>
<WeaTab
datas={[
{ title: "个人", viewcondition: "PERSONAL" },
{ title: "公司", viewcondition: "COMPANY" }
]}
keyParam="viewcondition"
selectedKey={this.state.selectedKey}
onChange={selectedKey => this.setState({ selectedKey })}
/>
<div className="tableWrapper">
{this.state.selectItem == "个人"
{this.state.selectedKey === "PERSONAL"
? <WeaTable
dataSource={defaultPersonDataSource}
columns={insertUpdateColumns}

69
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/enum.js
View File

@ -1,10 +1,65 @@
export const paymentScopeEnum = {
1: "SCOPE_COMPANY",
2: "SCOPE_PERSON"
}
1: "SCOPE_COMPANY",
2: "SCOPE_PERSON"
};
export const welfareTypeEnum = {
1: "SOCIAL_SECURITY",
2: "ACCUMULATION_FUND",
3: "OTHER"
}
1: "SOCIAL_SECURITY",
2: "ACCUMULATION_FUND",
3: "OTHER"
};
export const schemeFields = [
{
key: "paymentType",
label: "缴纳类型",
type: "SELECT",
options: [
{
key: "",
selected: false,
showname: ""
},
{
key: "SCHEME_TOWN",
selected: true,
showname: "城镇"
},
{
key: "SCHEME_VILLAGE",
selected: false,
showname: "农村"
}
],
viewAttr: 3,
tip: ""
},
{
key: "schemeName",
label: "方案名称",
type: "INPUT",
viewAttr: 3,
tip: ""
},
{
key: "sharedType",
label: "可见性",
type: "SELECT",
viewAttr: 3,
tip: ""
},
{
key: "taxAgentIds",
label: "可见性范围",
type: "SELECT",
viewAttr: 3,
tip: ""
},
{
key: "remarks",
label: "备注",
type: "TEXTAREA",
viewAttr: 2,
tip: ""
}
];

17
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
View File

@ -536,19 +536,22 @@ export default class Programme extends React.Component {
className="slideOuterWrapper"
visible={this.state.slideVisiable}
top={0}
width={60}
measureT="%"
width={800}
measureX="px"
height={100}
measureY="%"
direction={"right"}
measure={"%"}
title={
<SlideModalTitle
subtitle={this.state.customEdit ? "修改" : "新增"}
subTabs={[{ title: "基础设置" }]}
subtitle={
this.state.customEdit ?
`修改${_.find(topTab, it => it.viewcondition === selectedKey).title}方案` :
`新增${_.find(topTab, it => it.viewcondition === selectedKey).title}方案`
}
editable={true}
showOperateBtn={showOperateBtn}
onSave={() => {
handleOnSave();
}}
onSave={() => handleOnSave()}
/>
}
content={

97
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/schemeInfoForm.js Normal file
View File

@ -0,0 +1,97 @@
/*
* Author: 黎永顺
* name: 社保福利方案-信息表单
* Description:
* Date: 2023/2/13
*/
import React, { Component } from "react";
import { WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect, WeaTextarea } from "ecCom";
import { schemeFields } from "./enum";
class SchemeInfoForm extends Component {
constructor(props) {
super(props);
this.state = {
schemeFieldsItem: schemeFields
};
}
componentDidMount() {
const { schemeFieldsItem } = this.state;
const { requestParams, salaryFileStore: { userStatusList }, taxAgentStore: { taxAgentAdminOption } } = this.props;
const { sharedType } = requestParams;
this.setState({
schemeFieldsItem: _.map(schemeFieldsItem, item => {
const { key } = item;
switch (key) {
case "sharedType":
return {
...item,
options: userStatusList
};
case "taxAgentIds":
return {
...item,
multiple: true,
display: !_.isNil(sharedType) && sharedType.toString() === "1",
options: taxAgentAdminOption
};
default:
break;
}
return { ...item };
})
});
}
handleChangeSchemeFiledItems = (key, v) => {
const { onChangeFieldsItem } = this.props;
const { schemeFieldsItem } = this.state;
this.setState({
schemeFieldsItem: _.map(schemeFieldsItem, item => {
if (key === "sharedType" && item.key === "taxAgentIds") {
return { ...item, display: v === "1" };
}
return { ...item };
})
}, () => {
onChangeFieldsItem({ [key]: (key === "useDefault" || key === "useInEmployeeSalary") ? Number(v) : v });
});
};
render() {
const { requestParams } = this.props;
const { schemeFieldsItem } = this.state;
return (
<WeaSearchGroup showGroup needTigger={false}>
{
_.map(schemeFieldsItem, item => {
const { key, label, type, viewAttr, options, display = true, multiple = false } = item;
const value = !_.isNil(requestParams[key]) ? requestParams[key].toString() : "";
return <React.Fragment>
{
(type === "INPUT" && display) ?
<WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
<WeaInput viewAttr={viewAttr} value={value}
onChange={v => this.handleChangeSchemeFiledItems(key, v)}/></WeaFormItem> :
(type === "SELECT" && display) ?
<WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
<WeaSelect value={value} options={options}
multiple={multiple} viewAttr={viewAttr}
onChange={v => this.handleChangeSchemeFiledItems(key, v)}/>
</WeaFormItem> :
(type === "TEXTAREA" && display) ?
<WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
<WeaTextarea value={value} viewAttr={viewAttr} minRows={3}
onChange={v => this.handleChangeSchemeFiledItems(key, v)}/>
</WeaFormItem> : null
}
</React.Fragment>;
})
}
</WeaSearchGroup>
);
}
}
export default SchemeInfoForm;