salary-management-front/pc4mobx/hrmSalary/pages/payroll/SalarySendList.js

import React from "react";
import { inject, observer } from "mobx-react";
import { Dropdown, Menu, message } from "antd";
import moment from "moment";
import CustomPaginationTable from "../../components/customPaginationTable";

@inject("payrollStore", "taxAgentStore")
@observer
export default class SalarySendList extends React.Component {
  constructor(props) {
    super(props);
    this.searchParams = { salaryYearMonth: this.props.salaryYearMonth };
    this.pageInfo = { current: 1, pageSize: 10 };
  }

  componentWillMount() {
    const { payrollStore: { getPayrollList } } = this.props;
    getPayrollList();
  }

  // 发放回调
  handleGrant(record) {
    window.open(
      "/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant?id=" +
      record.id
    );
  }

  // 查看详情
  handleShowDetail(record) {
    window.open(
      "/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail?id=" +
        record.id
    );
  }

  // 更新模板
  handleUpdateTemplate(record) {
    let templateRecord = {};
    templateRecord.id = record.templateId;
    if (!record.templateId) {
      message.warning("请设置默认模板");
      return;
    }
    this.props.onEditTemplate && this.props.onEditTemplate(templateRecord);
  }

  // 获取表头数据
  getColumns() {
    const {
      payrollStore: { salarySendTableStore },
      taxAgentStore: { showOperateBtn }
    } = this.props;
    const { columns } = salarySendTableStore;
    if (!columns) {
      return [];
    }

    let result = columns.filter(item => item.hide == "false");
    result.map(item => {
      if (item.dataIndex == "salaryYearMonth") {
        item.render = (text, record) => {
          return (
            <span>
              {moment(parseInt(text)).format("YYYY-MM")}
            </span>
          );
        };
      } else if (item.dataIndex == "lastSendTime") {
        item.render = (text, record) => {
          return (
            <span>
              {moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}
            </span>
          );
        };
      }
    });
    showOperateBtn
      ?
      (result = result.concat([
        {
          title: "操作",
          key: "operate",
          render: (text, record) => {
            return (
              <a
                onClick={() => {
                  this.handleGrant(record);
                }}>
                发放
              </a>
            );
          }
        },
        {
          title: "",
          key: "moreOperate",
          dataIndex: "moreOperate",
          render: (text, record) => {
            const { sendNum, sendTotal } = record;
            return (
              <Dropdown
                overlay={
                  sendNum !== sendTotal ?
                  <Menu onClick={({key})=>{
                    if(key === "1"){
                      this.handleShowDetail(record)
                    }else{
                      this.handleUpdateTemplate(record);
                    }
                  }}>
                    <Menu.Item key="1"> 查看详情 </Menu.Item>
                    <Menu.Item key="2"> 更新模板 </Menu.Item>
                  </Menu>:
                  <Menu onClick={()=>{
                    this.handleShowDetail(record)
                  }}>
                    <Menu.Item key="1"> 查看详情 </Menu.Item>
                  </Menu>
                }>
                <i className="icon-coms-more"/>
              </Dropdown>
            );
          }
        }
      ]))
      :
    (result = result.concat([
        {
          title: "操作",
          key: "operate",
          render: (text, record) => {
            return (
              <a
                onClick={() => {
                  this.handleShowDetail(record);
                }}>
                查看详情
              </a>
            );
          }
        }
      ]));
    return result;
  }

  render() {
    const { payrollStore } = this.props;
    const {
      salarySendDataSource,
      pageInfo,
      loading
    } = payrollStore;
    return (
      <div>
        <CustomPaginationTable
          loading={loading}
          columns={this.getColumns()}
          dataSource={salarySendDataSource}
          total={pageInfo.total}
          current={pageInfo.pageNum}
          pageSize={this.pageInfo.pageSize}
          onPageChange={value => {
            this.pageInfo.current = value;
            this.props.handleListDataPageChange(value, this.pageInfo);
          }}
          onShowSizeChange={(current, pageSize) => {
            this.pageInfo = { current, pageSize };
            this.props.handleListShowSizeChange(this.pageInfo);
          }}
        />
      </div>
    );
  }
}