536 lines
16 KiB
JavaScript
536 lines
16 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
import { WeaDropdown, WeaHelpfulTip, WeaTab, WeaTop } from "ecCom";
|
||
import { Button, Dropdown, Menu, message } from "antd";
|
||
import "./index.less";
|
||
import { getQueryString } from "../../../util/url";
|
||
import { getSearchs, renderLoading } from "../../../util";
|
||
import CustomPaginationTable from "../../../components/customPaginationTable";
|
||
import PayrollPartTable from "./payrollPartTable";
|
||
|
||
const { ButtonSelect } = WeaDropdown;
|
||
|
||
@inject("payrollStore")
|
||
@observer
|
||
export default class PayrollGrant extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
selectedRowKeys: [],
|
||
currentId: "",
|
||
selectedKey: "0",
|
||
payrollPartModalParams: {
|
||
visible: false,
|
||
title: "工资单发放",
|
||
grantType: "",
|
||
salarySendId: ""
|
||
}
|
||
};
|
||
this.pageInfo = { current: 1, pageSize: 10 };
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { selectedKey } = this.state;
|
||
let id = getQueryString("id");
|
||
this.setState({ currentId: id });
|
||
const {
|
||
payrollStore: { getPayrollInfo, getInfoList, getPaySa }
|
||
} = this.props;
|
||
getPayrollInfo(id);
|
||
getInfoList({
|
||
salarySendId: id,
|
||
isGranted: selectedKey !== "0"
|
||
});
|
||
getPaySa();
|
||
}
|
||
|
||
// 撤回
|
||
handleWithdraw = (record) => {
|
||
const { payrollStore } = this.props;
|
||
const { currentId, selectedKey } = this.state;
|
||
const { withdrawPayroll, getInfoList } = payrollStore;
|
||
withdrawPayroll({
|
||
...record,
|
||
salarySendId: currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId: this.state.currentId,
|
||
isGranted: selectedKey !== "0",
|
||
current: this.pageInfo.current,
|
||
pageSize: this.pageInfo.pageSize
|
||
});
|
||
this.handleClose();
|
||
});
|
||
};
|
||
|
||
// 发放
|
||
handleGrant = (record) => {
|
||
const { payrollStore } = this.props;
|
||
const { currentId, selectedKey } = this.state;
|
||
const { grantPayroll, getInfoList } = payrollStore;
|
||
grantPayroll({
|
||
...record,
|
||
salarySendId: currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0",
|
||
current: this.pageInfo.current,
|
||
pageSize: this.pageInfo.pageSize
|
||
|
||
});
|
||
this.handleClose();
|
||
});
|
||
};
|
||
|
||
/*
|
||
* Author: 黎永顺
|
||
* Description:工资单发放
|
||
* Params:
|
||
* Date: 2022/12/2
|
||
*/
|
||
sendPayroll = (key) => {
|
||
const { selectedRowKeys, currentId, payrollPartModalParams } = this.state;
|
||
switch (key) {
|
||
case "ALL":
|
||
this.handleGrantAll();
|
||
break;
|
||
case "SELECT":
|
||
if (selectedRowKeys.length === 0) {
|
||
message.warning("未选择发放条目");
|
||
return;
|
||
}
|
||
this.fetchGrantPayRoll({
|
||
ids: selectedRowKeys,
|
||
salarySendId: currentId
|
||
});
|
||
break;
|
||
case "PART":
|
||
this.setState({
|
||
payrollPartModalParams: {
|
||
...payrollPartModalParams,
|
||
salarySendId: currentId,
|
||
grantType: "grant",
|
||
visible: true
|
||
}
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
/*
|
||
* Author: 黎永顺
|
||
* Description:工资单撤回
|
||
* Params:
|
||
* Date: 2022/12/2
|
||
*/
|
||
withdrawalPayroll = (key) => {
|
||
const { selectedRowKeys, currentId, payrollPartModalParams } = this.state;
|
||
switch (key) {
|
||
case "withdrawAll":
|
||
this.handleWithdrawAll();
|
||
break;
|
||
case "recallSelected":
|
||
if (selectedRowKeys.length === 0) {
|
||
message.warning("未选择撤回条目");
|
||
return;
|
||
}
|
||
this.fetchWithdrawPayroll({
|
||
ids: selectedRowKeys,
|
||
salarySendId: currentId
|
||
});
|
||
break;
|
||
case "partialWithdrawal":
|
||
this.setState({
|
||
payrollPartModalParams: {
|
||
...payrollPartModalParams,
|
||
visible: true,
|
||
title: "工资单撤回",
|
||
salarySendId: currentId,
|
||
grantType: "withdraw"
|
||
}
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
// 全部发送
|
||
handleGrantAll = () => {
|
||
const { payrollStore } = this.props;
|
||
const { currentId, selectedKey } = this.state;
|
||
const { grantPayroll, getInfoList } = payrollStore;
|
||
grantPayroll({
|
||
ids: [],
|
||
salarySendId: currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0"
|
||
});
|
||
});
|
||
};
|
||
// 发放所选
|
||
fetchGrantPayRoll = (payload) => {
|
||
const { selectedKey, currentId } = this.state;
|
||
const { payrollStore: { grantPayroll, getInfoList } } = this.props;
|
||
grantPayroll(payload).then(() => {
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0"
|
||
});
|
||
this.setState({ selectedRowKeys: [] });
|
||
});
|
||
};
|
||
|
||
// 全部撤回
|
||
handleWithdrawAll() {
|
||
const { payrollStore } = this.props;
|
||
const { currentId, selectedKey } = this.state;
|
||
const { withdrawPayroll, getInfoList } = payrollStore;
|
||
withdrawPayroll({
|
||
ids: [],
|
||
salarySendId: currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0"
|
||
});
|
||
});
|
||
}
|
||
|
||
// 撤回所选
|
||
fetchWithdrawPayroll = (payload) => {
|
||
const { payrollStore: { withdrawPayroll, getInfoList } } = this.props;
|
||
const { currentId, selectedKey } = this.state;
|
||
withdrawPayroll(payload).then(() => {
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0"
|
||
});
|
||
this.setState({ selectedRowKeys: [] });
|
||
});
|
||
};
|
||
|
||
getColumns = () => {
|
||
const { payrollStore } = this.props;
|
||
const { salaryGrantTableStore: columns,salarySendDetailBaseInfo } = payrollStore;
|
||
const notShowGrantOrWithdraw = salarySendDetailBaseInfo.haveBackCalc === 1 && salarySendDetailBaseInfo.salaryAcctType === "0";
|
||
return [
|
||
...toJS(columns),
|
||
{
|
||
title: "操作",
|
||
key: "",
|
||
dataIndex: "",
|
||
display: true,
|
||
render: (text, record) => {
|
||
if (record.sendStatus === "已发放" && !notShowGrantOrWithdraw) {
|
||
return (
|
||
<a
|
||
href="javascript:void(0);"
|
||
onClick={() => this.handleWithdraw({ ids: [record.id] })}>
|
||
撤回
|
||
</a>
|
||
);
|
||
} else if(!notShowGrantOrWithdraw) {
|
||
return (
|
||
<a
|
||
href="javascript:void(0);"
|
||
onClick={() => this.handleGrant({ ids: [record.id] })}>
|
||
发放
|
||
</a>
|
||
);
|
||
}
|
||
}
|
||
}
|
||
];
|
||
};
|
||
|
||
getSearchsAdQuick() {
|
||
const { payrollStore } = this.props;
|
||
const { salarySendDetailBaseInfo } = payrollStore;
|
||
const notShowGrantOrWithdraw = salarySendDetailBaseInfo.haveBackCalc === 1 && salarySendDetailBaseInfo.salaryAcctType === "0";
|
||
const { selectedKey } = this.state;
|
||
const handleMenuClick = e => {
|
||
switch (e.key) {
|
||
case "3":
|
||
this.handleExportAll();
|
||
break;
|
||
case "4":
|
||
this.handleExportSelect();
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
const menu = (
|
||
<Menu onClick={handleMenuClick}>
|
||
<Menu.Item key="3">全部导出</Menu.Item>
|
||
<Menu.Item key="4">导出选中</Menu.Item>
|
||
</Menu>
|
||
);
|
||
let btnDom = [
|
||
<Dropdown.Button overlay={menu}>
|
||
更多
|
||
</Dropdown.Button>
|
||
];
|
||
if (selectedKey === "0" && !notShowGrantOrWithdraw) {
|
||
btnDom = [
|
||
<ButtonSelect
|
||
datas={[
|
||
{ key: "ALL", show: "全部发放", selected: true },
|
||
{ key: "SELECT", show: "发放所选", selected: false },
|
||
{ key: "PART", show: "部分发放", selected: false }
|
||
]}
|
||
btnOnClick={this.sendPayroll}
|
||
menuOnClick={(key) => this.sendPayroll(key)}
|
||
/>,
|
||
...btnDom
|
||
];
|
||
} else if(selectedKey === "1" && !notShowGrantOrWithdraw) {
|
||
btnDom = [
|
||
<ButtonSelect
|
||
datas={[
|
||
{ key: "withdrawAll", show: "全部撤回", selected: true },
|
||
{ key: "recallSelected", show: "撤回所选", selected: false },
|
||
{ key: "partialWithdrawal", show: "部分撤回", selected: false }
|
||
]}
|
||
btnOnClick={this.withdrawalPayroll}
|
||
menuOnClick={(key) => this.withdrawalPayroll(key)}
|
||
/>,
|
||
...btnDom
|
||
];
|
||
}
|
||
return btnDom;
|
||
}
|
||
|
||
handleExportAll = () => {
|
||
const { selectedKey } = this.state;
|
||
const { payrollStore: { exportPayroll } } = this.props;
|
||
exportPayroll({
|
||
salarySendId: this.state.currentId,
|
||
isGranted: selectedKey !== "0"
|
||
});
|
||
};
|
||
handleExportSelect = () => {
|
||
const { selectedRowKeys, currentId, selectedKey } = this.state;
|
||
const { payrollStore: { exportPayroll } } = this.props;
|
||
if (selectedRowKeys.length === 0) {
|
||
message.warning("未选择条目");
|
||
return;
|
||
}
|
||
exportPayroll({
|
||
ids: selectedRowKeys,
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0"
|
||
});
|
||
};
|
||
// 分页
|
||
handleDataPageChange = (value) => {
|
||
const { payrollStore: { getInfoList } } = this.props;
|
||
const { currentId, selectedKey } = this.state;
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0",
|
||
...this.pageInfo
|
||
});
|
||
};
|
||
|
||
handleShowSizeChange(pageInfo) {
|
||
const { payrollStore: { getInfoList } } = this.props;
|
||
const { currentId, selectedKey } = this.state;
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0",
|
||
...pageInfo
|
||
});
|
||
}
|
||
|
||
handleSearch = () => {
|
||
const { payrollStore: { getInfoList, setGrantListShowSearchAd } } = this.props;
|
||
const { currentId, selectedKey } = this.state;
|
||
setGrantListShowSearchAd(false);
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: selectedKey !== "0",
|
||
...this.pageInfo,
|
||
current: 1
|
||
});
|
||
};
|
||
|
||
onSelectChange = value => {
|
||
this.setState({
|
||
selectedRowKeys: value
|
||
});
|
||
};
|
||
|
||
handleClose = () => {
|
||
const { payrollPartModalParams } = this.state;
|
||
this.setState({
|
||
payrollPartModalParams: {
|
||
...payrollPartModalParams,
|
||
visible: false,
|
||
title: "工资单发放",
|
||
grantType: "",
|
||
salarySendId: ""
|
||
}
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const { payrollStore } = this.props;
|
||
const {
|
||
salarySendDetailBaseInfo,
|
||
salaryGrantDataSource,
|
||
grantListShowSearchAd,
|
||
grantListConditionForm,
|
||
grantListCondition,
|
||
setGrantListShowSearchAd,
|
||
salaryGrantPageInfo,
|
||
getInfoList
|
||
} = payrollStore;
|
||
const { selectedRowKeys, selectedKey, currentId, payrollPartModalParams } = this.state;
|
||
const rowSelection = {
|
||
selectedRowKeys,
|
||
onChange: this.onSelectChange
|
||
};
|
||
const adBtn = [
|
||
// 高级搜索内部按钮
|
||
<Button type="primary" onClick={() => this.handleSearch()}>
|
||
搜索
|
||
</Button>,
|
||
<Button type="ghost" onClick={() => grantListConditionForm.resetForm()}>
|
||
重置
|
||
</Button>,
|
||
<Button type="ghost" onClick={() => setGrantListShowSearchAd(false)}>
|
||
取消
|
||
</Button>
|
||
];
|
||
const topTab = [
|
||
{
|
||
title: "未发送",
|
||
viewcondition: "0"
|
||
},
|
||
{
|
||
title: "已发送",
|
||
viewcondition: "1"
|
||
}
|
||
];
|
||
return (
|
||
<div className="payrollGrant_new">
|
||
<WeaTop
|
||
title="工资单发放" // 文字
|
||
icon={<i className="icon-coms-meeting"/>} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
buttons={this.getSearchsAdQuick()}
|
||
/>
|
||
|
||
<WeaTab
|
||
datas={topTab}
|
||
keyParam="viewcondition"
|
||
selectedKey={selectedKey}
|
||
onChange={v =>
|
||
this.setState({ selectedKey: v }, () => {
|
||
getInfoList({
|
||
salarySendId: currentId,
|
||
isGranted: v !== "0"
|
||
});
|
||
})
|
||
}
|
||
searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
|
||
searchsBasePlaceHolder="请输入姓名"
|
||
showSearchAd={grantListShowSearchAd} // 是否展开高级搜索面板
|
||
setShowSearchAd={bool => setGrantListShowSearchAd(bool)} //高级搜索面板受控
|
||
searchsAd={getSearchs(grantListConditionForm, toJS(grantListCondition), 2)} // 高级搜索内部数据
|
||
buttonsAd={adBtn} // 高级搜索内部按钮
|
||
onSearch={() => this.handleSearch()} // 点搜索按钮时的回调
|
||
onSearchChange={v => grantListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
|
||
searchsBaseValue={grantListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
|
||
/>
|
||
<div className="titleBar">
|
||
<div className="titleBarLeft">
|
||
<span>
|
||
薪资所属月：{salarySendDetailBaseInfo.salaryMonth &&
|
||
salarySendDetailBaseInfo.salaryMonth
|
||
.year}-{salarySendDetailBaseInfo.salaryMonth &&
|
||
salarySendDetailBaseInfo.salaryMonth.monthValue}
|
||
</span>
|
||
<WeaHelpfulTip
|
||
style={{ marginLeft: "1rem", marginRight: "1rem" }}
|
||
width={200}
|
||
title={<TitleHelp salarySobCycle={salarySendDetailBaseInfo.salarySobCycle}/>}
|
||
placement="topLeft"
|
||
/>
|
||
<span>
|
||
工资单模板：{salarySendDetailBaseInfo.template}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="titleBarRight">
|
||
<span>
|
||
已发放：{salarySendDetailBaseInfo.sendNum}/<span
|
||
style={{ color: "red" }}>
|
||
{salarySendDetailBaseInfo.sendTotal}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="tableWrapper">
|
||
{
|
||
!_.isEmpty(this.getColumns()) ?
|
||
<CustomPaginationTable
|
||
rowKey="id"
|
||
rowSelection={rowSelection}
|
||
dataSource={salaryGrantDataSource}
|
||
columns={this.getColumns()}
|
||
total={salaryGrantPageInfo.total}
|
||
current={salaryGrantPageInfo.pageNum}
|
||
pageSize={this.pageInfo.pageSize}
|
||
onPageChange={value => {
|
||
this.pageInfo.current = value;
|
||
this.handleDataPageChange(value);
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = { current, pageSize };
|
||
this.handleShowSizeChange(this.pageInfo);
|
||
}}
|
||
/> : renderLoading()
|
||
}
|
||
</div>
|
||
<PayrollPartTable
|
||
{...payrollPartModalParams}
|
||
onCancel={this.handleClose}
|
||
onWithdraw={this.handleWithdraw}
|
||
onGrant={this.handleGrant}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export const TitleHelp = (props) => {
|
||
const { salarySobCycle } = props;
|
||
const { salaryCycle = {}, attendCycle = {} } = salarySobCycle;
|
||
return <div>
|
||
<div>
|
||
<p>薪资周期</p>
|
||
<p>{salaryCycle.fromDate}<span style={{ margin: "0 4px" }}>至</span>{salaryCycle.endDate}</p>
|
||
</div>
|
||
<div>
|
||
<p>税款所属期</p>
|
||
<p>{salarySobCycle.taxCycle}</p>
|
||
</div>
|
||
<div>
|
||
<p>考勤取值周期</p>
|
||
<p>{attendCycle.fromDate}<span style={{ margin: "0 4px" }}>至</span>{attendCycle.endDate}</p>
|
||
</div>
|
||
<div>
|
||
<p>福利台账月份</p>
|
||
<p>{`引用${salarySobCycle.socialSecurityCycle}的福利台账数据`}</p>
|
||
</div>
|
||
</div>;
|
||
};
|