WXCS_HT/src/pages/A7school/A7table.tsx

import MyPopconfirm from "@/components/MyPopconfirm";
import MyTable from "@/components/MyTable";
import { RootState } from "@/store";
import { A7_APIdel, A7_APIgetList } from "@/store/action/A7school";
import { A7tableType } from "@/types";
import { A7tableC1, A7tableC2 } from "@/utils/tableData";
import { Button, Tooltip } from "antd";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { forwardRef, useImperativeHandle } from "react";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { MessageFu } from "@/utils/message";

type Props = {
  type: "口述史" | "刊物";
  editTableFu: (id: number) => void;
  ref: any;
};

function A7tab1({ type, editTableFu }: Props, ref: any) {
  const dispatch = useDispatch();

  const [fromData, setFromData] = useState({
    pageNum: 1,
    pageSize: 10,
  });

  const getListFu = useCallback(() => {
    dispatch(A7_APIgetList(fromData, type));
  }, [dispatch, fromData, type]);

  useEffect(() => {
    getListFu();
  }, [getListFu]);

  const tableInfo = useSelector((state: RootState) =>
    type === "口述史" ? state.A7school.tableInfo1 : state.A7school.tableInfo2
  );

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      const res = await A7_APIdel(id, type);
      if (res.code === 0) {
        MessageFu.success("删除成功!");
        getListFu();
      }
    },
    [getListFu, type]
  );

  // 新增完成之后 重新获取数据
  const resetSelectFu = useCallback(() => {
    setFromData({
      pageNum: 1,
      pageSize: 10,
    });
  }, []);

  // 可以让父组件调用子组件的方法
  useImperativeHandle(ref, () => ({
    resetSelectFu,
    getListFu,
  }));

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: "操作",
        render: (item: A7tableType) => (
          <>
            <Button
              size="small"
              type="text"
              onClick={() => editTableFu(item.id)}
            >
              编辑
            </Button>
            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
          </>
        ),
      },
    ];
  }, [delTableFu, editTableFu]);

  return (
    <MyTable
      classKey={type === "口述史" ? "port" : "book"}
      yHeight={640}
      list={tableInfo.list}
      columnsTemp={type === "口述史" ? A7tableC1 : A7tableC2}
      lastBtn={tableLastBtn}
      pageNum={fromData.pageNum}
      pageSize={fromData.pageSize}
      total={tableInfo.total}
      onChange={(pageNum, pageSize) =>
        setFromData({ ...fromData, pageNum, pageSize })
      }
      myTitle={{
        name: "排序值",
        Com: (
          <div className="A7tableTit">
            <span>排序值</span>&nbsp;
            <Tooltip title="数字越小，排序越前">
              <div className="A7tableTitInco">
                <QuestionCircleOutlined rev={undefined} />
              </div>
            </Tooltip>
          </div>
        ),
      }}
    />
  );
}

// const MemoA7tab1 = React.memo(A7tab1);

export default forwardRef(A7tab1);