ZYYHT/src/pages/Log/index.tsx

import { RootState } from "@/store";
import { getLogListAPI } from "@/store/action/log";
import { Input, DatePicker, Table } from "antd";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import styles from "./index.module.scss";

const { RangePicker } = DatePicker;

function Log() {
  const dispatch = useDispatch();

  const pageNumRef = useRef(1);
  const pagePageRef = useRef(10);
  // 筛选和分页
  const [tableSelect, setTableSelect] = useState({
    searchKey: "",
    pageSize: 10,
    pageNum: 1,
    startTime: "",
    endTime: "",
  });

  // 账号的输入
  const nameTime = useRef(-1);
  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    clearTimeout(nameTime.current);
    nameTime.current = window.setTimeout(() => {
      setTableSelect({ ...tableSelect, searchKey: e.target.value, pageNum: 1 });
    }, 500);
  };
  // 时间选择器改变
  const timeChange = (date: any, dateString: any) => {
    let startTime = "";
    let endTime = "";
    if (dateString[0] && dateString[1]) {
      startTime = dateString[0] + " 00:00:00";
      endTime = dateString[1] + " 23:59:59";
    }
    setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
  };

  useEffect(() => {
    pageNumRef.current = tableSelect.pageNum;
    pagePageRef.current = tableSelect.pageSize;
    dispatch(getLogListAPI(tableSelect));
  }, [dispatch, tableSelect]);

  // ---------关于表格

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

  const results = useSelector((state: RootState) => state.logReducer.tableInfo);

  const columns = useMemo(() => {
    return [
      {
        title: "序号",
        render: (text: any, record: any, index: any) =>
          index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
      },
      {
        title: "操作者",
        dataIndex: "userName",
      },
      {
        title: "操作日期",
        dataIndex: "createTime",
      },
      {
        title: "IP记录",
        dataIndex: "ip",
      },
      {
        title: "操作记录",
        dataIndex: "type",
      },
    ];
  }, []);

  return (
    <div className={styles.Log}>
      <div className="logTop">
        <div className="pageTitlt">操作日志</div>
        <div className="tableSelectBox">
          <div className="row">
            <span>账号：</span>
            <Input
              maxLength={10}
              style={{ width: 150 }}
              placeholder="请输入"
              allowClear
              onChange={(e) => nameChange(e)}
            />
          </div>
          <div className="row">
            <span>操作日期：</span>
            <RangePicker onChange={timeChange} />
          </div>
        </div>
      </div>

      {/* 表格主体 */}
      <div className="tableMain">
        <Table
          scroll={{ y: 570 }}
          dataSource={results.list}
          columns={columns}
          rowKey="id"
          pagination={{
            showQuickJumper: true,
            position: ["bottomCenter"],
            showSizeChanger: true,
            current: tableSelect.pageNum,
            pageSize: tableSelect.pageSize,
            total: results.total,
            onChange: paginationChange,
          }}
        />
      </div>
    </div>
  );
}

const MemoLog = React.memo(Log);

export default MemoLog;