| | |
| | | import EditIcon from '@mui/icons-material/Edit'; |
| | | import { useState, useEffect } from 'react'; |
| | | import { |
| | | useTranslate, useNotify, required |
| | | Button, useListContext, SelectInput, |
| | | required, SelectArrayInput, |
| | | useTranslate, useNotify, |
| | | SelectArrayInputClasses |
| | | } from 'react-admin'; |
| | | import { useController } from 'react-hook-form'; |
| | | import request from '@/utils/request'; |
| | | import { Select, MenuItem, FormControl, InputLabel } from '@mui/material'; |
| | | |
| | | const TaskPathTemplateMergeSelect = (props) => { |
| | | const { dictTypeCode, label, name, validate, ...params } = props; |
| | | const { |
| | | name, |
| | | multiple = false, |
| | | perPage = 100, // 默认每页显示100条数据 |
| | | page = 1, // 默认第一页 |
| | | ...parmas |
| | | } = props; |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | const [list, setList] = useState([]); |
| | | |
| | | // 使用 useController 与 react-hook-form 集成 |
| | | const { field, fieldState } = useController({ |
| | | name: name, |
| | | rules: validate ? { |
| | | validate: (value) => { |
| | | for (const rule of validate) { |
| | | const result = rule(value); |
| | | if (result) return result; |
| | | } |
| | | return true; |
| | | } |
| | | } : undefined |
| | | }); |
| | | const [loading, setLoading] = useState(false); |
| | | |
| | | useEffect(() => { |
| | | http(); |
| | | }, [dictTypeCode]); |
| | | }, []); |
| | | |
| | | const http = async () => { |
| | | setLoading(true); |
| | | try { |
| | | const res = await request.post('/taskPathTemplateMerge/createSelectList'); |
| | | |
| | | if (res?.data?.code === 200) { |
| | | setList(res.data.data.map((item) => { |
| | | return { |
| | | id: item.id, |
| | | name: item.name |
| | | }; |
| | | } |
| | | })); |
| | | } else { |
| | | notify(res.data.msg); |
| | | } |
| | | } catch (error) { |
| | | notify('加载数据失败', 'error'); |
| | | console.error('加载数据失败:', error); |
| | | } finally { |
| | | setLoading(false); |
| | | } |
| | | }; |
| | | |
| | | const handleChange = (event) => { |
| | | const selectedValue = event.target.value; |
| | | field.onChange(selectedValue); |
| | | }; |
| | | |
| | | const validValue = list.some(item => item.id === field.value) ? field.value : ''; |
| | | const InputComponent = multiple ? SelectArrayInput : SelectInput; |
| | | |
| | | return ( |
| | | <FormControl required fullWidth error={!!fieldState.error}> |
| | | <InputLabel id={`${name}-label`}>{label}</InputLabel> |
| | | <Select |
| | | labelId={`${name}-label`} |
| | | value={validValue} |
| | | variant="filled" |
| | | onChange={handleChange} |
| | | size='small' |
| | | > |
| | | {list.map((item) => ( |
| | | <MenuItem |
| | | key={item.id} |
| | | value={item.id}> |
| | | {item.name} |
| | | </MenuItem> |
| | | ))} |
| | | </Select> |
| | | </FormControl> |
| | | <InputComponent |
| | | source={name} |
| | | choices={list} |
| | | isLoading={loading} |
| | | {...parmas} |
| | | /> |
| | | ); |
| | | }; |
| | | |