import React from "react";
|
import { Show, useTranslate, useRecordContext, DateField } from 'react-admin';
|
import { Stack, Grid, Box, Typography, TextField as MuiTextField, Card, CardContent } from '@mui/material';
|
import AccessTimeIcon from '@mui/icons-material/AccessTime';
|
import CustomerTopToolBar from "../../components/EditTopToolBar";
|
import AsnOrderItemLogList from "./AsnOrderItemLogList";
|
|
/** 只读输入框样式，与 Edit 页 Filled 白底一致，用于 Show 头部 */
|
const readOnlyInputSx = {
|
"& .MuiFormLabel-root.MuiInputLabel-root.Mui-disabled": {
|
bgcolor: 'white',
|
WebkitTextFillColor: "rgba(0, 0, 0)"
|
},
|
"& .MuiInputBase-input.MuiFilledInput-input.Mui-disabled": {
|
bgcolor: 'white',
|
WebkitTextFillColor: "rgba(0, 0, 0)"
|
},
|
"& .MuiFilledInput-root.MuiInputBase-sizeSmall": {
|
bgcolor: 'white',
|
}
|
};
|
|
const ShowField = ({ source, labelKey, value }) => {
|
const translate = useTranslate();
|
return (
|
<MuiTextField
|
size="small"
|
variant="filled"
|
label={translate(labelKey)}
|
value={value ?? ''}
|
disabled
|
sx={{ width: 130, minWidth: 110, flexShrink: 0, ...readOnlyInputSx }}
|
InputProps={{ readOnly: true }}
|
/>
|
);
|
};
|
|
/**
|
* 入库/出库历史单查看详情：单列平铺（主要 → 更多 → 物料详情），无右侧 aside，占满整页宽度。
|
* Show 页无 Form 上下文，用 MUI TextField 只读样式复刻 Edit 头部视觉效果。
|
*/
|
const AsnOrderLogShow = () => {
|
const translate = useTranslate();
|
return (
|
<Show
|
actions={<CustomerTopToolBar />}
|
title="入库历史单详情"
|
sx={{
|
width: '100% !important',
|
maxWidth: 'none !important',
|
'& > div': { maxWidth: 'none !important', width: '100% !important' },
|
'& .RaShow-main': { maxWidth: 'none !important', width: '100% !important', minWidth: 0 },
|
'& .RaShow-card': { maxWidth: 'none !important', width: '100% !important' },
|
'& .MuiPaper-root': { maxWidth: 'none !important', width: '100% !important' },
|
'& [class*="RaShow"]': { maxWidth: 'none !important', width: '100% !important' },
|
}}
|
>
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1, width: '100%', minWidth: 0 }}>
|
<Grid container spacing={2}>
|
<Grid item xs={12} md>
|
<Card variant="outlined" sx={{ height: '100%' }}>
|
<CardContent sx={{ py: 1, '&:last-child': { pb: 1.5 } }}>
|
<MainSection />
|
</CardContent>
|
</Card>
|
</Grid>
|
<Grid item xs={12} md="auto">
|
<Card variant="outlined" sx={{ height: '100%' }}>
|
<CardContent>
|
<MoreSection />
|
</CardContent>
|
</Card>
|
</Grid>
|
</Grid>
|
<Card variant="outlined" sx={{ flex: '1 1 auto', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
|
<CardContent sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, '&:last-child': { pb: 2 } }}>
|
<Box sx={{ width: '100%', minWidth: 0, overflowX: 'auto', flex: 1 }}>
|
<AsnOrderItemLogList />
|
</Box>
|
</CardContent>
|
</Card>
|
</Box>
|
</Show>
|
);
|
};
|
|
/** 更多：创建时间、修改时间，与 EditBaseAside 内容一致，放在主内容区单列展示 */
|
const MoreSection = () => {
|
const translate = useTranslate();
|
const record = useRecordContext();
|
if (!record) return null;
|
return (
|
<Box>
|
<Typography variant="h6" gutterBottom>
|
{translate('common.edit.side.title')}
|
</Typography>
|
<Grid container rowSpacing={2} columnSpacing={1}>
|
<Grid item xs={12} display="flex" gap={1}>
|
<AccessTimeIcon fontSize="small" color="disabled" />
|
<Box flexGrow={1}>
|
<Typography variant="body2">{translate('common.field.createTime')}</Typography>
|
<DateField record={record} source="createTime" showTime />
|
</Box>
|
</Grid>
|
<Grid item xs={12} display="flex" gap={1}>
|
<AccessTimeIcon fontSize="small" color="disabled" />
|
<Box flexGrow={1}>
|
<Typography variant="body2">{translate('common.field.updateTime')}</Typography>
|
<DateField record={record} source="updateTime" showTime />
|
</Box>
|
</Grid>
|
</Grid>
|
</Box>
|
);
|
};
|
|
const MainSection = () => {
|
const translate = useTranslate();
|
const record = useRecordContext();
|
if (!record) return null;
|
const rleStatusText = record.rleStatus === 1 ? '已释放' : (record.rleStatus === 0 ? '正常' : (record.rleStatus$ ?? ''));
|
const arrTime = record.arrTime ? (typeof record.arrTime === 'string' ? record.arrTime : new Date(record.arrTime).toLocaleString('zh-CN')) : '';
|
const numOpt = { minimumFractionDigits: 2, maximumFractionDigits: 2 };
|
return (
|
<Box sx={{ pt: 0.3, width: '100%' }}>
|
<Grid container sx={{ width: '100%', maxWidth: '100%' }} rowSpacing={1} columnSpacing={1}>
|
<Grid item xs={12}>
|
<Typography variant="h6" gutterBottom sx={{ mb: 1 }}>
|
{translate('common.edit.title.main')}
|
</Typography>
|
<Stack direction="row" gap={1} flexWrap="wrap" useFlexGap>
|
<ShowField source="code" labelKey="table.field.asnOrder.code" value={record.code} />
|
<ShowField source="poCode" labelKey="table.field.asnOrder.poCode" value={record.poCode} />
|
<ShowField source="type" labelKey="table.field.asnOrder.type" value={record.type$ ?? record.type} />
|
<ShowField source="wkType" labelKey="table.field.asnOrder.wkType" value={record.wkType$ ?? record.wkType} />
|
{/*</Stack>*/}
|
{/*<Stack direction="row" gap={1} flexWrap="wrap" useFlexGap sx={{ mt: 1 }}>*/}
|
<ShowField source="logisNo" labelKey="table.field.asnOrder.logisNo" value={record.logisNo} />
|
<ShowField source="anfme" labelKey="table.field.asnOrder.anfme" value={record.anfme != null ? Number(record.anfme).toLocaleString('zh-CN', numOpt) : ''} />
|
<ShowField source="qty" labelKey="table.field.asnOrder.qty" value={record.qty != null ? Number(record.qty).toLocaleString('zh-CN', numOpt) : ''} />
|
<ShowField source="arrTime" labelKey="table.field.asnOrder.arrTime" value={arrTime} />
|
<ShowField source="rleStatus" labelKey="table.field.asnOrder.rleStatus" value={rleStatusText} />
|
</Stack>
|
</Grid>
|
</Grid>
|
</Box>
|
);
|
};
|
|
export default AsnOrderLogShow;
|
