|  |  |  | 
|---|
|  |  |  | 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 WaitPakinPanel = () => { | 
|---|
|  |  |  | 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.waitPakin.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}> </Box> | 
|---|
|  |  |  | <Grid container spacing={2}> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.waitPakin.code" | 
|---|
|  |  |  | property={record.code} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.waitPakin.ansId" | 
|---|
|  |  |  | property={record.ansId} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.waitPakin.asnCode" | 
|---|
|  |  |  | property={record.asnCode} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.waitPakin.barcode" | 
|---|
|  |  |  | property={record.barcode} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.waitPakin.anfme" | 
|---|
|  |  |  | property={record.anfme} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.waitPakin.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('/waitPakinItem/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: 200 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'matnrId', | 
|---|
|  |  |  | headerName: translate('table.field.waitPakinItem.matnrId') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'matnrCode', | 
|---|
|  |  |  | headerName: translate('table.field.waitPakinItem.matnrCode') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'asnCode', | 
|---|
|  |  |  | headerName: translate('table.field.waitPakinItem.asnCode') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | field: 'trackCode', | 
|---|
|  |  |  | headerName: translate('table.field.waitPakinItem.trackCode') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | 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 > | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|