import React from 'react';
|
import { useTranslate } from "react-admin";
|
import { useForm, Controller } from 'react-hook-form';
|
import {
|
Button,
|
TextField,
|
Grid,
|
Box,
|
ToggleButton,
|
ToggleButtonGroup,
|
Typography,
|
Divider,
|
Toolbar,
|
useTheme,
|
Autocomplete,
|
CircularProgress,
|
} from '@mui/material';
|
import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
|
import RestartAltIcon from '@mui/icons-material/RestartAlt';
|
import useCoolHook from './useCoolHook';
|
|
function AgvControl({ open, onClose }) {
|
const theme = useTheme();
|
const translate = useTranslate();
|
|
const { control, handleSubmit, reset, watch } = useForm({
|
defaultValues: {
|
taskMode: 'MOVE',
|
startCode: '',
|
endCode: '',
|
startLocNo: '',
|
endLocNo: '',
|
startStaNo: '',
|
endStaNo: '',
|
},
|
});
|
|
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;
|
}
|
};
|
|
const {
|
options: codeOptions,
|
setInputValue: setCodeInputValue,
|
} = useCoolHook('/code/page', 'data');
|
|
return (
|
<>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
<Box display="flex" flexDirection="row" height="100%" justifyContent="space-around" p={2}>
|
{/* left */}
|
<Box
|
position="relative"
|
width="35%"
|
height="100%"
|
>
|
<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>
|
)}
|
/>
|
</Box>
|
|
{/* right */}
|
<Box
|
position="relative"
|
width="55%"
|
height="100%"
|
>
|
<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}
|
render={({ field, fieldState }) => {
|
const selectedOption = codeOptions.find(option => option.id === field.value) || null;
|
return (
|
<Autocomplete
|
options={codeOptions}
|
getOptionLabel={(option) => option.label}
|
isOptionEqualToValue={(option, value) => option.id === value.id}
|
value={selectedOption}
|
onInputChange={(event, value) => {
|
setCodeInputValue(value);
|
}}
|
onChange={(event, value) => {
|
field.onChange(value ? value.id : null);
|
}}
|
renderInput={(params) => (
|
<TextField
|
{...params}
|
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>
|
)}
|
|
</Grid>
|
</Box>
|
</Box>
|
<Box pl={5} pr={5}>
|
<Divider sx={{
|
marginBottom: '16px'
|
}} />
|
<Toolbar sx={{
|
display: 'flex',
|
justifyContent: 'space-between',
|
minHeight: { sm: 0 },
|
}}>
|
<Button
|
variant="outlined"
|
color="primary"
|
type="submit"
|
onClick={() => {
|
|
}}
|
sx={{
|
borderColor: theme => theme.palette.primary.main,
|
color: theme => theme.palette.primary.main,
|
}}
|
startIcon={
|
<CheckOutlinedIcon sx={{ color: theme => theme.palette.primary.main }} />
|
}
|
>
|
{translate('ra.action.confirm')}
|
</Button>
|
|
<Button
|
variant="outlined"
|
color="primary"
|
onClick={() => {
|
reset();
|
}}
|
sx={{
|
borderColor: theme => theme.palette.warning.main,
|
color: theme => theme.palette.warning.main,
|
}}
|
startIcon={
|
<RestartAltIcon sx={{ color: theme => theme.palette.warning.main }} />
|
}
|
>
|
{translate('common.action.reset')}
|
</Button>
|
</Toolbar>
|
</Box>
|
</form>
|
</>
|
);
|
}
|
|
export default AgvControl;
|
