verou1
2025-03-10 50f4e2c3a3c5c9d4edafab346c58e3862b7610eb
rsf-admin/src/page/basicInfo/whMat/WhMatList.jsx
@@ -1,100 +1,162 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { Box, Card, CardContent, LinearProgress, TextField, Button, Typography } from "@mui/material";
import * as Icons from '@mui/icons-material';
import { List, useTranslate, useListContext, Title, } from "react-admin";
import {
  Box,
  Card,
  CardContent,
  LinearProgress,
  TextField,
  Button,
  Typography,
} from "@mui/material";
import * as Icons from "@mui/icons-material";
import {
  List,
  useTranslate,
  useListContext,
  Title,
  useGetList,
  useNotify,
} from "react-admin";
import WhMatListAside from "./WhMatListAside";
import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
import { TreeItem2 } from "@mui/x-tree-view/TreeItem2";
import request from '@/utils/request';
import { Add, Edit, Delete, Padding, Save } from '@mui/icons-material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import RefreshIcon from '@mui/icons-material/Refresh';
import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
import request from "@/utils/request";
import { Add, Edit, Delete, Padding, Save } from "@mui/icons-material";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import RefreshIcon from "@mui/icons-material/Refresh";
import { useTreeItem2Utils } from "@mui/x-tree-view/hooks";
import WhMatCreate from "./whMatCreate";
// const RESOURCE = 'dept';
const TITLE = 'menu.whMat';
const TITLE = "menu.whMat";
const WhMatListContent = () => {
    const translate = useTranslate();
    const [searchVal, setSearchVal] = useState('');
  const [searchVal, setSearchVal] = useState("");
    const [createDialog, setCreateDialog] = React.useState(false);
    const [editRecord, setEditRecord] = React.useState(null);
    const treeData = [
        {
            id: '19',
            label: '半成品',
            secondaryLabel: 'RM001',
      id: "19",
      label: "半成品",
      secondaryLabel: "RM001",
            editable: true,
            children: [
                {
                    id: 'grid-community', primaryText: '半成品',
                    secondaryText: 'RM001', label: '@mui/x-data-grid', editable: true, children: [
          id: "grid-community",
          primaryText: "半成品",
          secondaryText: "RM001",
          label: "@mui/x-data-grid",
          editable: true,
          children: [
                        {
                            id: 'grid-community22', primaryText: '半成品',
                            secondaryText: 'RM001', label: '@mui/x-data-grid', editable: true
                        },]
                },
                {
                    id: 'grid-pro', primaryText: '半成品',
                    secondaryText: 'RM001', label: '@mui/x-data-grid-pro', editable: true
                },
                {
                    id: 'grid-premium', primaryText: '半成品',
                    secondaryText: 'RM001', label: '@mui/x-data-grid-premium', editable: true
              id: "grid-community22",
              primaryText: "半成品",
              secondaryText: "RM001",
              label: "@mui/x-data-grid",
              editable: true,
                },
            ],
        },
        {
            id: '18',
            label: '原材料',
            primaryText: '半成品',
            secondaryText: 'RM001',
          id: "grid-pro",
          primaryText: "半成品",
          secondaryText: "RM001",
          label: "@mui/x-data-grid-pro",
          editable: true,
        },
        {
            id: 'charts',
            label: 'Charts',
            primaryText: '半成品',
            secondaryText: 'RM001',
            children: [{
                id: 'charts-community', primaryText: '半成品',
                secondaryText: 'RM001', label: '@mui/x-charts'
            }],
          id: "grid-premium",
          primaryText: "半成品",
          secondaryText: "RM001",
          label: "@mui/x-data-grid-premium",
          editable: true,
        },
      ],
        },
        {
            id: 'tree-view',
            label: 'Tree View',
            primaryText: '半成品',
            secondaryLabel: 'RM001',
            children: [{
                id: 'tree-view-community', primaryText: '半成品',
                secondaryText: 'RM001', label: '@mui/x-tree-view'
            }],
      id: "18",
      label: "原材料",
      primaryText: "半成品",
      secondaryText: "RM001",
        },
        {
            id: 'tree-view2',
            label: 'Tree View3',
            primaryText: '半成品',
            secondaryText: 'RM001',
            children: [{
                id: 'tree-view-community1', primaryText: '半成品',
                secondaryText: 'RM001', label: '@mui/x-tree-view'
            }],
      id: "charts",
      label: "Charts",
      primaryText: "半成品",
      secondaryText: "RM001",
      children: [
        {
          id: "charts-community",
          primaryText: "半成品",
          secondaryText: "RM001",
          label: "@mui/x-charts",
        },
      ],
    },
    {
      id: "tree-view",
      label: "Tree View",
      primaryText: "半成品",
      secondaryLabel: "RM001",
      children: [
        {
          id: "tree-view-community",
          primaryText: "半成品",
          secondaryText: "RM001",
          label: "@mui/x-tree-view",
        },
      ],
    },
    {
      id: "tree-view2",
      label: "Tree View3",
      primaryText: "半成品",
      secondaryText: "RM001",
      children: [
        {
          id: "tree-view-community1",
          primaryText: "半成品",
          secondaryText: "RM001",
          label: "@mui/x-tree-view",
        },
      ],
        },
    ];
  const notify = useNotify();
    const handleNodeSelect = (event, nodeId) => {
        console.log('Selected Node ID:', nodeId);
    console.log("Selected Node ID:", nodeId);
        // 在这里可以根据 nodeId 更新主内容区域
    };
    const handleSearch = () => {
        console.log('Search Input:', selectedOption);
    console.log("Search Input:", selectedOption);
    };
  const handleInput = (value) => {
    setSearchVal(value);
  };
    const CustomCheckbox = React.forwardRef(function CustomCheckbox(props, ref) {
        return <input type="checkbox" ref={ref} {...props} />;
    });
  const getMatnrList = async () => {
    const {
      data: { code, data, msg },
    } = await request.post("/matnr/list", {}).then();
    if (code === 200) {
      console.log(data);
    } else {
      notify(msg);
    }
  };
  React.useEffect(() => {
    getMatnrList();
  }, []);
    function CustomLabel({ children, className, secondaryLabel }) {
        return (
            <Box display={"flex"} alignItems={"end"}>
@@ -124,9 +186,8 @@
                    label: CustomLabel,
                }}
                slotProps={{
                    label: { secondaryLabel: item?.secondaryLabel || '' },
          label: { secondaryLabel: item?.secondaryLabel || "" },
                }}
            />
        );
    });
