|  |  | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { | 
 |  |  |     Edit, | 
 |  |  |     SimpleForm, | 
 |  |  |     FormDataConsumer, | 
 |  |  |     CreateBase, | 
 |  |  |     useTranslate, | 
 |  |  |     TextInput, | 
 |  |  |     NumberInput, | 
 |  |  |     BooleanInput, | 
 |  |  |     DateInput, | 
 |  |  |     SaveButton, | 
 |  |  |     SelectInput, | 
 |  |  |     ReferenceInput, | 
 |  |  |     ReferenceArrayInput, | 
 |  |  |     AutocompleteInput, | 
 |  |  |     SaveButton, | 
 |  |  |     Toolbar, | 
 |  |  |     required, | 
 |  |  |     useNotify, | 
 |  |  |     Form, | 
 |  |  |     useUpdate, | 
 |  |  |     useCreate, | 
 |  |  |     useCreateContext, | 
 |  |  |     Labeled, | 
 |  |  |     NumberField, | 
 |  |  |     required, | 
 |  |  |     useRecordContext, | 
 |  |  |     DeleteButton, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { useWatch, useFormContext } from "react-hook-form"; | 
 |  |  | import { Stack, Grid, Box, Typography } from '@mui/material'; | 
 |  |  | import { | 
 |  |  |     Dialog, | 
 |  |  |     DialogActions, | 
 |  |  |     DialogContent, | 
 |  |  |     DialogTitle, | 
 |  |  |     Stack, | 
 |  |  |     Grid, | 
 |  |  |     Box, | 
 |  |  |     TextField | 
 |  |  | } from '@mui/material'; | 
 |  |  | import DialogCloseButton from "@/page/components/DialogCloseButton"; | 
 |  |  | import TreeSelectInput from "@/page/components/TreeSelectInput"; | 
 |  |  | import { useWatch, useFormContext, useFieldArray } from "react-hook-form"; | 
 |  |  | import * as Common from '@/utils/common'; | 
 |  |  | import { EDIT_MODE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting'; | 
 |  |  | import EditBaseAside from "@/page/components/EditBaseAside"; | 
 |  |  | import CustomerTopToolBar from "@/page/components/EditTopToolBar"; | 
 |  |  | import MemoInput from "@/page/components/MemoInput"; | 
 |  |  | import StatusSelectInput from "@/page/components/StatusSelectInput"; | 
 |  |  | import request from '@/utils/request'; | 
 |  |  |  | 
 |  |  | const FormToolbar = () => { | 
 |  |  |     const { getValues } = useFormContext(); | 
 |  |  | const EditContent = ({ editRecord }) => { | 
 |  |  |     const { resource } = useCreateContext(); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const formContext = useFormContext() | 
 |  |  |  | 
 |  |  |     const pChange = (val) => { | 
 |  |  |         if (val > 0) { | 
 |  |  |             http(val) | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     const http = async (val) => { | 
 |  |  |         const res = await request.post(`/matnrGroup/page`, { id: val }); | 
 |  |  |         const code = res.data.data.records[0].code || '' | 
 |  |  |  | 
 |  |  |         formContext.setValue('parCode', code) | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |     return ( | 
 |  |  |         <Toolbar sx={{ justifyContent: 'space-between' }}> | 
 |  |  |             <SaveButton /> | 
 |  |  |             <DeleteButton mutationMode="optimistic" /> | 
 |  |  |         </Toolbar> | 
 |  |  |         <Grid container rowSpacing={2} columnSpacing={2}> | 
 |  |  |             <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                 <TreeSelectInput | 
 |  |  |                     label="table.field.matnrGroup.parentId" | 
 |  |  |                     validate={[required()]} | 
 |  |  |                     isTranslate | 
 |  |  |                     resource={resource} | 
 |  |  |                     onChange={(e) => pChange(e.target.value)} | 
 |  |  |                     required | 
 |  |  |                 /> | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                 <TextInput | 
 |  |  |                     label="table.field.matnrGroup.parCode" | 
 |  |  |                     source="parCode" | 
 |  |  |                     readOnly | 
 |  |  |                 /> | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                 <TextInput | 
 |  |  |                     label="table.field.matnrGroup.name" | 
 |  |  |                     source="name" | 
 |  |  |                     parse={v => v} | 
 |  |  |                     validate={required()} | 
 |  |  |                 /> | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={6} display="flex" gap={1}> | 
 |  |  |                 <TextInput | 
 |  |  |                     label="table.field.matnrGroup.code" | 
 |  |  |                     source="code" | 
 |  |  |                     parse={v => v} | 
 |  |  |                     readOnly={!!editRecord} | 
 |  |  |                 /> | 
 |  |  |             </Grid> | 
 |  |  |         </Grid> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const MatnrGroupEdit = () => { | 
 |  |  | const MatnrGroupEdit = (props) => { | 
 |  |  |     const { editRecord, open, setOpen, callback, resource } = props; | 
 |  |  |  | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const notify = useNotify(); | 
 |  |  |  | 
 |  |  |     const [update] = useUpdate(); | 
 |  |  |     const [create] = useCreate(); | 
 |  |  |  | 
 |  |  |     const handleClose = (event, reason) => { | 
 |  |  |         if (reason !== "backdropClick") { | 
 |  |  |             setOpen(false); | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleSuccess = async (data) => { | 
 |  |  |         setOpen(false); | 
 |  |  |         callback(); | 
 |  |  |         notify('common.response.success', { type: 'info' }); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleError = async (data) => { | 
 |  |  |         notify('common.response.fail', { type: 'error' }); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const onSubmit = (data) => { | 
 |  |  |         const _params = { ...data }; | 
 |  |  |         if (editRecord) { | 
 |  |  |             if (_params.parentId === editRecord.id) { | 
 |  |  |                 notify('common.response.dataError', { type: 'error' }); | 
 |  |  |                 return; | 
 |  |  |             } | 
 |  |  |             update( | 
 |  |  |                 resource, | 
 |  |  |                 { | 
 |  |  |                     id: editRecord.id, | 
 |  |  |                     data: _params, | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     onSuccess: () => { | 
 |  |  |                         handleSuccess(); | 
 |  |  |                     }, | 
 |  |  |                     onError: (error) => { | 
 |  |  |                         handleError(); | 
 |  |  |                     }, | 
 |  |  |                 } | 
 |  |  |             ); | 
 |  |  |         } else { | 
 |  |  |             create( | 
 |  |  |                 resource, | 
 |  |  |                 { data: _params }, | 
 |  |  |                 { | 
 |  |  |                     onSuccess: () => { | 
 |  |  |                         handleSuccess(); | 
 |  |  |                     }, | 
 |  |  |                     onError: (error) => { | 
 |  |  |                         handleError(); | 
 |  |  |                     }, | 
 |  |  |                 } | 
 |  |  |             ); | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Edit | 
 |  |  |             redirect="list" | 
 |  |  |             mutationMode={EDIT_MODE} | 
 |  |  |             actions={<CustomerTopToolBar />} | 
 |  |  |             aside={<EditBaseAside />} | 
 |  |  |         > | 
 |  |  |             <SimpleForm | 
 |  |  |                 shouldUnregister | 
 |  |  |                 warnWhenUnsavedChanges | 
 |  |  |                 toolbar={<FormToolbar />} | 
 |  |  |                 mode="onTouched" | 
 |  |  |                 defaultValues={{}} | 
 |  |  |             // validate={(values) => { }} | 
 |  |  |             > | 
 |  |  |                 <Grid container width={{ xs: '100%', xl: '80%' }} rowSpacing={3} columnSpacing={3}> | 
 |  |  |                     <Grid item xs={12} md={8}> | 
 |  |  |                         <Typography variant="h6" gutterBottom> | 
 |  |  |                             {translate('common.edit.title.main')} | 
 |  |  |                         </Typography> | 
 |  |  |                         <Stack direction='row' gap={2}> | 
 |  |  |                             <TextInput | 
 |  |  |                                 label="table.field.matnrGroup.name" | 
 |  |  |                                 source="name" | 
 |  |  |                                 parse={v => v} | 
 |  |  |                                 validate={required()} | 
 |  |  |         <> | 
 |  |  |             <CreateBase> | 
 |  |  |                 <Dialog | 
 |  |  |                     open={open} | 
 |  |  |                     onClose={handleClose} | 
 |  |  |                     aria-labelledby="form-dialog-title" | 
 |  |  |                     fullWidth | 
 |  |  |                     disableRestoreFocus | 
 |  |  |                     maxWidth="md"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 
 |  |  |                 > | 
 |  |  |                     <Form record={editRecord || {}} onSubmit={onSubmit}> | 
 |  |  |                         <DialogTitle id="form-dialog-title" sx={{ | 
 |  |  |                             position: 'sticky', | 
 |  |  |                             top: 0, | 
 |  |  |                             backgroundColor: 'background.paper', | 
 |  |  |                             zIndex: 1000 | 
 |  |  |                         }} | 
 |  |  |                         > | 
 |  |  |                             {editRecord ? translate('update.title') : translate('create.title')} | 
 |  |  |                             <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}> | 
 |  |  |                                 <DialogCloseButton onClose={handleClose} /> | 
 |  |  |                             </Box> | 
 |  |  |                         </DialogTitle> | 
 |  |  |                         <DialogContent sx={{ mt: 2 }}> | 
 |  |  |                             <EditContent | 
 |  |  |                                 editRecord={editRecord} | 
 |  |  |                             /> | 
 |  |  |                         </Stack> | 
 |  |  |                         <Stack direction='row' gap={2}> | 
 |  |  |                             <TextInput | 
 |  |  |                                 label="table.field.matnrGroup.code" | 
 |  |  |                                 source="code" | 
 |  |  |                                 parse={v => v} | 
 |  |  |                                 validate={required()} | 
 |  |  |                             /> | 
 |  |  |                         </Stack> | 
 |  |  |                         <Stack direction='row' gap={2}> | 
 |  |  |                             <NumberInput | 
 |  |  |                                 label="table.field.matnrGroup.parentId" | 
 |  |  |                                 source="parentId" | 
 |  |  |                             /> | 
 |  |  |                         </Stack> | 
 |  |  |  | 
 |  |  |                     </Grid> | 
 |  |  |                     <Grid item xs={12} md={4}> | 
 |  |  |                         <Typography variant="h6" gutterBottom> | 
 |  |  |                             {translate('common.edit.title.common')} | 
 |  |  |                         </Typography> | 
 |  |  |                         <StatusSelectInput /> | 
 |  |  |                         <Box mt="2em" /> | 
 |  |  |                         <MemoInput /> | 
 |  |  |                     </Grid> | 
 |  |  |                 </Grid> | 
 |  |  |             </SimpleForm> | 
 |  |  |         </Edit > | 
 |  |  |                         </DialogContent> | 
 |  |  |                         <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> | 
 |  |  |                             <Toolbar sx={{ width: '100%', justifyContent: 'space-between' }}  > | 
 |  |  |                                 <SaveButton /> | 
 |  |  |                             </Toolbar> | 
 |  |  |                         </DialogActions> | 
 |  |  |                     </Form> | 
 |  |  |                 </Dialog> | 
 |  |  |             </CreateBase> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  |