salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/dataTables.js

/*
 * Author: 黎永顺
 * name: 数据采集-列表
 * Description:
 * Date: 2023/2/17
 */
import React, { Component } from "react";
import UnifiedTable from "../../components/UnifiedTable";
import { getTableDate } from "../../apis/cumDeduct";
import { Menu, Popover } from "antd";

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

  componentDidMount() {
    this.getTableDate();
  }

  getTableDate = (extraPayload = {}) => {
    const { loading, pageInfo } = this.state;
    const { url, payload } = this.props;
    const module = { ...pageInfo, url, ...payload, ...extraPayload };
    this.setState({ loading: { ...loading, query: true } });
    getTableDate(module).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status) {
        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          columns
        });
      }
    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
  };
  /*
   * Author: 黎永顺
   * Description: 清空所选
   * Params:
   * Date: 2023/2/20
   */
  handleClearRows = () => this.setState({ selectedRowKeys: [] });

  render() {
    const { columns, dataSource, loading, selectedRowKeys, pageInfo } = this.state;
    const { showOperateBtn, onTableOperate, onViewDetails, isSpecial = false, form } = this.props;
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
    };
    const pagination = {
      ...pageInfo,
      showTotal: (total) => `共 ${total} 条`,
      pageSizeOptions: ["10", "20", "50", "100"],
      showSizeChanger: true,
      showQuickJumper: true,
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => {
          this.getTableDate({ ...form.getFormParams() });
        });
      },
      onChange: (current) => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => {
          this.getTableDate({ ...form.getFormParams() });
        });
      }
    };
    const getColumns = _.map(columns, item => {
      const { dataIndex } = item;
      if (dataIndex === "username") {
        return {
          ...item,
          render: (text, record) => {
            return <a
              className="ellipsis"
              href={`javaScript:openhrm(${record.employeeId});`}
              onClick={e => window.pointerXY(e)}
              title={text}
            >
              {text}
            </a>;
          }
        };
      } else if (dataIndex === "operate") {
        return {
          ...item,
          width: 150,
          render: (text, record) => (
            <div className="linkWapper">
              {
                !isSpecial &&
                <React.Fragment>
                  <a href="javaScript:void(0);" style={{ marginRight: 12 }}
                     onClick={() => onTableOperate({ key: "handleAddData" }, record)}>编辑</a>
                  <a href="javaScript:void(0);" style={{ marginRight: 12 }}
                     onClick={() => onViewDetails(record)}>查看明细</a>
                  {
                    showOperateBtn &&
                    <Popover
                      overlayClassName="moreIconWrapper"
                      placement="bottomRight"
                      content={<Menu onClick={(e) => onTableOperate(e, record)}>
                        <Menu.Item key="deleteSelectAddUpDeduction">删除</Menu.Item>
                      </Menu>} title="">
                      <i className="icon-coms-more"/>
                    </Popover>
                  }
                </React.Fragment>
              }
              {
                isSpecial &&
                <React.Fragment>
                  {
                    showOperateBtn &&
                    <React.Fragment>
                      <a href="javaScript:void(0);" style={{ marginRight: 12 }}
                         onClick={() => onTableOperate({ key: "handleAddData" }, record)}>编辑</a>
                      <a href="javaScript:void(0);"
                         onClick={() => onTableOperate({ key: "deleteSelectAddUpDeduction" }, record)}>删除</a>
                    </React.Fragment>
                  }
                </React.Fragment>
              }
            </div>
          )
        };
      } else {
        return {
          ...item,
          render: (text) => {
            return <span className="ellipsis" title={text}> {text} </span>;
          }
        };
      }
    });
    return <UnifiedTable
      rowKey="id"
      rowSelection={rowSelection}
      columns={getColumns}
      dataSource={dataSource}
      pagination={pagination}
      loading={loading.query}
      xWidth={getColumns.length * 160}
    />;
  }
}

export default DataTables;