qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工资单

This commit is contained in:
黎永顺 2022-12-02 16:12:11 +08:00
parent a4dbd0cc4b
commit 5e23404b32
5 changed files with 131 additions and 621 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pc4mobx/hrmSalary/components/customPaginationTable/index.js
View File

@ -3,8 +3,7 @@ import CustomTable from "../../components/customTable";
class CustomPaginationTable extends PureComponent {
shouldComponentUpdate(nextProps, nextState, nextContext) {
if (nextProps.columnIndex && this.props.columnIndex !== nextProps.columnIndex) return false;
return true;
return !(nextProps.columnIndex && this.props.columnIndex !== nextProps.columnIndex);
}
render() {

192
pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
View File

@ -1,15 +1,15 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaHelpfulTip, WeaTab, WeaTop } from "ecCom";
import { WeaDropdown, 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";
const { ButtonSelect } = WeaDropdown;
@inject("payrollStore")
@observer
export default class PayrollGrant extends React.Component {
@ -17,8 +17,6 @@ export default class PayrollGrant extends React.Component {
super(props);
this.state = {
selectedRowKeys: [],
payrollGrantVisible: false,
payrollWithdrawVisible: false,
currentId: "",
selectedKey: "0"
};
@ -56,7 +54,7 @@ export default class PayrollGrant extends React.Component {
});
};
// 发送
// 发放
handleGrant(record) {
const { payrollStore } = this.props;
const { currentId, selectedKey } = this.state;
@ -72,8 +70,64 @@ export default class PayrollGrant extends React.Component {
});
}
/*
* Author: 黎永顺
* Description:工资单发放
* Params:
* Date: 2022/12/2
*/
sendPayroll = (key) => {
const { selectedRowKeys, currentId } = 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":
break;
default:
break;
}
};
/*
* Author: 黎永顺
* Description:工资单撤回
* Params:
* Date: 2022/12/2
*/
withdrawalPayroll = (key) => {
const { selectedRowKeys, currentId } = 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":
break;
default:
break;
}
};
// 全部发送
handleGrantAll() {
handleGrantAll = () => {
const { payrollStore } = this.props;
const { currentId, selectedKey } = this.state;
const { grantPayroll, getInfoList } = payrollStore;
@ -86,7 +140,19 @@ export default class PayrollGrant extends React.Component {
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() {
@ -104,19 +170,34 @@ export default class PayrollGrant extends React.Component {
});
}
// 撤回所选
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 } = payrollStore;
return [
...columns,
{ title: "操作", key: "operation", dataIndex: "operation" }
].map(item => {
item = { ...item };
if (item.dataIndex === "operation") {
item.render = (text, record) => {
...toJS(columns),
{
title: "操作",
key: "",
dataIndex: "",
display: true,
render: (text, record) => {
if (record.sendStatus === "已发放") {
return (
<a
href="javascript:void(0);"
onClick={() => {
this.handleWithdraw(record);
}}>
@ -126,28 +207,23 @@ export default class PayrollGrant extends React.Component {
} else {
return (
<a
href="javascript:void(0);"
onClick={() => {
this.handleGrant(record);
}}>
发送
发放
</a>
);
}
};
}
}
return item;
});
];
};
getSearchsAdQuick() {
const { selectedKey } = this.state;
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;
@ -160,31 +236,43 @@ export default class PayrollGrant extends React.Component {
};
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>
);
return [
<Button
type="primary"
onClick={() => {
this.handleGrantAll();
}}>
全部发放
</Button>,
<Button
type="default"
onClick={() => {
this.handleWithdrawAll();
}}>
全部撤回
</Button>,
let btnDom = [
<Dropdown.Button overlay={menu}>
更多
</Dropdown.Button>
];
if (selectedKey === "0") {
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 {
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 = () => {
@ -193,7 +281,6 @@ export default class PayrollGrant extends React.Component {
salarySendId: this.state.currentId
});
};
handleExportSelect = () => {
const { selectedRowKeys, currentId } = this.state;
const { payrollStore: { exportPayroll } } = this.props;
@ -206,7 +293,6 @@ export default class PayrollGrant extends React.Component {
salarySendId: currentId
});
};
// 分页
handleDataPageChange = (value) => {
const { payrollStore: { getInfoList } } = this.props;
@ -363,30 +449,12 @@ export default class PayrollGrant extends React.Component {
}}
/>
</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>
);
}
}
const TitleHelp = (props) => {
export const TitleHelp = (props) => {
const { salarySobCycle } = props;
const { salaryCycle = {}, attendCycle = {} } = salarySobCycle;
return <div>

62
pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantDetail.js
View File

@ -1,62 +0,0 @@
import React from 'react'
import { payrollGrantDetailColumns, dataSource} from '../columns'
export default class PayrollGrantDeatail extends React.Component {
render() {
const handleMenuClick = () => {
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">导出选中</Menu.Item>
</Menu>
);
const renderRightOperation = () => {
return (
<div style={{display: "inline-block"}}>
<Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>导出全部</Dropdown.Button>
<WeaInputSearch />
</div>
)
}
return (
<div>
<CustomTab
searchOperationItem={
renderRightOperation()
}
/>
<div className="titleBar">
<div className="titleBarLeft">
<span>薪资所属月：2021-11</span>
<WeaHelpfulTip
style={{marginLeft: '10px', marginRight: "10px"}}
width={200}
title="薪资周期\n
2021-11-01至2021-11-30\n
税款所属期\n
2021-12\n
考勤取值周期\n
2021-11-01至2021-11-30\n
福利台账月份\n
引用2021-11的福利台账数据"
placement="topLeft"
/>
<span>工资单模板：上海泛微工资单1</span>
</div>
<div className="titleBarRight">
<span>已发放：111/<span style={{color: "red"}}>1111</span></span>
<span style={{marginLeft: "10px"}}>未确认：111</span>
</div>
</div>
<div>
<Table dataSource={dataSource} columns={payrollGrantDetailColumns} />
</div>
</div>
)
}
}

248
pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantModal.js
View File

@ -1,248 +0,0 @@
import React from "react";
import { WeaDialog, WeaHelpfulTip, WeaInputSearch, WeaTable } from "ecCom";
import { Dropdown, Menu, message } from "antd";
import { inject, observer } from "mobx-react";
import "./index.less";
@inject("payrollStore")
@observer
export default class payrollGrantModal extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],
current: 1,
searchValue: ""
};
}
// 撤回
handleWithdraw(record) {
const { payrollStore } = this.props;
const { withdrawPayroll, batchSendInfoList } = payrollStore;
withdrawPayroll({
ids: [record.id],
salarySendId: this.props.sendId
}).then(() => {
batchSendInfoList({ salarySendId: this.props.sendId });
});
}
// 发送
handleGrant(record) {
const { payrollStore } = this.props;
const { grantPayroll, batchSendInfoList } = payrollStore;
grantPayroll({
ids: [record.id],
salarySendId: this.props.sendId
}).then(() => {
batchSendInfoList({ salarySendId: this.props.sendId });
});
}
componentWillMount() {
const { payrollStore: { batchSendInfoList } } = this.props;
batchSendInfoList({ salarySendId: this.props.sendId });
}
getColumns() {
const { payrollStore } = this.props;
const { canGrantColumns } = payrollStore;
return [
...canGrantColumns,
{ title: "操作", key: "operation", dataIndex: "operation" }
].map(item => {
if (item.key == "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;
});
}
onSelectChange = value => {
this.setState({
selectedRowKeys: value
});
};
// 发放
fetchGrantPayRoll(payload) {
const { payrollStore: { grantPayroll } } = this.props;
grantPayroll(payload).then(() => {
const { payrollStore: { getInfoList } } = this.props;
getInfoList({
salarySendId: this.props.sendId
});
this.props.onCancel && this.props.onCancel();
});
}
handleMenuClick(e) {
const { selectedRowKeys } = this.state;
const { payrollStore: { grantPayroll } } = this.props;
if (selectedRowKeys.length == 0) {
message.warning("未选择条目");
return;
}
this.fetchGrantPayRoll({
ids: selectedRowKeys,
salarySendId: this.props.sendId
});
}
handleGrantAll() {
this.fetchGrantPayRoll({ salarySendId: this.props.sendId });
}
handleSearch(value) {
const { payrollStore: { batchSendInfoList } } = this.props;
batchSendInfoList({
salarySendId: this.props.sendId,
keyword: value,
current: this.state.current
});
}
// 分页
handleDataPageChange(value) {
this.setState({ current: value });
const { payrollStore: { batchSendInfoList } } = this.props;
batchSendInfoList({ salarySendId: this.props.sendId, current: value });
}
render() {
const menu = (
<Menu onClick={e => this.handleMenuClick(e)}>
<Menu.Item key="1">发放所选</Menu.Item>
</Menu>
);
const { payrollStore } = this.props;
const {
salarySendDetailBaseInfo,
canGrantDataSource,
canGrantPageInfo
} = payrollStore;
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this)
};
return (
<WeaDialog
style={{ width: 800 }}
initLoadCss
className="batchReleaseWrapper"
title="批量发放"
visible={this.props.visible}
buttons={[
<Dropdown.Button
type="primary"
overlay={menu}
onClick={() => {
this.handleGrantAll();
}}>
全部发放
</Dropdown.Button>
]}
onCancel={() => {
this.props.onCancel();
}}>
<div style={{ padding: "16px 20px" }}>
<div className="searchWrapper">
<div className="titleBarLeft">
<span>
薪资所属月：{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth
.year}-{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth.monthValue}
</span>
<WeaHelpfulTip
style={{ marginLeft: "10px", marginRight: "10px" }}
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>
<WeaInputSearch
value={this.state.searchValue}
onChange={value => {
this.setState({ searchValue: value });
}}
placeholder="请输入姓名"
onSearch={value => {
this.handleSearch(value);
}}
/>
</div>
<div className="tableWrpper">
<WeaTable
rowKey="id"
rowSelection={rowSelection}
dataSource={canGrantDataSource}
columns={this.getColumns()}
pagination={{
onChange: value => {
this.handleDataPageChange(value);
},
total: canGrantPageInfo.total,
current: canGrantPageInfo.pageNum,
showTotal: total => `共 ${total} 条`
}}
/>
</div>
</div>
</WeaDialog>
);
}
}

