前端项目实战肆佰叁拾react-admin和material ui-原始新增弹框代码备份

最新推荐文章于 2024-08-21 18:16:41 发布

前端歌谣

最新推荐文章于 2024-08-21 18:16:41 发布

阅读量46

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/132582440

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

import { Button, Paper } from '@mui/material'
import React, {useEffect, useState } from 'react'
import { AutocompleteInput, Create, Datagrid, List, ReferenceInput, SaveButton, SimpleForm, TextField, TextInput, useRefresh } from 'react-admin'
import { useFormContext } from 'react-hook-form';
const EditableDatagrid = () => {
  const [isCreating, setIsCreate] = useState<boolean>(false);
  const refresh = useRefresh();
  const handleCreate = () => {
    setIsCreate(!isCreating);
  }
  const MyButton = () => {
    const {reset, setFocus} = useFormContext<{code: string, name: string}>();
    useEffect(() => {
      setFocus('code');
    }, [setFocus]);

    return(
      <div style = {{marginTop: '10px'}}>
        <SaveButton type = 'button'
          label = '保存'
          mutationOptions={{
            onSuccess: () => {
              reset();
              window.scrollTo(0, 0);
              refresh();
              setFocus('code');
            }
          }}
        />
        <Button variant = 'contained' sx = {{ml: 2}} onClick={() => setIsCreate(false)}>取消</Button>
      </div>
    )
  }
  return (
    <div>
    <List resource = 't_lps_plant' filter={{factory_id: 1}} exporter = {false}>
      <Datagrid>
        <TextField source = 'code' label = '车间编码' />
        <TextField source = 'name' label = '车间名称' />
        <TextField source = 'addr' label = '车间位置' />
        <TextField source = 'description' label = '说明' />
      </Datagrid>
    </List>
    <Paper sx = {{minHeight: '48px', border: '1px solid black'}}>
    {isCreating && 
        <Create resource='t_lps_plant'>
          <SimpleForm
            toolbar = {<></>}
          >
            <Paper elevation={0} sx = {{display: 'flex'}}>
              <ReferenceInput source = 'factory_id' reference='t_lps_factory'>
                <AutocompleteInput variant='outlined' sx = {{mr: 2}} defaultValue={1} disabled label = '所属工厂' />  
              </ReferenceInput>
              <TextInput variant='outlined' sx = {{mr: 2}} source = 'code' label = '车间编码' />
              <TextInput variant='outlined' sx = {{mr: 2}} source = 'name' label = '车间名称' />
              <TextInput variant='outlined' sx = {{mr: 2}} source = 'addr' label = '车间位置' />
              <TextInput variant='outlined' sx = {{mr: 2}} source = 'description' label = '说明' />
              <MyButton />
            </Paper>
          </SimpleForm>
        </Create>
      } 
      <Button onClick={handleCreate} disabled = {isCreating} variant='contained'
        sx = {isCreating? { display: 'none'}: {position: 'absolute', right: '200px', fontSize: '16px', mt: '2px'}} 
      >
        新建
      </Button>
    </Paper>
    </div>
  )
}

export default EditableDatagrid