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