247
pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollWithdrawModal.js
View File

@ -1,247 +0,0 @@
import React from "react";
import { WeaDialog, WeaHelpfulTip, WeaInputSearch, WeaTable } from "ecCom";
import { Dropdown, Menu } from "antd";
import { inject, observer } from "mobx-react";
@inject("payrollStore")
@observer
export default class PayrollWithdrawModal extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],
current: 1
};
}
componentWillMount() {
const { payrollStore } = this.props;
const { batchWithdrawInfoList } = payrollStore;
batchWithdrawInfoList({ salarySendId: this.props.sendId });
}
// 撤回
handleWithdraw(record) {
const { payrollStore } = this.props;
const { withdrawPayroll, batchWithdrawInfoList } = payrollStore;
withdrawPayroll({
ids: [record.id],
salarySendId: this.props.sendId
}).then(() => {
batchWithdrawInfoList({ salarySendId: this.props.sendId });
});
}
// 发送
handleGrant(record) {
const { payrollStore } = this.props;
const { grantPayroll, batchWithdrawInfoList } = payrollStore;
grantPayroll({
ids: [record.id],
salarySendId: this.props.sendId
}).then(() => {
batchWithdrawInfoList({ salarySendId: this.props.sendId });
});
}
getColumns() {
const { payrollStore } = this.props;
const { canWidthdrawColumns } = payrollStore;
return [
...canWidthdrawColumns,
{ title: "操作", key: "operation", dataIndex: "operation" }
].map(item => {
if (item.key == "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;
});
}
onSelectChange = value => {
this.setState({
selectedRowKeys: value
});
};
// 撤回
fetchWithdrawPayroll(payload) {
const { payrollStore: { grantPayroll, withdrawPayroll } } = this.props;
withdrawPayroll(payload).then(() => {
const { payrollStore: { getInfoList } } = this.props;
getInfoList({
salarySendId: this.props.sendId
});
this.props.onCancel && this.props.onCancel();
});
}
handleMenuClick(e) {
const { selectedRowKeys } = this.state;
const { payrollStore: { grantPayroll } } = this.props;
if (selectedRowKeys.length == 0) {
message.warning("未选择条目");
return;
}
this.fetchWithdrawPayroll({
ids: selectedRowKeys,
salarySendId: this.props.sendId
});
}
handleWithdrawAll() {
this.fetchWithdrawPayroll({ salarySendId: this.props.sendId });
}
// 分页
handleDataPageChange(value) {
this.setState({ current: value });
const { payrollStore } = this.props;
const { batchWithdrawInfoList } = payrollStore;
batchWithdrawInfoList({ salarySendId: this.props.sendId, current: value });
}
handleSearch(value) {
const { payrollStore: { batchWithdrawInfoList } } = this.props;
batchWithdrawInfoList({
salarySendId: this.props.sendId,
keyword: value,
current: this.state.current
});
}
render() {
const menu = (
<Menu onClick={e => this.handleMenuClick(e)}>
<Menu.Item key="1">撤回所选</Menu.Item>
</Menu>
);
const { payrollStore } = this.props;
const {
salarySendDetailBaseInfo,
canWidthdrawColumns,
canWithdrawDataSource,
canWithdrawPageInfo
} = payrollStore;
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this)
};
return (
<WeaDialog
style={{ width: 800 }}
initLoadCss
title="批量撤回"
className="batchReleaseWrapper"
visible={this.props.visible}
buttons={[
<Dropdown.Button
type="primary"
overlay={menu}
onClick={() => {
this.handleWithdrawAll();
}}>
全部撤回
</Dropdown.Button>
]}
onCancel={() => {
this.props.onCancel();
}}>
<div style={{ padding: "16px 20px" }}>
<div className="searchWrapper">
<div className="titleBarLeft">
<span>
薪资所属月：{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth
.year}-{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth.monthValue}
</span>
<WeaHelpfulTip
style={{ marginLeft: "10px", marginRight: "10px" }}
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>
<WeaInputSearch
placeholder="请输入姓名"
value={this.state.searchValue}
onChange={value => {
this.setState({ searchValue: value });
}}
onSearch={value => {
this.handleSearch(value);
}}
/>
</div>
</div>
<div className="tableWrpper">
<WeaTable
rowKey="id"
rowSelection={rowSelection}
dataSource={canWithdrawDataSource}
columns={this.getColumns()}
pagination={{
onChange: value => {
this.handleDataPageChange(value);
},
total: canWithdrawPageInfo.total,
current: canWithdrawPageInfo.pageNum,
showTotal: total => `共 ${total} 条`
}}
/>
</div>
</WeaDialog>
);
}
}