import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
CreateBase,
|
useTranslate,
|
TextInput,
|
NumberInput,
|
BooleanInput,
|
DateInput,
|
SaveButton,
|
SelectInput,
|
ReferenceInput,
|
ReferenceArrayInput,
|
AutocompleteInput,
|
Toolbar,
|
required,
|
useDataProvider,
|
useNotify,
|
Form,
|
useCreateController,
|
useListContext,
|
useRefresh,
|
} from 'react-admin';
|
import {
|
Dialog,
|
DialogActions,
|
DialogContent,
|
DialogTitle,
|
Grid,
|
TextField,
|
Box,
|
Button,
|
Radio,
|
RadioGroup,
|
FormControlLabel,
|
FormControl,
|
FormLabel,
|
TableRow,
|
TableCell,
|
Tooltip,
|
IconButton,
|
styled
|
|
|
} from '@mui/material';
|
import DialogCloseButton from "../../components/DialogCloseButton";
|
import DictionarySelect from "../../components/DictionarySelect";
|
import { useForm, Controller, useWatch, FormProvider, useFormContext } from "react-hook-form";
|
import SaveIcon from '@mui/icons-material/Save';
|
import request from '@/utils/request';
|
import { Add, Edit, Delete } from '@mui/icons-material';
|
import _ from 'lodash';
|
import { DataGrid } from '@mui/x-data-grid';
|
import StatusSelectInput from "../../components/StatusSelectInput";
|
|
import { useReactToPrint } from "react-to-print";
|
|
const InitModal = ({ open, setOpen }) => {
|
const refresh = useRefresh();
|
const translate = useTranslate();
|
const notify = useNotify();
|
const contentRef = useRef(null);
|
const reactToPrintFn = useReactToPrint({ contentRef });
|
|
const handleClose = (event, reason) => {
|
if (reason !== "backdropClick") {
|
setOpen(false);
|
}
|
};
|
|
const [value, setValue] = useState('temp1');
|
|
const handleChange = (event) => {
|
setValue(event.target.value);
|
};
|
|
const handlePrint = () => {
|
// handleClose()
|
reactToPrintFn()
|
};
|
|
return (
|
<Dialog open={open} maxWidth="sm" fullWidth>
|
<DialogCloseButton onClose={handleClose} />
|
<DialogTitle>{translate('toolbar.print')}</DialogTitle>
|
<DialogContent >
|
<FormControl >
|
<RadioGroup
|
row
|
aria-labelledby="demo-controlled-radio-buttons-group"
|
name="controlled-radio-buttons-group"
|
value={value}
|
onChange={handleChange}
|
size="small"
|
sx={{ justifyContent: 'center' }}
|
>
|
<FormControlLabel value="temp1" control={<Radio />} label="模板1" size="small" />
|
</RadioGroup>
|
</FormControl>
|
|
<Box>
|
<div ref={contentRef} style={{ display: 'flex', justifyContent: 'center' }}>
|
<table
|
className="contain"
|
style={{
|
overflow: 'hidden',
|
fontSize: 'small',
|
tableLayout: 'fixed',
|
width: '280px',
|
borderCollapse: 'collapse', // 合并边框
|
border: '1px solid black' // 设置表格整体边框
|
}}
|
>
|
<tbody>
|
<tr style={{ height: '74px' }}>
|
<td
|
align="center"
|
colSpan={3}
|
style={{ border: '1px solid black' }} // 设置单元格边框
|
>
|
商品编码
|
</td>
|
<td
|
align="center"
|
className="barcode"
|
colSpan={9}
|
style={{ border: '1px solid black' }}
|
>
|
{/* <img className="template-code" src={barcodeUrl} style={{ width: '90%' }} alt="Barcode" /> */}
|
<div style={{ letterSpacing: '2px', marginTop: '1px', textAlign: 'center' }}>
|
<span>{'matnr'}</span>
|
</div>
|
</td>
|
</tr>
|
<tr style={{ height: '74px' }}>
|
<td
|
align="center"
|
colSpan={3}
|
style={{ border: '1px solid black' }}
|
>
|
商品
|
</td>
|
<td
|
align="center"
|
colSpan={5}
|
style={{
|
overflow: 'hidden',
|
whiteSpace: 'nowrap',
|
textOverflow: 'ellipsis',
|
border: '1px solid black'
|
}}
|
>
|
{'maktx'}
|
</td>
|
<td
|
align="center"
|
colSpan={2}
|
style={{ border: '1px solid black' }}
|
>
|
备注
|
</td>
|
<td
|
align="center"
|
colSpan={2}
|
style={{ border: '1px solid black' }}
|
>
|
{'memo'}
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</Box>
|
</DialogContent>
|
<DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
|
<Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
|
<Button onClick={handlePrint} variant="contained" startIcon={<SaveIcon />}>
|
{translate('toolbar.confirm')}
|
</Button>
|
</Box>
|
</DialogActions>
|
</Dialog>
|
);
|
}
|
|
export default InitModal;
|
