131 lines
4.1 KiB
JavaScript
131 lines
4.1 KiB
JavaScript
import React from "react";
|
|
import { WeaHelpfulTip, WeaTab } from "ecCom";
|
|
import IssuedAndReissueTable from "./issuedAndReissueTable";
|
|
import PayrollItemsTable from "./payrollItemsTable";
|
|
import { inject, observer } from "mobx-react";
|
|
import { toJS } from "mobx";
|
|
import "./index.less";
|
|
|
|
@inject("calculateStore")
|
|
@observer
|
|
export default class EditSalaryDetail extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
selectedKey: "0"
|
|
};
|
|
}
|
|
|
|
componentWillMount() {
|
|
const { calculateStore: { acctresultDetail } } = this.props;
|
|
acctresultDetail(this.props.id);
|
|
}
|
|
|
|
handleItemValueChange = (field, value, isInput, groupId) => {
|
|
const { calculateStore: { acctresultDetailForm, setAcctresultDetailForm } } = this.props;
|
|
let form = { ...acctresultDetailForm };
|
|
if (isInput === "itemsByGroup") {
|
|
form.itemsByGroup = acctresultDetailForm.itemsByGroup.map(item => {
|
|
if (item.salarySobItemGroupId === groupId) {
|
|
return {
|
|
...item,
|
|
salaryItems: _.map(item.salaryItems, it => {
|
|
if (it.salaryItemId === field) {
|
|
return { ...it, resultValue: value };
|
|
}
|
|
return { ...it };
|
|
})
|
|
};
|
|
}
|
|
return { ...item };
|
|
});
|
|
} else if (isInput === "issuedAndReissueItems") {
|
|
form.issuedAndReissueItems = acctresultDetailForm.issuedAndReissueItems.map(item => {
|
|
item = { ...item };
|
|
if (item.salaryItemName === field) {
|
|
item.resultValue = value;
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
setAcctresultDetailForm(form);
|
|
};
|
|
renderTableTr = (data, isInput) => {
|
|
const tables = [];
|
|
const len = data.length;
|
|
const rowNum = 3;
|
|
const sumRows = len % rowNum;
|
|
const sumRowMod = len / rowNum;
|
|
const rows = (sumRows == 0 ? sumRowMod : sumRowMod + 1);
|
|
for (let j = 0; j < rows; j++) {
|
|
let iLen = (j + 1) * rowNum;
|
|
iLen = iLen > len ? len : iLen;
|
|
tables.push("<tr class='descriptions-row'>");
|
|
for (let i = j * rowNum; i < iLen; i++) {
|
|
if (!isInput) {
|
|
const label = data[i].fieldName;
|
|
const value = data[i].fieldValue || "-";
|
|
tables.push("<th class=\"descriptions-item-label\">" + label + "</th>" + "<td class=\"descriptions-item-content\">" + value + "</td>");
|
|
}
|
|
}
|
|
tables.push("</tr>");
|
|
}
|
|
return tables;
|
|
};
|
|
|
|
render() {
|
|
const { calculateStore: { acctresultDetailForm } } = this.props;
|
|
const { selectedKey } = this.state;
|
|
const { itemsByGroup = [] } = toJS(acctresultDetailForm);
|
|
const topTab = [
|
|
{
|
|
title: "正常工资薪金所得",
|
|
viewcondition: "0"
|
|
},
|
|
{
|
|
title: "已发补发",
|
|
viewcondition: "1"
|
|
}
|
|
];
|
|
return (
|
|
<div className="editSalaryDetail">
|
|
<div className="detailItemWrapper">
|
|
<div>
|
|
<span className="itemTitle">基本信息</span>
|
|
<WeaHelpfulTip style={{ marginLeft: "10px" }} title="提示：基本信息根据账套设置显示" placement="topLeft"/>
|
|
</div>
|
|
<div className="itemContent">
|
|
{
|
|
!_.isEmpty(acctresultDetailForm.employeeInfos) &&
|
|
<table
|
|
dangerouslySetInnerHTML={{ __html: this.renderTableTr(acctresultDetailForm.employeeInfos).join(",").replace(/,/g, "") }}
|
|
/>
|
|
}
|
|
</div>
|
|
</div>
|
|
{
|
|
!_.isEmpty(toJS(acctresultDetailForm.issuedAndReissueItems)) &&
|
|
<WeaTab
|
|
datas={topTab}
|
|
keyParam="viewcondition"
|
|
selectedKey={selectedKey}
|
|
onChange={v => this.setState({ selectedKey: v })}
|
|
/>
|
|
}
|
|
{
|
|
selectedKey === "0" && _.map(itemsByGroup, item => {
|
|
return <PayrollItemsTable {...item} onChangeIssueReissueValue={this.handleItemValueChange}/>;
|
|
})
|
|
}
|
|
{
|
|
selectedKey === "1" &&
|
|
<IssuedAndReissueTable
|
|
dataSource={toJS(acctresultDetailForm.issuedAndReissueItems)}
|
|
onChangeIssueReissueValue={this.handleItemValueChange}
|
|
/>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|