容器管理-编辑可入库区 选中数据排序 选择文字排序 兼容修改后的其他调用方法

chen.lin

16 小时以前 7972683f56368cd8ce7ef8bb7f1d087416f4a3e7

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

@@ -1,41 +1,92 @@
import EditIcon from '@mui/icons-material/Edit';
import { useState, useEffect } from 'react';
import { useState, useEffect, useMemo } from 'react';
import {
    Button, useListContext, SelectInput,
    required,
    required, SelectArrayInput,
    useTranslate, useNotify
} from 'react-admin';
import { useFormContext } from 'react-hook-form';
import request from '@/utils/request';

const DictionarySelect = (props) => {
    const { dictTypeCode, name, ...parmas } = props;
    const { 
        dictTypeCode, 
        name, 
        group,
        multiple = false, 
        perPage = 100,  // 默认每页显示100条数据
        page = 1,       // 默认第一页
        ...parmas 
    } = props;
    const translate = useTranslate();
    const notify = useNotify();
    const [list, setList] = useState([])
    const { watch } = useFormContext();
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(false);
    
    // 获取当前表单值
    const currentValue = watch(name);

    useEffect(() => {
        http()
    }, [dictTypeCode]);
        http();
    }, [dictTypeCode, page, perPage]);

    const http = async () => {
        const res = await request.post('/dictData/page', { dictTypeCode });
        if (res?.data?.code === 200) {

            setList(res.data.data.records.map((item) => {
                return {
                    id: item.value,
                    name: item.label
                }
            }))
        } else {
            notify(res.data.msg);
        setLoading(true);
        try {
            const res = await request.post('/dictData/page', { 
                dictTypeCode,
                group,
                current: page,
                pageSize: perPage
            });
            
            if (res?.data?.code === 200) {
                setList(res.data.data.records.map((item) => {
                    return {
                        id: item.value,
                        name: item.label
                    }
                }));
            } else {
                notify(res.data.msg);
            }
        } catch (error) {
            notify('加载字典数据失败', 'error');
            console.error('加载字典数据失败:', error);
        } finally {
            setLoading(false);
        }
    }
    };

    // 确保当前值在选项中，如果不在且正在加载，添加占位选项
    const choices = useMemo(() => {
        if (!list || list.length === 0) {
            // 如果列表为空但当前有值，添加占位选项以避免警告
            if (currentValue !== undefined && currentValue !== null && currentValue !== '') {
                return [{ id: currentValue, name: String(currentValue) }];
            }
            return [];
        }
        
        // 检查当前值是否在选项中
        const valueExists = list.some(item => String(item.id) === String(currentValue));
        
        // 如果当前值不在选项中，添加它（可能是加载延迟导致的）
        if (currentValue !== undefined && currentValue !== null && currentValue !== '' && !valueExists) {
            return [...list, { id: currentValue, name: String(currentValue) }];
        }
        
        return list;
    }, [list, currentValue]);

    const InputComponent = multiple ? SelectArrayInput : SelectInput;

    return (
        <SelectInput
        <InputComponent
            source={name}
            choices={list}
            choices={choices}
            isLoading={loading}
            {...parmas}
        />
    );