salary-management-front/pc4mobx/hrmSalary/pages/calculate/components/calculateTablelist/index.js

/*
 * Author: 黎永顺
 * name: 薪资核算-列表
 * Description:
 * Date: 2023/10/9
 */
import React, { Component } from "react";
import { WeaHelpfulTip, WeaLocaleProvider, WeaTable } from "ecCom";
import { Dropdown, Menu, Tag } from "antd";
import { getSalaryAcctList } from "../../../../apis/calculate";

const getLabel = WeaLocaleProvider.getLabel;

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

  componentDidMount() {
    this.getSalaryAcctList(this.props);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.isRefresh !== this.props.isRefresh) this.getSalaryAcctList(nextProps);
  }

  getSalaryAcctList = (props) => {
    const { pageInfo } = this.state, { queryParams, form } = props;
    const { taxAgentIds } = form.getFormParams();
    const { dateRange, ...extra } = queryParams;
    const [startMonthStr, endMonthStr] = dateRange || [];
    const params = { startMonthStr, endMonthStr, ...extra };
    const payload = {
      ...pageInfo, ...params, taxAgentIds: taxAgentIds ? taxAgentIds.split(",") : []
    };
    this.setState({ loading: true });
    getSalaryAcctList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { columns, list: dataSource, pageNum, pageSize, total } = data;
        this.setState({
          dataSource, pageInfo: { ...pageInfo, pageNum, pageSize, total },
          columns: _.map(_.filter(columns, it => (it.dataIndex !== "backCalcStatus" && it.dataIndex !== "acctTimes")),
            o => {
              const { dataIndex } = o;
              let width = "";
              switch (dataIndex) {
                case "status":
                case "employeeSize":
                  width = "5%";
                  break;
                case "salarySobName":
                  width = "20%";
                  break;
                case "description":
                  width = "15%";
                  break;
                default:
                  width = "10%";
                  break;
              }
              if (dataIndex === "operate") {
                return {
                  ...o, width: 170,
                  title: <span>
                    <span>{getLabel(30585, "操作")}</span>
                    <WeaHelpfulTip
                      placement="topLeft" style={{ marginLeft: 4 }}
                      title={getLabel(111, "当前账套当次核算的工资单全部撤回才可重新核算")}
                    />
                  </span>,
                  render: (__, record) => {
                    const { operate: opts = [] } = record;
                    const admin = record.opts.includes("admin");
                    const operate = admin ? [...opts, { index: "log", text: getLabel(30586, "查看日志") }] : [
                      { index: "3", text: getLabel(111, "查看") },
                      { index: "null", text: "" },
                      { index: "log", text: getLabel(30586, "查看日志") }
                    ];
                    return <React.Fragment>
                      {
                        _.map(operate.slice(0, 2), f => (
                          <a href="javascript:void(0);" style={{ marginRight: 10 }}
                             onClick={() => this.props.onCalcOpts({ key: f.index }, record)}>{f.text}</a>
                        ))
                      }
                      {
                        !_.isEmpty(operate.slice(2)) &&
                        <Dropdown
                          overlay={<Menu onClick={(e) => this.props.onCalcOpts(e, record)}>
                            {
                              _.map(operate.slice(2), g => (<Menu.Item key={g.index}>{g.text}</Menu.Item>))
                            }
                          </Menu>
                          }
                        >
                          <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
                        </Dropdown>
                      }
                    </React.Fragment>;
                  }
                };
              } else if (dataIndex === "salarySobName") {
                return {
                  ...o, width,
                  render: (text, record) => {
                    const { acctTimes, backCalcStatus } = record;
                    return <div className="salarySobNameWrapper">
                      <span title={text}>{text}</span>
                      <div className="salarySobNameTagWrapper">
                        {
                          backCalcStatus === 1 &&
                          <i className="icon-coms-Refresh" title={getLabel(542638, "回算")}/>
                        }
                        <Tag color="blue">{`${getLabel(15323, "第")}${acctTimes}${getLabel(18929, "次")}`}</Tag>
                      </div>
                    </div>;
                  }
                };
              }
              return { ...o, width, render: (txt) => (<span title={txt}>{txt}</span>) };
            })
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };

  render() {
    const { loading, dataSource, columns, pageInfo } = this.state;
    const { selectedRowKeys, setSelectedRowKeys } = this.props;
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.getSalaryAcctList(this.props));
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getSalaryAcctList(this.props));
      }
    };
    const rowSelection = {
      selectedRowKeys, onChange: setSelectedRowKeys
    };
    return (
      <WeaTable
        rowKey="id" scroll={{ y: "calc(100vh - 152px)" }} rowSelection={rowSelection}
        dataSource={dataSource} loading={loading}
        pagination={pagination} columns={columns}
      />
    );
  }
}

export default Index;