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';
|
import request from '@/utils/request';
|
|
const CrossZoneAreaField = () => {
|
const translate = useTranslate();
|
const record = useRecordContext();
|
const [open, setOpen] = useState(false);
|
const [areaNames, setAreaNames] = useState([]);
|
const [loading, setLoading] = useState(false);
|
|
const handleOpen = () => {
|
setOpen(true);
|
};
|
|
const handleClose = () => {
|
setOpen(false);
|
};
|
|
const fetchAreaNames = async () => {
|
if (!record?.areaIds || record.areaIds.length === 0) return;
|
|
setLoading(true);
|
try {
|
const res = await request.post(`/warehouseAreas/many/${record.areaIds.join(',')}`);
|
if (res?.data?.code === 200) {
|
setAreaNames(res.data.data || []);
|
}
|
} catch (error) {
|
console.error('获取区域名称失败:', error);
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
useEffect(() => {
|
if (record?.areaIds && record.areaIds.length !== 0 && record.areaIds.length > 0) {
|
fetchAreaNames();
|
}
|
}, [record]);
|
|
if (loading) {
|
return <CircularProgress size={20} />;
|
}
|
|
return (
|
<>
|
<Stack
|
direction="row"
|
gap={1}
|
flexWrap="wrap"
|
onClick={handleOpen}
|
sx={{ cursor: 'pointer' }}
|
>
|
{areaNames.slice(0, 1).map((item, idx) => (
|
<Chip
|
size="small"
|
key={item.id}
|
label={item.name || item.id}
|
/>
|
))}
|
{areaNames.length > 1 && (
|
<Chip
|
size="small"
|
label={`+${areaNames.length - 1}`}
|
/>
|
)}
|
{areaNames.length === 0 && record.areaIds && record.areaIds.length > 0 && (
|
<Chip
|
size="small"
|
label={`${record.areaIds.length} 个区域`}
|
/>
|
)}
|
</Stack>
|
|
<Dialog
|
open={open}
|
onClose={handleClose}
|
maxWidth="md"
|
fullWidth
|
>
|
<DialogTitle>
|
{translate('table.field.basStation.crossZoneArea')}
|
<IconButton
|
aria-label="close"
|
onClick={handleClose}
|
sx={{
|
position: 'absolute',
|
right: 8,
|
top: 8,
|
}}
|
>
|
<CloseIcon />
|
</IconButton>
|
</DialogTitle>
|
<DialogContent>
|
{loading ? (
|
<CircularProgress />
|
) : (
|
<Stack direction="row" gap={1} flexWrap="wrap" sx={{ mt: 1 }}>
|
{areaNames.map((item) => (
|
<Chip
|
size="small"
|
key={item.id}
|
label={item.name || item.id}
|
/>
|
))}
|
</Stack>
|
)}
|
</DialogContent>
|
</Dialog>
|
</>
|
);
|
};
|
|
export default CrossZoneAreaField;
|
