From 46f3a1367b818ab115e9dcaf87d78bef3d3e5790 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 11 十月 2024 16:38:14 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/settings/CopyDrawer.jsx | 145 +++++++++++++++++++++++++++++++----------------- 1 files changed, 94 insertions(+), 51 deletions(-) diff --git a/zy-acs-flow/src/map/settings/CopyDrawer.jsx b/zy-acs-flow/src/map/settings/CopyDrawer.jsx index b431bf1..6aa9880 100644 --- a/zy-acs-flow/src/map/settings/CopyDrawer.jsx +++ b/zy-acs-flow/src/map/settings/CopyDrawer.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { useForm, Controller } from 'react-hook-form'; +import { useForm, useWatch, Controller } from 'react-hook-form'; import { Box, Grid, @@ -15,7 +15,6 @@ Divider, Drawer, IconButton, - LinearProgress, Switch, FormControlLabel, FormLabel, @@ -31,41 +30,80 @@ } from '../constants'; import { useNotification } from '../Notification'; +const incrementOptionsMap = { + [DEVICE_TYPE.SHELF]: [ + { value: 'row', label: 'page.map.settings.config.shelf.row' }, + { value: 'bay', label: 'page.map.settings.config.shelf.bay' }, + ], + [DEVICE_TYPE.CHARGE]: [ + { value: 'no', label: 'page.map.settings.config.base.no' }, + ], + [DEVICE_TYPE.STATION]: [ + { value: 'no', label: 'page.map.settings.config.base.no' }, + ], + [DEVICE_TYPE.POINT]: [ + { value: 'no', label: 'page.map.settings.config.base.no' }, + ], +}; + +const getDefaultFormValues = (value = {}) => ({ + copyDirect: value.copyDirect || '', + copyCount: value.copyCount || '', + gap: 0.0, + autoIncrement: false, + incrementMode: 'ascending', + incrementValue: undefined, +}); + const CopyDrawer = (props) => { const { open, onCancel, sprite, value, width = PAGE_DRAWER_WIDTH, handleOnCopy } = props; const notify = useNotification(); const translate = useTranslate(); const deviceType = sprite?.data?.type; + const incrementOptions = incrementOptionsMap[deviceType] const { control, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm({ - defaultValues: { - copyDirect: value?.copyDirect || '', - copyCount: value?.copyCount || '', - gap: 0.0, - autoIncrement: false, - incrementMode: 'ascending', - }, + defaultValues: getDefaultFormValues(value), }); + const autoIncrement = useWatch({ control, name: 'autoIncrement' }); + const incrementValue = useWatch({ control, name: 'incrementValue' }); + useEffect(() => { - if (value && Object.keys(value).length > 0) { - // setValue('copyDirect', value.copyDirect); - // setValue('copyCount', value.copyCount); + if (sprite && value && Object.keys(value).length > 0) { + reset(getDefaultFormValues(value)); } - }, [value, setValue]) + }, [sprite, value, reset, incrementOptions, setValue]); + + useEffect(() => { + if (autoIncrement && incrementOptions && incrementOptions.length > 0) { + if (!incrementValue) { + setValue('incrementValue', incrementOptions[0].value); + } + } else { + setValue('incrementValue', undefined); + } + }, [autoIncrement, incrementOptions, setValue]); const handleClose = () => { onCancel(); } - const onFormSubmit = (data) => { - if (data) { - console.log(data); + const validateIncrement = (value) => { + if (!value) { + return true; + } + if (deviceType === DEVICE_TYPE.SHELF) { + if (!sprite?.data?.row || !sprite?.data?.bay) { + return 'Row or Bay value is required for SHELF device type.'; + } + } + return true; + }; - } - if (handleOnCopy) { - handleOnCopy(data); - } + const onFormSubmit = (data) => { + console.log(data); + handleOnCopy?.(data); notify.info(translate('common.response.success')); }; @@ -93,18 +131,6 @@ <Box p={3}> <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}> <Grid container spacing={1.4}> - - {/* <Grid item xs={6}> - <Typography variant="body1"> - {translate('page.map.settings.map.copy.direction')}: {value?.copyDirect} - </Typography> - </Grid> - <Grid item xs={6}> - <Typography variant="body1"> - {translate('page.map.settings.map.copy.count')}: {value?.copyCount} - </Typography> - </Grid> */} - <Grid item xs={6}> <Controller name="copyDirect" @@ -166,6 +192,7 @@ <Controller name="autoIncrement" control={control} + rules={{ validate: validateIncrement }} render={({ field }) => ( <FormControlLabel control={ @@ -179,29 +206,45 @@ /> )} /> + {errors.autoIncrement && ( + <Typography color="error"> + {errors.autoIncrement.message} + </Typography> + )} </Grid> - {deviceType === DEVICE_TYPE.SHELF && ( - <> - </> + {(!!incrementOptions?.length && autoIncrement) && ( + <Grid item xs={12}> + <FormControl fullWidth> + <FormLabel sx={{ mb: 1 }}> + {translate('page.map.settings.map.copy.field.incrementValue')} + </FormLabel> + <Controller + name='incrementValue' + control={control} + render={({ field }) => ( + <ToggleButtonGroup + {...field} + value={field.value} + exclusive + onChange={(event, value) => { + field.onChange(value); + }} + fullWidth + > + {incrementOptions.map((option, idx) => ( + <ToggleButton key={idx} value={option.value}> + {translate(option.label)} + </ToggleButton> + ))} + </ToggleButtonGroup> + )} + /> + </FormControl> + </Grid> )} - {deviceType === DEVICE_TYPE.CHARGE && ( - <> - </> - )} - - {deviceType === DEVICE_TYPE.STATION && ( - <> - </> - )} - - {deviceType === DEVICE_TYPE.POINT && ( - <> - </> - )} - - {watch('autoIncrement') && ( + {autoIncrement && ( <Grid item xs={12}> <FormControl fullWidth> <FormLabel sx={{ -- Gitblit v1.9.1