import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
Edit,
|
SimpleForm,
|
useTranslate,
|
TextInput,
|
DateInput,
|
SelectInput,
|
AutocompleteInput,
|
SaveButton,
|
Toolbar,
|
TopToolbar,
|
Button,
|
List,
|
useRefresh,
|
NumberField,
|
ReferenceField,
|
TextField,
|
DateField,
|
Form,
|
required,
|
DatagridConfigurable,
|
useListContext,
|
useNotify,
|
DeleteButton,
|
ImageField,
|
InPlaceEditor,
|
} from 'react-admin';
|
import { useWatch, useFormContext } from "react-hook-form";
|
import { Stack, Grid, Box, Typography, Dialog, DialogActions, DialogContent, DialogTitle, LinearProgress, } from '@mui/material';
|
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_ITEM_PAGE_SIZE } from '@/config/setting';
|
import DialogCloseButton from "../../components/DialogCloseButton";
|
import DictSelect from "../../components/DictSelect";
|
import SaveIcon from '@mui/icons-material/Save';
|
import request from '@/utils/request';
|
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': {
|
height: '.9em'
|
},
|
'& .RaDatagrid-row': {
|
cursor: 'auto'
|
},
|
'& .column-name': {
|
},
|
'& .opt': {
|
width: 220
|
},
|
'& .wkType': {
|
width: 110
|
},
|
'& .status': {
|
width: 90
|
},
|
}));
|
|
const OrderPrintPreview = (props) => {
|
const { open, setOpen, record } = props;
|
const notify = useNotify();
|
const invoiceRef = useRef();
|
const translate = useTranslate();
|
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')) || [];
|
|
const handleClose = (event, reason) => {
|
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
|
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={{ orderId: record?.id }}
|
sort={{ field: "create_time", order: "desc" }}
|
actions={(
|
<></>
|
)}
|
perPage={DEFAULT_ITEM_PAGE_SIZE}
|
>
|
<DynamicFields />
|
</List>
|
</Box>
|
));
|
|
|
|
const DynamicFields = (props) => {
|
const translate = useTranslate();
|
const notify = useNotify();
|
const [columns, setColumns] = useState([]);
|
const { isLoading } = useListContext();
|
const refresh = useRefresh();
|
useEffect(() => {
|
getDynamicFields();
|
}, []);
|
|
const getDynamicFields = async () => {
|
const { data: { code, data, msg }, } = await request.get("/fields/enable/list");
|
if (code == 200) {
|
const arr = [
|
<NumberField source="orderId" label="table.field.asnOrderItem.orderId" />,
|
<TextField source="orderCode" label="table.field.asnOrderItem.orderCode" />,
|
<TextField source="poDetlId" label="table.field.asnOrderItem.poDetlId" />,
|
<TextField source="poDetlCode" label="table.field.asnOrderItem.poDetlCode" />,
|
<TextField source="platItemId" label="table.field.asnOrderItem.platItemId" />,
|
<TextField source="matnrId" label="table.field.asnOrderItem.matnrId" />,
|
<TextField source="matnrCode" label="table.field.asnOrderItem.matnrCode" />,
|
<TextField source="maktx" label="table.field.asnOrderItem.maktx" />,
|
<TextField source="splrBatch" label="table.field.asnOrderItem.splrBatch" />,
|
<NumberField source="anfme" label="table.field.asnOrderItem.anfme" />,
|
<NumberField source="qty" label="table.field.asnOrderItem.qty" />,
|
<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="packName" label="table.field.asnOrderItem.packName" />,
|
]
|
const fields = data.map(el => <TextField key={el.fields} source={`extendFields.[${el.fields}]`} label={el.fieldsAlise} />)
|
const lastArr = [
|
<ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}>
|
<TextField source="nickname" />
|
</ReferenceField>,
|
]
|
setColumns([...arr, ...fields, ...lastArr]);
|
} else {
|
notify(msg);
|
}
|
}
|
|
return (
|
<Box sx={{ position: 'relative', minHeight: "60vh", }}>
|
{isLoading && (
|
<LinearProgress
|
sx={{
|
height: "2px",
|
position: 'absolute',
|
top: 0,
|
left: 0,
|
right: 0,
|
}}
|
/>
|
)}
|
{columns.length > 0 &&
|
<StyledDatagrid
|
preferenceKey='asnOrderItem'
|
bulkActionButtons={false}
|
rowClick={(id, resource, record) => false}
|
omit={['id', 'orderId', 'poDetlId', 'platItemId', 'poDetlCode', 'matnrId', 'purQty', 'splrName', 'purUnit', 'qrcode', 'packName', 'trackCode']}
|
>
|
{columns.map((column) => column)}
|
</StyledDatagrid>}
|
</Box>
|
)
|
}
|
