| | |
| | | import React from 'react'; |
| | | import { useForm, Controller, useWatch } from 'react-hook-form'; |
| | | import { useForm, Controller } from 'react-hook-form'; |
| | | import { |
| | | Drawer, |
| | | Button, |
| | |
| | | </Typography> |
| | | <form onSubmit={handleSubmit(onSubmit)}> |
| | | <Grid container spacing={2}> |
| | | {/* 任务方式选择 */} |
| | | <Grid item xs={12}> |
| | | {/* 左侧:任务方式选择 */} |
| | | <Grid item xs={4}> |
| | | <Controller |
| | | name="taskMode" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | | {...field} |
| | | orientation="vertical" |
| | | exclusive |
| | | fullWidth |
| | | color="primary" |
| | |
| | | }} |
| | | > |
| | | {taskModes.map((mode) => ( |
| | | <ToggleButton key={mode.value} value={mode.value}> |
| | | <ToggleButton key={mode.value} value={mode.value} sx={{ textAlign: 'left' }}> |
| | | {mode.label} |
| | | </ToggleButton> |
| | | ))} |
| | |
| | | /> |
| | | </Grid> |
| | | |
| | | {/* 右侧:输入字段和按钮 */} |
| | | <Grid item xs={8}> |
| | | <Grid container spacing={2}> |
| | | {/* 动态渲染表单字段 */} |
| | | {showField('startCode') && ( |
| | | <Grid item xs={12}> |
| | |
| | | </Grid> |
| | | )} |
| | | |
| | | {/* 按钮 */} |
| | | <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}> |
| | | <Button variant="contained" color="primary" type="submit"> |
| | | {/* 按钮区域 */} |
| | | <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> |
| | | ); |