Browse Source

refactor: 抽象 useTableRequest/useModalForm hooks 并重构 TableList 页面,提升复用性

pull/11514/head
afc163 9 months ago
parent
commit
b283f417d0
  1. 24
      src/hooks/useModalForm.ts
  2. 54
      src/hooks/useTableRequest.ts
  3. 2
      src/pages/TableList/index.tsx

24
src/hooks/useModalForm.ts

@ -0,0 +1,24 @@
import { useState } from 'react';
export function useModalForm<T = any>(initialValue?: T) {
const [open, setOpen] = useState(false);
const [current, setCurrent] = useState<T | undefined>(initialValue);
const show = (item?: T) => {
setCurrent(item);
setOpen(true);
};
const hide = () => {
setOpen(false);
setCurrent(undefined);
};
return {
open,
current,
show,
hide,
setCurrent,
};
}

54
src/hooks/useTableRequest.ts

@ -0,0 +1,54 @@
import { useRequest } from '@umijs/max';
import { useState } from 'react';
interface UseTableRequestOptions<P = any> {
query: (params?: P) => Promise<any>;
add?: (params: any) => Promise<any>;
update?: (params: any) => Promise<any>;
remove?: (params: any) => Promise<any>;
defaultParams?: P;
}
export function useTableRequest<P = any>({
query,
add,
update,
remove,
defaultParams,
}: UseTableRequestOptions<P>) {
const [params, setParams] = useState<P | undefined>(defaultParams);
const { data, loading, mutate, refresh } = useRequest(() => query(params), {
refreshDeps: [params],
});
const handleAdd = async (values: any) => {
if (!add) return;
const result = await add(values);
refresh();
return result;
};
const handleUpdate = async (values: any) => {
if (!update) return;
const result = await update(values);
refresh();
return result;
};
const handleRemove = async (id: string) => {
if (!remove) return;
const result = await remove({ id });
refresh();
return result;
};
return {
data,
loading,
refresh,
setParams,
handleAdd,
handleUpdate,
handleRemove,
};
}

2
src/pages/TableList/index.tsx

@ -16,6 +16,8 @@ import {
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Drawer, Input, message } from 'antd';
import React, { useRef, useState } from 'react';
import { useModalForm } from '@/hooks/useModalForm';
import { useTableRequest } from '@/hooks/useTableRequest';
import {
addRule,
removeRule,

Loading…
Cancel
Save