no message

skyouc

7 天以前 77c5fb25b806e3da9bd086d097be5ff20b4ff51f

 rsf-admin/src/page/basicInfo/whMat/whMatCreate.jsx

@@ -1,396 +1,632 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import {
    CreateBase,
    Form,
    useTranslate,
    Toolbar,
    SaveButton,
    TextInput,
    ReferenceInput,
    AutocompleteInput,
    required,
    NumberInput,
} from 'react-admin';
  CreateBase,
  Form,
  useTranslate,
  Toolbar,
  SaveButton,
  TextInput,
  ReferenceInput,
  AutocompleteInput,
  required,
  NumberInput,
} from "react-admin";
import {
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    Stack,
    Grid,
    Box,
    TableRow,
    IconButton,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    Paper,
    Checkbox,
    Button
} from '@mui/material';
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Stack,
  Grid,
  Box,
  TableRow,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  Paper,
  Checkbox,
  Button,
} from "@mui/material";
import DialogCloseButton from "@/page/components/DialogCloseButton";
import { styled } from '@mui/material/styles';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { styled } from "@mui/material/styles";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import { Search } from "@mui/icons-material";
import { tr } from "date-fns/locale";

import WhTable from "./whTable";

const columns = [
    {
        id: 'matnrCode',
        label: 'table.field.whMat.matnrCode',
        minWidth: 160,
    },
    {
        id: 'matnrName',
        label: 'table.field.whMat.matnrName',
    },
    {
        id: 'matnrGroupId',
        label: 'table.field.whMat.matnrGroupId',
    },
    {
        id: 'spec',
        label: 'table.field.whMat.spec',
    },
    {
        id: 'color',
        label: 'table.field.whMat.color',
    },
    {
        id: 'size',
        label: 'table.field.whMat.size',
    },
    {
        id: 'minWeight',
        label: 'table.field.whMat.minWeight',
    },
    {
        id: 'maxWeight',
        label: 'table.field.whMat.maxWeight',
    },
  {
    id: "matnrCode",
    label: "table.field.whMat.matnrCode",
    minWidth: 160,
  },
  {
    id: "matnrName",
    label: "table.field.whMat.matnrName",
  },
  {
    id: "matnrGroupId",
    label: "table.field.whMat.matnrGroupId",
  },
  {
    id: "spec",
    label: "table.field.whMat.spec",
  },
  {
    id: "color",
    label: "table.field.whMat.color",
  },
  {
    id: "size",
    label: "table.field.whMat.size",
  },
  {
    id: "minWeight",
    label: "table.field.whMat.minWeight",
  },
  {
    id: "maxWeight",
    label: "table.field.whMat.maxWeight",
  },
];

const WhMatCreate = (props) => {
    const translate = useTranslate();
    const { editRecord, open, setOpen, callback, resource } = props;
  const translate = useTranslate();
  const { editRecord, open, setOpen, callback, resource } = props;

    const handleClose = (event, reason) => {
        if (reason !== "backdropClick") {
            setOpen(false);
        }
    };
  const handleClose = (event, reason) => {
    if (reason !== "backdropClick") {
      setOpen(false);
    }
  };

    const onSubmit = (data) => {
        const _params = { ...data };
    };
  const onSubmit = (data) => {
    const _params = { ...data };
  };

    return (
        <>
            <CreateBase>
                <Dialog
                    open={open}
                    onClose={handleClose}
                    aria-labelledby="form-dialog-title"
                    fullWidth
                    disableRestoreFocus
                    maxWidth="lg"   // '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 }}>
                            <WhMatCreateContent />
                        </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>
        </>
    );
  return (
    <>
      <CreateBase>
        <Dialog
          open={open}
          onClose={handleClose}
          aria-labelledby="form-dialog-title"
          fullWidth
          disableRestoreFocus
          maxWidth="lg" // '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 }}>
              <WhMatCreateContent />
            </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>
    </>
  );
};
const StyledTableRow = styled(TableRow)(({ theme }) => ({
    '& .MuiButtonBase-root': {
        padding: '0px 0px'
    }
  "& .MuiButtonBase-root": {
    padding: "0px 0px",
  },
}));

