114 lines
5.2 KiB
JavaScript
114 lines
5.2 KiB
JavaScript
import React from 'react'
|
||
import { WeaInputSearch, WeaHelpfulTip, WeaTable } from "ecCom"
|
||
import { payrollGrantColumns, dataSource } from "../columns"
|
||
import { Menu, Button,Table, Modal, Dropdown } from "antd"
|
||
import { inject, observer } from 'mobx-react';
|
||
|
||
|
||
@inject('payrollStore')
|
||
@observer
|
||
export default class PayrollWithdrawModal extends React.Component {
|
||
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
|
||
if(!canWidthdrawColumns) {
|
||
return []
|
||
}
|
||
return canWidthdrawColumns.map(item => {
|
||
let result = {}
|
||
result.title = item.text;
|
||
result.key = item.column;
|
||
result.dataIndex = item.column;
|
||
result.width = item.width;
|
||
if(result.key == "operation") {
|
||
result.render = (text,record) => {
|
||
if(text == 'ALREADYSEND') {
|
||
return (
|
||
<a onClick={() => {this.handleWithdraw(record)}}>撤回</a>
|
||
)
|
||
} else {
|
||
return (
|
||
<a onClick={() => {this.handleGrant(record)}}>发送</a>
|
||
)
|
||
}
|
||
}
|
||
} else {
|
||
result.dataIndex = item.column;
|
||
}
|
||
return result;
|
||
})
|
||
}
|
||
|
||
render() {
|
||
const menu = (
|
||
<Menu>
|
||
<Menu.Item key="1">撤回所选</Menu.Item>
|
||
</Menu>
|
||
);
|
||
const {payrollStore} = this.props;
|
||
const { salarySendDetailBaseInfo, canWidthdrawColumns, canWithdrawDataSource } = payrollStore;
|
||
return (
|
||
<Modal width={800} visible={this.props.visible} onCancel={() => {this.props.onCancel()}}>
|
||
<div style={{padding: "0px 10px", height: "47px", lineHeight: "47px"}}>
|
||
<span style={{fontSize: "14px", color: '#666'}}>批量撤回</span>
|
||
<div style={{float: "right", marginRight: "40px"}}>
|
||
<Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>全部撤回</Dropdown.Button>
|
||
<WeaInputSearch />
|
||
</div>
|
||
</div>
|
||
<div style={{height: "40px", lineHeight: "40px"}}>
|
||
<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>
|
||
<div style={{marginTop: "10px"}}>
|
||
<WeaTable dataSource={canWithdrawDataSource} columns={this.getColumns()}/>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
} |