233 lines
9.1 KiB
JavaScript
233 lines
9.1 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 新增调薪计薪规
|
|
* Description:
|
|
* Date: 2022/12/12
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { inject, observer } from "mobx-react";
|
|
import { WeaDialog, WeaFormItem, WeaHelpfulTip, WeaLocaleProvider, WeaTools } from "ecCom";
|
|
import FormInfo from "../../../components/FormInfo";
|
|
import { WeaSwitch } from "comsMobx";
|
|
import { Button, Modal } from "antd";
|
|
import { listSalarySobItem } from "../../../apis/ledger";
|
|
import { monthDays, ruleConditions } from "../config";
|
|
|
|
const { getLabel } = WeaLocaleProvider;
|
|
const getKey = WeaTools.getKey;
|
|
|
|
@inject("ledgerStore")
|
|
@observer
|
|
class LedgerAdjustRuleAddModal extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
beforeAdjustmentType: 2,
|
|
afterAdjustmentType: 1,
|
|
salaryItemId: "",
|
|
salaryItemName: "",
|
|
dayOfMonth: "1",
|
|
salaryItemOptions: [],
|
|
conditions: []
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
if (nextProps.visible !== this.props.visible && nextProps.visible) this.listSalarySobItem(nextProps.salarySobId);
|
|
}
|
|
|
|
listSalarySobItem = (salarySobId) => {
|
|
const { salaryRuleItemsList } = this.props;
|
|
const payload = {
|
|
excludeSalaryItemIds: _.map(salaryRuleItemsList, item => item.salaryItemId), salarySobId
|
|
};
|
|
listSalarySobItem(payload).then(({ status, data }) => {
|
|
if (status) {
|
|
this.setState({
|
|
conditions: _.map(ruleConditions, item => ({
|
|
...item, items: _.map(item.items, o => {
|
|
if (getKey(o) === "salaryItemId") {
|
|
return {
|
|
...o, label: getLabel(o.lanId, o.label),
|
|
options: _.map(data, it => ({ key: it.salaryItemId.toString(), showname: it.salaryItemName }))
|
|
};
|
|
} else if (getKey(o) === "dayOfMonth") {
|
|
return { ...o, label: getLabel(o.lanId, o.label), options: monthDays };
|
|
}
|
|
return {
|
|
...o, label: getLabel(o.lanId, o.label), helpfulTip: getLabel(o.helpfulTipLanId, o.helpfulTip)
|
|
};
|
|
})
|
|
}))
|
|
}, () => this.props.ledgerStore.ruleForm.initFormFields(this.state.conditions));
|
|
}
|
|
});
|
|
};
|
|
handleSave = () => {
|
|
const { salaryRuleItemsList, onSave } = this.props;
|
|
const { salaryItemOptions, ...extraItems } = this.state;
|
|
if (_.isEmpty(extraItems.salaryItemId)) {
|
|
Modal.warning({
|
|
title: "信息确认",
|
|
content: "必要信息不完整，红色*为必填项！"
|
|
});
|
|
return;
|
|
}
|
|
const items = { ...extraItems, salaryItemName: this.state.salaryItemName };
|
|
const { salaryItemName, salaryItemId, ...extraFileds } = items;
|
|
const salaryItemNameFiled = salaryItemName.split(","), salaryItemIdFiled = salaryItemId.split(",");
|
|
const fields = _.map(salaryItemNameFiled, (item, index) => {
|
|
return {
|
|
...extraFileds,
|
|
salaryItemName: item,
|
|
salaryItemId: salaryItemIdFiled[index]
|
|
};
|
|
});
|
|
this.handleReset();
|
|
onSave([...salaryRuleItemsList, ...fields]);
|
|
};
|
|
handleReset = () => {
|
|
this.setState({
|
|
beforeAdjustmentType: 2,
|
|
afterAdjustmentType: 1,
|
|
salaryItemId: "",
|
|
salaryItemName: "",
|
|
dayOfMonth: "1",
|
|
salaryItemOptions: []
|
|
}, () => {
|
|
const { onCancel } = this.props;
|
|
onCancel();
|
|
});
|
|
};
|
|
|
|
|
|
render() {
|
|
const {
|
|
salaryItemId,
|
|
salaryItemOptions,
|
|
dayOfMonth,
|
|
beforeAdjustmentType,
|
|
afterAdjustmentType,
|
|
conditions
|
|
} = this.state;
|
|
const { title, visible, ledgerStore: { ruleForm } } = this.props;
|
|
const buttons = [<Button type="primary" onClick={this.handleSave}>{getLabel(111, "保存")}</Button>];
|
|
const itemRender = {
|
|
salaryItemId: (field, textAreaProps, form, formParams) => {
|
|
return (<WeaSwitch fieldConfig={{ ...field, ...textAreaProps }} form={form} formParams={formParams}/>);
|
|
},
|
|
dayOfMonth: () => null
|
|
};
|
|
const childrenComponents = {
|
|
salaryItemId: () => {
|
|
const coms = [], { fieldMap } = ruleForm;
|
|
coms.push(
|
|
<WeaFormItem label={getLabel(111, "计薪规则")} labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
|
|
<div className="cust">
|
|
<div className="child">
|
|
<div className="lbl">{fieldMap["dayOfMonth"].label}</div>
|
|
</div>
|
|
</div>
|
|
</WeaFormItem>
|
|
);
|
|
return [
|
|
{
|
|
com: <div className="times">{coms}</div>,
|
|
col: 1
|
|
}
|
|
];
|
|
}
|
|
};
|
|
return (
|
|
<WeaDialog initLoadCss title={title} visible={visible} style={{ width: 750 }} buttons={buttons}
|
|
onCancel={this.handleReset}>
|
|
<FormInfo className="form-dialog-layout" center={false} itemRender={itemRender}
|
|
childrenComponents={childrenComponents} form={ruleForm} formFields={conditions}/>
|
|
{/*<WeaSearchGroup col={1} needTigger title="" showGroup center>*/}
|
|
{/* <WeaFormItem label="薪资项目" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}*/}
|
|
{/* style={{ tableLayout: "fixed" }}>*/}
|
|
{/* <WeaSelect*/}
|
|
{/* multiple*/}
|
|
{/* viewAttr={3}*/}
|
|
{/* style={{ width: "350px" }}*/}
|
|
{/* options={salaryItemOptions}*/}
|
|
{/* value={salaryItemId}*/}
|
|
{/* onChange={(salaryItemId, salaryItemName) => this.setState({ salaryItemId, salaryItemName })}*/}
|
|
{/* />*/}
|
|
{/* </WeaFormItem>*/}
|
|
{/* <WeaFormItem label={<AdjustTitle/>} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} colon={false}>*/}
|
|
{/* <div className="adjustRuleDetailWrapper">*/}
|
|
{/* <div className="adjustSalaryFlex">*/}
|
|
{/* <span>如果：调薪生效日期在</span>*/}
|
|
{/* <WeaSelect*/}
|
|
{/* viewAttr={3}*/}
|
|
{/* style={{ width: 60, margin: "0 6px" }}*/}
|
|
{/* value={dayOfMonth}*/}
|
|
{/* options={monthDays}*/}
|
|
{/* onChange={(dayOfMonth) => this.setState({ dayOfMonth })}*/}
|
|
{/* />*/}
|
|
{/* <span>（含）之前</span>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="adjustSalaryFlex">*/}
|
|
{/* <span>计薪规则为：</span>*/}
|
|
{/* <Radio.Group onChange={(e) => this.setState({ beforeAdjustmentType: e.target.value })}*/}
|
|
{/* value={beforeAdjustmentType}>*/}
|
|
{/* <Radio value={2}>取调整后薪资</Radio>*/}
|
|
{/* <Radio value={4}>分段计薪<WeaHelpfulTip*/}
|
|
{/* style={{ marginLeft: "10px" }}*/}
|
|
{/* width={200}*/}
|
|
{/* title="=调整前薪资/当月自然日天数*调整前自然日天数+调整后薪资/当月自然日天数*调整后自然日天数"*/}
|
|
{/* placement="topLeft"*/}
|
|
{/* /></Radio>*/}
|
|
{/* <Radio value={3}>取平均<WeaHelpfulTip*/}
|
|
{/* style={{ marginLeft: "10px" }}*/}
|
|
{/* width={200}*/}
|
|
{/* title="=（调整前薪资+调整后薪资）/2"*/}
|
|
{/* placement="topLeft"*/}
|
|
{/* />*/}
|
|
{/* </Radio>*/}
|
|
{/* </Radio.Group>*/}
|
|
{/* </div>*/}
|
|
{/* <div style={{ marginBottom: 10 }}>否则：调薪生效日期在{dayOfMonth}号之后</div>*/}
|
|
{/* <div className="adjustSalaryFlex">*/}
|
|
{/* <span>计薪规则为：</span>*/}
|
|
{/* <Radio.Group onChange={(e) => this.setState({ afterAdjustmentType: e.target.value })}*/}
|
|
{/* value={afterAdjustmentType}>*/}
|
|
{/* <Radio value={1}>取调整前薪资</Radio>*/}
|
|
{/* <Radio value={4}>分段计薪<WeaHelpfulTip*/}
|
|
{/* style={{ marginLeft: "10px" }}*/}
|
|
{/* width={200}*/}
|
|
{/* title="=调整前薪资/当月自然日天数*调整前自然日天数+调整后薪资/当月自然日天数*调整后自然日天数"*/}
|
|
{/* placement="topLeft"*/}
|
|
{/* /></Radio>*/}
|
|
{/* <Radio value={3}>取平均<WeaHelpfulTip*/}
|
|
{/* style={{ marginLeft: "10px" }}*/}
|
|
{/* width={200}*/}
|
|
{/* title="=（调整前薪资+调整后薪资）/2"*/}
|
|
{/* placement="topLeft"*/}
|
|
{/* />*/}
|
|
{/* </Radio>*/}
|
|
{/* </Radio.Group>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/* </WeaFormItem>*/}
|
|
{/*</WeaSearchGroup>*/}
|
|
</WeaDialog>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default LedgerAdjustRuleAddModal;
|
|
|
|
const AdjustTitle = () => {
|
|
return <div className="titleTipWrapper">
|
|
<span className="title">计薪规则</span>
|
|
<WeaHelpfulTip
|
|
width={200}
|
|
title="该规则适用于一个薪资核算周期内只调整一次薪资或个税扣缴义务人的情况，其他情况默认按照分段计薪规则核算"
|
|
placement="topLeft"
|
|
/>
|
|
<span className="title">:</span>
|
|
</div>;
|
|
};
|