fix:删除table panel

verou

2025-03-20 9adf42677de00fbee0655b156c10ef12aff84333

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

@@ -1,93 +1,179 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material';
import { Box, Card, CardContent, Grid, Typography, Tooltip, Paper, TableContainer, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import {
    useTranslate,
    useRecordContext,
    useNotify
} 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 = () => {
    const record = useRecordContext();
    if (!record) return null;
    const translate = useTranslate();
    const notify = useNotify();
    const [rows, setRows] = useState([]);
    const asnId = record.id;

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

    const http = async () => {
        const res = await request.post('/asnOrderItem/page', { asnId });
        if (res?.data?.code === 200) {
            setRows(res.data.data.records)
        } else {
            notify(res.data.msg);
        }
    }


    const StyledTableRow = styled(TableRow)(({ theme }) => ({
        "& .MuiButtonBase-root.": {
            padding: "0px 0px",
        },
    }));

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

    const columns = [
        {
            id: 'asnId',
            label: 'table.field.asnOrderItem.asnId',
            minWidth: 100,
        },
        {
            id: 'asnCode',
            label: 'table.field.asnOrderItem.asnCode',
            minWidth: 100,
        },
        {
            id: 'poDetlId',
            label: 'table.field.asnOrderItem.poDetlId',
            minWidth: 100,
        },
        {
            id: 'poDetlCode',
            label: 'table.field.asnOrderItem.poDetlCode',
            minWidth: 100,
        },
        {
            id: 'matnrId',
            label: 'table.field.asnOrderItem.matnrId',
            minWidth: 100,
        },
        {
            id: 'maktx',
            label: 'table.field.asnOrderItem.maktx',
            minWidth: 100,
        },
        {
            id: 'anfme',
            label: 'table.field.asnOrderItem.anfme',
            minWidth: 100,
        },
        {
            id: 'stockUnit',
            label: 'table.field.asnOrderItem.stockUnit',
            minWidth: 100,
        },
        {
            id: 'purQty',
            label: 'table.field.asnOrderItem.purQty',
            minWidth: 100,
        },
        {
            id: 'purUnit',
            label: 'table.field.asnOrderItem.purUnit',
            minWidth: 100,
        },
        {
            id: 'qty',
            label: 'table.field.asnOrderItem.qty',
            minWidth: 100,
        },
        {
            id: 'splrCode',
            label: 'table.field.asnOrderItem.splrCode',
            minWidth: 100,
        },
        {
            id: 'splrName',
            label: 'table.field.asnOrderItem.splrName',
            minWidth: 100,
        },
        {
            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,
        }]


    return (
        <>
            <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}>
                <CardContent>
                    <Grid container spacing={2}>
                        <Grid item xs={12} container alignContent="flex-end">
                            <Typography variant="caption" color="textSecondary" sx={{ wordWrap: 'break-word', wordBreak: 'break-all' }}>
                                {Common.camelToPascalWithSpaces(translate('common.field.memo'))}:{record.memo}
                            </Typography>
                        </Grid>
                    </Grid>
                    <Box height={20}>&nbsp;</Box>
                    <Grid container spacing={2}>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.code" 
                                property={record.code}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.poCode" 
                                property={record.poCode}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.poId" 
                                property={record.poId}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.type" 
                                property={record.type}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.wkType" 
                                property={record.wkType}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.anfme" 
                                property={record.anfme}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.qty" 
                                property={record.qty}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.logisNo" 
                                property={record.logisNo}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.arrTime" 
                                property={record.arrTime$}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.asnOrder.rleStatus" 
                                property={record.rleStatus$}
                            />
                        </Grid>
                    </Grid>
                </CardContent>
            </Card >
        </>

        <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>
                                    </>
                                );

                            })}
                        </StyledTableRow>
                    </TableHead>

                    <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>

    );
};