yge-admin/src/pages/Collection/index.tsx

import { Button, Form, FormInstance, Input, Select, Table, Image } from "antd";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { debounce } from "lodash";
import { DageTableActions } from "@dage/pc-components";
import { useLocation, useNavigate } from "react-router-dom";
import { TYPE_LIST } from "./constants";
import { collectionApi } from "@/api";

const DEFAULT_PARAMS = {
  pageNum: 1,
  pageSize: 20,
  searchKey: "",
  dictTexture: TYPE_LIST[0].value,
};

const ALL_TYPE_LIST = [
  {
    label: "全部",
    value: "",
  },
  ...TYPE_LIST,
];

export default function CollectionPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const formRef = useRef<FormInstance>(null);
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<[]>([]);
  const [params, setParams] = useState({
    ...DEFAULT_PARAMS,
    searchKey: searchParams.get("searchKey") || "",
    dictTexture: searchParams.get("dictTexture") || ALL_TYPE_LIST[0].value,
  });
  const [total, setTotal] = useState(0);

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

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

  const handleDelete = useCallback(
    async (id: number) => {
      await collectionApi.delete(id);
      getList();
    },
    [getList]
  );

  const COLUMNS = useMemo(() => {
    return [
      {
        title: "藏品名称",
        dataIndex: "name",
      },
      {
        title: "封面图",
        width: 92,
        render: (item: any) => {
          return (
            <Image
              width={60}
              height={60}
              src={`${process.env.REACT_APP_API_URL}${item.thumb}`}
            />
          );
        },
      },
      {
        title: "类别",
        dataIndex: "dictTexture",
      },
      {
        title: "年代",
        dataIndex: "dictAge",
      },
      {
        title: "简介",
        width: 250,
        render: (item: any) => {
          return <p className="limit-line line-2">{item.description}</p>;
        },
      },
      {
        title: "点赞",
        dataIndex: "star",
      },
      {
        title: "操作",
        render: (item: any) => {
          return (
            <DageTableActions
              onEdit={() => navigate(`/collection/edit/${item.id}`)}
              onDelete={handleDelete.bind(undefined, item.id)}
            />
          );
        },
      },
    ];
  }, [navigate, handleDelete]);

  const handleReset = useCallback(() => {
    setParams({ ...DEFAULT_PARAMS });
    setTimeout(() => {
      formRef.current?.resetFields();
      navigate(
        `/collection?${new URLSearchParams({
          searchKey: DEFAULT_PARAMS.searchKey,
          dictTexture: DEFAULT_PARAMS.dictTexture,
        }).toString()}`,
        {
          replace: true,
        }
      );
    });
  }, [formRef, navigate]);

  const debounceSearch = useMemo(
    () =>
      debounce((changedVal: unknown, vals: any) => {
        setParams({ ...params, ...vals });
        navigate(`/collection?${new URLSearchParams(vals).toString()}`, {
          replace: true,
        });
      }, 500),
    [navigate, params]
  );

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

  return (
    <div className="collection">
      <Form
        ref={formRef}
        layout="inline"
        initialValues={params}
        onValuesChange={debounceSearch}
      >
        <Form.Item label="藏品名称" name="searchKey">
          <Input placeholder="请输入" maxLength={10} showCount allowClear />
        </Form.Item>
        <Form.Item label="类别" name="dictTexture">
          <Select style={{ width: 220 }} options={ALL_TYPE_LIST} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={() => navigate("/collection/create")}>
            新增
          </Button>
        </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>
  );
}