| | |
| | | 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> |
| | | |
| | | {/* 动态渲染表单字段 */} |
| | | {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 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> |
| | | )} |
| | | </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} |
| | | {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> |
| | | )} |
| | | </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} |
| | | {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> |
| | | )} |
| | | </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} |
| | | {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> |
| | | )} |
| | | </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} |
| | | {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> |
| | | )} |
| | | </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} |
| | | {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> |
| | | )} |
| | | |
| | | {/* 按钮 */} |
| | | <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}> |
| | | <Button variant="contained" color="primary" type="submit"> |
| | | 确认 |
| | | </Button> |
| | | <Button variant="outlined" color="secondary" onClick={() => reset()}> |
| | | 重置 |
| | | </Button> |
| | | {/* 按钮区域 */} |
| | | <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> |