From c9e8eab9835c6f72f84552f694582d9a27f6328c Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 11 十月 2024 16:50:31 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/settings/CopyDrawer.jsx | 161 ++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 108 insertions(+), 53 deletions(-) diff --git a/zy-acs-flow/src/map/settings/CopyDrawer.jsx b/zy-acs-flow/src/map/settings/CopyDrawer.jsx index 9cce977..2229124 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,88 @@ } 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 validateIncrement = (value, deviceType, sprite, translate) => { + if (!value) { + return true; + } + switch (deviceType) { + case DEVICE_TYPE.SHELF: + if (!sprite?.data?.row || !sprite?.data?.bay) { + return translate('page.map.settings.map.copy.valid.shelf'); + } + break; + default: + if (!sprite?.data?.no) { + return translate('page.map.settings.map.copy.valid.common'); + } + break; + } + return true; +}; + +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); - - } - if (handleOnCopy) { - handleOnCopy(data); - } + console.log(data); + handleOnCopy?.(data); notify.info(translate('common.response.success')); }; @@ -93,18 +139,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 +200,7 @@ <Controller name="autoIncrement" control={control} + rules={{ validate: (value) => validateIncrement(value, deviceType, sprite, translate) }} render={({ field }) => ( <FormControlLabel control={ @@ -179,29 +214,47 @@ /> )} /> + {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) => { + if (value !== null) { + 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={{ @@ -218,7 +271,9 @@ value={field.value} exclusive onChange={(event, value) => { - field.onChange(value); + if (value !== null) { + field.onChange(value); + } }} fullWidth > @@ -235,7 +290,7 @@ </Grid> )} - <Grid item xs={12}> + <Grid item xs={12} mt={2}> <Divider /> </Grid> -- Gitblit v1.9.1