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; 
 |