【React+TS-封装Hooks之useFetchList】

1. types.ts

/**
 * res.data.data列表接口返回数据类型S
 */
export interface IListAPIData<T>{
  list:T[],
  pagination:{
    page:number,
    size:number,
    total:number
  },
  data:T[],
}

/**
 * 基础分页数据构造器
 */
export class BasePagination {
  public page = 1;
  public current = 1;
}

/**
 * 列表项字段类型
 */
export interface IListItem  {
  [p:string]:any
}

/**
 * 获取列表API函数的参数类型
 */
export interface IGetListParams extends BasePagination{
  [p:string]:any
}

/**
 * useFetchList参数类型
 */
export interface IFetchList {
  API:(params:IGetListParams) => Promise<IListAPIData<IListItem>>
}

2. use-Fetch-List.ts

import { BasePagination } from '@/types';
import { IGetListParams, IListItem } from '@/views/Test/ListHooks/types'
import { useEffect, useState } from 'react'
import { IFetchList } from './types';

export default function useFetchList(props:IFetchList) {
  const [dataSource,setDataSource] = useState<IListItem[]>([]);
  const [filterParams,setFilterParams] = useState<IGetListParams>(new BasePagination());
  const [total,setTotal] = useState<number>(0);
  useEffect(()=>{
    getData();
  },[filterParams])

  const getData = async () => {
    const res = await props.API(filterParams);
    setDataSource(res.data);
    setTotal(res.data.length)
    // setDataSource(res.list);
    // setTotal(res.pagination.total)
   }

  return {
    dataSource,
    filterParams,
    setFilterParams,
    total
  }
}

3. ListHooks.tsx

import useFetchList from '@/hooks/ListHooks/use-Fetch-List'
import { Button, Form, Input, Modal, Table } from 'antd'
import React, { useEffect, useState } from 'react'
import API from '@/axios'
import { ColumnsType } from 'antd/es/table'
import axios from 'axios'
import {
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import { IListItem } from './types'

export default function ListHooks() {
  const [regionList, setRegionList] = useState<any[]>([]);
  const [roleList, setRoleList] = useState<any[]>([]);
  const {
    dataSource,
    filterParams,
    setFilterParams,
    total
  } = useFetchList({
    API:API.ListHooks.getUserList
  })
  const [form] = Form.useForm();
  
  const [visible,setVisible] = useState<boolean>(false)

  const columns: ColumnsType<IListItem> = [
    {
      title: "区域",
      dataIndex: "region",
      render: (region) => {
        return <b>{region === "" ? "全球" : region}</b>;
      },
      filters: [
        ...regionList.map((region:{title:string,value:string}) => {
          return {
            text: region.title,
            value: region.value,
          };
        }),
        {
          text: "全球",
          value: "全球",
        },
      ],
      //value-筛选值 item-被筛选行数据
      onFilter: (value, item) => {
        if (value === "全球") {
          return item.region === "";
        } else {
          return item.region === value;
        }
      },
    },
    {
      title: "角色名称",
      dataIndex: "role",
      render: (role) => {
        return <span>{role?.roleName}</span>;
      },
    },
    {
      title: "用户名",
      dataIndex: "username",
    },
    {
      title: "操作",
      render: (item) => {
        return (
          <div>
            <Button
              danger
              shape="circle"
              icon={<EditOutlined />}
              disabled={item.default}
              onClick={() => {
                // handleUpdate(item);
              }}
            />
            <Button
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              disabled={item.default}
              onClick={() => {
                // confirmMethod(item)
              }}
            />
          </div>
        );
      },
    },
  ];

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("token") || '{}');
    axios.get("/regions").then((res) => {
      setRegionList(res.data);
    });

    axios.get("/roles").then((res) => {
      setRoleList(res.data);
    });
  }, []);

  return (
    <div>
      <Button onClick={()=>{
        setVisible(true)
        // form.setFieldValue('username',111)
        form.setFieldsValue({username:22});
      }}>打开弹窗</Button>
      <Table 
        style={{padding:'20px'}}
        columns={columns} 
        dataSource={dataSource}
        rowKey={(row)=>row.id}
        scroll={{
          x:1000
        }}
        pagination={{
          pageSize:filterParams.pageSize,
          current:filterParams.current,
          total,
          onChange:(current)=>{
            setFilterParams({
              ...filterParams,
              current
            })
          }
        }}
      >
      </Table>
      <Modal
        open={visible}
        title="表单填写"
        okText="确定"
        cancelText="取消"
        onCancel={() => {
          setVisible(false);
          form.resetFields()
        }}
        onOk={() => {
          form.validateFields().then(values=>{
            console.log(values)
          })
          .catch((err) => {
            console.log(err);
          });
        }}
      >
        <Form form={form}>
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
            ]}
          >
            <Input type="text" placeholder="请输入用户名" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}