#统一修改下拉框问题

zhou zhou

17 小时以前 6103a8e5d2316af7fcf6b246e9e866e5216476f0

 rsf-admin/src/page/components/TreeSelectInput.jsx

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { useCreateContext, useTranslate, useRecordContext } from 'react-admin'
import { MenuItem, Select, FormControl, InputLabel, Typography } from '@mui/material';
import { Autocomplete, TextField, FormControl } from '@mui/material';
import request from '@/utils/request';
import * as Common from '@/utils/common';
import { useFormContext } from 'react-hook-form';
@@ -22,7 +22,9 @@
                condition: filter
            });
            if (res?.data?.code === 200) {
                setTreeData(Common.flattenTree(res.data.data));
                // Add a null option at the beginning
                const flatTree = Common.flattenTree(res.data.data);
                setTreeData([{ id: 0, name: ' ' }, ...flatTree]);
                setProxyVal(val);
            } else {
                notify(res.data.msg);
@@ -31,50 +33,45 @@
        http(resource);
    }, [filter, value]);

    const handleChange = (event) => {
        const val = event.target.value;
        setProxyVal(val);
        form?.setValue(source, val, {
    const handleChange = (event, newValue) => {
        const selectedVal = newValue ? newValue.id : 0;
        setProxyVal(selectedVal);
        form?.setValue(source, selectedVal, {
            shouldValidate: true,
            shouldDirty: true,
        });
        onChange(event)
        if (onChange) {
            onChange({ target: { value: selectedVal } })
        }
    };

    const validValueObj = treeData.find(item => item.id === (proxyVal || 0)) || null;

    return (
        <FormControl fullWidth required={required}>
            <InputLabel>{translate(label)}</InputLabel>
            <Select
                value={proxyVal || ''}
        <FormControl fullWidth required={required} size="small">
            <Autocomplete
                value={validValueObj}
                onChange={handleChange}
                label={label}
                MenuProps={{
                    PaperProps: {
                        style: {
                            maxHeight: 300,
                        },
                    },
                }}
                options={treeData}
                getOptionLabel={(option) => isTranslate && option.type === 0 ? translate(option.name) : option.name}
                isOptionEqualToValue={(option, val) => option.id === val.id}
                size="small"
                ListboxProps={{ style: { maxHeight: '300px' } }}
                renderOption={(props, option) => (
                    <li {...props} style={{ paddingLeft: (option.depth || 0) * 16 + 16 }}>
                        {isTranslate && option.type === 0 ? translate(option.name) : option.name}
                    </li>
                )}
                renderInput={(params) => (
                    <TextField
                        {...params}
                        label={translate(label)}
                        variant="filled"
                        required={required}
                    />
                )}
                {...rest}
            >
                <MenuItem value={0}>
                    &nbsp;
                </MenuItem>
                {treeData.map((node) => {
                    return (
                        <MenuItem
                            key={node.id}
                            value={node.id}
                            style={{ paddingLeft: node.depth * 16 + 16 }}
                        >
                            {isTranslate && node.type === 0
                                ? translate(node.name)
                                : node.name
                            }
                        </MenuItem>
                    )
                })}
            </Select>
            />
        </FormControl>
    );
};