|  |  | 
 |  |  |     SelectInput, | 
 |  |  |     ReferenceInput, | 
 |  |  |     ReferenceArrayInput, | 
 |  |  |     DatagridConfigurable, | 
 |  |  |     AutocompleteInput, | 
 |  |  |     Toolbar, | 
 |  |  |     required, | 
 |  |  |     useDataProvider, | 
 |  |  |     TextField, | 
 |  |  |     NumberField, | 
 |  |  |     ReferenceField, | 
 |  |  |     BooleanField, | 
 |  |  |     useNotify, | 
 |  |  |     useSelectAll, | 
 |  |  |     Form, | 
 |  |  |     useCreateController, | 
 |  |  |     useListContext, | 
 |  |  |     SearchInput, | 
 |  |  |     useRefresh, | 
 |  |  |     SelectArrayInput | 
 |  |  |     List, | 
 |  |  |     SelectArrayInput, | 
 |  |  |     useListController | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { | 
 |  |  |     Dialog, | 
 |  |  | 
 |  |  |     DialogContent, | 
 |  |  |     DialogTitle, | 
 |  |  |     Grid, | 
 |  |  |     TextField, | 
 |  |  |     Box, | 
 |  |  |     Button, | 
 |  |  |     Paper, | 
 |  |  | 
 |  |  | import { DataGrid } from '@mui/x-data-grid'; | 
 |  |  | 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': { | 
 |  |  |         height: '.9em' | 
 |  |  |     }, | 
 |  |  |     '& .RaDatagrid-row': { | 
 |  |  |         cursor: 'auto' | 
 |  |  |     }, | 
 |  |  |     '& .column-name': { | 
 |  |  |     }, | 
 |  |  | })); | 
 |  |  |  | 
 |  |  | const filters = [ | 
 |  |  |     <SearchInput source="condition" alwaysOn />, | 
 |  |  | ] | 
 |  |  |  | 
 |  |  | const MatnrModal = ({ open, setOpen }) => { | 
 |  |  |     const refresh = useRefresh(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const notify = useNotify(); | 
 |  |  |  | 
 |  |  |     const [formData, setFormData] = useState({ | 
 |  |  | 
 |  |  |         matnrId: null, | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     const { selectedIds, onUnselectItems } = useListContext(); | 
 |  |  |  | 
 |  |  |     const { selectedIds, onUnselectItems, onSelectAll } = useListContext(); | 
 |  |  |     const handleClose = (event, reason) => { | 
 |  |  |         if (reason !== "backdropClick") { | 
 |  |  |             setOpen(false); | 
 |  |  | 
 |  |  |             ...prevData, | 
 |  |  |             [name]: value | 
 |  |  |         })); | 
 |  |  |         refresh() | 
 |  |  |         refresh(); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const removeEmptyKeys = (obj) => { | 
 |  |  | 
 |  |  |         const parmas = { | 
 |  |  |             locId: selectedIds, | 
 |  |  |             areaMatId: formData.areaMatId, | 
 |  |  |             groupId: formData.groupId, | 
 |  |  |             matnrId: formData.matnrId, | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         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) | 
 |  |  |     } | 
 |  |  | 
 |  |  |                 <DialogCloseButton onClose={handleClose} /> | 
 |  |  |                 <DialogTitle>{translate('toolbar.bindmatnr')}</DialogTitle> | 
 |  |  |                 <DialogContent sx={{ mt: 2 }}> | 
 |  |  |                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> | 
 |  |  |                         <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="locArea" | 
 |  |  |                                     reference="locAreaMat" | 
 |  |  |                                 > | 
 |  |  |                                     <AutocompleteInput | 
 |  |  |                                         label="table.field.loc.locAreaId" | 
 |  |  |                                         optionText="name" | 
 |  |  |                                         optionText="code" | 
 |  |  |                                         onChange={(value) => handleChange(value, 'areaMatId')} | 
 |  |  |                                         value={formData.areaMatId} | 
 |  |  |                                         validate={required()} | 
 |  |  |                                         filterToQuery={(val) => ({ name: val })} | 
 |  |  |                                         filterToQuery={(val) => ({ code: val })} | 
 |  |  |                                     /> | 
 |  |  |                                 </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 item xs={4}> | 
 |  |  |                             <Grid  item xs={3}> | 
 |  |  |                                 {/* </Grid> */} | 
 |  |  |                                 {/* <Grid item xs={4}> */} | 
 |  |  |                                 {/* <List | 
 |  |  |                                 resource="matnr" | 
 |  |  |                                 filter={{ groupId: formData.groupId }} | 
 |  |  |                                 storeKey="matnrSelectList" | 
 |  |  |                                 filters={filters} | 
 |  |  |                                 empty={false} | 
 |  |  |                                 actions={<></>} | 
 |  |  |                             > | 
 |  |  |                                 <StyledDatagrid | 
 |  |  |                                     preferenceKey='matnr' | 
 |  |  |                                     bulkActionButtons={<> <SelectMatnrs></SelectMatnrs> </>} | 
 |  |  |                                     rowClick={false} | 
 |  |  |                                     omit={['id', 'createTime', 'createBy', 'memo', 'poDetlId', 'matnrId', 'asnId']} | 
 |  |  |                                 > | 
 |  |  |                                     <NumberField key="id" source="id" />, | 
 |  |  |                                     <TextField key="name" source="name" label="table.field.matnr.name" />, | 
 |  |  |                                     <TextField key="code" source="code" label="table.field.matnr.code" />, | 
 |  |  |                                     <ReferenceField key="groupId" source="groupId" label="table.field.matnr.groupId" reference="matnrGroup" link={false} sortable={false}> | 
 |  |  |                                         <TextField source="name" /> | 
 |  |  |                                     </ReferenceField>, | 
 |  |  |                                     <TextField key="spec" source="spec" label="table.field.matnr.spec" />, | 
 |  |  |                                     <TextField key="model" source="model" label="table.field.matnr.model" />, | 
 |  |  |                                     <NumberField key="nromNum" source="nromNum" label="table.field.matnr.nromNum" />, | 
 |  |  |                                     <TextField key="stockLeval$" source="stockLeval$" label="table.field.matnr.stockLevel" sortable={false} />, | 
 |  |  |                                     <TextField key="flagLabelMange$" source="flagLabelMange$" label="table.field.matnr.isLabelMange" sortable={false} />, | 
 |  |  |                                     <NumberField key="safeQty" source="safeQty" label="table.field.matnr.safeQty" />, | 
 |  |  |                                     <NumberField key="minQty" source="minQty" label="table.field.matnr.minQty" />, | 
 |  |  |                                     <NumberField key="maxQty" source="maxQty" label="table.field.matnr.maxQty" />, | 
 |  |  |                                     <NumberField key="validWarn" source="validWarn" label="table.field.matnr.validWarn" />, | 
 |  |  |                                     <BooleanField key="flagCheck" source="flagCheck" label="table.field.matnr.flagCheck" sortable={false} />, | 
 |  |  |                                     <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" | 
 |  |  |                                         validate={required()} | 
 |  |  |                                         value={formData.matnrId} | 
 |  |  |                                         onChange={(e) => handleChange(e.target.value, 'matnrId')} | 
 |  |  |                                     /> | 
 |  |  |                                 </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' }}> | 
 |  |  |                     <Box sx={{ width: '100%', display: 'flex', justifyContent: 'end' }}> | 
 |  |  |                         <Button type="submit" variant="contained" startIcon={<SaveIcon />}> | 
 |  |  |                             {translate('toolbar.confirm')} | 
 |  |  |                         </Button> | 
 |  |  | 
 |  |  |     ); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | export default MatnrModal; | 
 |  |  | export default MatnrModal; | 
 |  |  |  | 
 |  |  | const SelectMatnrs = () => { | 
 |  |  |     const { selectedIds, data, isPending, onUnselectItems } = useListContext(); | 
 |  |  |     const clickMatnrs = () => { | 
 |  |  |         console.log(selectedIds); | 
 |  |  |         onUnselectItems() | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Button label={"toolbar.confirmSelect"} onClick={clickMatnrs}> | 
 |  |  |             <ConfirmationNumber /> | 
 |  |  |         </Button> | 
 |  |  |     ) | 
 |  |  | } |