# bug修复 20250412问题修复

skyouc

2025-04-12 5ae1669ac1794f62cf72e7d5352853da14d440b9

 rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx

@@ -1,28 +1,35 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { Box, Card, CardContent, Grid, Typography, Tooltip, Paper, TableContainer, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import { Box, Card, CardContent, Grid, Typography, Button, TextField, Tooltip, Paper, TableContainer, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import {
    useTranslate,
    useRecordContext,
    useNotify
    useNotify,
    useRefresh,
    useListContext,
} from 'react-admin';
import PanelTypography from "../components/PanelTypography";
import * as Common from '@/utils/common'
import { styled } from "@mui/material/styles";
import request from '@/utils/request';
const AsnOrderPanel = () => {
import debounce from 'lodash/debounce';
import { DataGrid } from '@mui/x-data-grid';
import PrintModal from './PrintModal';
import PrintIcon from '@mui/icons-material/Print';
const AsnOrderPanel = ({ billReload }) => {
    const record = useRecordContext();
    if (!record) return null;
    const translate = useTranslate();
    const notify = useNotify();
    const [rows, setRows] = useState([]);
    const [maktx, setMaktx] = useState('');
    const asnId = record.id;

    useEffect(() => {
        http();
    }, [asnId]);
        debouncedHttp({ maktx });
    }, [asnId, maktx]);

    const http = async () => {
        const res = await request.post('/asnOrderItem/page', { asnId });
    const http = async (parmas) => {
        const res = await request.post('/asnOrderItem/page', { ...parmas, asnId });
        if (res?.data?.code === 200) {
            setRows(res.data.data.records)
        } else {
@@ -31,150 +38,202 @@
    }


    const StyledTableRow = styled(TableRow)(({ theme }) => ({
        "& .MuiButtonBase-root.": {
            padding: "0px 0px",
        },
    }));
    useEffect(() => {
        billReload.current = http
    }, []);

    const StyledTableCell = styled(TableCell)(({ theme }) => ({
        "& .MuiButtonBase-root": {
            padding: "0px 0px",
        },
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
        maxWidth: 600,
    }));

    const debouncedHttp = useMemo(() => debounce(http, 300), []);

    const columns = [
        {
            id: 'asnId',
            label: 'table.field.asnOrderItem.asnId',
            minWidth: 100,
            field: 'asnId',
            headerName: translate('table.field.asnOrderItem.asnId')
        },
        {
            id: 'asnCode',
            label: 'table.field.asnOrderItem.asnCode',
            minWidth: 100,
            field: 'asnCode',
            headerName: translate('table.field.asnOrderItem.asnCode'),
            width: 150,
        },
        // {
        //     field: 'poDetlId',
        //     headerName: translate('table.field.asnOrderItem.poDetlId')
        // },
        {
            field: 'poCode',
            headerName: translate('table.field.asnOrderItem.poDetlCode')
        },
        {
            id: 'poDetlId',
            label: 'table.field.asnOrderItem.poDetlId',
            minWidth: 100,
            field: 'matnrCode',
            headerName: translate('table.field.asnOrderItem.matnrCode'),
            width: 150,
        },
        {
            id: 'poDetlCode',
            label: 'table.field.asnOrderItem.poDetlCode',
            minWidth: 100,
            field: 'maktx',
            headerName: translate('table.field.asnOrderItem.maktx'),
            width: 200,
        },
        {
            id: 'matnrId',
            label: 'table.field.asnOrderItem.matnrId',
            minWidth: 100,
            field: 'anfme',
            headerName: translate('table.field.asnOrderItem.purQty')
        },
        {
            id: 'matnk',
            label: 'table.field.asnOrderItem.matnk',
            minWidth: 100,
            field: 'stockUnit',
            headerName: translate('table.field.asnOrderItem.stockUnit')
        },
        // {
        //     field: 'purQty',
        //     headerName: translate('table.field.asnOrderItem.purQty')
        // },
        {
            field: 'purUnit',
            headerName: translate('table.field.asnOrderItem.purUnit')
        },
        {
            id: 'anfme',
            label: 'table.field.asnOrderItem.anfme',
            minWidth: 100,
            field: 'qty',
            headerName: translate('table.field.asnOrderItem.qty')
        },
        {
            id: 'stockUnit',
            label: 'table.field.asnOrderItem.stockUnit',
            minWidth: 100,
            field: 'splrBatch',
            headerName: translate('table.field.asnOrderItem.splrBatch')
        },
        {
            id: 'purQty',
            label: 'table.field.asnOrderItem.purQty',
            minWidth: 100,
            field: 'splrCode',
            headerName: translate('table.field.asnOrderItem.splrCode')
        },
        {
            id: 'purUnit',
            label: 'table.field.asnOrderItem.purUnit',
            minWidth: 100,
            field: 'splrName',
            headerName: translate('table.field.asnOrderItem.splrName')
        },
        {
            id: 'qty',
            label: 'table.field.asnOrderItem.qty',
            minWidth: 100,
            field: 'trackCode',
            headerName: translate('table.field.asnOrderItem.barcode'),
            width: 150
        },
        {
            id: 'splrCode',
            label: 'table.field.asnOrderItem.splrCode',
            minWidth: 100,
            field: 'prodTime',
            headerName: translate('table.field.asnOrderItem.prodTime')
        },
        {
            id: 'splrName',
            label: 'table.field.asnOrderItem.splrName',
            minWidth: 100,
            field: 'packName',
            headerName: translate('table.field.asnOrderItem.packName')
        },
        {
            id: 'qrcode',
            label: 'table.field.asnOrderItem.qrcode',
            minWidth: 100,
        },
        {
            id: 'barcode',
            label: 'table.field.asnOrderItem.barcode',
            minWidth: 100,
        },
        {
            id: 'packName',
            label: 'table.field.asnOrderItem.packName',
            minWidth: 100,
        }]
            field: 'action',
            headerName: '操作',
            width: 70,
            lockPosition: 'left',
            renderCell: (params) => (
                <PrintButton rows={[params.row.id]} />
            ),

        },]

    const [selectedRows, setSelectedRows] = useState([]);

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

    };
    const maktxChange = (value) => {
        setMaktx(value)
    }


    return (

        <Box sx={{
            position: 'relative',
            padding: '5px 10px'
        }}>
            <TableContainer component={Paper} >
                <Table size="small" >
                    <TableHead>
                        <StyledTableRow key={'head'}>
                            {columns.map((column, idx) => {
                                const value = column.label;
                                return (
                                    <>
                                        <StyledTableCell
                                            key={column.id}
                                            align={column.align || "left"}
                                        // style={{ paddingLeft: idx === 0 && (depth * 16 + 16) }}
                                        >
                                            {column.format ? column.format(value) : translate(value)}
                                        </StyledTableCell>
                                    </>
                                );
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px', alignItems: 'center' }}>
                <TextField value={maktx} onChange={(e) => maktxChange(e.target.value)} label="搜索物料" sx={{ width: '300px' }} size="small" />

                            })}
                        </StyledTableRow>
                    </TableHead>
                <div style={{ display: 'flex', gap: '10px' }}>
                    <PrintsButton rows={selectedRows} />
                </div>
            </div>

                    <TableBody>
                        {rows.map((row) => (
                            <StyledTableRow key={row.id || Math.random()}>
                                {columns.map((column) => (
                                    <StyledTableCell key={column.id} >
                                        {row[column.id]}
                                    </StyledTableCell>
                                ))}
                            </StyledTableRow>
                        ))}

                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
            <DataGrid
                sx={{ width: 'calc(100vw - 280px)' }}
                size="small"
                rows={rows}
                columns={columns}
                disableRowSelectionOnClick
                checkboxSelection
                onRowSelectionModelChange={handleSelectionChange}
                selectionModel={selectedRows}
                disableColumnMenu={true}
                disableColumnSorting
                disableMultipleColumnsSorting
                columnHeaderHeight={40}
                rowHeight={42}
                initialState={{
                    pagination: {
                        paginationModel: {
                            pageSize: 10,
                        },
                    },
                }}
                pageSizeOptions={[10, 25, 50]}
            />
        </Box >

    );
};

