salary-management-oneself/src/pages/OCTable/index.tsx

/*
 * Author: 黎永顺
 * name: 薪酬系统-线下对比
 * Description:
 * Date: 2023/11/28
 */
import React, { FC, useEffect, useState } from "react";
import { Table } from "antd";
import { exceptStr, paginationFun } from "@/utils/common";
import styles from "@/pages/atdTable/components/index.less";
import { defaultPage, IPage } from "@/common/types";
import cs from "classnames";

const OCTable: FC = (props) => {
  const [columns, setColumns] = useState<Array<any>>([]);
  const [pageInfo, setPageInfo] = useState<IPage>(defaultPage);
  const [dataSource, setDataSource] = useState<Array<any>>([]);
  const [i18n, setI18n] = useState<any>({});

  useEffect(() => {
    window.parent.postMessage({ type: "init" }, "*");
    window.addEventListener("message", receiveMessageFromIndex, false);
    return () => {
      window.removeEventListener("message", receiveMessageFromIndex, false);
    };
  }, []);
  const receiveMessageFromIndex = (event: any) => {
    const data: any = exceptStr(event.data);
    if (!_.isEmpty(data)) {
      const { columns, dataSource, pageInfo, i18n: i18nRes = {} } = data;
      const { current: pageNum, pageSize: size, total } = pageInfo;
      setDataSource(dataSource);
      setI18n(i18nRes);
      setPageInfo({ pageNum, size, total });
      setColumns(convertColumns(columns, i18nRes));
    }
  };
  const convertColumns: any = (cols: any[], lanObj: any) => {
    return _.map(cols, item => {
      if (_.isNaN(parseInt(item.dataIndex))) {
        return { ...item };
      } else {
        return {
          ...item, children: convertColumns(item.children, lanObj),
          render: (__: any, record: any) => {
            const formulaDesc = record["customParameters"][`${item["dataIndex"]}`];
            const showDifference = record[`${item["dataIndex"]}_type`] === "number";
            const { acctResultValue, excelResultValue } = record[item["dataIndex"]] || {};
            return <div className={styles["comparison-column-item-container"]}
                        onClick={() => {
                          window.parent.postMessage(
                            {
                              type: "turn",
                              payload: { id: "FORMULA", params: { formulaDesc } }
                            },
                            "*"
                          );
                        }}>
              <div className={styles["comparison-single-row"]}>
                <span>{lanObj["系统值"]}：</span>
                <span>{acctResultValue}</span>
              </div>
              <div className={styles["comparison-single-row"]}>
                <span>{lanObj["线下值"]}：</span>
                <span>{excelResultValue}</span>
              </div>
              {
                showDifference && !!parseInt(calculateDifference(acctResultValue, excelResultValue || 0)) &&
                <div className={cs(styles["danger"], styles["comparison-single-row"])}>
                  <span>{lanObj["差值"]}：</span>
                  <span>{calculateDifference(acctResultValue, excelResultValue || 0)}</span>
                </div>
              }
            </div>;
          }
        };
      }
    });
  };
  // 计算差值
  const calculateDifference = (systemValue: string, excelValue: string) => {
    if (_.isNil(systemValue) || _.isNil(excelValue)) return "";
    const systemNum = Number(systemValue);
    const excelNum = Number(excelValue);
    return (systemNum - excelNum).toFixed(2);
  };

  const sizeChange = (pageobj: IPage) => {
  };
  const onChange = (pageobj: IPage) => {
    const { pageNum, size: pageSize } = pageobj;
    setPageInfo((prevState) => {
      const { size } = prevState;
      window.parent.postMessage(
        {
          type: "turn",
          payload: { id: "PAGEINFO", params: { ...pageInfo, pageNum: size === pageSize ? pageNum : 1, size: pageSize } }
        },
        "*"
      );
      return { ...pageInfo, current: size === pageSize ? pageNum : 1, size: pageSize };
    });
  };
  return <Table
    rowKey="id" className={styles.tableWrapper}
    columns={columns} dataSource={dataSource} bordered size="small"
    scroll={{ x: 1200, y: `calc(100vh - 165px)` }}
    pagination={{
      ...paginationFun(pageInfo, sizeChange, onChange, i18n),
      size: "default"
    }}
  />;
};

export default OCTable;