salary-management-front/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollWithdrawModal.js

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>
        )
    }
}