|  |  |  | 
|---|
|  |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
|---|
|  |  |  | import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | useTranslate, | 
|---|
|  |  |  | List, | 
|---|
|  |  |  | DatagridConfigurable, | 
|---|
|  |  |  | useRecordContext, | 
|---|
|  |  |  | useTranslate, | 
|---|
|  |  |  | TextField, | 
|---|
|  |  |  | NumberField, | 
|---|
|  |  |  | DateField, | 
|---|
|  |  |  | BooleanField, | 
|---|
|  |  |  | ReferenceField, | 
|---|
|  |  |  | useListContext, | 
|---|
|  |  |  | ListContextProvider, | 
|---|
|  |  |  | useList, | 
|---|
|  |  |  | useGetList, | 
|---|
|  |  |  | } from 'react-admin'; | 
|---|
|  |  |  | import PanelTypography from "../../components/PanelTypography"; | 
|---|
|  |  |  | import * as Common from '@/utils/common' | 
|---|
|  |  |  | import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting'; | 
|---|
|  |  |  | import { styled } from '@mui/material/styles'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
|---|
|  |  |  | '& .css-1vooibu-MuiSvgIcon-root': { | 
|---|
|  |  |  | height: '.9em' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .RaDatagrid-row': { | 
|---|
|  |  |  | cursor: 'auto' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .column-name': { | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | '& .opt': { | 
|---|
|  |  |  | width: 200 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | })); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const WavePanel = () => { | 
|---|
|  |  |  | const record = useRecordContext(); | 
|---|
|  |  |  | if (!record) return null; | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const [createDialog, setCreateDialog] = useState(false); | 
|---|
|  |  |  | const [drawerVal, setDrawerVal] = useState(false); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { data, total, isPending, error, refetch, meta } = useGetList('/waveOrderRela', { filter: { waveId: record?.id } }); | 
|---|
|  |  |  | const listContext = useList({ data, isPending }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (data == null || data == undefined) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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.wave.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.wave.code" | 
|---|
|  |  |  | property={record.code} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.wave.type" | 
|---|
|  |  |  | property={record.type$} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.wave.exceStatus" | 
|---|
|  |  |  | property={record.exceStatus$} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.wave.anfme" | 
|---|
|  |  |  | property={record.anfme} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.wave.qty" | 
|---|
|  |  |  | property={record.qty} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.wave.orderNum" | 
|---|
|  |  |  | property={record.orderNum} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </CardContent> | 
|---|
|  |  |  | </Card > | 
|---|
|  |  |  | <Box display="flex"> | 
|---|
|  |  |  | <ListContextProvider | 
|---|
|  |  |  | value={listContext} | 
|---|
|  |  |  | sx={{ | 
|---|
|  |  |  | flexGrow: 1, | 
|---|
|  |  |  | transition: (theme) => | 
|---|
|  |  |  | theme.transitions.create(['all'], { | 
|---|
|  |  |  | duration: theme.transitions.duration.enteringScreen, | 
|---|
|  |  |  | }), | 
|---|
|  |  |  | marginRight: !!drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | pagination={false} | 
|---|
|  |  |  | empty={false} | 
|---|
|  |  |  | actions={false} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <StyledDatagrid | 
|---|
|  |  |  | preferenceKey='waveOrderRela' | 
|---|
|  |  |  | bulkActionButtons={false} | 
|---|
|  |  |  | rowClick={false} | 
|---|
|  |  |  | expandSingle | 
|---|
|  |  |  | omit={['id', 'createTime', 'createBy', 'memo', 'taskId', 'orderId', 'orderItemId', 'matnrId']} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <NumberField source="id" />, | 
|---|
|  |  |  | <TextField source="asnCode" label="table.field.asnOrderItem.asnCode" /> | 
|---|
|  |  |  | <TextField source="matnrCode" label="table.field.asnOrderItem.matnrCode" /> | 
|---|
|  |  |  | <TextField source="maktx" label="table.field.asnOrderItem.maktx" /> | 
|---|
|  |  |  | <TextField source="splrBatch" label="table.field.asnOrderItem.splrBatch" /> | 
|---|
|  |  |  | <TextField source="platOrderCode" label="table.field.asnOrderItem.platOrderCode" /> | 
|---|
|  |  |  | <TextField source="spec" label="table.field.asnOrderItem.spec" /> | 
|---|
|  |  |  | <TextField source="model" label="table.field.asnOrderItem.model" /> | 
|---|
|  |  |  | <NumberField source="anfme" label="table.field.asnOrderItem.anfme" /> | 
|---|
|  |  |  | <TextField source="stockUnit" label="table.field.asnOrderItem.stockUnit" /> | 
|---|
|  |  |  | <TextField source="splrName" label="table.field.asnOrderItem.splrName" /> | 
|---|
|  |  |  | </StyledDatagrid> | 
|---|
|  |  |  | </ListContextProvider> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|