export default AsnOrderPanel;

const PrintsButton = ({ rows }) => {
    const record = useRecordContext();
    const { resource, selectedIds } = useListContext();
    const notify = useNotify();
    const refresh = useRefresh();
    const translate = useTranslate();

    const [createDialog, setCreateDialog] = useState(false);

    const modalChange = () => {
        if (rows?.length === 0) {
            notify('请选择物料');
            return;
        } else {
            setCreateDialog(true)
        }

    }

    return (
        <>
            <Button size="small" color="secondary" onClick={modalChange} startIcon={<PrintIcon />}>{translate("toolbar.batchPrint")}</Button>

            <PrintModal
                open={createDialog}
                setOpen={setCreateDialog}
                rows={rows}
            />
        </>
    )
}

const PrintButton = ({ rows }) => {
    const record = useRecordContext();

    const notify = useNotify();
    const refresh = useRefresh();

    const [createDialog, setCreateDialog] = useState(false);
    const translate = useTranslate();

    return (
        <>
            <Button size="small" color="secondary" onClick={() => setCreateDialog(true)} startIcon={<PrintIcon />}>{translate("toolbar.print")}</Button>

            <PrintModal
                open={createDialog}
                setOpen={setCreateDialog}
                rows={rows}
            />
        </>
    )
}