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,
|
useRefresh,
|
} from 'react-admin';
|
import {
|
Dialog,
|
DialogActions,
|
DialogContent,
|
DialogTitle,
|
Stack,
|
Grid,
|
TextField,
|
Box,
|
Button,
|
Paper,
|
TableContainer,
|
Table,
|
TableHead,
|
TableBody,
|
TableRow,
|
TableCell,
|
Checkbox,
|
styled
|
|
|
} from '@mui/material';
|
import DialogCloseButton from "../components/DialogCloseButton";
|
import StatusSelectInput from "../components/StatusSelectInput";
|
import ConfirmButton from "../components/ConfirmButton";
|
import MemoInput from "../components/MemoInput";
|
import { useForm, Controller, useWatch, FormProvider, useFormContext } from "react-hook-form";
|
import SaveIcon from '@mui/icons-material/Save';
|
import request from '@/utils/request';
|
const AsnWareModal = (props) => {
|
const { open, setOpen } = props;
|
|
const translate = useTranslate();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
const asnId = ''
|
|
const handleClose = (event, reason) => {
|
if (reason !== "backdropClick") {
|
setOpen(false);
|
}
|
};
|
|
const [formData, setFormData] = useState({
|
type: '',
|
wkType: ''
|
});
|
|
const [tabelData, setTableData] = useState([{ id: 1 }, { id: 2 }]);
|
const [selectedRows, setSelectedRows] = useState([]);
|
|
const handleChange = (e) => {
|
const { name, value } = e.target;
|
setFormData((prevData) => ({
|
...prevData,
|
[name]: value
|
}));
|
};
|
|
const handleSubmit = () => {
|
console.log(formData);
|
};
|
|
|
|
const handleSearch = () => {
|
};
|
|
return (
|
<Dialog
|
open={open}
|
onClose={handleClose}
|
aria-labelledby="form-dialog-title"
|
fullWidth
|
disableRestoreFocus
|
maxWidth="lg" // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
>
|
<DialogTitle id="form-dialog-title" sx={{
|
position: 'sticky',
|
top: 0,
|
backgroundColor: 'background.paper',
|
zIndex: 1000
|
}}>
|
选择物料
|
<Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
|
<DialogCloseButton onClose={handleClose} />
|
</Box>
|
</DialogTitle>
|
<DialogContent sx={{ mt: 2 }}>
|
<Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
<Grid container spacing={2}>
|
<Grid item xs={4}>
|
<TextField
|
label={translate('table.field.asnOrder.type')}
|
name="type"
|
value={formData.type}
|
onChange={handleChange}
|
variant="outlined"
|
size="small"
|
/>
|
</Grid>
|
|
<Grid item xs={4}>
|
<TextField
|
label={translate('table.field.asnOrder.wkType')}
|
name="wkType"
|
value={formData.wkType}
|
onChange={handleChange}
|
variant="outlined"
|
size="small"
|
/>
|
</Grid>
|
</Grid>
|
</Box>
|
|
<Box sx={{ mt: 2 }}>
|
<Stack direction="row" spacing={2}>
|
<Button variant="contained" onClick={handleSearch}>搜索</Button>
|
</Stack>
|
|
</Box>
|
|
<Box sx={{ mt: 2 }}>
|
<AsnWareModalTable tabelData={tabelData} setTableData={setTableData} selectedRows={selectedRows}
|
setSelectedRows={setSelectedRows}></AsnWareModalTable>
|
</Box>
|
</DialogContent>
|
<DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
|
<Toolbar sx={{ width: '100%', justifyContent: 'space-between' }} >
|
<Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}>
|
确认
|
</Button>
|
</Toolbar>
|
</DialogActions>
|
|
|
</Dialog>
|
)
|
}
|
|
export default AsnWareModal;
|
|
const AsnWareModalTable = ({ tabelData, setTableData }) => {
|
const translate = useTranslate();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
|
const [selected, setSelected] = React.useState([]);
|
|
const columns = [
|
{
|
id: 'id',
|
label: 'ID',
|
minWidth: 100
|
},
|
{
|
id: 'name',
|
label: 'table.field.matnr.name',
|
minWidth: 100
|
},
|
{
|
id: 'code',
|
label: 'table.field.matnr.code',
|
minWidth: 100
|
},
|
{
|
id: 'spec',
|
label: 'table.field.matnr.spec',
|
minWidth: 100
|
},
|
{
|
id: 'model',
|
label: 'table.field.matnr.model',
|
minWidth: 100
|
},
|
{
|
id: 'weight',
|
label: 'table.field.matnr.weight',
|
minWidth: 100
|
},
|
{
|
id: 'color',
|
label: 'table.field.matnr.color',
|
minWidth: 100
|
},
|
{
|
id: 'size',
|
label: 'table.field.matnr.size',
|
minWidth: 100
|
},
|
{
|
id: 'describle',
|
label: 'table.field.matnr.describle',
|
minWidth: 100
|
},
|
{
|
id: 'nromNum',
|
label: 'table.field.matnr.nromNum',
|
minWidth: 100
|
},
|
{
|
id: 'unit',
|
label: 'table.field.matnr.unit',
|
minWidth: 100
|
},
|
{
|
id: 'purchaseUnit',
|
label: 'table.field.matnr.purUnit',
|
minWidth: 100
|
},
|
{
|
id: 'stockUnit',
|
label: 'table.field.matnr.stockUnit',
|
minWidth: 100
|
},
|
{
|
id: 'stockLeval$',
|
label: 'table.field.matnr.stockLevel',
|
minWidth: 100,
|
sortable: false
|
},
|
|
|
];
|
|
const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
"& .MuiButtonBase-root.": {
|
padding: "0px 0px",
|
},
|
}));
|
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
"& .MuiButtonBase-root": {
|
padding: "0px 0px",
|
},
|
overflow: "hidden",
|
textOverflow: "ellipsis",
|
whiteSpace: "nowrap",
|
maxWidth: 600,
|
}));
|
|
const handleClick = (event, id) => {
|
const selectedIndex = selected.indexOf(id);
|
let newSelected = [];
|
|
if (selectedIndex === -1) {
|
newSelected = newSelected.concat(selected, id);
|
} else if (selectedIndex === 0) {
|
newSelected = newSelected.concat(selected.slice(1));
|
} else if (selectedIndex === selected.length - 1) {
|
newSelected = newSelected.concat(selected.slice(0, -1));
|
} else if (selectedIndex > 0) {
|
newSelected = newSelected.concat(
|
selected.slice(0, selectedIndex),
|
selected.slice(selectedIndex + 1),
|
);
|
}
|
setSelected(newSelected);
|
};
|
|
// const handleSelectAllClick = (event) => {
|
// if (event.target.checked) {
|
// const newSelected = tabelData.map((n) => n.id);
|
// setSelected(newSelected);
|
// return;
|
// }
|
// setSelected([]);
|
// };
|
|
return (
|
<TableContainer component={Paper} >
|
<Table size="small" >
|
<TableHead>
|
<StyledTableRow key={'head'}>
|
<TableCell padding="checkbox">
|
<Checkbox
|
color="primary"
|
/>
|
</TableCell>
|
{columns.map((column) => {
|
const value = column.label;
|
return (
|
<StyledTableCell
|
key={column.id}
|
align={column.align || "left"}
|
>
|
{column.format ? column.format(value) : translate(value)}
|
</StyledTableCell>
|
);
|
|
})}
|
</StyledTableRow>
|
</TableHead>
|
|
<TableBody>
|
|
{tabelData.map((row) => {
|
const isItemSelected = selected.includes(row.id);
|
return (<StyledTableRow key={row.id || Math.random()} aria-checked={isItemSelected} selected={isItemSelected} onClick={(event) => handleClick(event, row.id)}>
|
<TableCell padding="checkbox">
|
<Checkbox
|
color="primary"
|
checked={isItemSelected}
|
/>
|
</TableCell>
|
{columns.map((column) => (
|
<StyledTableCell key={column.id} >
|
{row[column.id]}
|
</StyledTableCell>
|
))}
|
</StyledTableRow>)
|
})}
|
|
</TableBody>
|
</Table>
|
</TableContainer>
|
)
|
}
|
