salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/regList.js

/*
 * Author: 黎永顺
 * name: 退差列表
 * Description:
 * Date: 2022/11/23
 */
import React, { Component } from "react";
import { WeaTable } from "ecCom";
import { getQueryString } from "../../../../util/url";
import * as API from "../../../../apis/standingBook";
import "./index.less";

const APIFox = {
  "regression": API.recessionList,
  "difference": API.balanceList
};

class RegList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [],
      dataSource: [],
      selectedRowKeys: [],
      loading: {
        query: false
      },
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  }

  componentDidMount() {
    this.recessionList();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible) {
      this.recessionList();
    }
  }

  handleResetSelectRowKeys = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  };
  recessionList = (module) => {
    const { type } = this.props;
    const { loading, pageInfo } = this.state;
    const billMonth = getQueryString("billMonth");
    const paymentOrganization = getQueryString("paymentOrganization");
    const creator = Number(getQueryString("creator"));
    const paymentStatus = "3";
    const payload = {
      billMonth, paymentStatus,
      creator, paymentOrganization,
      ...pageInfo,
      ...module
    };
    this.setState({ loading: { ...loading, query: true } });
    APIFox[type](payload).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status) {
        const { pageInfo: list } = data;
        const { columns, list: dataSource, pageNum: current, pageSize, total } = list;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          columns: _.map(_.filter(columns, it => it.dataIndex !== "id"), items => {
            if (items.dataIndex === "employeeId") {
              return {
                ...items,
                width: 110,
                title: "姓名",
                render: (text, r) => {
                  const { userName } = r;
                  return (
                    <span>{userName}</span>
                  );
                }
              };
            } else if (items.dataIndex === "costCenter") {
              return {
                ...items,
                width: 110,
                render: (text, r) => {
                  const { costCenter } = r;
                  return (
                    <a href={costCenter.url} className="tdEllipsis">{costCenter.name || ""}</a>
                  );
                }
              };
            }
            return {
              ...items,
              title: <span dangerouslySetInnerHTML={{ __html: items.title }}/>,
              width: 120,
              render: (text) => {
                return <span className="tdEllipsis" title={text}>{text}</span>;
              }
            };
          })
        });
      }
    }).catch(() => {
      this.setState({ loading: { ...loading, query: false } });
    });
  };
  handleChangeRow = (selectedRowKeys) => {
    const { onChangeRowkey } = this.props;
    this.setState({ selectedRowKeys });
    onChangeRowkey(selectedRowKeys);
  };

  render() {
    const { loading, pageInfo, selectedRowKeys, dataSource, columns } = this.state;
    const { onEdit } = this.props;
    const pagination = {
      ...pageInfo,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => {
          this.recessionList();
        });
      },
      onChange: (current) => {
        this.setState({ pageInfo: { ...pageInfo, current } }, () => {
          this.recessionList();
        });
      }
    };
    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleChangeRow
    };
    return (
      <WeaTable
        rowKey="id"
        columns={[
          ...columns,
          {
            title: "操作",
            dataIndex: "operate",
            fixed: "right",
            width: "120px",
            render: (text, record) => {
              return (
                <div className="optWrapper">
                  <a
                    href="javascript:void(0);"
                    className="mr10"
                    onClick={() => onEdit(record)}
                  >编辑</a>
                </div>
              );
            }
          }
        ]}
        dataSource={dataSource}
        loading={loading.query}
        pagination={pagination}
        rowSelection={rowSelection}
        scroll={{ x: 900 }}
      />
    );
  }
}

export default RegList;