|  |  | 
 |  |  |     Form, | 
 |  |  |     useCreateController, | 
 |  |  |     useListContext, | 
 |  |  |     SearchInput, | 
 |  |  |     useRefresh, | 
 |  |  |     List, | 
 |  |  |     SelectArrayInput | 
 |  |  |     SelectArrayInput, | 
 |  |  |     useListController | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { | 
 |  |  |     Dialog, | 
 |  |  | 
 |  |  | import StatusSelectInput from "../../components/StatusSelectInput"; | 
 |  |  | import TreeSelectInput from "@/page/components/TreeSelectInput"; | 
 |  |  | import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_ITEM_PAGE_SIZE } from '@/config/setting'; | 
 |  |  |  | 
 |  |  | import ConfirmationNumber from '@mui/icons-material/ConfirmationNumber'; | 
 |  |  |  | 
 |  |  | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ | 
 |  |  |     '& .css-1vooibu-MuiSvgIcon-root': { | 
 |  |  | 
 |  |  |     }, | 
 |  |  | })); | 
 |  |  |  | 
 |  |  | const filters = [ | 
 |  |  |     <SearchInput source="condition" alwaysOn />, | 
 |  |  | ] | 
 |  |  |  | 
 |  |  | const MatnrModal = ({ open, setOpen }) => { | 
 |  |  |     const refresh = useRefresh(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const [options, setOptions] = useState({ | 
 |  |  |         condition: null | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     const [formData, setFormData] = useState({ | 
 |  |  |         areaMatId: null, | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Dialog open={open} maxWidth="xl" fullWidth> | 
 |  |  |         <Dialog open={open} maxWidth="md" fullWidth> | 
 |  |  |             <Form onSubmit={handleSubmit}> | 
 |  |  |                 <DialogCloseButton onClose={handleClose} /> | 
 |  |  |                 <DialogTitle>{translate('toolbar.bindmatnr')}</DialogTitle> | 
 |  |  |                 <DialogContent sx={{ mt: 2 }}> | 
 |  |  |                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, height: 700 }}> | 
 |  |  |                         <Grid container spacing={2}> | 
 |  |  |                             <Grid item xs={4}> | 
 |  |  |                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, height: 200 }}> | 
 |  |  |                         <Grid container spacing={3}> | 
 |  |  |                             <Grid item xs={3}> | 
 |  |  |                                 <ReferenceInput | 
 |  |  |                                     source="areaMatId" | 
 |  |  |                                     reference="locAreaMat" | 
 |  |  | 
 |  |  |                                     /> | 
 |  |  |                                 </ReferenceInput> | 
 |  |  |                             </Grid> | 
 |  |  |                             <Grid item xs={4}> | 
 |  |  |                             <Grid item xs={3}> | 
 |  |  |                                 <TreeSelectInput | 
 |  |  |                                     label="table.field.locAreaMatRela.groupId" | 
 |  |  |                                     resource={'matnrGroup'} | 
 |  |  | 
 |  |  |                                     onChange={(e) => handleChange(e.target.value, 'groupId')} | 
 |  |  |                                 /> | 
 |  |  |                             </Grid> | 
 |  |  |  | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={4}> | 
 |  |  |                             <List | 
 |  |  |                             <Grid  item xs={3}> | 
 |  |  |                                 {/* </Grid> */} | 
 |  |  |                                 {/* <Grid item xs={4}> */} | 
 |  |  |                                 {/* <List | 
 |  |  |                                 resource="matnr" | 
 |  |  |                                 filter={{ groupId: formData.groupId }} | 
 |  |  |                                 storeKey="matnrSelectList" | 
 |  |  |                                 filters={filters} | 
 |  |  |                                 empty={false} | 
 |  |  |                                 queryOptions={{options}} | 
 |  |  |                                 actions={<></>} | 
 |  |  |                             > | 
 |  |  |                                 <StyledDatagrid | 
 |  |  |                                     preferenceKey='matnr' | 
 |  |  |                                     bulkActionButtons={<></>} | 
 |  |  |                                     bulkActionButtons={<> <SelectMatnrs></SelectMatnrs> </>} | 
 |  |  |                                     rowClick={false} | 
 |  |  |                                     omit={['id', 'createTime', 'createBy', 'memo', 'poDetlId', 'matnrId', 'asnId']} | 
 |  |  |                                 > | 
 |  |  | 
 |  |  |                                     <BooleanField key="statusBool" source="statusBool" label="common.field.status" sortable={false} />, | 
 |  |  |                                     <TextField key="memo" source="memo" label="common.field.memo" sortable={false} />, | 
 |  |  |                                 </StyledDatagrid> | 
 |  |  |                             </List> | 
 |  |  |                             {/* <ReferenceArrayInput source="matnrId" reference="matnr" filter={{ groupId: formData.groupId }}> | 
 |  |  |                                 <SelectArrayInput | 
 |  |  |                                     label="table.field.locAreaMatRela.matnrId" | 
 |  |  |                                     value={formData.matnrId} | 
 |  |  |                                     onChange={(e) => handleChange(e.target.value, 'matnrId')} | 
 |  |  |                                 /> | 
 |  |  |                             </ReferenceArrayInput> */} | 
 |  |  |                             </List> */} | 
 |  |  |                                 <ReferenceArrayInput source="matnrId" reference="matnr" filter={{ groupId: formData.groupId }}> | 
 |  |  |                                     <SelectArrayInput | 
 |  |  |                                         label="table.field.locAreaMatRela.matnrId" | 
 |  |  |                                         value={formData.matnrId} | 
 |  |  |                                         onChange={(e) => handleChange(e.target.value, 'matnrId')} | 
 |  |  |                                     /> | 
 |  |  |                                 </ReferenceArrayInput> | 
 |  |  |                             </Grid> | 
 |  |  |                         </Grid> | 
 |  |  |                     </Box> | 
 |  |  |                 </DialogContent> | 
 |  |  | 
 |  |  |     ); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | export default MatnrModal; | 
 |  |  | export default MatnrModal; | 
 |  |  |  | 
 |  |  | const SelectMatnrs = () => { | 
 |  |  |     const { selectedIds, data, isPending, onUnselectItems } = useListContext(); | 
 |  |  |     const clickMatnrs = () => { | 
 |  |  |         onUnselectItems() | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Button label={"toolbar.confirmSelect"} onClick={clickMatnrs}> | 
 |  |  |             <ConfirmationNumber /> | 
 |  |  |         </Button> | 
 |  |  |     ) | 
 |  |  | } |