LSDF/src/pages/ObjectSon/Object2/LookObject2/table.tsx

import AuthButton from "@/components/AuthButton";
import { RootState } from "@/store";
import { getObj2LogListAPI } from "@/store/action/object2";
import { logTypeObj, logTypeOpenObj } from "@/utils/dataChange";
import { getPowerInfo } from "@/utils/storage";
import { Table } from "antd";
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { useDispatch, useSelector } from "react-redux";

type Props = {
  id: number;
};

// 根据权限来判断
const powerInfo = getPowerInfo();

function LookObject2Log({ id }: Props) {
  const dispatch = useDispatch();

  const pageNumRef = useRef(1);
  const pagePageRef = useRef(10);
  const [tableSelect, setTableSelect] = useState({
    pageNum: 1,
    pageSize: 10,
    goodsId: id,
  });

  useEffect(() => {
    dispatch(getObj2LogListAPI(tableSelect));
  }, [dispatch, tableSelect]);

  const paginationChange = (pageNum: number, pageSize: number) => {
    pageNumRef.current = pageNum;
    pagePageRef.current = pageSize;
    setTableSelect({ ...tableSelect, pageNum, pageSize });
  };

  // 从仓库中获取列表信息
  const logResults = useSelector(
    (state: RootState) => state.object2Store.logList
  );

  // 点击操作记录里面的查看，打开新的页面
  const openURL = useCallback((url: string) => {
    window.open(url);
  }, []);

  const columns = useMemo(() => {
    const tempArr = [
      {
        title: "序号",
        render: (text: any, record: any, index: any) =>
          index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
      },
      {
        title: "业务单号",
        dataIndex: "num",
      },
      {
        title: "业务类型",
        render: (item: any) => logTypeObj[item.type],
      },

      {
        title: "完成时间",
        dataIndex: "day",
      },
      {
        title: "操作",
        render: (item: any) => {
          let falg = false;
          powerInfo.forEach((v: any) => {
            if (
              (item.type === "in" && v.id === 300) ||
              (item.type === "out" && v.id === 400) ||
              (item.type === "move" && v.id === 800) ||
              (item.type === "edit" && v.id === 500)
            )
              falg = true;
          });
          // 暂时不处理权限问题，后面在完善
          return falg ? (
            <AuthButton
              id={-1}
              type="text"
              danger
              onClick={() => openURL(logTypeOpenObj[item.type] + item.id)}
            >
              查看
            </AuthButton>
          ) : (
            "-"
          );
        },
      },
    ];
    return tempArr;
  }, [openURL]);

  return (
    <Table
      size="small"
      scroll={{ y: 300 }}
      dataSource={logResults.list}
      columns={columns}
      rowKey="id"
      pagination={{
        showQuickJumper: true,
        position: ["bottomCenter"],
        showSizeChanger: true,
        current: tableSelect.pageNum,
        pageSize: tableSelect.pageSize,
        total: logResults.total,
        onChange: paginationChange,
      }}
    />
  );
}

const MemoLookObject2Log = React.memo(LookObject2Log);

export default MemoLookObject2Log;