#

zjj

2025-05-24 709e71bade7497f61b58f332175c9d29074215fb

 rsf-admin/src/page/orders/asnOrder/OrderPrintPreview.jsx

@@ -36,6 +36,7 @@
import { styled } from '@mui/material/styles';
import { QRCodeSVG, QRCodeCanvas } from 'qrcode.react';  // 现在必须这样用
import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';
import { useReactToPrint } from "react-to-print";

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -60,8 +61,8 @@
const OrderPrintPreview = (props) => {
    const { open, setOpen, record } = props;
    const notify = useNotify();
    const invoiceRef = useRef();
    const translate = useTranslate();
    const [drawerVal, setDrawerVal] = useState(false);
    const [disabled, setDisabled] = useState(false)
    const dicts = JSON.parse(localStorage.getItem('sys_dicts'))?.filter(dict => (dict.dictTypeCode == 'sys_order_type')) || [];
    const business = JSON.parse(localStorage.getItem('sys_dicts'))?.filter(dict => (dict.dictTypeCode == 'sys_business_type')) || [];
@@ -70,88 +71,119 @@
        setOpen(false);
    };

    const printOrders = useReactToPrint({
        content: () => {
            return invoiceRef.current
        },
        documentTitle: `订单：${record?.code}`,
        pageStyle: `
        @page {
            size: A4 landscape;  // 关键设置：A4横向
            margin: 10mm;
        }
        @media print {
             html, body {
                width: 297mm;     // A4横向宽度
                height: 210mm;    // A4横向高度
            }
        }`,
        onAfterPrint: () => alert('已发送至打印机!')
    })
    // @page {
    //     // size: A4;
    // }
    // @media print {
    //     // body {
    //     // -webkit-print-color-adjust: exact;
    //     // }

    return (
        <>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="form-dialog-title"
                aria-hidden
                fullWidth
                disableRestoreFocus
                maxWidth="xl"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
            >
                <DialogTitle id="form-dialog-title" sx={{
                    position: 'sticky',
                    top: 0,
                    textAlign: 'center',
                    backgroundColor: 'background.paper',
                    zIndex: 1000
                }}>
                    {translate('menu.asnOrder')}
                    <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
                        <DialogCloseButton onClose={handleClose} />
                    </Box>
                </DialogTitle>
                <DialogContent sx={{ mt: 2 }}>
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                        <Form defaultValues={record}>
                            <Grid container spacing={2} sx={{ justifyContent: 'space-between', }}>
                                <Grid item md={2}>
                                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                                        <Typography>单据类型：</Typography>
                                        <Typography>{record?.type$}</Typography>
                                    </Box>
                                    <Box sx={{ display: 'flex', justifyContent: 'center', padding: 1 }}></Box>
                                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                                        <Typography>业务类型：</Typography>
                                        <Typography>{record?.wkType$}</Typography>
                                    </Box>
                                </Grid>
                                <Grid item md={2}>
                                    <QRCodeSVG value={record?.code} />
                                    <Typography>{record.code}</Typography>
                                </Grid>
                                {/* <Grid item md={2}>
                                    <TextInput source="code" label={"table.field.asnOrder.code"} />
                                </Grid> */}
                            </Grid>
                        </Form>
                        <List
                            resource="asnOrderItem"
                            sx={{
                                flexGrow: 1,
                                transition: (theme) =>
                                    theme.transitions.create(['all'], {
                                        duration: theme.transitions.duration.enteringScreen,
                                    }),
                                marginRight: drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0,
                            }}
                            title={"menu.asnOrderItem"}
                            empty={false}
                            filter={{ asnId: record?.id }}
                            sort={{ field: "create_time", order: "desc" }}
                            actions={(
                                <></>
                            )}
                            perPage={DEFAULT_ITEM_PAGE_SIZE}
                        >
                            <DynamicFields />
                        </List>
                    </Box>
                </DialogContent>
                <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
                    <Toolbar sx={{ width: '100%', justifyContent: 'end' }}  >
                        <Button disabled={disabled} variant="contained" startIcon={<PrintOutlinedIcon />} label={'toolbar.print'}>
                        </Button>
                    </Toolbar>
                </DialogActions>
            </Dialog>
        </>
        <Dialog
            className="orderPrintPerview"
            // ref={invoiceRef}
            open={open}
            onClose={handleClose}
            aria-labelledby="form-dialog-title"
            aria-hidden
            fullWidth
            disableRestoreFocus
            maxWidth="xl"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
        >
            <DialogTitle id="form-dialog-title" sx={{
                position: 'sticky',
                top: 0,
                textAlign: 'center',
                backgroundColor: 'background.paper',
                zIndex: 1000
            }}>
                {translate('menu.asnOrder')}
                <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
                    <DialogCloseButton onClose={handleClose} />
                </Box>
            </DialogTitle>
            <DialogContent sx={{ mt: 2 }}>
                <OrderPreview ref={invoiceRef} record={record} />
            </DialogContent>
            <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
                <Toolbar sx={{ width: '100%', justifyContent: 'end' }}  >
                    <Button disabled={disabled} variant="contained" startIcon={<PrintOutlinedIcon />} label={'toolbar.print'} onClick={printOrders}></Button>
                </Toolbar>
            </DialogActions>
        </Dialog>
    )
}

