feat:po asn单据查询

verou

2025-03-14 92f07afcc63f7675dde38d6d36d92bb05aed7c81

feat:po asn单据查询

 rsf-admin/package.json

@@ -15,6 +15,7 @@
    "@mui/icons-material": "^5.16.7",
    "@mui/material": "^5.16.7",
    "@mui/system": "^6.4.7",
    "@mui/x-data-grid": "^7.27.3",
    "@mui/x-tree-view": "^7.16.0",
    "@tweenjs/tween.js": "^21.0.0",
    "axios": "^1.7.4",

 rsf-admin/pnpm-lock.yaml

@@ -23,6 +23,9 @@
      '@mui/system':
        specifier: ^6.4.7
        version: 6.4.7(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
      '@mui/x-data-grid':
        specifier: ^7.27.3
        version: 7.27.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.7(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@mui/x-tree-view':
        specifier: ^7.16.0
        version: 7.26.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.7(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -601,6 +604,22 @@
      react: ^17.0.0 || ^18.0.0 || ^19.0.0
    peerDependenciesMeta:
      '@types/react':
        optional: true

  '@mui/x-data-grid@7.27.3':
    resolution: {integrity: sha512-7zbDbFrhV6ODjyn3ImOZG34nbMbCvmHgqYTYP273TNAj8hMy4BiLyiKFFZTzVddIj3KQ6qLzBpByhqifGgEDOg==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@emotion/react': ^11.9.0
      '@emotion/styled': ^11.8.1
      '@mui/material': ^5.15.14 || ^6.0.0
      '@mui/system': ^5.15.14 || ^6.0.0
      react: ^17.0.0 || ^18.0.0 || ^19.0.0
      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
    peerDependenciesMeta:
      '@emotion/react':
        optional: true
      '@emotion/styled':
        optional: true

  '@mui/x-internals@7.26.0':
@@ -2216,6 +2235,9 @@
  remove-accents@0.4.4:
    resolution: {integrity: sha512-EpFcOa/ISetVHEXqu+VwI96KZBmq+a8LJnGkaeFw45epGlxIZz5dhEEnNZMsQXgORu3qaMoLX4qJCzOik6ytAg==}

  reselect@5.1.1:
    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}

  resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@@ -3006,6 +3028,25 @@
      react-is: 19.0.0
    optionalDependencies:
      '@types/react': 18.3.18

  '@mui/x-data-grid@7.27.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.7(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
    dependencies:
      '@babel/runtime': 7.26.9
      '@mui/material': 5.16.14(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@mui/system': 6.4.7(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
      '@mui/utils': 6.4.6(@types/react@18.3.18)(react@18.3.1)
      '@mui/x-internals': 7.26.0(@types/react@18.3.18)(react@18.3.1)
      clsx: 2.1.1
      prop-types: 15.8.1
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)
      reselect: 5.1.1
      use-sync-external-store: 1.4.0(react@18.3.1)
    optionalDependencies:
      '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)
    transitivePeerDependencies:
      - '@types/react'

  '@mui/x-internals@7.26.0(@types/react@18.3.18)(react@18.3.1)':
    dependencies:
@@ -4831,6 +4872,8 @@

  remove-accents@0.4.4: {}

  reselect@5.1.1: {}

  resolve-from@4.0.0: {}

  resolve@1.22.10:

 rsf-admin/src/i18n/zh.js

@@ -283,15 +283,15 @@
                parentId: "父类标识",
            },
            warehouse: {
                name: "名称",
                name: "仓库名称",
                code: "编码",
                factory: "工厂",
                address: "地址",
                longitude: "经度",
                latgitude: "纬度",
                length: "长",
                width: "宽",
                height: "高",
                length: "长(m)",
                width: "宽(m)",
                height: "高(m)",
            },
            warehouseAreas: {
                uuid: "唯一编码",

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

@@ -31,7 +31,7 @@
  ReferenceArrayInput,
  AutocompleteInput,
  DeleteButton,
  Button
  Button,
} from 'react-admin';
import { Box, Typography, Card, Stack } from '@mui/material';
import { styled } from '@mui/material/styles';
@@ -104,11 +104,10 @@
    navigate(`/asnOrderItem?asnId=${record.id}`);
  };

  const importList = () => { };
  const inspection = () => { };

  const print = () => { };


  return (
    <Box display="flex">
      <List

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

@@ -1,93 +1,184 @@
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 StyledTable = styled(TableRow)(({ theme }) => ({
        "& .MuiButtonBase-root.": {
            padding: "0px 0px",
        },
    }));

    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: 'matnk',
            label: 'table.field.asnOrderItem.matnk',
            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>

    );
};


 rsf-admin/src/page/asnOrderItem/AsnOrderItemList.jsx

