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

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