export default OrderPrintPreview;



const OrderPreview = React.forwardRef(({ record }, ref) => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }} ref={ref}>
        <Form defaultValues={record}>
            <Grid container spacing={2} sx={{ justifyContent: 'space-between', }}>
                <Grid item md={2}>
                    <Box sx={{ display: 'flex', justifyContent: 'start' }}>
                        <Typography>ASN单：</Typography>
                        <Typography>{record?.code}</Typography>
                    </Box>
                    <Box sx={{ display: 'flex', justifyContent: 'start' }}>
                        <Typography>PO单：</Typography>
                        <Typography>{record?.poCode}</Typography>
                    </Box>
                    <Box sx={{ display: 'flex', justifyContent: 'start' }}>
                        <Typography>单据类型：</Typography>
                        <Typography>{record?.type$}</Typography>
                    </Box>
                    <Box sx={{ display: 'flex', justifyContent: 'center', padding: 1 }}></Box>
                    <Box sx={{ display: 'flex', justifyContent: 'start' }}>
                        <Typography>业务类型：</Typography>
                        <Typography>{record?.wkType$}</Typography>
                    </Box>
                    <Box sx={{ display: 'flex', justifyContent: 'center', padding: 1 }}></Box>
                </Grid>
                <Grid item md={2}>
                    <QRCodeSVG value={record?.code} />
                    <Typography>{record.code}</Typography>
                </Grid>
            </Grid>
        </Form>
        <List
            resource="asnOrderItem"
            title={"menu.asnOrderItem"}
            empty={false}
            filter={{ asnId: record?.id }}
            sort={{ field: "create_time", order: "desc" }}
            actions={(
                <></>
            )}
            perPage={DEFAULT_ITEM_PAGE_SIZE}
        >
            <DynamicFields />
        </List>
    </Box>
));



const DynamicFields = (props) => {
    const translate = useTranslate();
@@ -167,7 +199,6 @@
        const { data: { code, data, msg }, } = await request.get("/fields/enable/list");
        if (code == 200) {
            const arr = [
                <NumberField source="id" />,
                <NumberField source="asnId" label="table.field.asnOrderItem.asnId" />,
                <TextField source="asnCode" label="table.field.asnOrderItem.asnCode" />,
                <TextField source="poDetlId" label="table.field.asnOrderItem.poDetlId" />,
@@ -179,9 +210,10 @@
                <TextField source="splrBatch" label="table.field.asnOrderItem.splrBatch" />,
                <NumberField source="anfme" label="table.field.asnOrderItem.anfme" />,
                <NumberField source="qty" label="table.field.asnOrderItem.qty" />,
                <TextField source="splrName" label="table.field.asnOrderItem.splrName" />,
                <NumberField source="purQty" label="table.field.asnOrderItem.purQty" />,
                // <TextField source="splrName" label="table.field.asnOrderItem.splrName" />,
                <TextField source="isptResult$" label="table.field.asnOrderItem.isptResult" />,
                <TextField source="trackCode" label="table.field.asnOrderItem.barcode" />,
                // <TextField source="trackCode" label="table.field.asnOrderItem.barcode" />,
                <TextField source="packName" label="table.field.asnOrderItem.packName" />,
            ]
            const fields = data.map(el => <TextField key={el.fields} source={`extendFields.[${el.fields}]`} label={el.fieldsAlise} />)
@@ -214,7 +246,7 @@
                    preferenceKey='asnOrderItem'
                    bulkActionButtons={false}
                    rowClick={(id, resource, record) => false}
                    omit={['id', 'asnId', 'poDetlId', 'poDetlCode', 'matnrId', 'purQty', 'purUnit', 'qrcode', 'trackCode']}
                    omit={['id', 'asnId', 'poDetlId', 'platItemId', 'poDetlCode', 'matnrId', 'purQty', 'splrName', 'purUnit', 'qrcode', 'packName', 'trackCode']}
                >
                    {columns.map((column) => column)}
                </StyledDatagrid>}