verou
2025-03-25 42bd2586d5be71eec6b2b53afe12dbdd2bcba412
rsf-admin/src/page/basicInfo/matnrGroup/MatnrGroupEdit.jsx
@@ -1,103 +1,212 @@
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 { update } = useFieldArray({ name: "parCode" })
    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 || ''
        // setpCode(code)
        editRecord.parCode = code;
        update(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)}
                />
            </Grid>
            <Grid item xs={6} display="flex" gap={1}>
                <TextInput
                    label="table.field.matnrGroup.parCode"
                    validate={[required()]}
                    source="parCode"
                    value={editRecord?.parCode}
                    parse={v => v}
                    disabled
                />
            </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}
                    disabled={!!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>
        </>
    )
}