库存调整功能界面优化 库存调整接口功能开发

skyouc

2025-08-20 5264cf0915ee9901cb9520fdcc6b8cdd5ecd4837

 rsf-admin/src/page/stockManage/locRevise/LocsReviseDetl.jsx

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import {
    Dialog,
    DialogActions,
@@ -19,9 +19,12 @@
import { useTranslate, useNotify, useRefresh, DatagridConfigurable, useGetOne } from 'react-admin';
import DialogCloseButton from "../../components/DialogCloseButton";
import { Add, Edit, Delete, Save } from '@mui/icons-material';
import QueryStatsIcon from '@mui/icons-material/QueryStats';
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import SelectMatnrInfo from "./SelectMatnrInfo";
import SaveIcon from '@mui/icons-material/Save';
import { DataGrid } from '@mui/x-data-grid';
import request from '@/utils/request';
import "./asnOrder.css";

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -36,46 +39,44 @@
}));

const LocsReviseDetl = (props) => {
    const { open, setOpen, locRevise } = props;
    const { open, setOpen, record } = props;
    const handleClose = (event, reason) => {
        if (reason !== "backdropClick") {
            setOpen(false);
        }
    };
    const dicts = JSON.parse(localStorage.getItem('sys_dicts'))?.filter(dict => (dict.dictTypeCode == 'sys_stock_revise_type')) || [];

    const [page, setPage] = useState({ page: DEFAULT_START_PAGE, pageSize: DEFAULT_PAGE_SIZE });
    const [formData, setFormData] = useState({ useStatus: 'F', code: null });
    const [selectedRows, setSelectedRows] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [tableData, setTableData] = useState([]);
    const [openMatnr, setOpenMatnr] = useState();
    const [dyFields, setDyFields] = useState([]);
    const [rowCount, setRowCount] = useState(0);
    const [formData, setFormData] = useState({ matnrCode: null });
    const translate = useTranslate();
    const refresh = useRefresh();
    const notify = useNotify();
    const tableRef = useRef()

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(() => ({
            ...formData,
            [name]: value
        }));
    };

    const handleSubmit = () => {
        const selectedData = tableData.filter(item => selectedRows.includes(item.id));
        const rows = tableRef.current.getSelectedRows();
        const selectedData = [...rows.entries()].map(([Key, value]) => value)
        const value = selectedData.map((el => {
            return {
                id: el.id,
                code: el.code,
                areaId: el.areaId,
                barcode: el.barcode || '',
                channel: el.channel || '',
                col: el.col,
                lev: el.lev,
                row: el.row,
                type: el.type,
                useStatus: el.useStatus,
                warehouseId: el.warehouseId,
                locCode: el.locCode,
                matnrId: el.matnrId,
                maktx: el.maktx || '',
                matnrCode: el.matnrCode || '',
                batch: el.batch,
                anfme: el.anfme,
                reviseQty: el.reviseQty,
                filedsIndex: el.filedsIndex,
                spec: el.spec,
                model: el.model,
                unit: el.unit,
            }
        }));

@@ -84,10 +85,11 @@

    const saveReviseLog = async (values) => {
        const parmas = {
            reviseId: locRevise,
            reviseLogId: record?.id,
            items: values,
        }
        const res = await request.post(`/reviseLog/items/save`, parmas);

        const res = await request.post(`/reviseLogItem/items/save`, parmas);
        if (res?.data?.code === 200) {
            setOpen(false);
            refresh()
@@ -96,10 +98,11 @@
        }
    }

    const getData = async () => {
    const getData = async (matnr) => {
        setIsLoading(true)
        const res = await request.post(`/locItem/page`, {
            ...formData,
        const res = await request.post(`/reviseLogItem/page`, {
            locCode: record?.locCode,
            matnrCode: matnr,
            current: page?.page,
            pageSize: page?.pageSize,
            orderBy: "create_time desc"
@@ -114,217 +117,235 @@
    };

    useEffect(() => {
        getData();
        if (record != null || record != undefined) {
            getData()
        }
    }, [open, page]);

    const handleSearch = () => {
        getData()
        getData(formData.matnrCode)
    };

    const handleAdd = () => {
        setOpenMatnr(true)
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(() => ({
            [name]: value
        }));
    };

    return (
        <Dialog
            open={open}
            onClose={handleClose}
            aria-labelledby="form-dialog-title"
            fullWidth
            disableRestoreFocus
            maxWidth="xl"
        >
            <DialogTitle id="form-dialog-title" sx={{
                position: 'sticky',
                top: 0,
                backgroundColor: 'background.paper',
                zIndex: 1000
            }}>
                {translate("common.action.newAddMats")}
                <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
                    <DialogCloseButton onClose={handleClose} />
                </Box>
            </DialogTitle>
            <DialogContent sx={{ mt: 2 }}>
                {/* <Box>
                    <List
                        sx={{
                            flexGrow: 1,
                            marginRight: 1,
                            transition: (theme) =>
                                theme.transitions.create(['all'], {
                                    duration: theme.transitions.duration.enteringScreen,
                                }),
                        }}
                        resource="loc"
                        title={"menu.loc"}
                        empty={false}
                        filter={{ useStatus: 'F' }}
                        filters={filters}
                        sort={{ field: "'row'" }}
                        actions={false}
                        perPage={DEFAULT_PAGE_SIZE}
                        aside={false}
                    >
                        <StyledDatagrid
                            preferenceKey='loc'
                            align="left"
                            bulkActionButtons={false}
                            rowClick={() => false}
                            omit={['id', 'areaId', 'type', 'barcode']}
                        >
                            <NumberField source="id" />
                            <TextField source="code" label="table.field.locItem.locCode" />
                        </StyledDatagrid>
                    </List>
                </Box> */}
                <Box>
                    <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                        <Grid container spacing={2} md={6}>
                            <Grid item md={4}>
                                <TextField
                                    label={translate('table.field.locItem.locCode')}
                                    name="code"
                                    value={formData.code}
                                    onChange={handleChange}
                                    size="small"
                                />
                            </Grid>
                            <Grid item md={2} sx={{ margin: 'auto' }}>
                                <Button variant="contained" onClick={handleSearch}>{translate("toolbar.query")}</Button>
                            </Grid>
                        </Grid>
        <>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="form-dialog-title"
                fullWidth
                disableRestoreFocus
                maxWidth="xl"
            >
                <DialogTitle id="form-dialog-title" sx={{
                    position: 'sticky',
                    top: 0,
                    backgroundColor: 'background.paper',
                    zIndex: 1000
                }}>
                    {translate("common.action.newAddMats")}
                    <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
                        <DialogCloseButton onClose={handleClose} />
                    </Box>
                    <Box sx={{ mt: 2, height: 600, width: '100%' }}>
                        <AsnWareModalTable
                            tableData={tableData}
                            setTableData={setTableData}
                            page={page}
                            rowCount={rowCount}
                            setPage={setPage}
                            isLoading={isLoading}
                            selectedRows={selectedRows}
                            setSelectedRows={setSelectedRows}
                        />
                </DialogTitle>
                <DialogContent sx={{ mt: 2 }}>
                    <Box>
                        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Grid container spacing={2}>
                                <Grid item md={3}>
                                    <TextField
                                        label={translate('table.field.matnr.code')}
                                        name="matnrCode"
                                        value={formData.matnrCode}
                                        onChange={handleChange}
                                        size="small"
                                    />
                                </Grid>
                                <Grid item md={3} sx={{ display: "flex", margin: 1 }}>
                                    <Button variant="contained" onClick={handleSearch} startIcon={<QueryStatsIcon />}>{translate("toolbar.query")}</Button>
                                </Grid>
                            </Grid>
                            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, justifyContent: 'flex-end' }}>
                                <Grid item md={8} sx={{ justifyContent: 'flex-end', display: 'flex' }}>
                                    <Button variant="contained" onClick={handleAdd} >{translate("page.whMat.title.add")}</Button>
                                </Grid>
                            </Box>
                        </Box>
                        <Box sx={{ mt: 2, height: 600, width: '100%' }}>
                            <SelectReviseMatnr
                                page={page}
                                setPage={setPage}
                                tableRef={tableRef}
                                rowCount={rowCount}
                                dyFields={dyFields}
                                isLoading={isLoading}
                                tableData={tableData}
                                selectedRows={selectedRows}
                                setDyFields={setDyFields}
                                setTableData={setTableData}
                                setSelectedRows={setSelectedRows}
                            />
                        </Box>
                    </Box>
                </Box>
            </DialogContent>
            <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
                <Box sx={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
                    <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}>
                        {translate('toolbar.confirm')}
                    </Button>
                </Box>
            </DialogActions>
        </Dialog>
                </DialogContent>
                <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
                    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
                        <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}>
                            {translate('toolbar.confirm')}
                        </Button>
                    </Box>
                </DialogActions>
            </Dialog>
            <SelectMatnrInfo open={openMatnr} setOpen={setOpenMatnr} setData={setTableData} data={tableData} />
        </>
    );
};

export default LocsReviseDetl;

const AsnWareModalTable = ({ tableData, setTableData, page, isLoading, pageSize, setPage, rowCount, selectedRows, setSelectedRows }) => {
const SelectReviseMatnr = ({ tableData, setTableData, page, isLoading, setPage, rowCount, selectedRows, setSelectedRows, tableRef, setDyFields, dyFields }) => {
    const [dynamicFields, setDynamicFields] = useState([]);
    const translate = useTranslate();
    const notify = useNotify();

    const [columns, setColumns] = useState([
        {
            field: 'code',
            headerName: translate('table.field.locItem.locCode'),
            width: 110,
            editable: false,
        },
        {
            field: 'warehouseId$',
            headerName: translate('table.field.loc.warehouseId'),
            minWidth: 100,
            flex: 1,
            editable: false,
        },
        {
            field: 'areaId$',
            headerName: translate('table.field.loc.areaId'),
            field: 'matnrCode',
            headerName: translate('table.field.locItem.matnrCode'),
            width: 130,
            editable: false,
        },
        {
            field: 'typeIds$',
            headerName: translate('table.field.loc.type'),
            field: 'maktx',
            headerName: translate('table.field.locItem.maktx'),
            minWidth: 100,
            flex: 1,
            editable: false,
        },
        {
            field: 'barcode',
            headerName: translate('table.field.loc.barcode'),
            field: 'anfme',
            headerName: translate('table.field.locItem.anfme') + "*",
            minWidth: 100,
            flex: 1,
            editable: false,
        },
        {
            field: 'useStatus$',
            headerName: translate('table.field.loc.useStatus') + "*",
            field: 'reviseQty',
            headerName: translate('table.field.locItem.reviseQty') + "*",
            minWidth: 100,
            type: 'number',
            flex: 1,
            editable: true,
            headerClassName: "custom",
        },
        {
            field: 'batch',
            headerName: translate('table.field.locItem.batch'),
            minWidth: 100,
            flex: 1,
            editable: true,
            headerClassName: "custom",
        },
        {
            field: 'spec',
            headerName: translate('table.field.locItem.spec'),
            minWidth: 100,
            flex: 1,
            editable: false,
        },
        {
            field: 'channel',
            headerName: translate('table.field.loc.channel'),
            field: 'model',
            headerName: translate('table.field.locItem.model'),
            minWidth: 100,
            flex: 1,
            editable: false,
        },
        {
            field: 'row',
            headerName: translate('table.field.loc.row'),
            field: 'unit',
            headerName: translate('table.field.locItem.unit'),
            minWidth: 100,
            flex: 1,
            editable: false,
        },
        {
            field: 'col',
            headerName: translate('table.field.loc.col'),
            minWidth: 100,
            flex: 1,
            editable: false,
        },
        {
            field: 'lev',
            headerName: translate('table.field.loc.lev'),
            minWidth: 100,
            flex: 1,
            editable: false,
        },
        // {
        //     field: 'action',
        //     headerName: '操作',
        //     width: 140,
        //     lockPosition: 'left',
        //     renderCell: (params) => (
        //         <Tooltip title="Delete">
        //             <IconButton onClick={() => handleDelete(params.row)}>
        //                 <Delete />
        //             </IconButton>
        //             <IconButton onClick={() => handleDelete(params.row)}>
        //                 <Save />
        //             </IconButton>
        //         </Tooltip>
        //     ),
        // }
    ])

    const operate = {
        field: 'action',
        headerName: '操作',
        width: 140,
        lockPosition: 'left',
        renderCell: (params) => (
            <Tooltip title="Delete">
                <IconButton onClick={() => handleDelete(params.row)}>
                    <Delete />
                </IconButton>
            </Tooltip>
        ),
    }

    const handleDelete = (rows) => {
        let selectRow = tableRef.current.getSortedRows();
        const tableRows = selectRow.filter(item => item.id != rows.id);
        setTableData(tableRows);
    }

    const handleSelectionChange = (ids) => {
        setSelectedRows(ids)
    };

    useEffect(() => {
        if (dynamicFields.length < 1) {
            getDynamicFields();
        }
    }, [dyFields]);

    const getDynamicFields = async () => {
        const {
            data: { code, data, msg },
        } = await request.get("/fields/enable/list");
        if (code === 200) {
            const cols = data.map(el => ({
                field: el.fields,
                headerName: el.fieldsAlise,
                minWidth: 100,
                flex: 1,
                editable: el.unique,
                valueGetter: (value, row) => {
                    return row.extendFields?.[el.fields] || '';
                },
            }))
            setDyFields(data)
            setDynamicFields(cols);
            setColumns([...columns, ...cols, operate])
        } else {
            notify(msg);
        }
    }

    tableRef.current = useGridApiRef();

    return (
        <div style={{ width: '100%' }}>
            <DataGrid
                sx={{ height: 600 }}
                size="small"
                apiRef={tableRef}
                rows={tableData}
                columns={columns}
                checkboxSelection
                onRowSelectionModelChange={handleSelectionChange}
                selectionModel={selectedRows}
                disableColumnMenu={true}
                disableRowSelectionOnClick
                disableColumnSorting
                disableMultipleColumnsSorting
                rowCount={rowCount}