import React from 'react';
|
import { useForm, Controller } from 'react-hook-form';
|
import {
|
Button,
|
TextField,
|
Grid,
|
Box,
|
ToggleButton,
|
ToggleButtonGroup,
|
Typography,
|
} from '@mui/material';
|
|
function AgvControl({ open, onClose }) {
|
const { control, handleSubmit, reset, watch } = useForm({
|
defaultValues: {
|
taskMode: 'MOVE',
|
},
|
});
|
|
const taskModes = [
|
{ value: 'MOVE', label: '移动' },
|
{ value: 'TO_CHARGE', label: '去充电' },
|
{ value: 'TO_STANDBY', label: '去待机位' },
|
{ value: 'LOC_TO_LOC', label: '库位到库位' },
|
{ value: 'LOC_TO_STA', label: '库位到站点' },
|
{ value: 'STA_TO_LOC', label: '站点到库位' },
|
{ value: 'STA_TO_STA', label: '站点到站点' },
|
];
|
|
const onSubmit = (data) => {
|
console.log(data);
|
};
|
|
const taskMode = watch('taskMode');
|
|
const showField = (field) => {
|
const mode = taskMode;
|
switch (field) {
|
case 'startCode':
|
return false;
|
case 'endCode':
|
return ['MOVE'].includes(mode);
|
case 'startLocNo':
|
return ['LOC_TO_LOC', 'LOC_TO_STA'].includes(mode);
|
case 'endLocNo':
|
return ['LOC_TO_LOC', 'STA_TO_LOC'].includes(mode);
|
case 'startStaNo':
|
return ['STA_TO_LOC', 'STA_TO_STA'].includes(mode);
|
case 'endStaNo':
|
return ['LOC_TO_STA', 'STA_TO_STA'].includes(mode);
|
default:
|
return false;
|
}
|
};
|
|
return (
|
<Box display="flex" height="100%" p={2}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
<Grid container spacing={2}>
|
{/* left */}
|
<Grid item xs={4}>
|
<Controller
|
name="taskMode"
|
control={control}
|
render={({ field }) => (
|
<ToggleButtonGroup
|
{...field}
|
orientation="vertical"
|
exclusive
|
fullWidth
|
color="primary"
|
onChange={(e, value) => {
|
if (value !== null) {
|
field.onChange(value);
|
}
|
}}
|
>
|
{taskModes.map((mode) => (
|
<ToggleButton key={mode.value} value={mode.value} sx={{ textAlign: 'left' }}>
|
{mode.label}
|
</ToggleButton>
|
))}
|
</ToggleButtonGroup>
|
)}
|
/>
|
</Grid>
|
|
{/* right */}
|
<Grid item xs={8}>
|
<Grid container spacing={2}>
|
{showField('startCode') && (
|
<Grid item xs={12}>
|
<Controller
|
name="startCode"
|
control={control}
|
rules={{ required: '起始地面码不能为空' }}
|
render={({ field, fieldState }) => (
|
<TextField
|
{...field}
|
fullWidth
|
label="起始地面码"
|
error={!!fieldState.error}
|
helperText={fieldState.error?.message}
|
/>
|
)}
|
/>
|
</Grid>
|
)}
|
|
{showField('endCode') && (
|
<Grid item xs={12}>
|
<Controller
|
name="endCode"
|
control={control}
|
rules={{ required: '目标地面码不能为空' }}
|
render={({ field, fieldState }) => (
|
<TextField
|
{...field}
|
fullWidth
|
label="目标地面码"
|
error={!!fieldState.error}
|
helperText={fieldState.error?.message}
|
/>
|
)}
|
/>
|
</Grid>
|
)}
|
|
{showField('startLocNo') && (
|
<Grid item xs={12}>
|
<Controller
|
name="startLocNo"
|
control={control}
|
rules={{ required: '起始库位不能为空' }}
|
render={({ field, fieldState }) => (
|
<TextField
|
{...field}
|
fullWidth
|
label="起始库位"
|
error={!!fieldState.error}
|
helperText={fieldState.error?.message}
|
/>
|
)}
|
/>
|
</Grid>
|
)}
|
|
{showField('endLocNo') && (
|
<Grid item xs={12}>
|
<Controller
|
name="endLocNo"
|
control={control}
|
rules={{ required: '目标库位不能为空' }}
|
render={({ field, fieldState }) => (
|
<TextField
|
{...field}
|
fullWidth
|
label="目标库位"
|
error={!!fieldState.error}
|
helperText={fieldState.error?.message}
|
/>
|
)}
|
/>
|
</Grid>
|
)}
|
|
{showField('startStaNo') && (
|
<Grid item xs={12}>
|
<Controller
|
name="startStaNo"
|
control={control}
|
rules={{ required: '起始站点不能为空' }}
|
render={({ field, fieldState }) => (
|
<TextField
|
{...field}
|
fullWidth
|
label="起始站点"
|
error={!!fieldState.error}
|
helperText={fieldState.error?.message}
|
/>
|
)}
|
/>
|
</Grid>
|
)}
|
|
{showField('endStaNo') && (
|
<Grid item xs={12}>
|
<Controller
|
name="endStaNo"
|
control={control}
|
rules={{ required: '目标站点不能为空' }}
|
render={({ field, fieldState }) => (
|
<TextField
|
{...field}
|
fullWidth
|
label="目标站点"
|
error={!!fieldState.error}
|
helperText={fieldState.error?.message}
|
/>
|
)}
|
/>
|
</Grid>
|
)}
|
|
{/* button group */}
|
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}>
|
<Button variant="contained" color="primary" type="submit" sx={{ mr: 2 }}>
|
确认
|
</Button>
|
<Button variant="outlined" color="secondary" onClick={() => reset()}>
|
重置
|
</Button>
|
</Grid>
|
</Grid>
|
</Grid>
|
</Grid>
|
</form>
|
</Box>
|
);
|
}
|
|
export default AgvControl;
|
