diff --git a/src/components/StockTakeManagement/PickerCardList.tsx b/src/components/StockTakeManagement/PickerCardList.tsx index 2d26d49..29dd7e2 100644 --- a/src/components/StockTakeManagement/PickerCardList.tsx +++ b/src/components/StockTakeManagement/PickerCardList.tsx @@ -26,6 +26,7 @@ import { getStockTakeRecords, AllPickedStockTakeListReponse, createStockTakeForSections, + getStockTakeRecordsPaged, } from "@/app/api/stockTake/actions"; import dayjs from "dayjs"; import { OUTPUT_DATE_FORMAT } from "@/app/utils/formatUtil"; @@ -45,28 +46,35 @@ const PickerCardList: React.FC = ({ onCardClick, onReStockT const [loading, setLoading] = useState(false); const [stockTakeSessions, setStockTakeSessions] = useState([]); const [page, setPage] = useState(0); + const [pageSize, setPageSize] = useState(6); // 每页 6 条 +const [total, setTotal] = useState(0); const [creating, setCreating] = useState(false); const [openConfirmDialog, setOpenConfirmDialog] = useState(false); - const fetchStockTakeSessions = useCallback(async () => { - setLoading(true); - try { - const data = await getStockTakeRecords(); - setStockTakeSessions(Array.isArray(data) ? data : []); - setPage(0); - } catch (e) { - console.error(e); - setStockTakeSessions([]); - } finally { - setLoading(false); - } - }, []); + const fetchStockTakeSessions = useCallback( + async (pageNum: number, size: number) => { + setLoading(true); + try { + const res = await getStockTakeRecordsPaged(pageNum, size); + setStockTakeSessions(Array.isArray(res.records) ? res.records : []); + setTotal(res.total || 0); + setPage(pageNum); + } catch (e) { + console.error(e); + setStockTakeSessions([]); + setTotal(0); + } finally { + setLoading(false); + } + }, + [] + ); useEffect(() => { - fetchStockTakeSessions(); - }, [fetchStockTakeSessions]); + fetchStockTakeSessions(0, pageSize); + }, [fetchStockTakeSessions, pageSize]); - const startIdx = page * PER_PAGE; - const paged = stockTakeSessions.slice(startIdx, startIdx + PER_PAGE); + //const startIdx = page * PER_PAGE; + //const paged = stockTakeSessions.slice(startIdx, startIdx + PER_PAGE); const handleCreateStockTake = useCallback(async () => { setOpenConfirmDialog(false); @@ -84,7 +92,7 @@ const PickerCardList: React.FC = ({ onCardClick, onReStockT console.log(message); - await fetchStockTakeSessions(); + await fetchStockTakeSessions(0, pageSize); } catch (e) { console.error(e); } finally { @@ -201,12 +209,12 @@ const PickerCardList: React.FC = ({ onCardClick, onReStockT - {paged.map((session) => { - const statusColor = getStatusColor(session.status || ""); - const lastStockTakeDate = session.lastStockTakeDate - ? dayjs(session.lastStockTakeDate).format(OUTPUT_DATE_FORMAT) - : "-"; - const completionRate = getCompletionRate(session); + {stockTakeSessions.map((session: AllPickedStockTakeListReponse) => { + const statusColor = getStatusColor(session.status || ""); + const lastStockTakeDate = session.lastStockTakeDate + ? dayjs(session.lastStockTakeDate).format(OUTPUT_DATE_FORMAT) + : "-"; + const completionRate = getCompletionRate(session); return ( @@ -271,13 +279,15 @@ const PickerCardList: React.FC = ({ onCardClick, onReStockT {stockTakeSessions.length > 0 && ( setPage(p)} - rowsPerPageOptions={[PER_PAGE]} - /> + component="div" + count={total} + page={page} + rowsPerPage={pageSize} + onPageChange={(e, newPage) => { + fetchStockTakeSessions(newPage, pageSize); + }} + rowsPerPageOptions={[pageSize]} // 如果暂时不让用户改 pageSize,就写死 + /> )} {/* Create Stock Take 確認 Dialog */}