| 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, | 
|     SelectArrayInput | 
| } from 'react-admin'; | 
| import { | 
|     Dialog, | 
|     DialogActions, | 
|     DialogContent, | 
|     DialogTitle, | 
|     Grid, | 
|     TextField, | 
|     Box, | 
|     Button, | 
|     Paper, | 
|     TableContainer, | 
|     Table, | 
|     TableHead, | 
|     TableBody, | 
|     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 TreeSelectInput from "@/page/components/TreeSelectInput"; | 
| const MatnrModal = ({ open, setOpen }) => { | 
|     const refresh = useRefresh(); | 
|     const translate = useTranslate(); | 
|   | 
|   | 
|     const notify = useNotify(); | 
|   | 
|     const [formData, setFormData] = useState({ | 
|         areaMatId: null, | 
|         areaId: null, | 
|         locId: null, | 
|     }); | 
|   | 
|     const { selectedIds, onUnselectItems } = useListContext(); | 
|   | 
|     const handleClose = (event, reason) => { | 
|         if (reason !== "backdropClick") { | 
|             setOpen(false); | 
|             reset() | 
|             refresh(); | 
|             onUnselectItems() | 
|         } | 
|     }; | 
|   | 
|     const reset = () => { | 
|         setFormData({ | 
|             areaMatId: null, | 
|             areaId: null, | 
|             locId: null, | 
|         }) | 
|     } | 
|   | 
|     const handleReset = (e) => { | 
|         e.preventDefault(); | 
|     }; | 
|   | 
|     const handleChange = (value, name) => { | 
|         setFormData((prevData) => ({ | 
|             ...prevData, | 
|             [name]: value | 
|         })); | 
|         refresh() | 
|     }; | 
|   | 
|     const removeEmptyKeys = (obj) => { | 
|         return _.pickBy(obj, (value) => { | 
|             if (_.isObject(value)) { | 
|                 const newObj = removeEmptyKeys(value); | 
|                 return !_.isEmpty(newObj); | 
|             } | 
|             return !_.isNil(value) && (_.isNumber(value) ? value !== 0 : !_.isEmpty(value)); | 
|         }); | 
|     } | 
|   | 
|     const handleSubmit = async () => { | 
|         const parmas = { | 
|             matnrId: selectedIds, | 
|             areaMatId: formData.areaMatId, | 
|             areaId: formData.areaId, | 
|             locId: formData.locId, | 
|         } | 
|   | 
|         const res = await request.post(`/locAreaMatRela/matnr/bind`, parmas); | 
|         if (res?.data?.code === 200) { | 
|             handleClose() | 
|   | 
|         } else { | 
|             notify(res.data.msg); | 
|         } | 
|   | 
|   | 
|     } | 
|   | 
|     const [groupId, setGroupId] = useState(); | 
|   | 
|     const warehouseChange = (e) => { | 
|         setGroupId(e.target.value) | 
|     } | 
|   | 
|     return ( | 
|         <Dialog open={open} maxWidth="md" fullWidth> | 
|             <Form onSubmit={handleSubmit}> | 
|                 <DialogCloseButton onClose={handleClose} /> | 
|                 <DialogTitle>{translate('toolbar.bindloc')}</DialogTitle> | 
|                 <DialogContent sx={{ mt: 2 }}> | 
|                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> | 
|                         <Grid container spacing={2}> | 
|                             <Grid item xs={4}> | 
|                                 <ReferenceInput | 
|                                     source="areaMatId" | 
|                                     reference="locAreaMat" | 
|                                 > | 
|                                     <AutocompleteInput | 
|                                         label="table.field.loc.locAreaId" | 
|                                         optionText="code" | 
|                                         onChange={(value) => handleChange(value, 'areaMatId')} | 
|                                         value={formData.areaMatId} | 
|                                         validate={required()} | 
|                                         filterToQuery={(val) => ({ code: val })} | 
|                                     /> | 
|                                 </ReferenceInput> | 
|                             </Grid> | 
|   | 
|                             <Grid item xs={4}> | 
|                                 <ReferenceInput | 
|                                     source="areaId" | 
|                                     reference="warehouseAreas" | 
|                                 > | 
|                                     <AutocompleteInput | 
|                                         label="table.field.loc.areaId" | 
|                                         optionText="name" | 
|                                         onChange={(value) => handleChange(value, 'areaId')} | 
|                                         value={formData.areaId} | 
|                                         validate={required()} | 
|                                         filterToQuery={(val) => ({ name: val })} | 
|                                     /> | 
|                                 </ReferenceInput> | 
|   | 
|                             </Grid> | 
|   | 
|   | 
|                             <Grid item xs={4}> | 
|                                 <ReferenceArrayInput source="locId" reference="loc" filter={{ areaId: formData.areaId }}> | 
|                                     <SelectArrayInput | 
|                                         label="table.field.locAreaMatRela.locId" | 
|                                         validate={required()} | 
|                                         optionText={'code'} | 
|                                         value={formData.locId} | 
|                                         onChange={(e) => handleChange(e.target.value, 'locId')} | 
|                                     /> | 
|                                 </ReferenceArrayInput> | 
|   | 
|                             </Grid> | 
|   | 
|                         </Grid> | 
|   | 
|                     </Box> | 
|                 </DialogContent> | 
|                 <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> | 
|                     <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}> | 
|                         <Button type="submit" variant="contained" startIcon={<SaveIcon />}> | 
|                             {translate('toolbar.confirm')} | 
|                         </Button> | 
|                     </Box> | 
|                 </DialogActions> | 
|             </Form> | 
|         </Dialog> | 
|     ); | 
| } | 
|   | 
| export default MatnrModal; |