import { useEffect, useState, createContext, useContext } from 'react';
|
import { Box, CircularProgress, Stack, Typography } from '@mui/material';
|
import Alert from '@mui/material/Alert';
|
import Dialog from '@mui/material/Dialog';
|
import DialogActions from '@mui/material/DialogActions';
|
import DialogContent from '@mui/material/DialogContent';
|
import DialogTitle from '@mui/material/DialogTitle';
|
import MuiLink from '@mui/material/Link';
|
import {
|
Button,
|
FileField,
|
FileInput,
|
Form,
|
Toolbar,
|
useRefresh,
|
useTranslate,
|
useNotify
|
} from 'react-admin';
|
import { Link } from 'react-router-dom';
|
import DialogCloseButton from './DialogCloseButton';
|
import { usePapaParse } from './usePapaParse';
|
import MatnrList from '../basicInfo/matnr/MatnrList';
|
import request from '@/utils/request'
|
import ImportExportOutlinedIcon from '@mui/icons-material/ImportExportOutlined';
|
const ImportModal = ({ open, onClose, importTemp, useCodeImport, onceBatch = 10, value, parmas = {}}) => {
|
const refresh = useRefresh();
|
const translate = useTranslate();
|
|
// const { processBatch } = useCodeImport();
|
const { importer, parseCsv, reset } = usePapaParse({
|
batchSize: onceBatch,
|
// processBatch,
|
});
|
|
const [file, setFile] = useState(null);
|
const notify = useNotify();
|
|
useEffect(() => {
|
if (importer.state === 'complete') {
|
refresh();
|
}
|
}, [importer.state, refresh]);
|
|
const handleFileChange = (file) => {
|
setFile(file);
|
};
|
|
const startImport = async () => {
|
if (!file) {
|
return;
|
}
|
const form = new FormData();
|
for (const key in parmas) {
|
if (parmas.hasOwnProperty(key)) {
|
form.append(key, parmas[key]);
|
}
|
}
|
form.append('file', file);
|
const { data: { code, data, msg } } = await request.post(`/${value}/import`, form)
|
if (code === 200) {
|
handleClose()
|
notify(msg);
|
refresh()
|
} else {
|
handleClose()
|
notify(msg);
|
refresh()
|
}
|
|
};
|
|
const handleClose = () => {
|
reset();
|
onClose();
|
};
|
|
const handleReset = (e) => {
|
e.preventDefault();
|
reset();
|
};
|
|
const downloadTemplate = async (type) => {
|
const res = await request.post(`/${value}/template/download`, {}, {
|
responseType: "blob",
|
})
|
const url = window.URL.createObjectURL(
|
new Blob([res.data], { type: res.headers["content-type"] }),
|
);
|
|
const link = document.createElement("a");
|
link.href = url;
|
link.setAttribute("download", `${value}.xlsx`);
|
document.body.appendChild(link);
|
link.click();
|
link.remove();
|
}
|
|
return (
|
<Dialog open={open} maxWidth="md" fullWidth>
|
<DialogCloseButton onClose={handleClose} />
|
<DialogTitle>{translate('common.action.import.title')}</DialogTitle>
|
<DialogContent>
|
<Form>
|
<Stack spacing={2}>
|
{importer.state === 'running' && (
|
<Stack gap={2}>
|
<Alert
|
severity="info"
|
action={
|
<Box
|
sx={{
|
display: 'flex',
|
height: '100%',
|
alignItems: 'center',
|
padding: '0',
|
}}
|
>
|
<CircularProgress size={20} />
|
</Box>
|
}
|
sx={{
|
alignItems: 'center',
|
'& .MuiAlert-action': {
|
padding: 0,
|
marginRight: 0,
|
},
|
}}
|
>
|
{translate('common.action.import.tips')}
|
</Alert>
|
<Typography variant="body2">
|
Imported{' '}
|
<strong>
|
{importer.importCount} /{' '}
|
{importer.rowCount}
|
</strong>{' '}
|
contacts, with{' '}
|
<strong>{importer.errorCount}</strong>{' '}
|
errors.
|
{importer.remainingTime !== null && (
|
<>
|
{' '}
|
Estimated remaining time:{' '}
|
<strong>
|
{millisecondsToTime(
|
importer.remainingTime
|
)}
|
</strong>
|
.{' '}
|
<MuiLink
|
href="#"
|
onClick={handleReset}
|
color="error"
|
>
|
{translate('common.action.import.stop')}
|
</MuiLink>
|
</>
|
)}
|
</Typography>
|
</Stack>
|
)}
|
|
{importer.state === 'error' && (
|
<Alert severity="error">
|
{translate('common.action.import.err')}
|
</Alert>
|
)}
|
|
{importer.state === 'complete' && (
|
<Alert severity="success">
|
{translate('common.action.import.result', {
|
success: importer.importCount,
|
error: importer.errorCount
|
})}
|
</Alert>
|
)}
|
|
{importer.state === 'idle' && (
|
<>
|
<Alert
|
severity="info"
|
action={
|
<MatnrList.Context.Consumer>
|
{context => (
|
<Button
|
component={Link}
|
onClick={() => {
|
downloadTemplate(context)
|
}}
|
label="common.action.import.download"
|
color="info"
|
to={importTemp}
|
download={'import_template.csv'}
|
/>
|
)}
|
|
</MatnrList.Context.Consumer>
|
}
|
>
|
{translate('common.action.import.msg')}
|
</Alert>
|
|
<FileInput
|
source="xlsx"
|
label="Xlsx File"
|
accept={{ 'text/xlsx': ['.xls', '.xlsx'] }}
|
onChange={handleFileChange}
|
>
|
<FileField source="src" title="title" />
|
</FileInput>
|
</>
|
)}
|
</Stack>
|
</Form>
|
</DialogContent>
|
<DialogActions
|
sx={{
|
p: 0,
|
justifyContent: 'flex-start',
|
}}
|
>
|
<Toolbar
|
sx={{
|
width: '100%',
|
justifyContent: 'end'
|
}}
|
>
|
{importer.state === 'idle' ? (
|
<>
|
<Button
|
label="common.action.import.title"
|
variant="contained"
|
startIcon={<ImportExportOutlinedIcon />}
|
size='medium'
|
onClick={startImport}
|
disabled={!file}
|
/>
|
</>
|
) : (
|
<Button
|
label="ra.action.close"
|
onClick={handleClose}
|
disabled={importer.state === 'running'}
|
/>
|
)}
|
</Toolbar>
|
</DialogActions>
|
</Dialog>
|
);
|
}
|
{/**下载打印模板，传入type类型，调用下载模板接口 */ }
|
|
|
function millisecondsToTime(ms) {
|
var seconds = Math.floor((ms / 1000) % 60);
|
var minutes = Math.floor((ms / (60 * 1000)) % 60);
|
|
return `${minutes}m ${seconds}s`;
|
}
|
|
export default ImportModal;
|
