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, 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":
          break;
        case "EDIT":
          break;
        default:
          break;
      }
    }
  };

  getTableDate = (extraPayload = {}) => {
    const { loading, pageInfo, selectedRowKeys } = this.state;
    const { url, payload } = 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: 95, selectedRowKeys,
          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, "删除")
    };
    const childFrameObj = document.getElementById("unitTable");
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({ ...payload, i18n }), "*");
  };

  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.Item key="log">{getLabel(545781, "操作日志")}</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);" style={{ marginRight: 12 }}
                         onClick={() => onTableOperate({ key: "deleteSelectAddUpDeduction" }, record)}>删除</a>
                      {
                        showOperateBtn &&
                        <Popover
                          overlayClassName="moreIconWrapper"
                          placement="bottomRight"
                          content={<Menu onClick={(e) => onTableOperate(e, record)}>
                            <Menu.Item key="log">{getLabel(545781, "操作日志")}</Menu.Item>
                          </Menu>} title="">
                          <i className="icon-coms-more"/>
                        </Popover>
                      }
                    </React.Fragment>
                  }
                </React.Fragment>
              }
            </div>
          )
        };
      } else {
        return {
          ...item,
          render: (text) => {
            return <span className="ellipsis" title={text}> {text} </span>;
          }
        };
      }
    });
    let height = 280;
    if (dataSource.length > 0) height = dataSource.length <= 10 ? dataSource.length * 46 + 124 : 500;
    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>);
    // <UnifiedTable
    //   rowKey="id"
    //   rowSelection={rowSelection}
    //   columns={getColumns}
    //   dataSource={dataSource}
    //   pagination={pagination}
    //   loading={loading.query}
    //   xWidth={getColumns.length * 160}
    // />;
  }
}

export default DataTables;