dyh-evaluation-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";
import { PageContainer } from "@/components";

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 (
    <PageContainer title="操作日志">
      <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>
    </PageContainer>
  );
}