#

whycq

2025-02-21 603eb58446847ace3ff0c0350723078f656fbaf1

 rsf-admin/src/page/basicInfo/matnrGroup/MatnrGroupEdit.jsx

@@ -1,27 +1,40 @@
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 {
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    Stack,
    Grid,
    Box,
} from '@mui/material';
import DialogCloseButton from "@/page/components/DialogCloseButton";
import TreeSelectInput from "@/page/components/TreeSelectInput";
import { useWatch, useFormContext } from "react-hook-form";
import { Stack, Grid, Box, Typography } from '@mui/material';
import * as Common from '@/utils/common';
import { EDIT_MODE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting';
import EditBaseAside from "@/page/components/EditBaseAside";
@@ -29,75 +42,139 @@
import MemoInput from "@/page/components/MemoInput";
import StatusSelectInput from "@/page/components/StatusSelectInput";

const FormToolbar = () => {
    const { getValues } = useFormContext();

const EditContent = ({ editRecord }) => {
    const { resource } = useCreateContext();
    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"
                    value={editRecord?.parentId}
                    isTranslate
                    resource={resource}
                />
            </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}
                />
            </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) => { }}
    <>
        <CreateBase>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="form-dialog-title"
                fullWidth
                disableRestoreFocus
                maxWidth="md"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
            >
                <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()}
                            />
                        </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 >
                <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}
                        />
                    </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>
    </>
    )
}