|  |  |  | 
|---|
|  |  |  | 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> | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|