| | |
| | | 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'; |
| | |
| | | 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); |
| | |
| | | }; |
| | | |
| | | 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); |
| | |
| | | } |
| | | }; |
| | | |
| | | 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} />; |
| | |
| | | |
| | | return ( |
| | | <> |
| | | <Stack |
| | | direction="row" |
| | | gap={1} |
| | | flexWrap="wrap" |
| | | <Stack |
| | | direction="row" |
| | | gap={1} |
| | | flexWrap="wrap" |
| | | onClick={handleOpen} |
| | | sx={{ cursor: 'pointer' }} |
| | | > |
| | |
| | | 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 |