云仓WMS接口流程

chen.lin

1 天以前 b003a49794f49a329e2702918ecfc8d14b371d0d

 rsf-admin/src/page/histories/asnOrderLog/AsnOrderLogShow.jsx

@@ -1,158 +1,150 @@
import { BooleanField, DateField, NumberField, ReferenceField, Show, SimpleShowLayout, TextField ,DateInput,
    SelectInput,required,useTranslate,
    useRecordContext,} from 'react-admin';
import { Stack, Grid, Box, Typography, Card } from '@mui/material';
import { EDIT_MODE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting';
import EditBaseAside from "../../components/EditBaseAside";
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";

const AsnOrderLogDetailWithItems = () => {
    const record = useRecordContext();
/** 只读输入框样式，与 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();
    if (!record?.id) return null;
    return (
        <>
            <Grid item xs={24} md={16} sx={{ marginTop: '1em', width: '100%' }}>
                <Typography variant="h6" gutterBottom>
                    {translate('common.edit.title.common')}
                </Typography>
            </Grid>
            <AsnOrderItemLogList logId={record.id} />
        </>
        <MuiTextField
            size="small"
            variant="filled"
            label={translate(labelKey)}
            value={value ?? ''}
            disabled
            sx={{ width: 130, minWidth: 110, flexShrink: 0, ...readOnlyInputSx }}
            InputProps={{ readOnly: true }}
        />
    );
};

const Aa = () =>{
/**
 * 入库/出库历史单查看详情：单列平铺（主要 → 更多 → 物料详情），无右侧 aside，占满整页宽度。
 * Show 页无 Form 上下文，用 MUI TextField 只读样式复刻 Edit 头部视觉效果。
 */
const AsnOrderLogShow = () => {
    const translate = useTranslate();

    return(
        <>
    return (
        <Show
            redirect="list"
            mutationMode={EDIT_MODE}
            actions={<CustomerTopToolBar />}
            aside={<EditBaseAside />}
            >
            <SimpleShowLayout
            shouldUnregister
            warnWhenUnsavedChanges
            mode="onTouched"
            defaultValues={{}}
            >
    
                <Grid sx={{
                    "& .MuiInputBase-input": {
                        bgcolor: "white" 
                    }
                }} container width={{ xs: '100%', xl: '80%' }} rowSpacing={3} columnSpacing={3}>
                    
                    <Grid item xs={24} md={12}>
                    <Typography variant="h6" gutterBottom>
                        {translate('common.edit.title.main')}
                    </Typography>                        
                        <Stack display="flax" justifyContent="space-between" flexWrap="wrap" direction='row' gap={2} >
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" >
                                        {translate('table.field.asnOrderLog.code')}
                                    </Typography>
                                    <TextField source="code" label="id"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.poCode')}
                                    </Typography>
                                    <TextField source="poCode" label="poCode"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.poId')}
                                    </Typography>
                                    <NumberField source="poId" label="poId"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.type')}
                                    </Typography>
                                    <TextField source="type$" label="type"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.wkType')}
                                    </Typography>
                                    <TextField source="wkType$" label="type"/>
                                </Box>
                            </Grid>                            
                        
                        </Stack>
                        <Stack display="flax" justifyContent="space-between"  flexWrap="wrap" direction='row' gap={2} sx={{mt:5 }}>
                        <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.anfme')}
                                    </Typography>
                                    <TextField source="anfme" label="id"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.qty')}
                                    </Typography>
                                    <TextField source="qty" label="poCode"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.logisNo')}
                                    </Typography>
                                    <NumberField source="logisNo" label="poId"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.arrTime')}
                                    </Typography>
                                    <DateField source="arrTime" label="type" showTime/>
                                </Box>
                            </Grid>
                            {/* 质检上报状态
                            <Grid item  display="flex" gap={1} minWidth={150}>
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.ntyStatus')}
                                    </Typography>
                                    <TextField source="ntyStatus$" label="type"/>
                                </Box>
                            </Grid>
                            */} 
                        </Stack>
            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>
                <AsnOrderLogDetailWithItems />
            </SimpleShowLayout>
                <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>
        </>
       ); 
}
    );
};

const AsnorderlogShow = () => (
   
    <Aa />
        
    
   
);
/** 更多：创建时间、修改时间，与 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>
    );
};

export default AsnorderlogShow
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;