import React from 'react';
|
import {
|
Stack,
|
TextField,
|
Button,
|
Typography,
|
Box,
|
Autocomplete,
|
Checkbox,
|
Chip,
|
Paper,
|
} from '@mui/material';
|
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
|
import CheckBoxIcon from '@mui/icons-material/CheckBox';
|
import { useTranslate } from 'react-admin';
|
|
const AreaBasicTab = ({
|
name,
|
setName,
|
agvOptions,
|
agvList,
|
setAgvList,
|
codeList,
|
onSave,
|
disableSave,
|
}) => {
|
const translate = useTranslate();
|
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
|
const checkedIcon = <CheckBoxIcon fontSize="small" />;
|
|
const getOptionLabel = (option) => {
|
return option?.uuid ?? '';
|
};
|
|
const getOptionId = (option) => {
|
return option?.id;
|
};
|
|
return (
|
<Stack spacing={3}>
|
<Stack direction="row" spacing={1} alignItems="center">
|
<TextField
|
label={translate('page.map.area.name', { _: '名称' })}
|
size="small"
|
fullWidth
|
variant="outlined"
|
value={name}
|
onChange={(e) => setName(e.target.value)}
|
/>
|
</Stack>
|
|
<Box >
|
<Typography variant="subtitle2" gutterBottom>
|
{translate('page.map.area.agv', { _: '选择AGV小车' })}
|
</Typography>
|
<Autocomplete
|
multiple
|
disableCloseOnSelect
|
options={agvOptions || []}
|
value={agvList || []}
|
getOptionLabel={getOptionLabel}
|
isOptionEqualToValue={(option, value) => getOptionId(option) === getOptionId(value)}
|
onChange={(event, newValue) => {
|
setAgvList(newValue);
|
}}
|
renderTags={(value, getTagProps) =>
|
value.map((option, index) => (
|
<Chip
|
{...getTagProps({ index })}
|
key={getOptionId(option)}
|
label={getOptionLabel(option)}
|
size="small"
|
sx={{ mr: 0.5, fontWeight: 'bold' }}
|
/>
|
))
|
}
|
ListboxProps={{
|
sx: {
|
maxHeight: 240,
|
'& .MuiAutocomplete-option': { py: 0.5, fontSize: 13 },
|
},
|
}}
|
renderOption={(props, option, { selected }) => {
|
const { key, ...optionProps } = props;
|
return (
|
<li
|
key={key}
|
{...optionProps}
|
style={{
|
fontSize: 13,
|
display: 'flex',
|
alignItems: 'center',
|
height: 30,
|
...(optionProps.style || {}),
|
}}
|
>
|
<Checkbox
|
icon={icon}
|
checkedIcon={checkedIcon}
|
sx={{ mr: 1, '& .MuiSvgIcon-root': { fontSize: 18 } }}
|
checked={selected}
|
/>
|
<Typography variant="body2">{getOptionLabel(option)}</Typography>
|
</li>
|
);
|
}}
|
renderInput={(params) => (
|
<TextField
|
{...params}
|
size="small"
|
variant="outlined"
|
placeholder={translate('page.map.area.agv.placeholder', { _: '' })}
|
/>
|
)}
|
/>
|
</Box>
|
|
<Box>
|
<Typography variant="subtitle2" gutterBottom>
|
{translate('page.map.area.barcodes', { _: '区域内条码集合' }) + " (" + codeList.length + ")"}
|
</Typography>
|
<Paper
|
variant="outlined"
|
sx={{
|
minHeight: 220,
|
maxHeight: 320,
|
overflowY: 'auto',
|
p: 1,
|
display: 'flex',
|
flexWrap: 'wrap',
|
gap: 0.75,
|
}}
|
>
|
{(codeList || []).length > 0 ? (
|
codeList.map((code) => (
|
<Chip
|
key={code}
|
label={code}
|
size="small"
|
sx={{ fontFamily: 'monospace', fontSize: 12 }}
|
/>
|
))
|
) : (
|
<Typography variant="body2" color="text.secondary">
|
{translate('page.map.area.barcodes.empty', { _: '暂无条码' })}
|
</Typography>
|
)}
|
</Paper>
|
</Box>
|
|
<Box display="flex" justifyContent="flex-start">
|
<Button variant="contained" onClick={onSave} disabled={disableSave}>
|
{translate('common.action.save', { _: '保存' })}
|
</Button>
|
</Box>
|
</Stack>
|
);
|
};
|
|
export default AreaBasicTab;
|
