385 lines
13 KiB
JavaScript
385 lines
13 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 工资单模板-薪资项目设置
|
|
* Description:
|
|
* Date: 2023/2/2
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { toJS } from "mobx";
|
|
import { WeaFormItem, WeaInput, WeaSortable, WeaTransfer } from "ecCom";
|
|
import { Icon, Modal } from "antd";
|
|
import SalaryItemModal from "./salaryItemModal";
|
|
import { getAvailableSalaryGroupSet, getAvailableSalaryItemSet } from "../../../apis/payroll";
|
|
|
|
class SalaryItemSettings extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
dataList: [],
|
|
itemShowNamesetting: [], //名称修改集合
|
|
checkedValue: "",
|
|
modalPayload: {
|
|
visible: false,
|
|
title: "",
|
|
groupId: "",
|
|
groupName: "",
|
|
options: [],
|
|
salaryItemName: "",
|
|
salaryItemId: ""
|
|
}
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
if (nextProps.dataSource !== this.props.dataSource) {
|
|
this.setState({
|
|
dataList: _.map(toJS(nextProps.dataSource), item => {
|
|
return {
|
|
...item,
|
|
id: item.groupId
|
|
};
|
|
})
|
|
});
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Author: 黎永顺
|
|
* Description:删除薪资项目大类
|
|
* Params:
|
|
* Date: 2023/2/2
|
|
*/
|
|
handleDeleteClick = (group) => {
|
|
Modal.confirm({
|
|
title: "信息确认",
|
|
content: "确认删除",
|
|
onOk: () => {
|
|
let resultSalaryItemSet = [...this.state.dataList];
|
|
resultSalaryItemSet.map((sourceGroup, index) => {
|
|
if (sourceGroup.groupId === group.groupId) {
|
|
resultSalaryItemSet.splice(index, 1);
|
|
}
|
|
});
|
|
this.setState({
|
|
dataList: resultSalaryItemSet
|
|
}, () => {
|
|
this.props.onChangeSalaryItem(resultSalaryItemSet);
|
|
});
|
|
}
|
|
});
|
|
};
|
|
/*
|
|
* Author: 黎永顺
|
|
* Description: 删除薪资项目项
|
|
* Params:
|
|
* Date: 2023/2/2
|
|
*/
|
|
handleDeleteSalaryItem = (group, item) => {
|
|
let resultSalaryItemSet = [...this.state.dataList];
|
|
resultSalaryItemSet.map(sourceGroup => {
|
|
if (sourceGroup.groupId === group.groupId) {
|
|
sourceGroup.items.map((sourceItem, index) => {
|
|
if (sourceItem.id === item.id) {
|
|
sourceGroup.items.splice(index, 1);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
this.setState({
|
|
dataList: resultSalaryItemSet
|
|
}, () => {
|
|
this.props.onChangeSalaryItem(resultSalaryItemSet);
|
|
});
|
|
};
|
|
handleCloseModal = () => {
|
|
const { modalPayload } = this.state;
|
|
this.setState({
|
|
checkedValue: "",
|
|
modalPayload: {
|
|
...modalPayload,
|
|
visible: false,
|
|
title: "",
|
|
groupId: "",
|
|
groupName: "",
|
|
options: [],
|
|
salaryItemName: "",
|
|
salaryItemId: ""
|
|
}
|
|
});
|
|
};
|
|
handleOpenModal = (record, title, isItem) => {
|
|
if (title === "分类名称编辑") {
|
|
const { modalPayload } = this.state;
|
|
this.setState({
|
|
modalPayload: {
|
|
...modalPayload,
|
|
visible: true,
|
|
title,
|
|
groupId: record.groupId,
|
|
groupName: record.groupName
|
|
}
|
|
});
|
|
} else {
|
|
isItem ? this.getAvailableSalaryItemSet(record, title) : this.getAvailableSalaryGroupSet(record, title);
|
|
}
|
|
};
|
|
getAvailableSalaryItemSet = (record, title) => {
|
|
const payload = {
|
|
salaryTemplateId: this.props.salaryTemplateId,
|
|
salarySobId: this.props.salarySobId,
|
|
existSalaryItemIds: _.map(record.items, it => it.id),
|
|
groupId: record.groupId,
|
|
isReplenish: this.props.isReplenish
|
|
};
|
|
getAvailableSalaryItemSet(payload).then(({ status, data }) => {
|
|
if (status) {
|
|
const { modalPayload } = this.state;
|
|
this.setState({
|
|
modalPayload: {
|
|
...modalPayload,
|
|
visible: true,
|
|
title,
|
|
groupId: record.groupId,
|
|
options: _.map(data, it => ({ ...it, name: it.name, id: it.salaryItemId }))
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
getAvailableSalaryGroupSet = (salarySobId, title) => {
|
|
const { dataList } = this.state;
|
|
const payload = {
|
|
salarySobId,
|
|
salaryTemplateId: this.props.salaryTemplateId,
|
|
existSalaryGroupIds: _.map(dataList, it => it.groupId),
|
|
isReplenish: this.props.isReplenish
|
|
};
|
|
getAvailableSalaryGroupSet(payload).then(({ status, data }) => {
|
|
if (status) {
|
|
const { modalPayload } = this.state;
|
|
this.setState({
|
|
modalPayload: {
|
|
...modalPayload,
|
|
visible: true,
|
|
title,
|
|
options: _.map(data, it => ({ ...it, name: it.groupName, id: it.groupId }))
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
handleChangeClassName = (groupName) => {
|
|
const { modalPayload } = this.state;
|
|
this.setState({
|
|
modalPayload: {
|
|
...modalPayload,
|
|
groupName
|
|
}
|
|
});
|
|
};
|
|
/*
|
|
* Author: 黎永顺
|
|
* Description:添加薪资项目项
|
|
* Params:
|
|
* Date: 2023/2/2
|
|
*/
|
|
handleConfirm = () => {
|
|
const { modalPayload, checkedValue, dataList } = this.state;
|
|
const { options = [], groupId, groupName } = modalPayload;
|
|
if (groupName) {
|
|
this.setState({
|
|
dataList: _.map(dataList, it => {
|
|
if (it.groupId === groupId) {
|
|
return {
|
|
...it,
|
|
groupName
|
|
};
|
|
}
|
|
return { ...it };
|
|
})
|
|
}, () => {
|
|
this.props.onChangeSalaryItem(this.state.dataList);
|
|
this.handleCloseModal();
|
|
});
|
|
} else {
|
|
this.setState({
|
|
dataList: groupId ? _.map(dataList, it => {
|
|
if (it.groupId === groupId) {
|
|
return {
|
|
...it,
|
|
items: [...it.items, ..._.filter(options, child => checkedValue.split(",").includes(child.salaryItemId))]
|
|
};
|
|
}
|
|
return { ...it };
|
|
}) : [...dataList, ..._.filter(options, child => checkedValue.split(",").includes(child.groupId))]
|
|
}, () => {
|
|
this.props.onChangeSalaryItem(this.state.dataList);
|
|
this.handleCloseModal();
|
|
});
|
|
}
|
|
};
|
|
handleEditSalaryItemName = (item, field, viewAttr) => {
|
|
const { groupId } = item, { salaryItemId } = field, { dataList } = this.state;
|
|
if (groupId === "111111111111111111") return;
|
|
this.setState({
|
|
dataList: _.map(dataList, item => {
|
|
if (item.groupId === groupId) {
|
|
return {
|
|
...item,
|
|
items: _.map(item.items, child => {
|
|
if (child.salaryItemId === salaryItemId) {
|
|
return {
|
|
...child,
|
|
viewAttr
|
|
};
|
|
}
|
|
return { ...child, viewAttr: 1 };
|
|
})
|
|
};
|
|
}
|
|
return {
|
|
...item,
|
|
items: _.map(item.items, child => {
|
|
return { ...child, viewAttr: 1 };
|
|
})
|
|
};
|
|
})
|
|
}, () => document.getElementById("salaryItemInput") && document.getElementById("salaryItemInput").focus());
|
|
};
|
|
handleChangeSalaryItemShowName = (item, field, name) => {
|
|
const { groupId } = item, { salaryItemId, originName } = field, { dataList, itemShowNamesetting } = this.state;
|
|
this.setState({
|
|
dataList: _.map(dataList, item => {
|
|
if (item.groupId === groupId) {
|
|
return {
|
|
...item,
|
|
items: _.map(item.items, child => {
|
|
if (child.salaryItemId === salaryItemId) {
|
|
return { ...child, salaryItemShowName: name, name: name ? name : child.originName };
|
|
}
|
|
return { ...child };
|
|
})
|
|
};
|
|
}
|
|
return { ...item };
|
|
}),
|
|
itemShowNamesetting: _.unionBy([{
|
|
salaryItemId,
|
|
salaryItemShowName: originName === name ? "" : name
|
|
}], itemShowNamesetting, "salaryItemId")
|
|
}, () => {
|
|
const modifySalaryItemids = _.reduce(this.state.itemShowNamesetting, (pre, cur) => [...pre, cur.salaryItemId], []);
|
|
const convertDataList = _.map(this.state.dataList, it => {
|
|
if (it.groupId === "111111111111111111") return { ...it };
|
|
return {
|
|
...it,
|
|
items: _.map(it.items, item => {
|
|
if (modifySalaryItemids.includes(item.salaryItemId)) return { ...item };
|
|
return { ...item, name: item.salaryItemShowName };
|
|
})
|
|
};
|
|
});
|
|
this.props.onChangeSalaryItem(convertDataList);
|
|
this.props.onChangeSalaryItemShowNamesetting(this.state.itemShowNamesetting);
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { onChangeSalaryItem, salaryBillItemNameSet } = this.props;
|
|
const { dataList, modalPayload, checkedValue } = this.state;
|
|
return (
|
|
<div className="salaryItemSettingWrapper">
|
|
<WeaSortable
|
|
datas={dataList}
|
|
onChange={(list) => onChangeSalaryItem(list)}
|
|
renderNodeItem={(item) => {
|
|
return <div className="salaryItemWrapper">
|
|
<div className="salaryItemHeader">
|
|
<span className="titleWrapper">
|
|
<span className="salaryClassTitle">{item.groupName}</span>
|
|
<span className="iconWrapper">
|
|
<i className="icon-coms-edit" onClick={() => this.handleOpenModal(item, "分类名称编辑")}/>
|
|
<i className="icon-coms-Delete" onClick={() => this.handleDeleteClick(item)}/>
|
|
</span>
|
|
</span>
|
|
<i className="icon-coms-Add-to" onClick={() => this.handleOpenModal(item, "请选择薪资项目", true)}/>
|
|
</div>
|
|
<div className="salaryItemContent">
|
|
{
|
|
!_.isEmpty(item.items) ?
|
|
<WeaSortable
|
|
datas={item.items}
|
|
onChange={(items) => onChangeSalaryItem(
|
|
_.map(dataList, child => {
|
|
if (child.id === item.id) {
|
|
return { ...child, items };
|
|
}
|
|
return { ...child };
|
|
})
|
|
)}
|
|
renderNodeItem={(filed) => {
|
|
const salaryBillItemNameObj = salaryBillItemNameSet[filed.id] || {};
|
|
return <div className="salaryItemList">
|
|
<div className="salaryItem"
|
|
title={
|
|
(item.groupId !== "111111111111111111" && (!_.isEmpty(salaryBillItemNameObj) || (filed.salaryItemShowName !== filed.originName))) ?
|
|
`${filed.salaryItemShowName}(${filed.originName})` :
|
|
filed.name
|
|
}
|
|
>
|
|
{
|
|
filed.viewAttr === 2 ?
|
|
<WeaInput
|
|
value={
|
|
item.groupId !== "111111111111111111" ?
|
|
filed.salaryItemShowName :
|
|
filed.name
|
|
}
|
|
id="salaryItemInput"
|
|
onBlur={() => this.handleEditSalaryItemName(item, filed, 1)}
|
|
onChange={(val) => this.handleChangeSalaryItemShowName(item, filed, val)}
|
|
/> :
|
|
<div className="salaryItemName"
|
|
onClick={() => this.handleEditSalaryItemName(item, filed, 2)}>
|
|
{
|
|
(item.groupId !== "111111111111111111" && (!_.isEmpty(salaryBillItemNameObj) || (filed.salaryItemShowName !== filed.originName))) ?
|
|
`${filed.salaryItemShowName}(${filed.originName})` :
|
|
filed.name
|
|
}
|
|
</div>
|
|
}
|
|
<Icon type="cross" onClick={() => this.handleDeleteSalaryItem(item, filed)}/>
|
|
</div>
|
|
</div>;
|
|
}}
|
|
className="wea-sortable-salary-item"
|
|
/> :
|
|
<div className="empty">暂无数据</div>
|
|
}
|
|
</div>
|
|
</div>;
|
|
}}
|
|
className="wea-sortable-salary-item"
|
|
/>
|
|
<SalaryItemModal {...modalPayload} onCancel={this.handleCloseModal} onConfirm={this.handleConfirm}>
|
|
<div className="modalContent">
|
|
{
|
|
modalPayload.title === "分类名称编辑" ?
|
|
<WeaFormItem label="分类名称" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
|
<WeaInput value={modalPayload.groupName} onChange={this.handleChangeClassName}/>
|
|
</WeaFormItem>
|
|
: <WeaTransfer
|
|
data={modalPayload.options}
|
|
selectedKeys={checkedValue ? checkedValue.split(",") : []}
|
|
onChange={v => this.setState({ checkedValue: v.join(",") })}
|
|
/>
|
|
}
|
|
</div>
|
|
</SalaryItemModal>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default SalaryItemSettings;
|