chen.lin
1 天以前 fcf0c2bbfae0a82d516dfa8b71f97e6ea817e0b4
rsf-admin/src/page/basicInfo/basStation/CrossZoneAreaField.jsx
@@ -1,4 +1,4 @@
import * as React from 'react';
import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { Stack, Chip, Dialog, DialogTitle, DialogContent, IconButton, CircularProgress } from '@mui/material';
import { useTranslate, useRecordContext } from 'react-admin';
import CloseIcon from '@mui/icons-material/Close';
@@ -7,9 +7,9 @@
const CrossZoneAreaField = () => {
    const translate = useTranslate();
    const record = useRecordContext();
    const [open, setOpen] = React.useState(false);
    const [areaNames, setAreaNames] = React.useState([]);
    const [loading, setLoading] = React.useState(false);
    const [open, setOpen] = useState(false);
    const [areaNames, setAreaNames] = useState([]);
    const [loading, setLoading] = useState(false);
    const handleOpen = () => {
        setOpen(true);
@@ -20,13 +20,48 @@
    };
    const fetchAreaNames = async () => {
        if (!record?.areaIds || record.areaIds.length === 0) return;
        const areasData = record?.areaIds || record?.areas;
        if (!areasData || areasData.length === 0) return;
        setLoading(true);
        try {
            const res = await request.post(`/warehouseAreas/many/${record.areaIds.join(',')}`);
        try {
            // 提取排序信息和ID
            // Old format: [1, 2, 3] (array of integers)
            // New format: [{id: 1, sort: 1}, {id: 2, sort: 2}] (array of objects)
            const isObjectArray = areasData.length > 0 &&
                typeof areasData[0] === 'object' &&
                areasData[0] !== null &&
                'id' in areasData[0];
            let areaIds = [];
            let sortMap = new Map(); // 存储 id -> sort 的映射
            if (isObjectArray) {
                // 对象数组格式,提取ID和排序信息
                areaIds = areasData.map(area => {
                    const id = area.id;
                    sortMap.set(id, area.sort || 0);
                    return id;
                });
            } else {
                // 纯ID数组格式
                areaIds = areasData.map(id => Number(id));
            }
            const res = await request.post(`/warehouseAreas/many/${areaIds.join(',')}`);
            if (res?.data?.code === 200) {
                setAreaNames(res.data.data || []);
                let areas = res.data.data || [];
                // 如果有排序信息,按排序值排序
                if (sortMap.size > 0) {
                    areas = areas.sort((a, b) => {
                        const sortA = sortMap.get(a.id) || 0;
                        const sortB = sortMap.get(b.id) || 0;
                        return sortA - sortB;
                    });
                }
                setAreaNames(areas);
            }
        } catch (error) {
            console.error('获取区域名称失败:', error);
@@ -35,11 +70,12 @@
        }
    };
    React.useEffect(() => {
        if (record?.areaIds && record.areaIds.length !== 0  && record.areaIds.length > 0) {
    useEffect(() => {
        const areasData = record?.areaIds || record?.areas;
        if (areasData && areasData.length > 0) {
            fetchAreaNames();
        }
    }, [record]);
    }, [record]);
    if (loading) {
        return <CircularProgress size={20} />;
@@ -47,10 +83,10 @@
    return (
        <>
            <Stack
                direction="row"
                gap={1}
                flexWrap="wrap"
            <Stack
                direction="row"
                gap={1}
                flexWrap="wrap"
                onClick={handleOpen}
                sx={{ cursor: 'pointer' }}
            >
@@ -67,16 +103,16 @@
                        label={`+${areaNames.length - 1}`}
                    />
                )}
                {areaNames.length === 0 && record.areaIds && record.areaIds.length > 0 && (
                {areaNames.length === 0 && (record?.areaIds || record?.areas) && (record?.areaIds || record?.areas).length > 0 && (
                    <Chip
                        size="small"
                        label={`${record.areaIds.length} 个区域`}
                        label={`${(record?.areaIds || record?.areas).length} 个区域`}
                    />
                )}
            </Stack>
            <Dialog
                open={open}
            <Dialog
                open={open}
                onClose={handleClose}
                maxWidth="md"
                fullWidth