hsjyk-admin/src/pages/Log/index.tsx

import { logApi } from "@/api";
import { GetLogListParams } from "@/types";
import { Button, DatePicker, Form, FormInstance, Input, Table } from "antd";
import { debounce } from "lodash";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { formatDate } from "@dage/utils";

const DEFAULT_PARAMS: GetLogListParams = {
  pageNum: 1,
  pageSize: 20,
  startTime: "",
  endTime: "",
};

const { RangePicker } = DatePicker;

export default function IndustrialMeta() {
  const formRef = useRef<FormInstance>(null);
  const [list, setList] = useState([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [params, setParams] = useState<GetLogListParams>({
    ...DEFAULT_PARAMS,
  });

  const getList = useCallback(async () => {
    setLoading(true);
    try {
      const data = await logApi.getList(params);
      setList(data.records);
      setTotal(data.total);
    } finally {
      setLoading(false);
    }
  }, [params]);

  useEffect(() => {
    getList();
  }, [getList, params]);

  const debounceSearch = useMemo(
    () =>
      debounce(
        (changedVal: unknown, vals: GetLogListParams & { date: string[] }) => {
          const { date, ...rest } = vals;

          let startTime = "";
          let endTime = "";
          if (date && date[0] && date[1]) {
            startTime = formatDate(date[0]) + " 00:00:00";
            endTime = formatDate(date[1]) + " 23:59:59";
          }

          setParams({ ...params, ...rest, startTime, endTime });
        },
        500
      ),
    [params]
  );

  const paginationChange = useCallback(
    () => (pageNum: number, pageSize: number) => {
      setParams({ ...params, pageNum, pageSize });
    },
    [params]
  );

  const handleReset = useCallback(() => {
    setParams({ ...DEFAULT_PARAMS });
    formRef.current?.resetFields();
  }, [formRef]);

  const COLUMNS = useMemo(() => {
    return [
      {
        title: "序号",
        render: (text: any, record: any, index: any) =>
          index + 1 + (params.pageNum - 1) * params.pageSize,
      },
      {
        title: "操作者",
        dataIndex: "userName",
      },
      {
        title: "操作日期",
        dataIndex: "createTime",
      },
      {
        title: "IP记录",
        dataIndex: "ip",
      },
      {
        title: "操作模块",
        dataIndex: "type",
      },
      {
        title: "操作事件",
        dataIndex: "description",
      },
    ];
  }, [params]);

  return (
    <div className="log">
      <Form ref={formRef} layout="inline" onValuesChange={debounceSearch}>
        <Form.Item label="账号" name="searchKey">
          <Input
            className="w220"
            placeholder="请输入关键字"
            maxLength={30}
            showCount
            allowClear
          />
        </Form.Item>
        <Form.Item label="操作日期" name="date">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Button onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>

      <Table
        loading={loading}
        className="page-table"
        dataSource={list}
        columns={COLUMNS}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
          position: ["bottomCenter"],
          showSizeChanger: true,
          current: params.pageNum,
          pageSize: params.pageSize,
          total,
          onChange: paginationChange(),
        }}
      />
    </div>
  );
}