#

luxiaotao1123

2024-10-17 022b2aa0384cefbed58939998659a1ee15adfdf0

 zy-acs-flow/src/map/insight/agv/AgvControl.jsx

@@ -1,4 +1,5 @@
import React from 'react';
import { useTranslate } from "react-admin";
import { useForm, Controller } from 'react-hook-form';
import {
    Button,
@@ -8,12 +9,29 @@
    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: '',
        },
    });

@@ -53,12 +71,21 @@
        }
    };

    const {
        options: codeOptions,
        setInputValue: setCodeInputValue,
    } = useCoolHook('/code/page', 'data');

    return (
        <Box display="flex" height="100%" p={2}>
        <>
            <form onSubmit={handleSubmit(onSubmit)}>
                <Grid container spacing={2}>
                <Box display="flex" flexDirection="row" height="100%" justifyContent="space-around" p={2}>
                    {/* left */}
                    <Grid item xs={4}>
                    <Box
                        position="relative"
                        width="35%"
                        height="100%"
                    >
                        <Controller
                            name="taskMode"
                            control={control}
@@ -83,10 +110,14 @@
                                </ToggleButtonGroup>
                            )}
                        />
                    </Grid>
                    </Box>

                    {/* right */}
                    <Grid item xs={8}>
                    <Box
                        position="relative"
                        width="55%"
                        height="100%"
                    >
                        <Grid container spacing={2}>
                            {showField('startCode') && (
                                <Grid item xs={12}>
@@ -112,16 +143,27 @@
                                    <Controller
                                        name="endCode"
                                        control={control}
                                        rules={{ required: '目标地面码不能为空' }}
                                        render={({ field, fieldState }) => (
                                            <TextField
                                                {...field}
                                                fullWidth
                                                label="目标地面码"
                                                error={!!fieldState.error}
                                                helperText={fieldState.error?.message}
                                            />
                                        )}
                                        render={({ field, fieldState }) => {
                                            return (
                                                <Autocomplete
                                                    options={codeOptions}
                                                    onInputChange={(event, value) => {
                                                        setCodeInputValue(value);
                                                    }}
                                                    onChange={(event, value) => {
                                                        field.onChange(value?.id);
                                                    }}
                                                    renderInput={(params) => (
                                                        <TextField
                                                            {...params}
                                                            label="目标地面码"
                                                            error={!!fieldState.error}
                                                            helperText={fieldState.error?.message}
                                                        />
                                                    )}
                                                />
                                            );
                                        }}
                                    />
                                </Grid>
                            )}
@@ -202,20 +244,56 @@
                                </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>
                    </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>
        </Box>
        </>
    );
}