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?.areas || record.areas.length === 0) return;
|
|
setLoading(true);
|
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 = record.areas.length > 0 &&
|
typeof record.areas[0] === 'object' &&
|
record.areas[0] !== null &&
|
'id' in record.areas[0];
|
|
let areaIds = [];
|
let sortMap = new Map(); // 存储 id -> sort 的映射
|
|
if (isObjectArray) {
|
// 对象数组格式，提取ID和排序信息
|
areaIds = record.areas.map(area => {
|
const id = area.id;
|
sortMap.set(id, area.sort || 0);
|
return id;
|
});
|
} else {
|
// 纯ID数组格式
|
areaIds = record.areas.map(id => Number(id));
|
}
|
|
const res = await request.post(`/warehouseAreas/many/${areaIds.join(',')}`);
|
if (res?.data?.code === 200) {
|
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);
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
useEffect(() => {
|
if (record?.areas && record.areas.length !== 0 && record.areas.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.areas && record.areas.length > 0 && (
|
<Chip
|
size="small"
|
label={`${record.areas.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;
|
