#

vincentlu

2025-12-15 8b093ec56bd4e5e721bf48ca497efc819691b2bc

 zy-acs-flow/src/map/areaSettings/AreaBasicTab.jsx

@@ -1,17 +1,44 @@
import React from 'react';
import { Stack, TextField, Button, Typography, Box } from '@mui/material';
import {
    Stack,
    TextField,
    Button,
    Typography,
    Box,
    Autocomplete,
    Checkbox,
} from '@mui/material';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
import { useTranslate } from 'react-admin';

const AreaBasicTab = ({
    areaName,
    setAreaName,
    name,
    setName,
    agvOptions,
    agvList,
    setAgvList,
    barcodeList,
    setBarcodeList,
    codeListText,
    onSave,
    disableSave,
}) => {
    const translate = useTranslate();
    const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
    const checkedIcon = <CheckBoxIcon fontSize="small" />;

    const getOptionLabel = (option) => {
        if (typeof option === 'string') {
            return option;
        }
        return option?.label ?? option?.name ?? option?.agvNo ?? option?.value ?? option?.id ?? '';
    };

    const getOptionId = (option) => {
        if (typeof option === 'string') {
            return option;
        }
        return option?.value ?? option?.id ?? option?.agvNo ?? option?.code ?? option?.name ?? '';
    };

    return (
        <Stack spacing={2}>
@@ -19,25 +46,43 @@
                <TextField
                    label={translate('page.map.area.name', { _: '名称' })}
                    fullWidth
                    value={areaName}
                    onChange={(e) => setAreaName(e.target.value)}
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
                <Button variant="contained" onClick={onSave}>
                    {translate('common.action.save', { _: '保存' })}
                </Button>
            </Stack>

            <Box>
                <Typography variant="subtitle2" gutterBottom>
                    {translate('page.map.area.agv', { _: '添加AGV小车' })}
                </Typography>
                <TextField
                    placeholder={translate('page.map.area.agv.placeholder', { _: '用逗号分隔：agv01, agv02' })}
                    fullWidth
                    multiline
                    minRows={3}
                    value={agvList}
                    onChange={(e) => setAgvList(e.target.value)}
                <Autocomplete
                    multiple
                    disableCloseOnSelect
                    options={agvOptions || []}
                    value={agvList || []}
                    getOptionLabel={getOptionLabel}
                    isOptionEqualToValue={(option, value) => getOptionId(option) === getOptionId(value)}
                    onChange={(event, newValue) => {
                        setAgvList(newValue);
                    }}
                    renderOption={(props, option, { selected }) => (
                        <li {...props}>
                            <Checkbox
                                icon={icon}
                                checkedIcon={checkedIcon}
                                style={{ marginRight: 8 }}
                                checked={selected}
                            />
                            {getOptionLabel(option)}
                        </li>
                    )}
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            placeholder={translate('page.map.area.agv.placeholder', { _: '选择AGV' })}
                        />
                    )}
                    ListboxProps={{ sx: { maxHeight: 280 } }}
                />
            </Box>

@@ -51,10 +96,16 @@
                    multiline
                    minRows={6}
                    maxRows={10}
                    value={barcodeList}
                    onChange={(e) => setBarcodeList(e.target.value)}
                    value={codeListText}
                    InputProps={{ readOnly: true }}
                />
            </Box>

            <Box display="flex" justifyContent="flex-start">
                <Button variant="contained" onClick={onSave} disabled={disableSave}>
                    {translate('common.action.save', { _: '保存' })}
                </Button>
            </Box>
        </Stack>
    );
};