salary-management-oneself/src/pages/calcTable/customTableTitle.tsx

/*
 * Author: 黎永顺
 * name: 自定义薪资核算表格标题
 * Description:
 * Date: 2023/9/15
 */
import React, { FunctionComponent } from "react";
import classnames from "classnames";
import Icon from "@/lib/CustomIcon";
import styles from "@/pages/atdTable/components/index.less";

interface OwnProps {
  dataIndex?: string;
  title?: string;
  lockStatus?: string;
  dataType?: string;
  onHandleFormulatd?: any;
  i18n?: any;
  pattern?: number;
}

type Props = OwnProps;

const customTableTitle: FunctionComponent<Props> = (props) => {
  const { dataIndex, title, lockStatus, onHandleFormulatd, i18n = {}, pattern, dataType } = props;

  const handleToggleSalaryItemVal = (salaryItemId: string, type: string, updateParams: any = {}) => {
    window.parent.postMessage(
      {
        type: "turn",
        payload: { id: "LOCKING", params: { lockType: type, salaryItemId, ...updateParams } }
      },
      "*"
    );
  };
  return (
    // th-width-lock
    <div className={classnames(styles["expand-th"])}>
      <div className={styles["title-text"]} title={title} onClick={() => onHandleFormulatd(dataIndex)}>{title}</div>
      {
        !!lockStatus &&
        <div className={styles["toogle-lock-tool"]}>
          <Icon type="icon-piliangsuoding" title={i18n["点击锁定所有解锁的项目值"]}
                onClick={() => handleToggleSalaryItemVal(dataIndex as string, "LOCK")}/>
          <Icon type="icon-piliangjiesuo" title={i18n["点击解锁所有锁定的项目值"]}
                onClick={() => handleToggleSalaryItemVal(dataIndex as string, "UNLOCK")}/>
          <Icon type="icon-pilianggengxin" title={i18n["批量更新"]}
                onClick={() => handleToggleSalaryItemVal(dataIndex as string, "BATCHUPDATE", {
                  pattern, salaryItemName: title, dataType
                })}/>
        </div>
      }
    </div>
  );
};

export default customTableTitle;