verou
2025-03-25 e0351f5e0d75ab4f1da19696b55a1d3cd70b0a68
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React, { useState, useEffect } from 'react';
import { useCreateContext, useTranslate, useRecordContext } from 'react-admin'
import { MenuItem, Select, FormControl, InputLabel, Typography } from '@mui/material';
import request from '@/utils/request';
import * as Common from '@/utils/common';
import { useFormContext } from 'react-hook-form';
 
const TreeSelectInput = ({ resource, required, onChange, label, source = 'parentId', value, isTranslate = false, ...rest }) => {
    const translate = useTranslate();
    const { setValue } = useFormContext();
    const [filter, setFilter] = React.useState("");
    const [treeData, setTreeData] = React.useState([]);
 
    const [proxyVal, setProxyVal] = React.useState('');
 
    const record = useRecordContext()
    const val = value || record?.[source];
 
    useEffect(() => {
        const http = async (resource) => {
            const res = await request.post(resource + '/tree', {
                condition: filter
            });
            if (res?.data?.code === 200) {
                setTreeData(Common.flattenTree(res.data.data));
                setProxyVal(val);
            } else {
                notify(res.data.msg);
            }
        }
        http(resource);
    }, [filter, value]);
 
    const handleChange = (event) => {
        const val = event.target.value;
        setProxyVal(val);
        setValue(source, val, {
            shouldValidate: true,
            shouldDirty: true,
        });
        onChange(event)
    };
 
    return (
        <FormControl fullWidth required={required}>
            <InputLabel>{translate(label)}</InputLabel>
            <Select
                value={proxyVal || ''}
                onChange={handleChange}
                label={label}
                MenuProps={{
                    PaperProps: {
                        style: {
                            maxHeight: 300,
                        },
                    },
                }}
                {...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>
    );
};
 
export default TreeSelectInput;