| | |
| | | codeList, |
| | | onSave, |
| | | disableSave, |
| | | onDelete, |
| | | canDelete = false, |
| | | }) => { |
| | | const translate = useTranslate(); |
| | | const icon = <CheckBoxOutlineBlankIcon fontSize="small" />; |
| | | const checkedIcon = <CheckBoxIcon fontSize="small" />; |
| | | |
| | | const normalizeAgvId = (agv) => { |
| | | if (agv == null) { |
| | | return ''; |
| | | } |
| | | if (typeof agv === 'object') { |
| | | return String(agv.uuid ?? ''); |
| | | } |
| | | return String(agv); |
| | | }; |
| | | |
| | | const getOptionId = (option) => { |
| | | return normalizeAgvId(option) |
| | | }; |
| | | |
| | | const getOptionLabel = (option) => { |
| | | return option?.uuid ?? ''; |
| | | }; |
| | | |
| | | const getOptionId = (option) => { |
| | | return option?.id; |
| | | const handleSaveClick = () => { |
| | | if (disableSave) { |
| | | return; |
| | | } |
| | | const confirmMsg = translate('page.map.area.confirm.save'); |
| | | if (window.confirm(confirmMsg)) { |
| | | onSave?.(); |
| | | } |
| | | }; |
| | | |
| | | const handleDeleteClick = () => { |
| | | if (!canDelete) { |
| | | return; |
| | | } |
| | | const confirmMsg = translate('page.map.area.confirm.delete'); |
| | | if (window.confirm(confirmMsg)) { |
| | | onDelete?.(); |
| | | } |
| | | }; |
| | | |
| | | return ( |
| | | <Stack spacing={3}> |
| | | <Stack spacing={3} sx={{ mt: 1 }}> |
| | | <Stack direction="row" spacing={1} alignItems="center"> |
| | | <TextField |
| | | label={translate('page.map.area.name', { _: '名称' })} |
| | | label={translate('page.map.area.form.name')} |
| | | size="small" |
| | | fullWidth |
| | | variant="outlined" |
| | |
| | | |
| | | <Box > |
| | | <Typography variant="subtitle2" gutterBottom> |
| | | {translate('page.map.area.agv', { _: '选择AGV小车' })} |
| | | {translate('page.map.area.form.agv')} |
| | | </Typography> |
| | | <Autocomplete |
| | | multiple |
| | |
| | | options={agvOptions || []} |
| | | value={agvList || []} |
| | | getOptionLabel={getOptionLabel} |
| | | isOptionEqualToValue={(option, value) => getOptionId(option) === getOptionId(value)} |
| | | isOptionEqualToValue={(option, value) => { |
| | | return getOptionId(option) === getOptionId(value); |
| | | }} |
| | | onChange={(event, newValue) => { |
| | | setAgvList(newValue); |
| | | }} |
| | |
| | | value.map((option, index) => ( |
| | | <Chip |
| | | {...getTagProps({ index })} |
| | | key={getOptionId(option)} |
| | | label={getOptionLabel(option)} |
| | | key={getOptionId(option) || index} |
| | | label={normalizeAgvId(option)} |
| | | size="small" |
| | | sx={{ mr: 0.5, fontWeight: 'bold' }} |
| | | /> |
| | |
| | | {...params} |
| | | size="small" |
| | | variant="outlined" |
| | | placeholder={translate('page.map.area.agv.placeholder', { _: '' })} |
| | | placeholder={translate('page.map.area.form.agvPlaceholder')} |
| | | /> |
| | | )} |
| | | /> |
| | |
| | | |
| | | <Box> |
| | | <Typography variant="subtitle2" gutterBottom> |
| | | {translate('page.map.area.barcodes', { _: '区域内条码集合' })} |
| | | {translate('page.map.area.form.codes', { count: codeList.length })} |
| | | </Typography> |
| | | <Paper |
| | | variant="outlined" |
| | |
| | | )) |
| | | ) : ( |
| | | <Typography variant="body2" color="text.secondary"> |
| | | {translate('page.map.area.barcodes.empty', { _: '暂无条码' })} |
| | | {translate('page.map.area.form.codesEmpty')} |
| | | </Typography> |
| | | )} |
| | | </Paper> |
| | | </Box> |
| | | |
| | | <Box display="flex" justifyContent="flex-start"> |
| | | <Button variant="contained" onClick={onSave} disabled={disableSave}> |
| | | {translate('common.action.save', { _: '保存' })} |
| | | <Box display="flex" justifyContent="space-between" alignItems="center"> |
| | | <Button variant="contained" onClick={handleSaveClick} disabled={disableSave}> |
| | | {translate('ra.action.save')} |
| | | </Button> |
| | | <Button variant="text" color="error" onClick={handleDeleteClick} disabled={!canDelete}> |
| | | {translate('ra.action.delete')} |
| | | </Button> |
| | | </Box> |
| | | </Stack> |