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

/*
 * Author: 黎永顺
 * name: 薪资核算-列表
 * Description:
 * Date: 2023/9/14
 */
import React, { FunctionComponent, useEffect, useState } from "react";
import type { MenuProps } from "antd";
import { Button, Dropdown, Space, Table, Tooltip, Typography } from "antd";
import { DeleteOutlined, LockOutlined, QuestionCircleOutlined, SettingOutlined, UnlockOutlined } from "@ant-design/icons";
import CustomTableTitle from "@/pages/calcTable/customTableTitle";
import CalcExplainFooter from "@/pages/calcTable/calcExplainFooter";
import CaclFixedTotal from "./calcFixedTotal";
import type { ColumnType } from "antd/lib/table";
import type { PaginationData } from "rc-pagination";
import { exceptStr, paginationFun } from "@/utils/common";
import { IPage } from "@/common/types";
import styles from "@/pages/atdTable/components/index.less";

interface OwnProps {}

type Props = OwnProps;
type fixedProps = boolean | "top" | "bottom";
const { Text } = Typography;

const index: FunctionComponent<Props> = (props) => {
  const [columns, setColumns] = useState<ColumnType<any>[]>([]);
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
  const [i18n, setI18n] = useState<any>({});
  const [showTotalCell, setShowTotalCell] = useState<boolean>(false);
  const [isDetailTable, setIsDetailTable] = useState<boolean>(false);
  const [showSee, setShowSee] = useState<boolean>(false);
  const [sumRowlistUrl, setSumRowlistUrl] = useState<string>("");
  const [tableScrollHeight, setTableScrollHeight] = useState<Number>(0);
  const [payload, setPayload] = useState<string>("");
  const [fixed, setFixed] = useState<fixedProps>(true);
  const [sumRow, setSumRow] = useState<Partial<{}>>({}); //总计行数据

  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,
        selectedRowKeys: rowKeys = [],
        i18n: i18nRes = {},
        showTotalCell = false,
        sumRowlistUrl = "",
        payload = {},
        calcDetail,
        showSee = false,
        fixed = true,
        tableScrollHeight,
        sumRow,
        optWidth
      } = data;
      setSumRowlistUrl(sumRowlistUrl);
      setShowTotalCell(showTotalCell);
      setIsDetailTable(calcDetail);
      setShowSee(showSee);
      setI18n(i18nRes);
      setPayload(payload);
      setFixed(fixed);
      setSumRow(sumRow);
      setPageInfo(pageInfo);
      setDataSource(dataSource);
      setSelectedRowKeys([...selectedRowKeys, ...rowKeys]);
      setTableScrollHeight(tableScrollHeight);
      setColumns([
        ...convertColumns(_.map(columns, (o) => ({ ...o, i18n: i18nRes }))),
        {
          title: i18nRes["操作"],
          dataIndex: "operate",
          fixed: "right",
          width: optWidth || 120,
          render: (__, record) => (
            <Space>
              <Button type="link" onClick={() => handleEdit(record?.id, showSee)}>
                {showSee ? i18nRes["查看"] : i18nRes["编辑"]}
              </Button>
              {optWidth && (
                <>
                  <Button
                    type="link"
                    onClick={() =>
                      handleLockEmp({
                        lockStatus: "LOCK",
                        acctEmpIds: [record?.id]
                      })
                    }
                  >
                    {i18nRes["锁定"]}
                  </Button>
                  <Button
                    type="link"
                    onClick={() =>
                      handleLockEmp({
                        lockStatus: "UNLOCK",
                        acctEmpIds: [record?.id]
                      })
                    }
                  >
                    {i18nRes["解锁"]}
                  </Button>
                </>
              )}
              {record?.lockTime && <Text>{record?.lockTime}</Text>}
            </Space>
          )
        }
      ]);
    }
  };
  const convertColumns: any = (cols: any[]) => {
    return _.map(cols, (item) => {
      if (_.isNaN(parseInt(item.dataIndex))) {
        return { ...item };
      } else {
        return {
          ...item,
          title: <CustomTableTitle {...item} onHandleFormulatd={handleFormulaTd} />,
          children: convertColumns(_.map(item.children, (o) => ({ ...o, i18n: item.i18n }))),
          className: styles["td_odd"],
          i18n: item.i18n,
          onCell: (record: any) => ({
            className: !_.isEmpty(record[`${item.dataIndex}_feedback`]) && styles["feedbackBg"],
            onContextMenu: (e: any) => {
              (!item.calcDetail || item.rightClickType) && e.preventDefault();
            }
          }),
          render: (text: string, record: any) => {
            let items: MenuProps["items"] = !item.calcDetail
              ? [
                  {
                    label: item.i18n["锁定"],
                    key: "LOCK",
                    icon: <LockOutlined />,
                    onClick: () =>
                      handleLockEmp({
                        lockStatus: "LOCK",
                        acctEmpId: record?.id,
                        salaryItemId: item?.dataIndex
                      })
                  },
                  {
                    label: item.i18n["解锁"],
                    key: "UNLOCK",
                    icon: <UnlockOutlined />,
                    onClick: () =>
                      handleLockEmp({
                        lockStatus: "UNLOCK",
                        acctEmpId: record?.id,
                        salaryItemId: item?.dataIndex
                      })
                  }
                ]
              : [];
            item.rightClickType &&
              item.rightClickType.includes("DELFEEDBACK") &&
              (items = [
                ...items,
                {
                  label: item.i18n["删除反馈"],
                  key: "DELFEEDBACK",
                  icon: <DeleteOutlined />,
                  onClick: () =>
                    handleDelFeedback({
                      acctEmpId: record?.id,
                      salaryItemId: item?.dataIndex
                    })
                }
              ]);
            item.rightClickType &&
              item.rightClickType.includes("SETFEEDBACK") &&
              (items = [
                ...items,
                {
                  label: item.i18n["设置反馈"],
                  key: "SETFEEDBACK",
                  icon: <SettingOutlined />,
                  onClick: () =>
                    handleSetFeedback({
                      acctEmpId: record?.id,
                      salaryItemId: item?.dataIndex
                    })
                }
              ]);
            return (
              <Dropdown menu={{ items: !item.calcDetail || item.rightClickType ? items : [] }} trigger={["contextMenu"]} overlayClassName={styles.contextMenu} destroyPopupOnHide>
                <span className={styles.contentSpan}>
                  <span title={text} className={styles.contentTitle} style={{ color: `${record?.[item.dataIndex + "_color"]}` }}>
                    {text}
                  </span>
                  {record.lockItems && record.lockItems.includes(item.dataIndex) ? <LockOutlined title={item.i18n["锁定的项目值"]} /> : null}
                  {!_.isEmpty(record[`${item.dataIndex}_feedback`]) ? (
                    <Tooltip title={record[`${item.dataIndex}_feedback`]}>
                      <QuestionCircleOutlined />
                    </Tooltip>
                  ) : null}
                </span>
              </Dropdown>
            );
          }
        };
      }
    });
  };
  const handleFormulaTd = (dataIndex: string) => {
    window.parent.postMessage({ type: "turn", payload: { id: "FORMULA", params: { dataIndex } } }, "*");
  };
  const handleEdit = (id: string, showSee: boolean) => {
    window.parent.postMessage({ type: "turn", payload: { id: "EDIT", params: { id, showSee } } }, "*");
  };
  const handleLockEmp = (params: any) => {
    window.parent.postMessage({ type: "turn", payload: { id: "LOCKEMP", params } }, "*");
  };
  // 复旦大学附属医院二开-薪资核算项添加右击删除反馈的操作
  const handleDelFeedback = (params: any) => {
    window.parent.postMessage({ type: "turn", payload: { id: "DELFEEDBACK", params } }, "*");
  };
  const handleSetFeedback = (params: any) => {
    window.parent.postMessage({ type: "turn", payload: { id: "SETFEEDBACK", params } }, "*");
  };
  const sizeChange = (pageobj: IPage) => {};
  const onChange = (pageobj: IPage) => {
    setPageInfo(() => {
      window.parent.postMessage({ type: "turn", payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } } }, "*");
      return { ...pageInfo, ...pageobj };
    });
  };
  const rowSelection = {
    columnWidth: 50,
    columnTitle: isDetailTable && _.isNil(showSee) ? "序号" : "",
    renderCell: (value: boolean, record: any, index: number, originNode: React.ReactNode) => (isDetailTable && _.isNil(showSee) ? <span>{index + 1}</span> : originNode),
    selectedRowKeys,
    preserveSelectedRowKeys: true,
    onChange: (rowKeys: React.Key[]) => {
      setSelectedRowKeys(rowKeys);
      window.parent.postMessage(
        {
          type: "turn",
          payload: { id: "CHECKBOX", params: { selectedRowKeys: rowKeys } }
        },
        "*"
      );
    }
  };
  return (
    <Table
      rowKey="id"
      size="small"
      bordered
      className={styles.tableWrapper}
      dataSource={dataSource}
      rowSelection={rowSelection}
      scroll={{
        x: 1200,
        y: `calc(100vh - ${tableScrollHeight || (!showTotalCell ? 165 : 200)}px)`
      }}
      columns={!isDetailTable || showSee ? columns : _.filter(columns, (o) => o.dataIndex !== "operate")}
      footer={() => (!isDetailTable ? <CalcExplainFooter i18n={i18n} /> : null)}
      pagination={
        !_.isNil(pageInfo)
          ? {
              ...paginationFun(pageInfo, sizeChange, onChange, i18n),
              size: "default"
            }
          : false
      }
      summary={() =>
        !showTotalCell ? (
          <></>
        ) : (
          <Table.Summary fixed={fixed}>
            <Table.Summary.Row>
              <Table.Summary.Cell index={0} align="center">
                <Text type="danger">{i18n["总计"]}</Text>
              </Table.Summary.Cell>
              <CaclFixedTotal columns={columns} dataSourceUrl={sumRowlistUrl} payload={payload} sumRow={sumRow} />
            </Table.Summary.Row>
          </Table.Summary>
        )
      }
    />
  );
};

export default index;