@@ -50,7 +50,8 @@

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
  '& .css-1vooibu-MuiSvgIcon-root': {
    height: '.9em'
    height: '.9em',

  },
  '& .RaDatagrid-row': {
    cursor: 'auto'

 rsf-admin/src/page/basicInfo/warehouse/WarehouseCreate.jsx

@@ -124,7 +124,7 @@
                                        source="longitude"
                                        parse={v => v}
                                    />
                                     <TextInput
                                    <TextInput
                                        label="table.field.warehouse.latgitude"
                                        source="latgitude"
                                        parse={v => v}
@@ -135,7 +135,7 @@
                                        label="table.field.warehouse.length"
                                        source="length"
                                    />
                                     <NumberInput
                                    <NumberInput
                                        label="table.field.warehouse.width"
                                        source="width"
                                    />
@@ -148,10 +148,20 @@
                                <Grid item xs={6} display="flex" gap={1}>
                                    <StatusSelectInput />
                                </Grid>
                                <Grid item xs={12} display="flex" gap={1}>
                                    <Stack direction="column" spacing={1} width={'100%'}>
                                <Grid item xs={6} display="flex" gap={1}>
                                    <TextInput
                                        label="common.field.memo"
                                        source="memo"
                                        parse={v => v}
                                        fullWidth
                                        multiline
                                        minRows={2}
                                        autoFocus
                                        {...props}
                                    />
                                    {/* <Stack direction="column" spacing={1} width={'100%'}>
                                        <MemoInput />
                                    </Stack>
                                    </Stack> */}
                                </Grid>
                            </Grid>
                        </DialogContent>

 rsf-admin/src/page/login/Login.jsx

@@ -179,9 +179,9 @@
                    </Button>

                </Stack>
                <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box>
                {/* <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box> */}

                <ProviderChoices type="LOG IN" />
                {/* <ProviderChoices type="LOG IN" /> */}
            </Box >
        </>
    )

 rsf-admin/src/page/purchase/PurchasePanel.jsx

@@ -1,122 +1,181 @@
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 PurchasePanel = () => {
    const record = useRecordContext();
    if (!record) return null;
    const translate = useTranslate();
    return (
        <>
            <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}>
                <CardContent>
                    <Grid container spacing={2}>
                        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Typography variant="h6" gutterBottom align="left" sx={{
                                maxWidth: { xs: '100px', sm: '180px', md: '260px', lg: '360px' },
                                whiteSpace: 'nowrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                            }}>
                                {Common.camelToPascalWithSpaces(translate('table.field.purchase.id'))}: {record.id}
                            </Typography>
                            {/*  inherit, primary, secondary, textPrimary, textSecondary, error */}
                            <Typography variant="h6" gutterBottom align="right" >
                                ID: {record.id}
                            </Typography>
                        </Grid>
                    </Grid>
                    <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.purchase.code" 
                                property={record.code}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.type" 
                                property={record.type}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.source"
                                property={record.source}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.preArr" 
                                property={record.preArr$}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.anfme" 
                                property={record.anfme}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.qty" 
                                property={record.qty}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.workQty" 
                                property={record.workQty}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.channel" 
                                property={record.channel}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.platCode"
                                property={record.platCode}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.startTime" 
                                property={record.startTime$}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.endTime" 
                                property={record.endTime$}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchase.project" 
                                property={record.project}
                            />
                        </Grid>
    const notify = useNotify();
    const [rows, setRows] = useState([]);
    const poId = record.id;

                    </Grid>
                </CardContent>
            </Card >
        </>
    useEffect(() => {
        http();
    }, [poId]);

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

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

    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: 'purchaseId',
            label: 'table.field.purchaseItem.purchaseId',
            minWidth: 100
        },
        {
            id: 'platItemId',
            label: 'table.field.purchaseItem.platItemId',
            minWidth: 100
        },
        {
            id: 'matnrCode',
            label: 'table.field.purchaseItem.matnrCode',
            minWidth: 100
        },
        {
            id: 'matnrName',
            label: 'table.field.purchaseItem.matnrName',
            minWidth: 100
        },
        {
            id: 'unit',
            label: 'table.field.purchaseItem.unit',
            minWidth: 100
        },
        {
            id: 'anfme',
            label: 'table.field.purchaseItem.anfme',
            minWidth: 100
        },
        {
            id: 'qty',
            label: 'table.field.purchaseItem.qty',
            minWidth: 100
        },
        {
            id: 'nromQty',
            label: 'table.field.purchaseItem.nromQty',
            minWidth: 100
        },
        {
            id: 'asnQty',
            label: 'table.field.purchaseItem.asnQty',
            minWidth: 100
        },
        {
            id: 'printQty',
            label: 'table.field.purchaseItem.printQty',
            minWidth: 100
        },
        {
            id: 'splrName',
            label: 'table.field.purchaseItem.splrName',
            minWidth: 100
        },
        {
            id: 'splrCode',
            label: 'table.field.purchaseItem.splrCode',
            minWidth: 100
        },
        {
            id: 'splrBatch',
            label: 'table.field.purchaseItem.splrBatch',
            minWidth: 100
        },
        {
            id: 'statusBool',
            label: 'common.field.status',
            minWidth: 100,
            formatter: (value) => value ? 'Yes' : 'No'
        },
        {
            id: 'memo',
            label: 'common.field.memo',
            minWidth: 100
        }
    ];


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

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

    );
};


 rsf-admin/src/page/purchaseItem/PurchaseItemPanel.jsx

@@ -42,7 +42,7 @@
                    <Grid container spacing={2}>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchaseItem.purchaseId" 
                                title="table.field.purchaseItem.purchaseId"
                                property={record.purchaseId}
                            />
                        </Grid>
@@ -54,31 +54,31 @@
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchaseItem.matnrCode" 
                                title="table.field.purchaseItem.matnrCode"
                                property={record.matnrCode}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchaseItem.matnrName" 
                                title="table.field.purchaseItem.matnrName"
                                property={record.matnrName}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchaseItem.unit" 
                                title="table.field.purchaseItem.unit"
                                property={record.unit}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchaseItem.anfme" 
                                title="table.field.purchaseItem.anfme"
                                property={record.anfme}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchaseItem.qty" 
                                title="table.field.purchaseItem.qty"
                                property={record.qty}
                            />
                        </Grid>
@@ -90,13 +90,13 @@
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchaseItem.asnQty" 
                                title="table.field.purchaseItem.asnQty"
                                property={record.asnQty}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.purchaseItem.printQty" 
                                title="table.field.purchaseItem.printQty"
                                property={record.printQty}
                            />
                        </Grid>