387 lines
12 KiB
JavaScript
387 lines
12 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
import { WeaHelpfulTip, WeaTab, WeaTop } from "ecCom";
|
||
import { Button, Dropdown, Menu, message } from "antd";
|
||
import "./index.less";
|
||
import PayrollGrantModal from "./payrollGrantModal";
|
||
import PayrollWithdrawModal from "./payrollWithdrawModal";
|
||
import { getQueryString } from "../../../util/url";
|
||
import { getSearchs } from "../../../util";
|
||
import CustomPaginationTable from "../../../components/customPaginationTable";
|
||
|
||
@inject("payrollStore")
|
||
@observer
|
||
export default class PayrollGrant extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
selectedRowKeys: [],
|
||
payrollGrantVisible: false,
|
||
payrollWithdrawVisible: false,
|
||
currentId: ""
|
||
};
|
||
this.pageInfo = { current: 1, pageSize: 10 };
|
||
}
|
||
|
||
componentWillMount() {
|
||
let id = getQueryString("id");
|
||
this.setState({ currentId: id });
|
||
const {
|
||
payrollStore: { getPayrollInfo, getInfoList, getPaySa }
|
||
} = this.props;
|
||
getPayrollInfo(id);
|
||
getInfoList({
|
||
salarySendId: id
|
||
});
|
||
getPaySa();
|
||
}
|
||
|
||
// 撤回
|
||
handleWithdraw(record) {
|
||
const { payrollStore } = this.props;
|
||
const { withdrawPayroll, getInfoList } = payrollStore;
|
||
withdrawPayroll({
|
||
ids: [record.id],
|
||
salarySendId: this.state.currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId: this.state.currentId
|
||
});
|
||
});
|
||
}
|
||
|
||
// 发送
|
||
handleGrant(record) {
|
||
const { payrollStore } = this.props;
|
||
const { grantPayroll, getInfoList } = payrollStore;
|
||
grantPayroll({
|
||
ids: [record.id],
|
||
salarySendId: this.state.currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId: this.state.currentId
|
||
});
|
||
});
|
||
}
|
||
|
||
// 全部发送
|
||
handleGrantAll() {
|
||
const { payrollStore } = this.props;
|
||
const { grantPayroll, getInfoList } = payrollStore;
|
||
grantPayroll({
|
||
ids: [],
|
||
salarySendId: this.state.currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId: this.state.currentId
|
||
});
|
||
});
|
||
}
|
||
|
||
// 全部撤回
|
||
handleWithdrawAll() {
|
||
const { payrollStore } = this.props;
|
||
const { withdrawPayroll, getInfoList } = payrollStore;
|
||
withdrawPayroll({
|
||
ids: [],
|
||
salarySendId: this.state.currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId: this.state.currentId
|
||
});
|
||
});
|
||
}
|
||
|
||
getColumns() {
|
||
const { payrollStore } = this.props;
|
||
const { salaryGrantTableStore: columns } = payrollStore;
|
||
|
||
let result = [
|
||
...columns,
|
||
{ title: "操作", key: "operation", dataIndex: "operation" }
|
||
].map(item => {
|
||
item = { ...item };
|
||
if (item.dataIndex == "operation") {
|
||
item.render = (text, record) => {
|
||
if (record.sendStatus == "已发放") {
|
||
return (
|
||
<a
|
||
onClick={() => {
|
||
this.handleWithdraw(record);
|
||
}}>
|
||
撤回
|
||
</a>
|
||
);
|
||
} else {
|
||
return (
|
||
<a
|
||
onClick={() => {
|
||
this.handleGrant(record);
|
||
}}>
|
||
发送
|
||
</a>
|
||
);
|
||
}
|
||
};
|
||
}
|
||
return item;
|
||
});
|
||
return result;
|
||
}
|
||
|
||
getSearchsAdQuick() {
|
||
const handleMenuClick = e => {
|
||
switch (e.key) {
|
||
case "1":
|
||
this.setState({ payrollGrantVisible: true });
|
||
break;
|
||
case "2":
|
||
this.setState({ payrollWithdrawVisible: true });
|
||
break;
|
||
case "3":
|
||
this.handleExportAll();
|
||
break;
|
||
case "4":
|
||
this.handleExportSelect();
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
|
||
const menu = (
|
||
<Menu onClick={handleMenuClick}>
|
||
<Menu.Item key="1">批量发放</Menu.Item>
|
||
<Menu.Item key="2">批量撤回</Menu.Item>
|
||
<Menu.Item key="3">全部导出</Menu.Item>
|
||
<Menu.Item key="4">导出选中</Menu.Item>
|
||
{/* <Menu.Item key="3">自定义列</Menu.Item> */}
|
||
</Menu>
|
||
);
|
||
return [
|
||
<Button
|
||
type="primary"
|
||
style={{ marginRight: "10px" }}
|
||
onClick={() => {
|
||
this.handleGrantAll();
|
||
}}>
|
||
全部发放
|
||
</Button>,
|
||
<Button
|
||
type="default"
|
||
style={{ marginRight: "10px" }}
|
||
onClick={() => {
|
||
this.handleWithdrawAll();
|
||
}}>
|
||
全部撤回
|
||
</Button>,
|
||
<Dropdown.Button style={{ marginRight: "10px" }} overlay={menu}>
|
||
更多
|
||
</Dropdown.Button>
|
||
];
|
||
}
|
||
|
||
handleExportAll = () => {
|
||
const { payrollStore: { exportPayroll } } = this.props;
|
||
exportPayroll({
|
||
salarySendId: this.state.currentId
|
||
});
|
||
};
|
||
|
||
handleExportSelect = () => {
|
||
const { selectedRowKeys, currentId } = this.state;
|
||
const { payrollStore: { exportPayroll } } = this.props;
|
||
if (selectedRowKeys.length == 0) {
|
||
message.warning("未选择条目");
|
||
return;
|
||
}
|
||
exportPayroll({
|
||
ids: selectedRowKeys,
|
||
salarySendId: currentId
|
||
});
|
||
};
|
||
|
||
// 分页
|
||
handleDataPageChange(value) {
|
||
const { payrollStore: { getInfoList } } = this.props;
|
||
getInfoList({
|
||
salarySendId: this.state.currentId,
|
||
...this.pageInfo
|
||
});
|
||
}
|
||
|
||
handleShowSizeChange(pageInfo) {
|
||
const { payrollStore: { getInfoList } } = this.props;
|
||
getInfoList({
|
||
salarySendId: this.state.currentId,
|
||
...pageInfo
|
||
});
|
||
}
|
||
|
||
handleSearch=()=> {
|
||
const { payrollStore: { getInfoList, setGrantListShowSearchAd } } = this.props;
|
||
setGrantListShowSearchAd(false);
|
||
getInfoList({
|
||
salarySendId: this.state.currentId,
|
||
...this.pageInfo
|
||
});
|
||
}
|
||
|
||
onSelectChange = value => {
|
||
this.setState({
|
||
selectedRowKeys: value
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const { payrollStore } = this.props;
|
||
const {
|
||
salarySendDetailBaseInfo,
|
||
salaryGrantDataSource,
|
||
getInfoList,
|
||
grantListShowSearchAd,
|
||
grantListConditionForm,
|
||
grantListCondition,
|
||
setGrantListShowSearchAd,
|
||
salaryGrantPageInfo
|
||
} = payrollStore;
|
||
const { selectedRowKeys } = 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>
|
||
];
|
||
return (
|
||
<div className="payrollGrant_new">
|
||
<WeaTop
|
||
title="工资单发放" // 文字
|
||
icon={<i className="icon-coms-meeting"/>} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
buttons={this.getSearchsAdQuick()}
|
||
/>
|
||
|
||
<WeaTab
|
||
searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
|
||
searchsBasePlaceHolder="请输入姓名"
|
||
showSearchAd={grantListShowSearchAd} // 是否展开高级搜索面板
|
||
setShowSearchAd={bool => setGrantListShowSearchAd(bool)} //高级搜索面板受控
|
||
searchsAd={getSearchs(
|
||
grantListConditionForm,
|
||
toJS(grantListCondition),
|
||
2
|
||
)} // 高级搜索内部数据
|
||
buttonsAd={adBtn} // 高级搜索内部按钮
|
||
onSearch={() => this.handleSearch()} // 点搜索按钮时的回调
|
||
// searchsAdQuick={this.getSearchsAdQuick()}
|
||
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={`薪资周期\n
|
||
${salarySendDetailBaseInfo.salarySobCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle
|
||
.salaryCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle
|
||
.salaryCycle
|
||
.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle.salaryCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
|
||
税款所属期\n
|
||
${salarySendDetailBaseInfo.salarySobCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle
|
||
.taxCycle}\n
|
||
考勤取值周期\n
|
||
${salarySendDetailBaseInfo.salarySobCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle
|
||
.attendCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle
|
||
.attendCycle
|
||
.fromDate}至${salarySendDetailBaseInfo.salarySobCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle.attendCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
|
||
福利台账月份\n
|
||
引用${salarySendDetailBaseInfo.salarySobCycle &&
|
||
salarySendDetailBaseInfo.salarySobCycle
|
||
.socialSecurityCycle}的福利台账数据`}
|
||
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">
|
||
<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);
|
||
}}
|
||
/>
|
||
</div>
|
||
{this.state.payrollGrantVisible &&
|
||
<PayrollGrantModal
|
||
sendId={this.state.currentId}
|
||
visible={this.state.payrollGrantVisible}
|
||
onCancel={() => {
|
||
this.setState({ payrollGrantVisible: false });
|
||
}}
|
||
/>}
|
||
|
||
{this.state.payrollWithdrawVisible &&
|
||
<PayrollWithdrawModal
|
||
sendId={this.state.currentId}
|
||
visible={this.state.payrollWithdrawVisible}
|
||
onCancel={() => {
|
||
this.setState({ payrollWithdrawVisible: false });
|
||
}}
|
||
/>}
|
||
</div>
|
||
);
|
||
}
|
||
}
|