const StyledTableCell = styled(TableCell)(({ theme }) => ({
    '& .MuiButtonBase-root': {
        padding: '0px 0px'
    },
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    maxWidth: 600,
  "& .MuiButtonBase-root": {
    padding: "0px 0px",
  },
  overflow: "hidden",
  textOverflow: "ellipsis",
  whiteSpace: "nowrap",
  maxWidth: 600,
}));

const TreeTableRow = (props) => {
    const { row, depth = 0, openNodes, setOpenNodes, onEdit, onDelete } = props;
    const isOpen = openNodes[row.id] || false;
    const [checked, setChecked] = useState(false);
    const toggleNode = (id) => {
        setOpenNodes(prevState => ({ ...prevState, [id]: !prevState[id] }));
    };
    return (
        <React.Fragment>
            <StyledTableRow hover tabIndex={-1} key={row.id}>
                <StyledTableCell sx={{ padding: 0, width: 20 }}>
                    {row.children && (
                        <IconButton
                            aria-label="expand row"
                            size="small"
                            style={{ marginLeft: (depth * 16 + 8) }}
                            onClick={() => toggleNode(row.id)}
                        >
                            {isOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
                        </IconButton>
                    )}
  const { row, depth = 0, openNodes, setOpenNodes, onEdit, onDelete } = props;
  const isOpen = openNodes[row.id] || false;
  const [checked, setChecked] = useState(false);
  const toggleNode = (id) => {
    setOpenNodes((prevState) => ({ ...prevState, [id]: !prevState[id] }));
  };
  return (
    <React.Fragment>
      <StyledTableRow hover tabIndex={-1} key={row.id}>
        <StyledTableCell sx={{ padding: 0, width: 20 }}>
          {row.children && (
            <IconButton
              aria-label="expand row"
              size="small"
              style={{ marginLeft: depth * 16 + 8 }}
              onClick={() => toggleNode(row.id)}
            >
              {isOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
            </IconButton>
          )}
        </StyledTableCell>
        <StyledTableCell style={{ paddingLeft: depth * 16 + 16 }}>
          <Checkbox
            key={row.id}
            checked={row.checked}
          // onChange={() => { row.checked = !row.checked; }}
          />
        </StyledTableCell>
        {columns.map((column, idx) => {
          if (column.id !== "actions") {
            const value = row[column.id];
            return (
              <>
                <StyledTableCell
                  key={column.id}
                  align={column.align || "left"}
                  // style={{ paddingLeft: idx === 0 && (depth * 16 + 16) }}
                  onClick={() => toggleNode(row.id)}
                >
                  {column.format ? column.format(value) : value}
                </StyledTableCell>
                <StyledTableCell style={{ paddingLeft: (depth * 16 + 16) }}>
                    <Checkbox
                        key={row.id}
                        checked={row.checked}
                        // onChange={() => { row.checked = !row.checked; }}
                    />
                </StyledTableCell>
                {columns.map((column, idx) => {
                    if (column.id !== 'actions') {
                        const value = row[column.id];
                        return (
                            <>
                                <StyledTableCell
                                    key={column.id}
                                    align={column.align || 'left'}
                                    // style={{ paddingLeft: idx === 0 && (depth * 16 + 16) }}
                                    onClick={() => toggleNode(row.id)}
                                >
                                    {column.format ? column.format(value) : value}
                                </StyledTableCell>
                            </>

                        )
                    }
                })}
            </StyledTableRow>
            {row.children && isOpen && (
                row.children.map((child) => (
                    <TreeTableRow
                        key={child.id}
                        row={child}
                        depth={depth + 1}
                        openNodes={openNodes}
                        setOpenNodes={setOpenNodes}
                    />
                ))
            )}
        </React.Fragment>
    );
              </>
            );
          }
        })}
      </StyledTableRow>
      {row.children &&
        isOpen &&
        row.children.map((child) => (
          <TreeTableRow
            key={child.id}
            row={child}
            depth={depth + 1}
            openNodes={openNodes}
            setOpenNodes={setOpenNodes}
          />
        ))}
    </React.Fragment>
  );
};

const WhMatCreateContent = (props) => {
    const translate = useTranslate();
    const [selAll, setSelAll] = useState(false);
    const [treeData, setTreeData] = useState([
  const translate = useTranslate();
  const [selAll, setSelAll] = useState(false);
  const [treeData, setTreeData] = useState([
    {
      id: 1,
      matnrCode: "root1",
      matnrName: "根节点",
      matnrGroupId: "admin",
      sort: 1,
      checked: false,
      children: [
        {
            id: 1, matnrCode: 'root1', matnrName: '根节点', matnrGroupId: 'admin', sort: 1, checked: false, children: [
                {
                    id: 29, matnrCode: 'root29', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: [
                        { id: 30, matnrCode: 'root30', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                        { id: 31, matnrCode: 'root31', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                        { id: 32, matnrCode: 'root32', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                        { id: 33, matnrCode: 'root33', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                        { id: 34, matnrCode: 'root34', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                        { id: 35, matnrCode: 'root35', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                    ]
                },
                { id: 24, matnrCode: 'root24', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                { id: 25, matnrCode: 'root25', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                { id: 26, matnrCode: 'root26', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                { id: 27, matnrCode: 'root27', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
                { id: 28, matnrCode: 'root28', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },

            ]
          id: 29,
          matnrCode: "root29",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: [
            {
              id: 30,
              matnrCode: "root30",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 31,
              matnrCode: "root31",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 32,
              matnrCode: "root32",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 33,
              matnrCode: "root33",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 34,
              matnrCode: "root34",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 35,
              matnrCode: "root35",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
          ],
        },
        { id: 2, matnrCode: 'root2', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 3, matnrCode: 'root3', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 4, matnrCode: 'root4', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 5, matnrCode: 'root5', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 6, matnrCode: 'root6', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 7, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 8, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 9, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 10, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 11, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 12, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 13, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 14, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 15, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 16, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 17, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 18, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 19, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 20, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 21, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 22, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        { id: 23, matnrCode: 'root', fullName: '根节点', leader: 'admin', sort: 1, checked: false, children: null },
        {
          id: 24,
          matnrCode: "root24",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
        {
          id: 25,
          matnrCode: "root25",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
        {
          id: 26,
          matnrCode: "root26",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
        {
          id: 27,
          matnrCode: "root27",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
        {
          id: 28,
          matnrCode: "root28",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
      ],
    },
    {
      id: 2,
      matnrCode: "root2",
      fullName: "根节点",
      leader: "admin",
      sort: 1,
      checked: false,
      children: null,
    },
    {
      id: 3,
      matnrCode: "root3",
      fullName: "根节点",
      leader: "admin",
      sort: 1,
      checked: false,
      children: null,
    },
    {
      id: 4,
      matnrCode: "root4",
      fullName: "根节点",
      leader: "admin",
      sort: 1,
      checked: false,
      children: null,
    },
  ]);
  const [openNodes, setOpenNodes] = React.useState({});

  const handleSearch = () => {
    console.log("handleSearch");
  };
  const selectAll = () => {
    selAll ? setSelAll(false) : setSelAll(true);
  };

    ]);
    const [openNodes, setOpenNodes] = React.useState({});

    const handleSearch = () => {
        console.log('handleSearch');
    }
    const selectAll = () => {
        selAll ? setSelAll(false) : setSelAll(true);
    }

    useEffect(() => {
        console.log(selAll);

        const setAllChecked = (nodes, checked) => {
            nodes.forEach(node => {
                node.checked = !checked;
                if (node.children) {
                    setAllChecked(node.children, checked);
                }
            });
        };

        if (selAll) {
            setAllChecked(treeData, true); 
        } else {
            setAllChecked(treeData, false); 
  useEffect(() => {
    const setAllChecked = (nodes, checked) => {
      nodes.forEach((node) => {
        node.checked = !checked;
        if (node.children) {
          setAllChecked(node.children, checked);
        }
    }, [selAll]);
      });
    };

    return (
        <>
            <Grid container rowSpacing={2} columnSpacing={2}>
                <Grid item xs={3} display="flex" gap={1}>
                    <TextInput
                        label="table.field.whMat.matnrCode"
                        source="matnrCode"
                    />
                </Grid>
                <Grid item xs={3} display="flex" gap={1}>
                    <TextInput
                        label="table.field.whMat.matnrName"
                        source="matnrName"
                    />
                </Grid>
                <Grid item xs={3} display="flex" gap={1}>
                    <ReferenceInput
                        source="groupId"
                        reference="matnrGroup"
                    >
                        <AutocompleteInput
                            label="table.field.whMat.matnrGroupId"
                            optionText="name"
                            filterToQuery={(val) => ({ name: val })}
                        />
                    </ReferenceInput>
                </Grid>
                <Grid item xs={3} display="flex" gap={1}>
                    <TextInput
                        label="table.field.whMat.spec"
                        source="spec"
                    />
                </Grid>
    if (selAll) {
      setAllChecked(treeData, true);
    } else {
      setAllChecked(treeData, false);
    }
  }, [selAll]);

                <Grid item xs={3} display="flex" gap={1}>
                    <TextInput
                        label="table.field.whMat.color"
                        source="color"
                    />
                </Grid>
                <Grid item xs={3} display="flex" gap={1}>
                    <TextInput
                        label="table.field.whMat.size"
                        source="size"
                    />
                </Grid>
                <Grid item xs={3} display="flex" gap={1}>
                    <TextInput
                        label="table.field.whMat.minWeight"
                        source="minWeight"
                    />
                </Grid>
                <Grid item xs={3} display="flex" gap={1}>
                    <TextInput
                        label="table.field.whMat.maxWeight"
                        source="maxWeight"
                    />
                </Grid>
            </Grid>
            <Box sx={{ mt: 2, mb: 2 }}>
                <Stack direction="row" spacing={1} justifyContent="flex-end">
                    <Button
                        variant="outlined"
                        color="primary"
                        startIcon={<Search />}
                        onClick={handleSearch}
                    >
                        {translate('ra.action.search')}
                    </Button>
                </Stack>
            </Box>
            <TableContainer component={Paper}>
                <Table size="small">
                    <TableHead>
                        <TableRow>
                            <StyledTableCell sx={{ padding: 0, width: 0 }} />
                            <StyledTableCell sx={{ width: 0 }} >
                                <Checkbox checked={selAll} onClick={selectAll} />
                            </StyledTableCell>
                            {columns.map((column, idx) => (
                                <StyledTableCell
                                    key={idx}
                                    align={column.align || 'left'}
                                    style={{
                                        minWidth: column.minWidth,
                                    }}
                                >
                                    {translate(column.label)}
                                </StyledTableCell>
                            ))}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {treeData && treeData.length > 0 && (
                            treeData.map((row) => (
                                <TreeTableRow
                                    key={row.id}
                                    row={row}
                                    openNodes={openNodes}
                                    setOpenNodes={setOpenNodes}
                                />
                            ))
                        )}
                    </TableBody>
                </Table>
            </TableContainer>
        </>
  const [treeDatas, setTreeDatas] = useState([
    {
      id: 1,
      matnrCode: "root1",
      matnrName: "根节点",
      matnrGroupId: "admin",
      sort: 1,
      checked: false,
      children: [
        {
          id: 29,
          matnrCode: "root29",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: [
            {
              id: 30,
              matnrCode: "root30",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 31,
              matnrCode: "root31",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 32,
              matnrCode: "root32",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 33,
              matnrCode: "root33",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 34,
              matnrCode: "root34",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
            {
              id: 35,
              matnrCode: "root35",
              fullName: "根节点",
              leader: "admin",
              sort: 1,
              checked: false,
              children: null,
            },
          ],
        },
        {
          id: 24,
          matnrCode: "root24",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
        {
          id: 25,
          matnrCode: "root25",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
        {
          id: 26,
          matnrCode: "root26",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
        {
          id: 27,
          matnrCode: "root27",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
        {
          id: 28,
          matnrCode: "root28",
          fullName: "根节点",
          leader: "admin",
          sort: 1,
          checked: false,
          children: null,
        },
      ],
    },
    {
      id: 2,
      matnrCode: "root2",
      fullName: "根节点",
      leader: "admin",
      sort: 1,
      checked: false,
      children: null,
    },
    {
      id: 3,
      matnrCode: "root3",
      fullName: "根节点",
      leader: "admin",
      sort: 1,
      checked: false,
      children: null,
    },
    {
      id: 4,
      matnrCode: "root4",
      fullName: "根节点",
      leader: "admin",
      sort: 1,
      checked: false,
      children: null,
    },
  ]);

    );
  return (
    <>
      <Grid container rowSpacing={2} columnSpacing={2}>
        <Grid item xs={3} display="flex" gap={1}>
          <TextInput label="table.field.whMat.matnrCode" source="matnrCode" />
        </Grid>
        <Grid item xs={3} display="flex" gap={1}>
          <TextInput label="table.field.whMat.matnrName" source="matnrName" />
        </Grid>
        <Grid item xs={3} display="flex" gap={1}>
          <ReferenceInput source="groupId" reference="matnrGroup">
            <AutocompleteInput
              label="table.field.whMat.matnrGroupId"
              optionText="name"
              filterToQuery={(val) => ({ name: val })}
            />
          </ReferenceInput>
        </Grid>
        <Grid item xs={3} display="flex" gap={1}>
          <TextInput label="table.field.whMat.spec" source="spec" />
        </Grid>

        <Grid item xs={3} display="flex" gap={1}>
          <TextInput label="table.field.whMat.color" source="color" />
        </Grid>
        <Grid item xs={3} display="flex" gap={1}>
          <TextInput label="table.field.whMat.size" source="size" />
        </Grid>
        <Grid item xs={3} display="flex" gap={1}>
          <TextInput label="table.field.whMat.minWeight" source="minWeight" />
        </Grid>
        <Grid item xs={3} display="flex" gap={1}>
          <TextInput label="table.field.whMat.maxWeight" source="maxWeight" />
        </Grid>
      </Grid>
      <Box sx={{ mt: 2, mb: 2 }}>
        <Stack direction="row" spacing={1} justifyContent="flex-end">
          <Button
            variant="outlined"
            color="primary"
            startIcon={<Search />}
            onClick={handleSearch}
          >
            {translate("ra.action.search")}
          </Button>
        </Stack>
      </Box>
      <TableContainer component={Paper}>
        <Table size="small">
          <TableHead>
            <TableRow>
              <StyledTableCell sx={{ padding: 0, width: 0 }} />
              <StyledTableCell sx={{ width: 0 }}>
                <Checkbox checked={selAll} onClick={selectAll} />
              </StyledTableCell>
              {columns.map((column, idx) => (
                <StyledTableCell
                  key={idx}
                  align={column.align || "left"}
                  style={{
                    minWidth: column.minWidth,
                  }}
                >
                  {translate(column.label)}
                </StyledTableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {treeData &&
              treeData.length > 0 &&
              treeData.map((row) => (
                <TreeTableRow
                  key={row.id}
                  row={row}
                  openNodes={openNodes}
                  setOpenNodes={setOpenNodes}
                />
              ))}
          </TableBody>
        </Table>
      </TableContainer>
      {/* <WhTable data={treeDatas} /> */}
    </>
  );
};

export default WhMatCreate;
export default WhMatCreate;