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 {
  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 (
      <Modal
        width={800}
        visible={this.props.visible}
        footer={[]}
        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}
              onClick={() => {
                this.handleWithdrawAll();
              }}>
              全部撤回
            </Dropdown.Button>
            <WeaInputSearch
              value={this.state.searchValue}
              onChange={value => {
                this.setState({ searchValue: value });
              }}
              onSearch={value => {
                this.handleSearch(value);
              }}
            />
          </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", height: "500px", scrollY: "scroll" }}>
          <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>
      </Modal>
    );
  }
}