1、所需引入
import { useAntdTable } from 'ahooks';
2、搜索组件:
<Table
className="mt-2"
bordered
rowSelection={rowSelection}
columns={columns}
scroll={{ y: Number(sessionStorage?.getItem('bodyHeight')) - 270 }}
getPopupContainer={(triggerNode: { parentElement: any }) => triggerNode.parentElement || document.body}
{...tableProps}
pagination={{
...tableProps.pagination,
showTotal: (e) => `共计${e}条记录`,
}}
rowKey="taskId"
/>
<SearchBarMore
form={form}
option={searchConfig}
onSearch={submit}
onClear={reset}
placeholder="输入员工姓名、工号或项目名称"
/>
3、业务逻辑部分:
const getTableData = ({ current, pageSize, filters }: any, formData: any) => {
if (filters) setFilteredValue(filters[2]);
if (form?.getFieldsValue(true)?.tabIndex) setDefaultValue(form?.getFieldsValue(true)?.tabIndex);
let paramsele = {
isFull: form?.getFieldsValue(true)?.tabIndex === 'b' ? 2 : 1,
acceptName: form?.getFieldsValue(true)?.acceptName || '',
projectCodes: form?.getFieldsValue(true)?.projectCode?.toString() || '',
submitName: form?.getFieldsValue(true)?.submitName || '',
organizationCode: form?.getFieldsValue(true)?.organizationCode || '',
cityName: form?.getFieldsValue(true)?.cityName || '',
status: filters ? filters[2]?.toString() : '',
current: current,
pageSize: pageSize,
};
return TaskManageAPI.taskManageFlowQuery(cleanObject(paramsele)).then((res: any) => {
if (res.code !== 200) {
message.error(res.message);
return {
total: 0,
list: [],
};
}
setTotal(res.result?.total);
return {
total: res.result.total,
list: res.result.records,
};
});
};
const { tableProps, search } = useAntdTable(getTableData, {
form,
cacheKey: 'fastDelivery-asset',
});
const { submit, reset } = search || {};