From 6c19e2c3af7e24700c65d47830687a9a1750fb59 Mon Sep 17 00:00:00 2001 From: verou <857149855@qq.com> Date: 星期五, 14 三月 2025 14:58:31 +0800 Subject: [PATCH] feat:选择物料 --- rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx | 242 ++++++++++++++++++++++++++++++++--------------- 1 files changed, 164 insertions(+), 78 deletions(-) diff --git a/rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx b/rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx index c005f6e..6577af7 100644 --- a/rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx +++ b/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: '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}> </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> + ); }; -- Gitblit v1.9.1