salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/components/tableRecord.js

/*
 * Author: 黎永顺
 * name: 数据采集-详情记录页面
 * Description:
 * Date: 2023/2/20
 */
import React, { Component } from "react";
import { WeaSearchGroup } from "ecCom";
import UnifiedTable from "../../../components/UnifiedTable";
import { getTableRecordDate } from "../../../apis/cumDeduct";
import { DataCollectionDateRangePick, DataCollectionSelect, Input } from "../cumDeduct";
import "./index.less";

class TableRecord extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: {
        query: false
      },
      dataSource: [],
      columns: [],
      selectedRowKeys: [],
      pageInfo: {
        current: 1, pageSize: 10, total: 0
      },
      recordPayload: {
        accumulatedSpecialAdditionalDeductionId: "",
        otherTaxExemptDeductionId: "",
        accumulatedSituationId: "",
        specialAddDeductionId: "",
        taxAgentId: "",
        declareMonth: []
      }
    };
  }

  componentDidMount() {
    this.getTableRecordData();
  }

  getTableRecordData = (payload) => {
    const { loading, pageInfo } = this.state;
    const { url, ...extraPayload } = this.props;
    const module = { ...pageInfo, url, ...extraPayload, ...payload };
    this.setState({ loading: { ...loading, query: true } });
    getTableRecordDate(_.omit(module, ["className", "items", "total"])).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
  */
  handleTablerecordScreen = ({ key, value }) => {
    const { recordPayload } = this.state;
    // this.setState({
    //   recordPayload: {
    //     ...recordPayload,
    //     [key]: value
    //   }
    // }, () => {
    //   this.tableRecordRef.getTableRecordData(this.state.recordPayload);
    // });
  };
  render() {
    const { className, screenParams, taxAgentOption } = this.props;
    const { columns, dataSource, loading, selectedRowKeys, pageInfo, recordPayload } = this.state;
    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.getTableRecordData();
        });
      },
      onChange: (current) => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => {
          this.getTableRecordData();
        });
      }
    };
    const items = [
      {
        com: Input({ value: editId.username })
      },
      {
        com: DataCollectionDateRangePick({
          label: "税款所属期",
          range: recordPayload.declareMonth,
          onChange: this.handleTablerecordScreen,
          key: "declareMonth"
        })
      },
      {
        com: DataCollectionSelect({
          label: "个税扣缴义务人",
          value: !_.isNil(recordPayload.taxAgentId) ? recordPayload.taxAgentId.toString() : "",
          options: [{ key: "", showname: "全部" }, ...taxAgentOption],
          onChange: this.handleTablerecordScreen,
          key: "taxAgentId"
        })
      }
    ];
    return (
      <div className="tableRecordWrapper">
        <WeaSearchGroup className={className} showGroup needTigger={false} items={items} col={3}/>
        <UnifiedTable
          rowKey="id"
          rowSelection={rowSelection}
          columns={_.map(columns, item => ({
            ...item,
            render: (text) => {
              return <span className="ellipsis" title={text}> {text} </span>;
            }
          }))}
          dataSource={dataSource}
          pagination={pagination}
          loading={loading.query}
        />
      </div>
    );
  }
}

export default TableRecord;