任务列表无数据修改

skyouc

2025-04-03 9d34add4aa6231699048329915aff5e8eb882054

 rsf-admin/src/page/waitPakinLog/WaitPakinLogPanel.jsx

@@ -1,80 +1,115 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { Box, Card, CardContent, Grid, Typography, Tooltip } 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,
    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';
import debounce from 'lodash/debounce';
import { DataGrid } from '@mui/x-data-grid';

const WaitPakinLogPanel = () => {
    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.waitPakinLog.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.waitPakinLog.pakinId" 
                                property={record.pakinId}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.waitPakinLog.code" 
                                property={record.code}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.waitPakinLog.barcode" 
                                property={record.barcode}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.waitPakinLog.anfme" 
                                property={record.anfme}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.waitPakinLog.ioStatus" 
                                property={record.ioStatus$}
                            />
                        </Grid>
    const notify = useNotify();
    const [rows, setRows] = useState([]);
    const [maktx, setMaktx] = useState('');
    const pakinId = record.id;

                    </Grid>
                </CardContent>
            </Card >
        </>
    useEffect(() => {
        debouncedHttp({ maktx });
    }, [pakinId, maktx]);

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

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

    const columns = [
        {
            field: 'pakinId',
            headerName: translate('table.field.waitPakinItem.pakinId')
        },
        {
            field: 'maktx',
            headerName: translate('table.field.waitPakinItem.maktx'),
            width: 300
        },
        {
            field: 'matnrId',
            headerName: translate('table.field.waitPakinItem.matnrId')
        },
        {
            field: 'matnrCode',
            headerName: translate('table.field.waitPakinItem.matnrCode')
        },
        {
            field: 'anfme',
            headerName: translate('table.field.waitPakinItem.anfme')
        },
        {
            field: 'workQty',
            headerName: translate('table.field.waitPakinItem.workQty')
        },
        {
            field: 'unit',
            headerName: translate('table.field.waitPakinItem.unit')
        },
        {
            field: 'fieldsIndex',
            headerName: translate('table.field.waitPakinItem.fieldsIndex')
        },
        {
            field: 'qty',
            headerName: translate('table.field.waitPakinItem.qty')
        },
        {
            field: 'batch',
            headerName: translate('table.field.waitPakinItem.batch')
        },
    ]

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

    return (
        <Box sx={{
            position: 'relative',
            padding: '5px 10px'
        }}>

            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px', alignItems: 'center' }}>
                <TextField value={maktx} onChange={(e) => maktxChange(e.target.value)} label="搜索物料" variant="outlined" sx={{ width: '300px' }} size="small" />

                <div style={{ display: 'flex', gap: '10px' }}>
                </div>
            </div>


            <DataGrid
                size="small"
                rows={rows}
                columns={columns}
                disableRowSelectionOnClick
                disableColumnMenu={true}
                disableColumnSorting
                disableMultipleColumnsSorting
            />
        </Box >
    );
};