库位转移，优化查询速度

chen.lin

昨天 209878277a178ab91d48b523265e5ffb1b8cf7e6

 rsf-admin/src/page/work/stockTransfer/stockTransferList.jsx

@@ -1,4 +1,4 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { useWatch, useFormContext } from "react-hook-form";
import {
    CreateBase,
@@ -78,57 +78,101 @@
    const [orgLoc, setOrgLoc] = useState("");
    const [tarLoc, setTarLoc] = useState("");
    const [tarLocList, setTarLocList] = useState([]);
    const [tarLocTotal, setTarLocTotal] = useState(0);
    const [tarLocLoading, setTarLocLoading] = useState(false);
    const tarLocPageRef = useRef(1);
    const tarLocQueryRef = useRef("");
    const debounceRef = useRef(null);

    const PAGE_SIZE = 50;

    useEffect(() => {
        if (orgLoc === "" || orgLoc.length < 7) {
            return;
        }
        selectLocItem().then((is) => {            
        selectLocItem().then((is) => {
            if (is) {
                selectAreaNoUse();
                setTarLocList([]);
                setTarLocTotal(0);
                setTarLoc(null);
            }

        });
    },[orgLoc])
    }, [orgLoc]);


    const selectLocItem = async() =>{
    const selectLocItem = async () => {
        const {
            data: { code, data, msg },
        } = await request.post("/locItem/useO/page",{
        } = await request.post("/locItem/useO/page", {
            locCode: orgLoc,
            current: 1,
            pageSize: 100,
            orderBy: "create_time desc"
        });
        if (code === 200) {
            if(data.total !== 0) {                
                setTableData(data.records);  
            if (data.total !== 0) {
                setTableData(data.records);
                return true;
            }
              
        }
        return false;  
    }
        return false;
    };

    const selectAreaNoUse = async() =>{
        const {
            data: { code, data, msg },
        } = await request.post("/loc/areaNoUse/list",{
            locCode: orgLoc            
        });
        if (code === 200) {
            const newData = data.map((item) => {
                return {
                    label: item,
                    id: item
    const loadAreaNoUsePage = useCallback(async (current = 1, q = "", append = false) => {
        if (!orgLoc || orgLoc.length < 7) return;
        setTarLocLoading(true);
        try {
            const { data: { code, data: pageData } } = await request.post("/loc/areaNoUse/page", {
                locCode: orgLoc,
                current,
                pageSize: PAGE_SIZE,
                q: q || undefined
            });
            if (code === 200 && pageData) {
                const { records = [], total = 0 } = pageData;
                const options = (records || []).map((item) => ({ label: item, id: item }));
                if (append) {
                    setTarLocList((prev) => [...prev, ...options]);
                } else {
                    setTarLocList(options);
                }
                
            })  
            setTarLocList(newData);         
                setTarLocTotal(total);
                tarLocPageRef.current = current;
                tarLocQueryRef.current = q;
            }
        } finally {
            setTarLocLoading(false);
        }
    }, [orgLoc]);

    }
    const handleTarLocOpen = useCallback(() => {
        if (orgLoc && orgLoc.length >= 7) {
            tarLocPageRef.current = 1;
            tarLocQueryRef.current = "";
            loadAreaNoUsePage(1, "", false);
        }
    }, [orgLoc, loadAreaNoUsePage]);

    const handleTarLocInputChange = useCallback((e, value) => {
        if (debounceRef.current) clearTimeout(debounceRef.current);
        if (!orgLoc || orgLoc.length < 7) return;
        debounceRef.current = setTimeout(() => {
            loadAreaNoUsePage(1, value ?? "", false);
            debounceRef.current = null;
        }, 300);
    }, [orgLoc, loadAreaNoUsePage]);

    const handleTarLocListboxScroll = useCallback((e) => {
        const el = e.target;
        if (!el || tarLocLoading) return;
        const { scrollTop, scrollHeight, clientHeight } = el;
        if (scrollTop + clientHeight >= scrollHeight - 10) {
            const loaded = tarLocList.length;
            if (loaded < tarLocTotal) {
                const nextPage = Math.floor(loaded / PAGE_SIZE) + 1;
                loadAreaNoUsePage(nextPage, tarLocQueryRef.current, true);
            }
        }
    }, [tarLocLoading, tarLocList.length, tarLocTotal, loadAreaNoUsePage]);


    const handleDeleteItem = () => {
@@ -170,10 +214,17 @@
                                        <Autocomplete
                                            disablePortal
                                            options={tarLocList}
                                            loading={tarLocLoading}
                                            filterOptions={(opts) => opts}
                                            onOpen={handleTarLocOpen}
                                            onInputChange={handleTarLocInputChange}
                                            renderInput={(params) => (
                                                <TextField {...params} label={translate("table.field.stockTransfer.tarLoc")} />
                                            )}
                                            onChange={(event, value) => setTarLoc(value)}
                                            ListboxProps={{
                                                onScroll: handleTarLocListboxScroll
                                            }}
                                        />
                                    </Stack>
                                </Box>
@@ -219,10 +270,10 @@
            notify("请输入源库位");
            return;
        }
        // if (tarLoc === "" || tarLoc === undefined || tarLoc === null) {
        //     notify("请输入目标库位");
        //     return;
        // }   
        if (tarLoc === "" || tarLoc === undefined || tarLoc === null) {
            notify("请输入目标库位");
            return;
        }
        if (tabelData.length === 0) {
            notify("源库位明细无，请检查库位状态");
            return;
@@ -276,12 +327,12 @@
        //     type: 'number',
        //     editable: false,
        // },
        {
            field: 'locCode',
            headerName: translate('table.field.locItem.locCode'),
            width: 100,
            editable: false,
        },
        // {
        //     field: 'tarLoc',
        //     headerName: translate('table.field.stockTransfer.tarLoc'),
        //     width: 100,
        //     editable: false,
        // },
        {
            field: 'matnrCode',
            headerName: translate('table.field.locItem.matnrCode'),