薪资账套页面重构
This commit is contained in:
parent
2de636febc
commit
6d9787d924
|
|
@ -76,3 +76,37 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//调薪计薪规则弹框
|
||||
.adjustRuleModalWrapper {
|
||||
.titleTipWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.adjustRuleDetailWrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.adjustSalaryFlex{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.wea-select, .ant-select-selection, .ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wea-select {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ant-select-selection {
|
||||
height: 30px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,149 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 新增调薪计薪规
|
||||
* Description:
|
||||
* Date: 2022/12/12
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaDialog, WeaFormItem, WeaHelpfulTip, WeaSearchGroup, WeaSelect } from "ecCom";
|
||||
import { Button, Radio } from "antd";
|
||||
import { monthDays } from "../config";
|
||||
import { listSalarySobItem } from "../../../apis/ledger";
|
||||
import "./index.less";
|
||||
|
||||
class LedgerAdjustRuleAddModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
beforeAdjustmentType: "",
|
||||
afterAdjustmentType: "",
|
||||
salaryItemId: "",
|
||||
salaryItemName: "",
|
||||
dayOfMonth: "",
|
||||
salaryItemOptions: []
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.visible !== this.props.visible && !nextProps.salarySobId) this.listSalarySobItem();
|
||||
}
|
||||
|
||||
listSalarySobItem = () => {
|
||||
const { salarySobId } = this.props;
|
||||
const payload = {
|
||||
excludeSalaryItemIds: [],
|
||||
salarySobId
|
||||
};
|
||||
listSalarySobItem(payload).then(({ status, data }) => {
|
||||
if (status) {
|
||||
this.setState({
|
||||
salaryItemOptions: _.map(data, it => ({ key: it.id, showname: it.content }))
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
salaryItemId,
|
||||
salaryItemOptions,
|
||||
dayOfMonth,
|
||||
beforeAdjustmentType,
|
||||
afterAdjustmentType
|
||||
} = this.state;
|
||||
const { onCancel, title, visible } = this.props;
|
||||
const buttons = [<Button type="primary">保存</Button>];
|
||||
return (
|
||||
<WeaDialog
|
||||
initLoadCss
|
||||
className="adjustRuleModalWrapper"
|
||||
title={title}
|
||||
visible={visible}
|
||||
style={{ width: 680 }}
|
||||
buttons={buttons}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<WeaSearchGroup col={1} needTigger title="" showGroup center>
|
||||
<WeaFormItem label="薪资项目" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||||
<WeaSelect
|
||||
viewAttr={3}
|
||||
value={salaryItemId}
|
||||
options={salaryItemOptions}
|
||||
onChange={(salaryItemId, salaryItemName) => this.setState({ salaryItemId, salaryItemName })}
|
||||
/>
|
||||
</WeaFormItem>
|
||||
<WeaFormItem label={<AdjustTitle/>} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||||
<div className="adjustRuleDetailWrapper">
|
||||
<div className="adjustSalaryFlex">
|
||||
<span>如果：调薪生效日期在</span>
|
||||
<WeaSelect
|
||||
viewAttr={3}
|
||||
value={dayOfMonth}
|
||||
options={monthDays}
|
||||
onChange={(dayOfMonth) => this.setState({ dayOfMonth })}
|
||||
/>
|
||||
<span>（含）之前</span>
|
||||
</div>
|
||||
<div className="adjustSalaryFlex">
|
||||
<span>计薪规则为：</span>
|
||||
<Radio.Group onChange={(value) => {
|
||||
console.log(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>否则：调薪生效日期在{dayOfMonth}号之后</div>
|
||||
<div className="adjustSalaryFlex">
|
||||
<span>计薪规则为：</span>
|
||||
<Radio.Group onChange={(value) => {
|
||||
console.log(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"
|
||||
/>
|
||||
</div>;
|
||||
};
|
||||
|
|
@ -5,18 +5,65 @@
|
|||
* Date: 2022/12/12
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaButtonIcon, WeaInputSearch, WeaTab } from "ecCom";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { WeaButtonIcon, WeaTab, WeaTable } from "ecCom";
|
||||
import LedgerAdjustRuleAddModal from "./ledgerAdjustRuleAddModal";
|
||||
|
||||
@inject("taxAgentStore")
|
||||
@observer
|
||||
class LedgerSalaryAdjustmentRules extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [],
|
||||
columns: [],
|
||||
adjustRuleAddModal: {
|
||||
visible: false,
|
||||
title: "调薪计薪规则项",
|
||||
salarySobId: ""
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
handleAddAdjustRule = () => {
|
||||
const { adjustRuleAddModal } = this.state;
|
||||
const { editId } = this.props;
|
||||
this.setState({
|
||||
adjustRuleAddModal: {
|
||||
...adjustRuleAddModal,
|
||||
visible: true,
|
||||
salarySobId: editId
|
||||
}
|
||||
});
|
||||
};
|
||||
handleCloseModal = () => {
|
||||
const { adjustRuleAddModal } = this.state;
|
||||
this.setState({
|
||||
adjustRuleAddModal: {
|
||||
...adjustRuleAddModal,
|
||||
visible: false,
|
||||
salarySobId: ""
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { taxAgentStore: { showOperateBtn }, editId, adjustRuleAddModal } = this.props;
|
||||
const btns = showOperateBtn ? [
|
||||
<WeaButtonIcon buttonType="add" type="primary" onClick={this.handleAddAdjustRule}/>
|
||||
] : [];
|
||||
return (
|
||||
<div>
|
||||
<WeaTab
|
||||
datas={[]}
|
||||
keyParam="viewcondition" //主键
|
||||
selectedKey={selectedKey}
|
||||
buttons={btns}
|
||||
onChange={selectedKey => this.setState({ selectedKey })}
|
||||
<WeaTab datas={[]} keyParam="viewcondition" buttons={btns}/>
|
||||
<WeaTable
|
||||
rowKey="id"
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
/>
|
||||
<LedgerAdjustRuleAddModal
|
||||
{...adjustRuleAddModal}
|
||||
onCancel={this.handleCloseModal}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -509,3 +509,160 @@ export const baseSettingFormItem = [
|
|||
type: "TEXTAREA"
|
||||
}
|
||||
];
|
||||
export const monthDays = [
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "1号"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
selected: false,
|
||||
showname: "2号"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
selected: false,
|
||||
showname: "3号"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
selected: false,
|
||||
showname: "4号"
|
||||
},
|
||||
{
|
||||
key: "5",
|
||||
selected: false,
|
||||
showname: "5号"
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
selected: false,
|
||||
showname: "6号"
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
selected: false,
|
||||
showname: "7号"
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
selected: false,
|
||||
showname: "8号"
|
||||
},
|
||||
{
|
||||
key: "9",
|
||||
selected: false,
|
||||
showname: "9号"
|
||||
},
|
||||
{
|
||||
key: "10",
|
||||
selected: false,
|
||||
showname: "10号"
|
||||
},
|
||||
{
|
||||
key: "11",
|
||||
selected: false,
|
||||
showname: "11号"
|
||||
},
|
||||
{
|
||||
key: "12",
|
||||
selected: false,
|
||||
showname: "12号"
|
||||
},
|
||||
{
|
||||
key: "13",
|
||||
selected: false,
|
||||
showname: "13号"
|
||||
},
|
||||
{
|
||||
key: "14",
|
||||
selected: false,
|
||||
showname: "14号"
|
||||
},
|
||||
{
|
||||
key: "15",
|
||||
selected: false,
|
||||
showname: "15号"
|
||||
},
|
||||
{
|
||||
key: "16",
|
||||
selected: false,
|
||||
showname: "16号"
|
||||
},
|
||||
{
|
||||
key: "17",
|
||||
selected: false,
|
||||
showname: "17号"
|
||||
},
|
||||
{
|
||||
key: "18",
|
||||
selected: false,
|
||||
showname: "18号"
|
||||
},
|
||||
{
|
||||
key: "19",
|
||||
selected: false,
|
||||
showname: "19号"
|
||||
},
|
||||
{
|
||||
key: "20",
|
||||
selected: false,
|
||||
showname: "20号"
|
||||
},
|
||||
{
|
||||
key: "21",
|
||||
selected: false,
|
||||
showname: "21号"
|
||||
},
|
||||
{
|
||||
key: "22",
|
||||
selected: false,
|
||||
showname: "22号"
|
||||
},
|
||||
{
|
||||
key: "23",
|
||||
selected: false,
|
||||
showname: "23号"
|
||||
},
|
||||
{
|
||||
key: "24",
|
||||
selected: false,
|
||||
showname: "24号"
|
||||
},
|
||||
{
|
||||
key: "25",
|
||||
selected: false,
|
||||
showname: "25号"
|
||||
},
|
||||
{
|
||||
key: "26",
|
||||
selected: false,
|
||||
showname: "26号"
|
||||
},
|
||||
{
|
||||
key: "27",
|
||||
selected: false,
|
||||
showname: "27号"
|
||||
},
|
||||
{
|
||||
key: "28",
|
||||
selected: false,
|
||||
showname: "28号"
|
||||
},
|
||||
{
|
||||
key: "29",
|
||||
selected: false,
|
||||
showname: "29号"
|
||||
},
|
||||
{
|
||||
key: "30",
|
||||
selected: false,
|
||||
showname: "30号"
|
||||
},
|
||||
{
|
||||
key: "31",
|
||||
selected: false,
|
||||
showname: "31号"
|
||||
}
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue