# bug修复 20250412问题修复

skyouc

2025-04-12 5ae1669ac1794f62cf72e7d5352853da14d440b9

 rsf-admin/src/page/asnOrder/AsnWareModal.jsx

@@ -1,24 +1,4 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import {
    CreateBase,
    useTranslate,
    TextInput,
    NumberInput,
    BooleanInput,
    DateInput,
    SaveButton,
    SelectInput,
    ReferenceInput,
    ReferenceArrayInput,
    AutocompleteInput,
    Toolbar,
    required,
    useDataProvider,
    useNotify,
    Form,
    useCreateController,
    useRefresh,
} from 'react-admin';
import React, { useState, useEffect } from "react";
import {
    Dialog,
    DialogActions,
@@ -30,32 +10,23 @@
    Box,
    Button,
    Paper,
    TableContainer,
    Table,
    TableHead,
    TableBody,
    TableRow,
    TableCell,
    Checkbox,
    styled


} from '@mui/material';
import DialogCloseButton from "../components/DialogCloseButton";
import StatusSelectInput from "../components/StatusSelectInput";
import ConfirmButton from "../components/ConfirmButton";
import MemoInput from "../components/MemoInput";
import { useForm, Controller, useWatch, FormProvider, useFormContext } from "react-hook-form";
import SaveIcon from '@mui/icons-material/Save';
import { useTranslate, useNotify, useRefresh } from 'react-admin';
import request from '@/utils/request';
import { DataGrid } from '@mui/x-data-grid';
import SaveIcon from '@mui/icons-material/Save';
import TreeSelectInput from "@/page/components/TreeSelectInput";
const AsnWareModal = (props) => {
    const { open, setOpen } = props;
    const { open, setOpen, data, setData } = props;

    const translate = useTranslate();
    const notify = useNotify();
    const refresh = useRefresh();

    const asnId = ''
    const asnId = '';

    const handleClose = (event, reason) => {
        if (reason !== "backdropClick") {
@@ -64,11 +35,13 @@
    };

    const [formData, setFormData] = useState({
        type: '',
        wkType: ''
        name: '',
        code: '',
        groupId: 0
    });

    const [tabelData, setTableData] = useState([{ id: 1 }, { id: 2 }]);
    const [tableData, setTableData] = useState([]);
    const [dyFields, setDyFields] = useState([]);
    const [selectedRows, setSelectedRows] = useState([]);

    const handleChange = (e) => {
@@ -79,13 +52,56 @@
        }));
    };

    const reset = () => {
        setFormData({
            name: '',
            code: '',
            groupId: 0
        })
    }

    const handleSubmit = () => {
        console.log(formData);
        const hasarr = data.map(el => +el.matnrId)
        const selectedData = selectedRows.filter(item => !hasarr.includes(item)).map(id => (tableData.find(row => row.id === id)));
        const value = selectedData.map((el => {
            const dynamicFields = dyFields.reduce((acc, item) => {
                acc[item.fields] = el['extendFields']?.[item.fields] || '';
                return acc;
            }, {});
            return {
                matnrId: el.id,
                maktx: el.name,
                matnrCode: el.code,
                stockUnit: el.stockUnit || '',
                purUnit: el.purchaseUnit || '',
                ...dynamicFields
            }
        }))
        setData([...data, ...value]);
        setOpen(false);
        reset();
    };

    const getData = async () => {
        const res = await request.post(`/matnr/page`, {
            ...formData,
            current: 1,
            pageSize: 100,
            orderBy: "create_time desc"
        });
        if (res?.data?.code === 200) {
            setTableData(res.data.data.records);
        } else {
            notify(res.data.msg);
        }
    };

    useEffect(() => {
        getData();
    }, [open]);

    const handleSearch = () => {
        getData()
    };

    return (
@@ -95,7 +111,7 @@
            aria-labelledby="form-dialog-title"
            fullWidth
            disableRestoreFocus
            maxWidth="lg"   // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
            maxWidth="lg"
        >
            <DialogTitle id="form-dialog-title" sx={{
                position: 'sticky',
@@ -111,230 +127,132 @@
            <DialogContent sx={{ mt: 2 }}>
                <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                    <Grid container spacing={2}>
                        <Grid item xs={4}>
                        <Grid item md={4}>
                            <TextField
                                label={translate('table.field.asnOrder.type')}
                                name="type"
                                value={formData.type}
                                label={translate('table.field.matnr.name')}
                                name="name"
                                value={formData.name}
                                onChange={handleChange}
                                variant="outlined"
                                size="small"
                            />
                        </Grid>

                        <Grid item xs={4}>
                        <Grid item md={4}>
                            <TextField
                                label={translate('table.field.asnOrder.wkType')}
                                name="wkType"
                                value={formData.wkType}
                                label={translate('table.field.matnr.code')}
                                name="code"
                                value={formData.code}
                                onChange={handleChange}
                                variant="outlined"
                                size="small"
                            />
                        </Grid>
                        <Grid item md={4}>
                            <TreeSelectInput
                                label="table.field.matnr.groupId"
                                value={formData.groupId}
                                resource={'matnrGroup'}
                                source="groupId"
                                name="groupId"
                                onChange={handleChange}
                            />
                        </Grid>
                    </Grid>
                </Box>

                <Box sx={{ mt: 2 }}>
                    <Stack direction="row" spacing={2}>
                        <Button variant="contained" onClick={handleSearch}>搜索</Button>
                    </Stack>

                </Box>

                <Box sx={{ mt: 2 }}>
                    <AsnWareModalTable tabelData={tabelData} setTableData={setTableData} selectedRows={selectedRows}
                        setSelectedRows={setSelectedRows}></AsnWareModalTable>
                <Box sx={{ mt: 2, height: 400, width: '100%' }}>
                    <AsnWareModalTable
                        tableData={tableData}
                        setTableData={setTableData}
                        dyFields={dyFields}
                        setDyFields={setDyFields}
                        selectedRows={selectedRows}
                        setSelectedRows={setSelectedRows}
                    />
                </Box>
            </DialogContent>
            <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
                <Toolbar sx={{ width: '100%', justifyContent: 'space-between' }}  >
                <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
                    <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}>
                        确认
                        {translate('toolbar.confirm')}
                    </Button>
                </Toolbar>
                </Box>
            </DialogActions>


        </Dialog>
    )
}
    );
};

export default AsnWareModal;

const AsnWareModalTable = ({ tabelData, setTableData }) => {
const AsnWareModalTable = ({ tableData, setTableData, selectedRows, setSelectedRows, dyFields, setDyFields }) => {
    const translate = useTranslate();
    const notify = useNotify();
    const refresh = useRefresh();

    const [selected, setSelected] = React.useState([]);
    const [columns, setColumns] = useState([
        // { field: 'id', headerName: 'ID', width: 100 },
        { field: 'name', headerName: translate('table.field.matnr.name'), width: 300 },
        { field: 'code', headerName: translate('table.field.matnr.code'), width: 200 },
        { field: 'groupId$', headerName: translate('table.field.matnr.groupId'), width: 100 },
        { field: 'spec', headerName: translate('table.field.matnr.spec'), width: 100 },
        { field: 'model', headerName: translate('table.field.matnr.model'), width: 100 },
        { field: 'weight', headerName: translate('table.field.matnr.weight'), width: 100 },

    const columns = [
        {
            id: 'id',
            label: 'ID',
            minWidth: 100
        },
        {
            id: 'name',
            label: 'table.field.matnr.name',
            minWidth: 100
        },
        {
            id: 'code',
            label: 'table.field.matnr.code',
            minWidth: 100
        },
        {
            id: 'spec',
            label: 'table.field.matnr.spec',
            minWidth: 100
        },
        {
            id: 'model',
            label: 'table.field.matnr.model',
            minWidth: 100
        },
        {
            id: 'weight',
            label: 'table.field.matnr.weight',
            minWidth: 100
        },
        {
            id: 'color',
            label: 'table.field.matnr.color',
            minWidth: 100
        },
        {
            id: 'size',
            label: 'table.field.matnr.size',
            minWidth: 100
        },
        {
            id: 'describle',
            label: 'table.field.matnr.describle',
            minWidth: 100
        },
        {
            id: 'nromNum',
            label: 'table.field.matnr.nromNum',
            minWidth: 100
        },
        {
            id: 'unit',
            label: 'table.field.matnr.unit',
            minWidth: 100
        },
        {
            id: 'purchaseUnit',
            label: 'table.field.matnr.purUnit',
            minWidth: 100
        },
        {
            id: 'stockUnit',
            label: 'table.field.matnr.stockUnit',
            minWidth: 100
        },
        {
            id: 'stockLeval$',
            label: 'table.field.matnr.stockLevel',
            minWidth: 100,
            sortable: false
        },
        { field: 'describle', headerName: translate('table.field.matnr.describle'), width: 100 },
        { field: 'nromNum', headerName: translate('table.field.matnr.nromNum'), width: 100 },
        { field: 'unit', headerName: translate('table.field.matnr.unit'), width: 100 },
        { field: 'purchaseUnit', headerName: translate('table.field.matnr.purUnit'), width: 100 },
        { field: 'stockUnit', headerName: translate('table.field.matnr.stockUnit'), width: 100 },
        { field: 'stockLeval$', headerName: translate('table.field.matnr.stockLevel'), width: 100, sortable: false },
    ])


    ];

    const StyledTableRow = styled(TableRow)(({ theme }) => ({
        "& .MuiButtonBase-root.": {
            padding: "0px 0px",
        },
    }));
    const handleSelectionChange = (ids) => {
        setSelectedRows(ids)

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

    const handleClick = (event, id) => {
        const selectedIndex = selected.indexOf(id);
        let newSelected = [];

        if (selectedIndex === -1) {
            newSelected = newSelected.concat(selected, id);
        } else if (selectedIndex === 0) {
            newSelected = newSelected.concat(selected.slice(1));
        } else if (selectedIndex === selected.length - 1) {
            newSelected = newSelected.concat(selected.slice(0, -1));
        } else if (selectedIndex > 0) {
            newSelected = newSelected.concat(
                selected.slice(0, selectedIndex),
                selected.slice(selectedIndex + 1),
            );
        }
        setSelected(newSelected);
    };

    // const handleSelectAllClick = (event) => {
    //     if (event.target.checked) {
    //         const newSelected = tabelData.map((n) => n.id);
    //         setSelected(newSelected);
    //         return;
    //     }
    //     setSelected([]);
    // };
    useEffect(() => {
        getDynamicFields();
    }, []);

    const getDynamicFields = async () => {
        const {
            data: { code, data, msg },
        } = await request.get("/fields/enable/list");
        if (code === 200) {
            const cols = data.map(el => ({
                field: el.fields,
                headerName: el.fieldsAlise,
                minWidth: 100,
                flex: 1,
                editable: el.unique,
                valueGetter: (value, row) => {
                    return row.extendFields?.[el.fields] || '';
                },
            }))
            setDyFields(data)
            setColumns([...columns, ...cols])
        } else {
            notify(msg);
        }
    }

    return (
        <TableContainer component={Paper} >
            <Table size="small" >
                <TableHead>
                    <StyledTableRow key={'head'}>
                        <TableCell padding="checkbox">
                            <Checkbox
                                color="primary"
                            />
                        </TableCell>
                        {columns.map((column) => {
                            const value = column.label;
                            return (
                                <StyledTableCell
                                    key={column.id}
                                    align={column.align || "left"}
                                >
                                    {column.format ? column.format(value) : translate(value)}
                                </StyledTableCell>
                            );

                        })}
                    </StyledTableRow>
                </TableHead>

                <TableBody>

                    {tabelData.map((row) => {
                        const isItemSelected = selected.includes(row.id);
                        return (<StyledTableRow key={row.id || Math.random()} aria-checked={isItemSelected} selected={isItemSelected} onClick={(event) => handleClick(event, row.id)}>
                            <TableCell padding="checkbox">
                                <Checkbox
                                    color="primary"
                                    checked={isItemSelected}
                                />
                            </TableCell>
                            {columns.map((column) => (
                                <StyledTableCell key={column.id} >
                                    {row[column.id]}
                                </StyledTableCell>
                            ))}
                        </StyledTableRow>)
                    })}

                </TableBody>
            </Table>
        </TableContainer>
    )
}
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid
                size="small"
                rows={tableData}
                columns={columns}
                checkboxSelection
                onRowSelectionModelChange={handleSelectionChange}
                selectionModel={selectedRows}
                disableColumnMenu={true}
                disableColumnSorting
                disableMultipleColumnsSorting
            />
        </div>
    );
};