@@ -134,20 +195,20 @@
    const isLoading = false;
    React.useEffect(() => {
        request.post('/matnrGroup/tree', {})
            .then(res => {
    request
      .post("/matnrGroup/tree", {})
      .then((res) => {
                if (res?.data?.code === 200) {
                    let data = res.data.data;
                    console.log(data);
                } else {
                    notify(res.data.msg);
                }
            })
            .catch(error => {
                notify('Error fetching tree data');
      .catch((error) => {
        notify("Error fetching tree data");
            });
    }, [searchVal])
  }, [searchVal]);
    const handleAdd = () => {
        setCreateDialog(true);
@@ -155,18 +216,23 @@
    return (
        <>
            <Box sx={{ mt: 1, mr: 3, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <Box
        sx={{
          mt: 1,
          mr: 3,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
                <WhMatCreate
                    editRecord={editRecord}
                    open={createDialog}
                    setOpen={setCreateDialog}
                />
                <Box
                    width={300}
                    mb={1}
                >
        <Box width={300} mb={1}>
                    <TextField
                        label={translate('ra.action.search')}
            label={translate("ra.action.search")}
                        value={searchVal}
                        onChange={(e) => handleInput(e.target.value)}
                    />
@@ -178,7 +244,7 @@
                        startIcon={<Add />}
                        onClick={handleAdd}
                    >
                        {translate('ra.action.add')}
            {translate("ra.action.add")}
                    </Button>
                    <Button
                        variant="outlined"
@@ -186,7 +252,7 @@
                        startIcon={<Delete />}
                        sx={{ ml: 1 }}
                    >
                        {translate('ra.action.delete')}
            {translate("ra.action.delete")}
                    </Button>
                    <Button
                        variant="outlined"
@@ -194,7 +260,7 @@
                        sx={{ ml: 1 }}
                        startIcon={<Save />}
                    >
                        {translate('ra.action.save')}
            {translate("ra.action.save")}
                    </Button>
                </Box>
            </Box>
@@ -202,7 +268,7 @@
            <Card>
                <CardContent>
                    <RichTreeView
                        defaultExpandedItems={['grid', 'pickers']}
            defaultExpandedItems={["grid", "pickers"]}
                        checkboxSelection
                        items={treeData}
                        slots={{ item: CustomTreeItem }}
@@ -211,17 +277,19 @@
                </CardContent>
            </Card>
        </>
    )
}
  );
};
const WhMatList = () => {
    const translate = useTranslate();
    return (
        <>
            <Box sx={{
                display: 'flex',
                marginBottom: 24
            }}>
      <Box
        sx={{
          display: "flex",
          marginBottom: 24,
        }}
      >
                <Title title={TITLE} />
                <Box>
                    <WhMatListAside />
@@ -231,7 +299,6 @@
                </Box>
            </Box>
        </>
    )
}
  );
};
export default WhMatList;