import React, { useState, useEffect } from 'react';
|
import { useCreateContext, useTranslate } 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, 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('');
|
|
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(value);
|
} 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,
|
});
|
};
|
|
return (
|
<FormControl fullWidth>
|
<InputLabel>{translate(label)}</InputLabel>
|
<Select
|
value={proxyVal || ''}
|
onChange={handleChange}
|
label={label}
|
MenuProps={{
|
PaperProps: {
|
style: {
|
maxHeight: 300,
|
},
|
},
|
}}
|
{...rest}
|
>
|
<MenuItem value={0}>
|
|
</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;
|
