261 lines
11 KiB
JavaScript
261 lines
11 KiB
JavaScript
import React from 'react'
|
||
import { inject, observer } from 'mobx-react';
|
||
import { toJS } from 'mobx';
|
||
import { WeaInputSearch, WeaHelpfulTip, WeaTable, WeaTop, WeaTab } from 'ecCom'
|
||
import { dataSource, payrollColumns } from '../columns';
|
||
import { Menu, Button, Dropdown, Table } from 'antd'
|
||
import CustomTab from '../../../components/customTab'
|
||
import "./index.less"
|
||
import PayrollGrantModal from './payrollGrantModal'
|
||
import PayrollWithdrawModal from './payrollWithdrawModal'
|
||
import { getQueryString } from '../../../util/url'
|
||
import { renderNoright, getSearchs } from '../../../util';
|
||
import CustomPaginationTable from '../../../components/customPaginationTable';
|
||
|
||
@inject('payrollStore')
|
||
@observer
|
||
export default class PayrollGrant extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
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 } = payrollStore
|
||
const { columns } = salaryGrantTableStore;
|
||
if(!columns) {
|
||
return []
|
||
}
|
||
|
||
let result = columns.filter(item => item.hide == "false").map(item => {
|
||
item = {...item}
|
||
if(item.dataIndex == "operation") {
|
||
item.render = (text,record) => {
|
||
if(text == 'ALREADYSEND') {
|
||
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;
|
||
}
|
||
}
|
||
|
||
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="3">导出选中</Menu.Item>
|
||
{/* <Menu.Item key="3">自定义列</Menu.Item> */}
|
||
</Menu>
|
||
);
|
||
return (
|
||
<div style={{display: "inline-block"}}>
|
||
<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>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 分页
|
||
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 } } = this.props;
|
||
getInfoList({
|
||
salarySendId:this.state.currentId,
|
||
...this.pageInfo
|
||
})
|
||
}
|
||
|
||
render() {
|
||
const {payrollStore} = this.props;
|
||
const { salarySendDetailBaseInfo, salaryGrantDataSource, getInfoList, grantListShowSearchAd, grantListConditionForm, grantListCondition, setGrantListShowSearchAd, salaryGrantPageInfo } = payrollStore;
|
||
|
||
return (
|
||
<div className="payrollGrant">
|
||
<WeaTop
|
||
title="工资单发放" // 文字
|
||
icon={<i className='icon-coms-meeting' />} // 左侧图标
|
||
iconBgcolor='#F14A2D' // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
buttons={[this.getSearchsAdQuick()]}
|
||
></WeaTop>
|
||
|
||
<WeaTab
|
||
searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
|
||
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: '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>
|
||
|
||
<div className="titleBarRight">
|
||
<span>已发放：{salarySendDetailBaseInfo.sendNum}/<span style={{color: "red"}}>{salarySendDetailBaseInfo.sendTotal}</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="tableWrapper">
|
||
<CustomPaginationTable
|
||
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>
|
||
)
|
||
}
|
||
} |