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

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

const getLabel = WeaLocaleProvider.getLabel;

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

  componentDidMount() {
    window.addEventListener("message", this.handleReceive, false);
  }

  componentWillUnmount() {
    window.removeEventListener("message", this.handleReceive, false);
  }

  handleReceive = async ({ data }) => {
    const { type, payload: { id, params } = {} } = data;
    if (type === "init") {
      this.getTableDate();
    } else if (type === "turn") {
      switch (id) {
        case "PAGEINFO":
          this.setState({ pageInfo: { ...this.state.pageInfo, ...params } }, () => this.getTableDate());
          break;
        case "CHECKBOX":
          const { selectedRowKeys } = params;
          this.setState({ selectedRowKeys });
          break;
        case "DEL":
          this.props.onTableOperate({ key: "deleteSelectAddUpDeduction" }, params);
          break;
        case "EDIT":
          this.props.onTableOperate({ key: "handleAddData" }, params);
          break;
        case "VIEW":
          this.props.onViewDetails(params);
          break;
        case "log":
          this.props.onTableOperate({ key: "log" }, params);
          break;
        default:
          break;
      }
    }
  };

  getTableDate = (extraPayload = {}) => {
    const { loading, pageInfo, selectedRowKeys } = this.state;
    const { url, payload, isSpecial } = this.props;
    const module = {
      ...pageInfo, url, ...payload, ...extraPayload,
      departmentIds: extraPayload.departmentIds ? extraPayload.departmentIds.split(",") : []
    };
    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
        }, () => this.postMessageToChild({
          dataSource: this.state.dataSource, scrollHeight: 103, selectedRowKeys, isSpecial,
          pageInfo: this.state.pageInfo, unitTableType: "dataAcquisition",
          columns: this.state.columns
        }));
      }
    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
  };
  /*
   * Author: 黎永顺
   * Description: 清空所选
   * Params:
   * Date: 2023/2/20
   */
  handleClearRows = () => this.setState({ selectedRowKeys: [] });
  postMessageToChild = (payload = {}) => {
    const i18n = {
      "操作": getLabel(30585, "操作"), "编辑": getLabel(111, "编辑"), "共": getLabel(18609, "共"),
      "条": getLabel(18256, "条"), "删除": getLabel(111, "删除"), "查看明细": getLabel(111, "查看明细"),
      "操作日志": getLabel(545781, "操作日志")
    };
    const childFrameObj = document.getElementById("unitTable");
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({ ...payload, i18n }), "*");
  };

  render() {
    const { dataSource, loading } = this.state;
    const dom = document.querySelector(".dataContent");
    let height = 280;
    if (dataSource.length > 0 && dom) {
      const tableHeight = dataSource.length * 46 + 124;
      height = dom.offsetHeight > tableHeight ? tableHeight : dom.offsetHeight;
    }
    return (<div style={{ height: height + "px" }}>
      <Spin spinning={loading.query}>
        <iframe
          style={{ border: 0, width: "100%", height: "100%" }}
          // src="http://localhost:7607/#/unitTable"
          src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/unitTable"
          id="unitTable"
        />
      </Spin>
    </div>);
  }
}

export default DataTables;